《Cocos2d》是從 2008 年開始的 Python 開放原始碼遊戲庫，有整合物理引擎、基本選單、流程控制與諸多 2D 繪圖工具，適合開發 2D 遊戲，其寬鬆的 BSD 授權也讓人放心地用於商業產品。
後來因應手機、平板市場需求，延伸出很多套移植專案，其中以 C++ 寫成的 Cocos2d-x 甚至可支援 iOS, Android, Windows, Linux, Blackberry... 等平台。如果大家還有印象，第一屆 MIT Game Jam 的作品《Dora》也採用 Cocos2d-x 快速製作的喔！
不過本文想介紹的移植專案比較特別，是《cocos2d-html5》。
沒錯，Cocos2d 也登陸 月球 瀏覽器啦!
馬上看一個網頁遊戲範例《Bag a Bride》，這是國際 Game Jam Ludum Dare 第 25 屆的作品之一，作者只用 48 小時完工的喔。
首先建立專案
基本上網頁程式都得放到 Web server，但手邊若有 Dropbox 就好辦了。先到 Cocos2d-html5 的 github 將 zip 檔載回來解壓縮，再把下面三個目錄複製到 Dropbox/Public 資料夾內。
其中 cocos2d 與 CocosDenshion 是函式庫目錄，template 目錄則擺著 helloworld 專案。我們在 template/index.html 上按右鍵選單，取得網址。
把網址貼到瀏覽器，若出現下方畫面就佈置成功啦 (此 iframe 範例使用筆者的 dropbox)。
相同檔案其實擺到任何 Web server 都行，官方 導覽文章 為此要我們去裝一大包 WAMP (Apache, MySql, PHP...) 實在有點殺雞用牛刀，建議丟 Dropbox 簡單了事即可。
專案架構
Cocos2d 遊戲引擎有慣例的專案配置法，可惜 Cocos2d-html5 還沒整合好自動專案管理工具，所以需要了解一下檔案目錄的用途，才方便後續開發程式。
先看 template 目錄內的 index.html。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Cocos2d-html5 Hello World test</title> </head> <body> <canvas id="gameCanvas" width="600" height="450"></canvas> <script src="cocos2d.js"></script> </body> </html>
index.html 內容是典型的 HTML5 文件，裡面定義了名為 "gameCanvas" 的 canvas 標籤，並設定寬高。然後於最下方引入 cocos2d.js，那是整個遊戲庫與自己程式的載入器。
檢視 cocos2d.js
(function () {
var d = document;
var c = {
COCOS2D_DEBUG:2,
box2d:false,
showFPS:true,
frameRate:60,
tag:'gameCanvas', // 指定 html canvas 標籤名字
engineDir:'../cocos2d/', // 指定 lib 位置
appFiles:[ // 指定自己寫的程式位置
'src/resource.js',
'src/myApp.js'
]
};
// ...別被一堆制式代碼嚇到，它跟網站引用 Facebook Like Button 的作法類似，貼上就好，這裡需要管的只有三個中文註解處。
另外自己寫的遊戲邏輯擺在 src 目錄中，圖檔等資源擺 res 目錄。以範例來說，resource.js 內定義了所有圖片的 url 路徑，myApp.js 則撰寫遊戲場景、圖層等代碼，最後在 template 目錄內的 main.js 寫最外層的 Cocos2d Application 物件並啟動它。
Cocos2d-html5 物件規劃與一般 C++ 遊戲引擎的物件概念相似，可為了整合網頁架構，檔案配置與載入流程略有不同，對網頁製作較陌生的朋友們需習慣一下。至於 Cocos2d-html5 總共移植了多少功能呢？建議參考官方的 技術展示，主要 2D 遊戲所需的部分完成度不錯，也額外包含了針對移動裝置的功能喔。
Web UI
Cocos2d-html5 遊戲除了使用內建的 Menu 物件來製作 UI，與 HTML5 整合帶來的重要好處就是可以用 HTML/CSS 製作任意 UI 元件，無縫地與遊戲程式互動。
稍微修改 index.html，插入一行 "my button"、引入 jQuery、設定恰當的 CSS 外觀。
<div>
<a href="#" id="bt" class="bt">my button</a>
<canvas id="gameCanvas" width="600" height="450"></canvas>
</div>
<script src="jquery.min.js"></script>如此一來， main.js 便能藉由 jQuery 取得 "my button" 點擊事件，觸發時呼叫自己寫的遊戲函式，以達成互動效果！
var myApp = new cocos2dApp(MyScene);
$('#bt').click(function(){
myApp.tick(); // 自己寫的遊戲功能
});下面範例可點擊 "my button" 去重新產生遊戲圖層，並塞隨機數字
很便利吧！拿 CSS 做圓角、漸層、陰影等視覺效果比自製繪圖程式簡單得多。
不過還有更讚的！既然都 Web UI 了，主流瀏覽器如 Chrome、Firefox、IE 都內建 Debugger/Inspector，我們可直接拿來調整 UI，當成免錢又強大的 UI 編輯器。這過程難以言喻，不多說請看 VCR！
跟以往幫自己遊戲刻 UI 編輯器、手調 UI 參數的過程比起來，所見即所得有夠方便的。又比如說遊戲 OP、換場景要播影片，不用寫程式啦，HTML 語法把 <video> 叫出來撥就好啦，影片放 Youtube 還省一堆頻寬或儲存空間哩。
其實看倌可以立刻在本文上方的 "my button" 上面點滑鼠右鍵，實施跟示範影片一樣的 UI 調整動作。
總結
Cocos2d-html5 算目前不錯的 2D 網頁遊戲開發套件，開源社群能量充足，值得期待。而與 HTML/CSS 無縫銜接帶來的威力強大，令遊戲設計與實作技巧充滿各種可能性。網頁即遊戲，遊戲即網頁。擺顆 CSS 按鈕只算牛刀小試，以後 "Web Game" 可以怎麼玩、怎麼做，靠大家多發揮想像力囉。
感謝大大的介紹，我也依照您的步驟來測試成功了。
在此想請教您的是，若以Cocos2d-html5來開發2D頁游，自然是OK的，但是它官網說到未來在Cocos2d-html5上跑得code也可以很順暢地在 Cocos2d-X and Cocos2d-iPhone上執行，難道這意思是說Cocos2d-html5做出來的東西可以變成ios,安卓的APP嗎?? (原來是網頁執行的，以後可以變成下載安裝的app?) 在下還真的不懂哩~，敬請大大解惑，非常感恩啊~官網文章如下:
While there are concerns over the "scripting language" efficiency, sure it is slower than c++, but technologies like V8 Javascript engine and hardware accelerated canvas rendering made game development possible. At this time, the hardware found on mobile phones are still lacking some "oomph" to run javascript efficiently, however, the team of Cocos2d-x are working on something called "Javascript binding for Cocos2d". What that means is your very same code running on Cocos2d-html5 engine can work flawlessly on Cocos2d-X and Cocos2d-iPhone without or with little modification. And all that translates to "almost native fast on mobile phones".
全文於
http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Getting_Started_with_Co...
別客氣
官網文章的意思是說，現在的 html5/javascript 程式跑在各家手機上，以遊戲程式的需求還是不夠快，他們打算把 JavaScript 引擎、 cocos2d-x 原生函式庫、我們寫的 Cocos2d-html5 程式碼通通串起來，打包變成 APP，來獲得接近原生程式的效能，不用像現在得透過瀏覽器元件執行。
他們預期現在寫的 Cocos2d-html5 程式碼將來只需少量甚至不用修改，便能包成 APP 執行，但不知何時才會釋出這套叫 JavaScript binding for Cocos2d 的開發工具。
類似這種作法也有 LUA 的，叫 Corona SDK (要錢)，讓我們用 LUA 寫接近原生效能的 iOS/Android APP，也可以參考一下。
謝謝您的詳盡的回覆，解答了我和朋友懸宕兩個月的疑惑!! 感恩~~
昨天也已下載了Corona SDK試玩看看，還有模擬器...相當有趣之感!