Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile Web Game 開發心得分享

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Mobile Web Game 開發心得分享

  1. 1. Mobile Web Game開發心得分享CSC Studio 陳世欽
  2. 2. 自我介紹• 陳世欽– CSC Studio 獨立遊戲開發團隊
  3. 3. 作品
  4. 4. 作品
  5. 5. 容簡介內• Mobile Web Game 開發經驗談• 繪圖• 記憶體• PhoneGap• 結論
  6. 6. 心路 程歷苦不堪言,陷 也太多了 !阱 吧
  7. 7. HTML5 遊戲開發技術• WebGL– 優:效果炫– 缺:手機支援不完全• Canvas– 優:較類似傳統遊戲技術架構– 缺:自廢武功、 Android 速度差異很大• DOM + CSS3– 優:上手速度快– 缺:陷 多,與傳統遊戲技術架構差異大阱
  8. 8. 繪圖 (Render) 問題
  9. 9. 繪圖 (Render) 問題SLOW
  10. 10. 繪圖速度效能技巧• 動啟 2D 硬體加速*{-webkit-transform:translate3d(0,0,0) rotate(0) scale(1);}• 避免網頁 reflow– 指定固定尺寸– 指定 z-index
  11. 11. 繪圖速度效能技巧• 少用 CSS3 漸層與陰影• 用 CSS3 keyframe 取代 jQuery 動畫• 混合使用 canvas 小型動畫• 一定要實機測試
  12. 12. 繪圖速度效能調整• 不要用 CSS display:none 或 visibility:hidden• 改用 offset
  13. 13. 繪圖速度效能調整一般方式:隱藏沒用到的元素或使用時再動態建立
  14. 14. 繪圖速度效能調整$(scene_2).show();$(scene_1).hide();
  15. 15. 繪圖速度效能調整• 當屬性為不可視時(display:none 或 visibility:hidden)該 HTML 元素不會被繪製• 屬性改為顯示時才開始繪製,螢幕會 delay 約100~200ms• 100~200ms 會讓 user 覺得很頓
  16. 16. 繪圖速度效能調整offset 作法:把還沒用到的元素藏在看不見的地方top:0, left:0top:0, left:-500
  17. 17. 繪圖速度效能調整$(scene_2).css(‘left’, 0);$(scene_1).css(‘left’, -500);top:0, left:0top:0, left:-500
  18. 18. 還是不行?
  19. 19. 寫輪眼
  20. 20. 繪圖速度效能技巧• 靈活運用錯覺效果– 縮短 touch 事件 delay 時間– 在 touchstart 觸發事件,不要用 click 觸發
  21. 21. 記憶體問題
  22. 22. 記憶體問題SMALL
  23. 23. 記憶體問題• 單一頁面記憶體限制– iOS : 10M– Android :各家廠牌不同,比 iOS 稍大• 現實是殘酷的– Retina 影像:影像記憶體 x 4– 動硬體加速:影像記憶體啟 x 4• 為了保護 OS 穩定度,記憶體使用超過限制行動瀏覽器就會自動崩潰
  24. 24. 記憶體管理• 避免全頁硬體加速• 只加速必要元素,例如背景圖片就別了
  25. 25. 記憶體管理• 釋放用不到的 javascript 記憶體$(img).remove();delete obj;obj = null;
  26. 26. 以上方法都沒用!無法控制 Webkit 的Garbage Collection發動時機!
  27. 27. 記憶體管理• Memory Pool– 最好的 delete 方法就是不要 new• 釋放影像的方法– img.src =data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==;
  28. 28. PhoneGap (Cordova)
  29. 29. 為何使用 PhoneGap• 把 HTML 包裝成 APP• 多媒體播放• 資源預載
  30. 30. 為何使用 PhoneGapIAP$ 付費機制 $
  31. 31. PhoneGap 的問題• 用 PhoneGap 的人都很怕被人知道用 PhoneGap解決方法:不要太像網頁
  32. 32. 申請新帳號再送審
  33. 33. 總結• 效能問題– 追求平衡– 讓時間解決一切• 遊戲引 成熟度擎– canvas based• Mobile Web 的定位– 借殼上市– 用在適合的地方
  34. 34. 07th Expansion• 美術 & 劇本:龍騎士 07• 程式:弟弟• 客服:母親• 資料蒐集:父親• 日本公務員離職作遊戲• 第一次銷售量: 50• 遊戲、漫畫、動畫、廣播劇、真人電影改編
  35. 35. 工具有限制想像力沒有限制
  36. 36. 感謝 JSDC 大會謝謝大家
  37. 37. Backup

×