This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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 元素不會被繪製