利用Flash IDE作canvas遊戲編輯器

billd demo

首先，先看個遊戲栗子 billd


它一共有四個關卡，每一個關卡都是用Flash IDE先畫好而後經過導出關卡數據的

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
  也支持腳本導出數據
• ...