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

作者:
瀏覽:647

你熟悉 TogetherJS 與 CreateJS,也想開發遊戲類的 Web App 嗎?在看完了《用 TogetherJS 與 CreateJS 開發多人遊戲 (上)》之後,當然要繼續看完本篇《中》。

Flash 的動畫效果

如同目前大多數的遊戲,我也想多用點動畫效果。我自己很熟悉 Flash 動畫,並發現 CreateJS 有多種方法可支援 Flash 動畫效果,也能透過 HTML5 呈現這些動畫。CreateJS 集合了許多工具與函式庫,可建立互動的 HTML5 內容。所以我用 CreateJS 產生動畫效果,並透過其他函式庫處理迴圈並管理資源,未來還能控制音效。可觀看此影片以初步了解 CreateJS。

由 Mozilla 提倡的 CreateJS,已可對 Flash 動畫達到絕佳的支援度。

透過 CreateJS,有兩種方式可在 HTML5 中使用 Flash 動畫。首先就是直接輸出 Flash 動畫,且可用原始形式存取所有元素,包含路徑、縮放/旋轉、變形等等。這種方式的優點在於產生的檔案較小,且 CreateJS 可在用戶端將這些元素轉換為 Sprite,達到更快的繪圖速度。Adobe Flash CS6 則提供「CreateJS Toolkit」外掛程式,讓開發者能匯出動畫的所有內容成為 HTML5 檔案。一般會包含一個 JavaScript 檔案 (內含所有圖片與變形)、一個 HTML 檔案、一系列的圖片。接著就能在瀏覽器中開啟 HTML 文件並觀看動畫。

另外就是將動畫匯出至 Sprite,即以單一圖片包含了所有幀像,並由一個 JavaScript 檔案敘述各幀像的位置與大小。只要利用 CreateJS 中的 SpriteSheet 類別,就能將這些檔案輕鬆整合進 HTML 架構的 App 或遊戲中。我在這個遊戲中就用了相同方式。你可透過此連結觀看我使用 SpriteSheet 的程式碼。如果想進一步了解,亦可觀看此影片

看完上面兩部影片之後,你更進一步了解遊戲的 SpriteSheets 了嗎?如果想開發遊戲類的 Web App,當然不能錯過即將上刊的最後一集《用 TogetherJS 與 CreateJS 開發多人遊戲 (下)》。

 

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