利用Flash IDE做canvas游戏编辑器

billd demo

首先，先看个游戏栗子 billd

JSFL

利用JSFL(Flash JavaScript API)可以在Flash IDE中执行动作脚本，操作Flash获取舞台，图层数据，导出资源，数据等。利用它就可以打造一个游戏编辑器，下面通过billd游戏来讲解下用法

下图是billd地图的Flash界面，源文件可以从github上下载

时间轴上一共有5帧，每帧代表一个关卡，下图就是第一关在Flash里摆放的样子

每个关卡有五个图层，下面是每个图层的作用

• mc 游戏物体层
  在Flash中把游戏物体的图片转换成元件，并命名,在Library中就能看到如下图
  

  

  
  我们把需要的元件直接拖到地图上，通过JSFL可以导出他们的位置，旋转，缩放，名字等属性

• hit 游戏碰撞区域
  如下图，紫线和黑线就是需要碰撞的线段，JSFL可以将碰撞区域导出成贝塞尔曲线的数据，然后在游戏中根据线条数据处理物体碰撞
  

  

• shape 游戏地图形状层
  jsfl可以将形状边界，颜色的数据导出，然后直接用canvas将它绘制出
  这是栗子，地图全部canvas画，木有图片

• floor 游戏浮梯层
  floor层用一个影片剪辑代替，点开后如下图
  

  

  
  每个图层代表一个浮层，每帧代表这个浮层移动经过的点，如下图是floor2的运动轨迹，浮层会沿着红色箭头移动
  

  

• bg
  背景层，记录游戏的长宽和背景颜色

这样想建一个新的关卡，只需要在flash中将舞台，地图摆好就行了~

JSFL api

JSFL文档，可以先熟悉下面的api

• document 舞台对象，可以发布flash,导出图片等
• edge 形状，可以导出矢量图的数据
• frame 帧，通过它可以读取补件动画数据，帧时间长短等
• element 元素，通过它可以获取元素的宽高，旋转，缩放等数据
• library 库，通过它可以创建，编辑元件，
• FLFile,通过它可以操作文件

其他编辑器

• dragonbones
  也是利用jsfl做的一款骨骼动画编辑器，支持cocos2d,flash,createjs等多个类库
• tiled map editor
  瓦片地图编辑器
• Photoshop,Illustrator
  也支持脚本导出数据
• ...