Mobile Web Game開發心得分享

CSC Studio 陳世欽

自我介紹

• 陳世欽– CSC Studio 獨立遊戲開發團隊

作品

作品

內容簡介

• Mobile Web Game 開發經驗談• 繪圖• 記憶體• PhoneGap• 結論

心路歷程

苦不堪言，陷阱也太多了吧！

HTML5 遊戲開發技術

• WebGL– 優：效果炫– 缺：手機支援不完全

• Canvas– 優：較類似傳統遊戲技術架構– 缺：自廢武功、 Android 速度差異很大

• DOM + CSS3– 優：上手速度快– 缺：陷阱多，與傳統遊戲技術架構差異大

繪圖 (Render) 問題

繪圖 (Render) 問題

SLOW

繪圖速度效能技巧

• 啟動 2D 硬體加速*{ -webkit-transform:

translate3d(0,0,0) rotate(0) scale(1); }

• 避免網頁 reflow– 指定固定尺寸– 指定 z-index

繪圖速度效能技巧

• 少用 CSS3 漸層與陰影

• 用 CSS3 keyframe 取代 jQuery 動畫

• 混合使用 canvas 小型動畫

• 一定要實機測試

繪圖速度效能調整

• 不要用 CSS display:none 或 visibility:hidden

• 改用 offset

繪圖速度效能調整

一般方式：隱藏沒用到的元素或使用時再動態建立

繪圖速度效能調整

$(scene_2).show();$(scene_1).hide();

繪圖速度效能調整

• 當屬性為不可視時(display:none 或 visibility:hidden)該 HTML 元素不會被繪製

• 屬性改為顯示時才開始繪製，螢幕會 delay 約 100~200ms

• 100~200ms 會讓 user 覺得很頓

繪圖速度效能調整

offset 作法：把還沒用到的元素藏在看不見的地方

top:0, left:0top:0, left:-500

繪圖速度效能調整

$(scene_2).css(‘left’, 0);$(scene_1).css(‘left’, -500);

top:0, left:0top:0, left:-500

還是不行？！

寫輪眼

繪圖速度效能技巧

• 靈活運用錯覺效果– 縮短 touch 事件 delay 時間– 在 touchstart 觸發事件，不要用 click 觸發

記憶體問題

記憶體問題

SMALL

記憶體問題

• 單一頁面記憶體限制– iOS ： 10M– Android ：各家廠牌不同，比 iOS 稍大

• 現實是殘酷的– Retina 影像：影像記憶體 x 4– 啟動硬體加速：影像記憶體 x 4

• 為了保護 OS 穩定度，記憶體使用超過限制行動瀏覽器就會自動崩潰

記憶體管理

• 避免全頁硬體加速• 只加速必要元素，例如背景圖片就別了

記憶體管理

• 釋放用不到的 javascript 記憶體

$(img).remove();delete obj;obj = null;

以上方法都沒用！

無法控制 Webkit 的

Garbage Collection

發動時機！

記憶體管理

• Memory Pool– 最好的 delete 方法就是不要 new

• 釋放影像的方法– img.src =

'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';

PhoneGap (Cordova)

為何使用 PhoneGap

• 把 HTML 包裝成 APP

• 多媒體播放

• 資源預載

為何使用 PhoneGap

IAP$ 付費機制 $

PhoneGap 的問題

• 用 PhoneGap 的人都很怕被人知道用 PhoneGap

解決方法：不要太像網頁

申請新帳號再送審

總結

• 效能問題– 追求平衡– 讓時間解決一切

• 遊戲引擎成熟度– canvas based

• Mobile Web 的定位– 借殼上市– 用在適合的地方

07th Expansion

• 美術 &劇本：龍騎士 07• 程式：弟弟• 客服：母親• 資料蒐集：父親

• 日本公務員離職作遊戲• 第一次銷售量： 50• 遊戲、漫畫、動畫、廣播劇、真人電影改編

工具有限制

想像力沒有限制

感謝 JSDC 大會

謝謝大家

Backup