Mobile Web Game 開發心得分享

Mobile Web Game
開發心得分享
CSC Studio 陳世欽

自我介紹
• 陳世欽
– CSC Studio 獨立遊戲開發團隊

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

心路程歷
苦不堪言，陷也太多了！阱吧

HTML5 遊戲開發技術
• WebGL
– 優：效果炫
– 缺：手機支援不完全
• Canvas
– 優：較類似傳統遊戲技術架構
– 缺：自廢武功、 Android 速度差異很大
• DOM + CSS3
– 優：上手速度快
– 缺：陷多，與傳統遊戲技術架構差異大阱

繪圖速度效能技巧
• 動啟 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 觸發

記憶體問題
• 單一頁面記憶體限制
– 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,R0lGODlhAQABAAAAACH5BAEKAAE
ALAAAAAABAAEAAAICTAEAOw==';

為何使用 PhoneGap
• 把 HTML 包裝成 APP
• 多媒體播放
• 資源預載

為何使用 PhoneGap
IAP
$ 付費機制 $

PhoneGap 的問題
• 用 PhoneGap 的人都很怕被人知道用 PhoneGap
解決方法：不要太像網頁

總結
• 效能問題
– 追求平衡
– 讓時間解決一切
• 遊戲引成熟度擎
– canvas based
• Mobile Web 的定位
– 借殼上市
– 用在適合的地方

07th Expansion
• 美術 & 劇本：龍騎士 07
• 程式：弟弟
• 客服：母親
• 資料蒐集：父親
• 日本公務員離職作遊戲
• 第一次銷售量： 50
• 遊戲、漫畫、動畫、廣播劇、真人電影改編

工具有限制
想像力沒有限制

感謝 JSDC 大會
謝謝大家

Recomendados