用 TogetherJS 與 CreateJS 開發多人遊戲 (上)

作者:
瀏覽:436

《Bubble Hell Duel》是支援多人對戰的 HTML5 遊戲。重點就是要躲避對手發出來的泡泡並設法反擊。此遊戲主要可讓大家學習如何寫出遊戲原型,並已經可到 GitHub 上找到原始碼。你現在就能在這裡試玩單人或多人模式。目前尚未加入任何音效,但確實使用了 CreativeJSTogetherJS

用 TogetherJS 與 CreateJS 開發多人遊戲 (上)

我會在本篇文章中分享某些遊戲開發經驗。如果你有任何建議,也歡迎隨時透過下方意見欄讓我知道。

遊戲引擎

若要開發 2D 遊戲,開發者除了撰寫自己的遊戲引擎之外,也有不錯的現成函式庫可利用。在花了幾天評估現有選擇之後,我選用了 CreateJS。因為我對 Flash 還算有點經驗,所以不用再花什麼時間去學 CreateJS,也蠻符合我現有的需要。我想用一部分的 Flash 動畫,而 CreateJS 又正好支援此功能。稍後也會提到動畫的部份。

我自己是 C++ 開發者,認為「emscripten」是個好選擇。因為 emscripten 可將 C/C++ 程式碼編譯為 JavaScript 以利於瀏覽器中執行。如果要開發大型的程式庫,我認為靜態型別檢查 (Static type checking) 與編譯期最佳化 (Compile-time optimization) 都是絕佳資源。我之前就用過 emscripten 且運作順暢。而針對這個遊戲,我需要 JavaScript 可快速且方便撰寫原型的特性,也希望進一步拓展自己的 JavaScript 技術。

另外還要講一下其他有趣的函式庫。《Cocos2d-x》現正在進行 emscripten 移植工作,並已可支援HTML5。我也喜歡已具備 WebGL 繪圖器 (Renderer) 的《pixi.js》;且萬一瀏覽器不支援 WebGL,亦可支援轉用 Canvas。

C++ 對決 JavaScript

我剛開始還有點擔心 JavaScript 的效能,也因此讓我難以抉擇 CreateJS 或 emscripten。但在跑過簡單的效能評比之後,我發現尚未最佳化的碰撞檢測 (Collision detection) 演算法足可處理畫面上的 400 顆泡泡,且能維持 40 fps 以上。這對我的簡單實驗已經足夠。

我自己用 C++ 寫的程式碼比 JavaScript 寫的要多,我也喜歡能將自己的想法迅速轉為程式碼,並在多款瀏覽器上測試。另一方面,JavaScript 的除錯並不簡單;而 C++ 編譯器則是能輕鬆找出拼錯或其他導致 Runtime 問題的錯誤。雖然「use strict」指令以及其他機制 (如 Closure compiler) 都有各自的用途,但對我似乎沒什麼用,尤其遇上未定義的變數就更是如此。這時如果想找到錯誤發生的原因,相對來說就更難了。

舉個難以除錯的例子:針對座標與其他幾何值 (如角度),我當時採用了浮點數。這些數值會透過 TogetherJS.send 函式傳給玩家,以達到同步化的效果。

var player = { x: 10.0, y: 10.0 };
TogetherJS.send({type:'sync',x:player.x,y:player.y});
TogetherJS.hub.on('sync', function(msg){
    enemy.x = msg.x;
    enemy.y = msg.y;
});

這樣雖然可用,但也會送出許多小數點之後的數值,所以我決定不用太精確:

TogetherJS.send({type:'sync', x:Math.round(player.x), y:Math.round(player.y) });

接著我又想到,光是整數可能對碰撞檢測不夠精確,所以我又加了更多位數:

TogetherJS.send({type:'sync', x:player.x.toFixed(2), y:player.y.toFixed(2) });

這看來是合理的解決方案,但實際上卻產生很難發現的臭蟲。一直到我又建置了其他功能並測試遊戲之後才發現。這臭蟲會造成對手在遊戲期間完全不能動。

我花了幾個小時除錯才發現原因。如果一開始用 C++ 應該就不會發生這種錯誤。

如果你想看看這個臭蟲的實際運作情形,可試試這個jsFiddle專案。你只要看到旁邊三個 Canvas 標籤的輸出,就會注意到第三個 Canvas 發生錯誤了。因為 toFixed 回傳了字串表示式而造成這個問題。

我不知道 Closure compiler 能不能避免這個問題,但我在另一個專案中發現 Closure compiler 的確能協助達到最佳化。

 

看到這裡,你對相關遊戲開發是否有進一步的認識了呢?可別錯過即將上刊的《用 TogetherJS 與 CreateJS 開發多人遊戲 (中)》。

 

原文連結:Creating a Multiplayer Game with TogetherJS and CreateJS