2013年7月4日星期四

用 FlashCC 開發 Dart HTML5 Game

這次要跟大家分享新的工具,分別是 Adobe Flash CC, Google Dart 以及 ToolKit for Dart
藉由這三套工具,稍微改變一下開發流程
就可以將以前 Flash Game 開發經驗帶到 HTML5 Game 上面來
能夠支援更多的發布平台

Flash CC 是最新一代的 Flash IDE,啟動速度變得更快且支援 64bit 架構
主要定位仍然是多媒體整合與互動設計工具
唯一不同是開發語言可以有更多的選擇
除了原生的 AS3 之外,Flash CS6 多了 CreateJS ToolKit 支援 JS 開發
而 Flash CC 則是更多了 Dart ToolKit 可以支援 Dart 語言開發


Dart 語言特色非常非常多,這裡無法一一描述
簡單說,它是新一代結構化 Web 開發語言
效能更好,更容易開發、除錯


當然也可以用來做遊戲,所以有人仿 Flash AS3 API 寫了一套遊戲框架
StageXL for Dart
讓不熟悉 Dart 的 Flash 開發者也可以快速轉移到 Dart HTML5 Game 開發

安裝好 Flash CC, Dart Editor, Dart ToolKit 工具之後就可以開始了
我是拿了七年前做過 Flash AS2 水果盤小遊戲來改寫看看

由於 Flash CC 已經不支援舊的 AS2 開發
一打開舊的 fla 就會看到警告,不過反正這部分要改用 Dart 寫了
當初做的水果盤包含九個 Slot,Slot 本身則是做成循環無接縫的影格動畫加上遮罩
這樣可以減少程式開發的負擔,不用一直算座標 


打開 ToolKit for Dart 面板,按下 Publish 把整個 fla 發布為 Dart
會發現在原本的 fla 旁邊多了一個目錄 FruitSlot-dart
這就已經是一個標準的 Dart Project
理論上會包含原本 fla 內舞台、元件庫等素材結構
但是不包含 AS 程式邏輯

接下來啟動 Dart Editor,選擇 File > Open Existing Folder
打開剛剛輸出的 Folder
Dart Editor 就會開始自動下載需要的類別庫 StageXL 等等
下載完成後,打開 web > index.html
按下 Ctrl + R 執行測試剛剛輸出的專案

可以看到 Flash 內原本的點陣圖、影格動畫、遮罩都能夠正常轉為 Dart HTML5
並且在瀏覽器上表現出來了!
這原本是在開發 HTML5 Game 最麻煩的部分
Flash CC + Dart ToolKit 提供了非常好的支援
而且原本 Flash 開發者使用經驗也能得以延續

剩下部分只有程式邏輯控制而已了
這牽涉到 Dart 新的語言,超出本篇文章的篇幅
之後有機會再做介紹
最後完成的成品如下:
Dart FruitSlot
Project 下載位置

轉載請註明出處 http://ticore.blogspot.com/2013/07/flashcc-toolkit-dart-game.html

2 意見 :

阿倫 提到...

沒加--minify編譯的版本在手機上跑不出來耶~

{id: "Ticore"}; // 提到...

@阿倫

我剛測試一下 unminify 版本
JS 會大很多 4xx kb
在 HTC Evo 3D 上可以跑得動

http://goo.gl/6zvy0L