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

你熟悉 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 的程式碼。如果想進一步了解，亦可觀看此影片。