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

by news
2014.05.29 10:21AM

你熟悉 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

 

 

相關消息

新品資訊
一圖看懂 Panasonic 日本製 IH 調理爐:光火力感應控溫黑科技,開啟AI智慧烹飪新時代
癮特務
3 天前
應用教學
726罷免案開票直播懶人包:即時開票、YouTube線上直播、中選會線上開票、罷免結果查詢
Zero圈圈
1 天前
新奇搞笑
Wi-Fi 有機會成為一種無影像的新型監控方式
Twelve
1 天前
新奇搞笑
透明高蛋白質新型飲料
Twelve
1 天前
雲端服務
AI 智轉百業賦能企業,2025 Google Cloud Summit Taipei 引領最新生成式 AI 應用
癮特務
10 天前
新奇搞笑
放一下才好吃?揭開牛排靜置背後的熱力學秘密
Twelve
1 天前
新奇搞笑
酷暑生智慧 阿富汗運將的外掛型車頂冷氣
Twelve
1 天前
開箱評測
懶人就是要電動 小米電動精修螺絲起子機特價699元 雙段速扭矩可調
Tandee
21 個小時前
科技應用
Google 測試全新 AI 應用程式創作工具 Opal 自然語言建立迷你網頁應用
Mash Yang
1 天前