Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

HTML5 ゲームフレームワーク開発について

938 vues

Publié le

2019/6/17 に開催された「HTML5 ゲームを支える技術勉強会」の登壇資料です。

Publié dans : Ingénierie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

HTML5 ゲームフレームワーク開発について

  1. 1. Copyright Drecom Co., Ltd. All Rights Reserved. 1 HTML5 ゲームフレームワーク 開発について
  2. 2. Copyright Drecom Co., Ltd. All Rights Reserved. 2 自己紹介 山﨑 拓也 @zprodev ドリコム - HTML5 ゲームフレームワーク開発 - HTML5 技術検証 / 課題解決
  3. 3. Copyright Drecom Co., Ltd. All Rights Reserved. 3 HTML5ゲームフレームワーク開発の知見から ゲーム開発に必要な要素を知ってもらう HTML5での実現方法を知ってもらう 目的
  4. 4. Copyright Drecom Co., Ltd. All Rights Reserved. 4 HTML5ゲームを作れる人が増える 目的
  5. 5. Copyright Drecom Co., Ltd. All Rights Reserved. 5 HTML5ゲーム市場が 盛り上がる 目的
  6. 6. Copyright Drecom Co., Ltd. All Rights Reserved. 6 アジェンダ ● ゲーム開発に必要な要素とは? ○ ゲームとして成立させるための要素 ○ ゲーム開発でラクするための要素 ● HTML5でどう実現する? ○ スマホとPCの両対応が前提 ○ 約2年前のブラウザでも動作する機能 ■ Chrome50系、Safari10系 ● まとめ
  7. 7. Copyright Drecom Co., Ltd. All Rights Reserved. 7 ゲーム開発に必要な要素とは?
  8. 8. Copyright Drecom Co., Ltd. All Rights Reserved. 8 グラフィック描画 見た目 大事
  9. 9. Copyright Drecom Co., Ltd. All Rights Reserved. 9 サウンド再生 音も無いと盛り上がらない
  10. 10. Copyright Drecom Co., Ltd. All Rights Reserved. 10 ムービー再生 演出はド派手にムービーで (演出の実装は辛い)
  11. 11. Copyright Drecom Co., Ltd. All Rights Reserved. 11 プレイヤーとの対話 これが出来なきゃゲームじゃ無い
  12. 12. Copyright Drecom Co., Ltd. All Rights Reserved. 12 リソース管理 - 画像や音声など大量リソースへのアクセス - キャッシュ化やメモリ解放などの効率化 ライフサイクル管理 - シーン単位で開発できるとラク - デバイスイベントのハンドリング デバッグ機能 - パフォーマンスチューニングに必要
  13. 13. Copyright Drecom Co., Ltd. All Rights Reserved. 13 HTML5でどう実現する?
  14. 14. Copyright Drecom Co., Ltd. All Rights Reserved. 14 グラフィック描画 ★ 描画にはWebGLを使う GPUを使って高速に描画可能 HTML要素はcanvasだけあればOK
  15. 15. Copyright Drecom Co., Ltd. All Rights Reserved. 15 グラフィック描画 ★ 描画にはWebGLを使う WebGLは低レベルなAPIですが、 描画ライブラリを使えばお手軽です 有名どころ - 2DならPixiJS - 3Dならthree.js
  16. 16. Copyright Drecom Co., Ltd. All Rights Reserved. 16 ブラウザの描画タイミングを拾えるAPI グラフィック描画 ★ requestAnimationFrameで定期的に更新
  17. 17. Copyright Drecom Co., Ltd. All Rights Reserved. 17 最高60FPSで呼ばれる(約16.6ms間隔) 負荷が高いとフレーム間隔が延びる ゲームを完璧に実装したとしても、 外部要因でFPSは変動します。 (バックグラウンドでのアプリ自動更新とか…) グラフィック描画 ★ requestAnimationFrameで定期的に更新
  18. 18. Copyright Drecom Co., Ltd. All Rights Reserved. 18 フレーム毎に固定値のアニメーションは❌ グラフィック描画 ★ requestAnimationFrameで定期的に更新 60FPS 30FPS 33.2ms後 66.4ms後
  19. 19. Copyright Drecom Co., Ltd. All Rights Reserved. 19 グラフィック描画 ★ performance.now()でフレーム間隔を算出 performance.now() では 起動からの経過時間をマイクロ秒単位で取得できる。 requestAnimationFrameのコールバック毎に経過時間を算 出し、時間ベースでアニメーションさせる。 30FPS 33.2ms後 66.4ms後
  20. 20. Copyright Drecom Co., Ltd. All Rights Reserved. 20 ★ Web Audio API を使用する サウンド再生 音声をJavaScriptで制御する多機能API エフェクトかけたり色々出来ます
  21. 21. Copyright Drecom Co., Ltd. All Rights Reserved. 21 自動再生ポリシーへの対応 - ユーザー操作を契機に再生開始する必要がある メモリ使用量に注意 - 解放バグや解放のためにテクニックが必要です バックグラウンドでも音が鳴り続ける - ライフサイクル制御(後述)との連携が必要 ★ Web Audio API を使用する サウンド再生
  22. 22. Copyright Drecom Co., Ltd. All Rights Reserved. 22 その他の問題や対策などQiitaにまとめてます ★ Web Audio API を使用する サウンド再生
  23. 23. Copyright Drecom Co., Ltd. All Rights Reserved. 23 WebGLはHTMLVideoElementを テクスチャとして受け入れます ★ videoをWebGLに食わせる ムービー再生
  24. 24. Copyright Drecom Co., Ltd. All Rights Reserved. 24 iOSはplaysinline属性が必要 - iOS10から属性付加でインライン再生が可能になった - 属性を付けないとコントロールUI付きの全画面表示 videoも自動再生ポリシーに抵触する - 無音で良いならmuted属性をつける - 音出したいならユーザー操作を契機に再生 ★ videoをWebGLに食わせる ムービー再生
  25. 25. Copyright Drecom Co., Ltd. All Rights Reserved. 25 Chrome73からβのみで発生するバグがある - play直後にWebGLに食わせるとエラーになる - 74以降もβでは発生するがリリース版では再現しない - play後に数ms待ってからWebGLに渡すと大丈夫 ★ videoをWebGLに食わせる ムービー再生
  26. 26. Copyright Drecom Co., Ltd. All Rights Reserved. 26 MouseEvents - PCのマウス操作を拾えるAPI TouchEvents - スマホなどタッチデバイスの操作を拾えるAPI ★ MouseEvnetsとTouchEventsを併用 プレイヤーとの対話
  27. 27. Copyright Drecom Co., Ltd. All Rights Reserved. 27 TouchEvents - touchstart - touchend - touchcancel - touchmove MouseEvents - mousedown - mouseup - mousemove - mouseenter - mouseleave - mouseover - mouseout ★ MouseEvnetsとTouchEventsを併用 プレイヤーとの対話 イベントリスナーでキャッチ
  28. 28. Copyright Drecom Co., Ltd. All Rights Reserved. 28 TouchEvents - touchstart - touchend - touchcancel - touchmove MouseEvents - mousedown - mouseup - mousemove - mouseenter - mouseleave - mouseover - mouseout ★ MouseEvnetsとTouchEventsを併用 プレイヤーとの対話 押す 離す 移動
  29. 29. Copyright Drecom Co., Ltd. All Rights Reserved. 29 MouseEvents - mousedown - mouseup - mousemove - mouseenter - mouseleave - mouseover - mouseout TouchEvents - touchstart - touchend - touchcancel - touchmove 着信など ★ MouseEvnetsとTouchEventsを併用 プレイヤーとの対話 マウスカーソルが対象から外れた時 “離す”が発火しないパターンに注意
  30. 30. Copyright Drecom Co., Ltd. All Rights Reserved. 30 Touchではマルチタッチ考慮も必要 座標はコールバック引数から取得する ★ MouseEvnetsとTouchEventsを統合 プレイヤーとの対話
  31. 31. Copyright Drecom Co., Ltd. All Rights Reserved. 31 MouseとTouchの統合イベント ★ PointerEvnetsがやってくる プレイヤーとの対話 Safari対応待ってました
  32. 32. Copyright Drecom Co., Ltd. All Rights Reserved. 32 Gamepad APIも結構前から使えます ★ 実はゲームパッドも使える プレイヤーとの対話 Chromeのジョイコン対応が少し前にバズってました
  33. 33. Copyright Drecom Co., Ltd. All Rights Reserved. 33 ★ ブラウザキャッシュで通信量節約 HTML5ゲームでは全てのリソース取得にWeb通 信を伴います。 HTTPレスポンスヘッダーにリソース寿命を設定 することで、ブラウザにリソースがキャッシュされ 再通信時の通信量を節約できます。 リソース管理
  34. 34. Copyright Drecom Co., Ltd. All Rights Reserved. 34 ★ ブラウザキャッシュで通信量節約 リソース寿命系レスポンスヘッダー - Expires : 日時指定の強いキャッシュ - Cache-Control : 秒数指定の強いキャッシュ - Last-Modified : 更新日時で管理する弱いキャッシュ - ETag : 更新日時やファイルサイズから生成したユニーク なIDで管理する弱いキャッシュ サーバー側で適切な設定を リソース管理
  35. 35. Copyright Drecom Co., Ltd. All Rights Reserved. 35 ブラウザで動作するDBシステム バイナリデータも保存可能なため、 大容量ファイルストレージとして使える ★ IndexedDBでJS主導の通信量節約 リソース管理
  36. 36. Copyright Drecom Co., Ltd. All Rights Reserved. 36 iOSは12.2までblob非対応 - blob → ArrayBufferに変換すれば保存可能 容量上限にも注意 - Web上には実際の挙動と異なる情報が散見されます - 現状実機で見る限り、Android Chromeで数GB、iOS Safariはストレージを食い潰すまでは保存可能 - Safari13で上限が実装されます - Exceptionが発生しても死なない実装を! ★ IndexedDBでJS主導の通信量節約 リソース管理
  37. 37. Copyright Drecom Co., Ltd. All Rights Reserved. 37 リソースキャッシュに特化したライブラリをOSSと して公開してます。 ★ IndexedDBでJS主導の通信量節約 リソース管理 https://github.com/drecom/idb-cache
  38. 38. Copyright Drecom Co., Ltd. All Rights Reserved. 38 @drecom/idb-cache の特徴 - データ容量 or ファイル数で保存上限を設定可能 - ファイル毎にキャッシュ期間を設定可能 - 上限を超える場合は期限の近いファイルから削除 - 期限などのmetaデータとファイルの実データを分割保存 し検索を効率化 - String、Blob、ArrayBufferの保存に対応 ★ IndexedDBでJS主導の通信量節約 リソース管理
  39. 39. Copyright Drecom Co., Ltd. All Rights Reserved. 39 ★ Page Visibility API でポーズ・レジューム Page Visibility API でブラウザ表示状況を監視できます。 ライフサイクル管理 これを利用し、サウンドがバックグラウンドで鳴り続ける問題 への対処や、performance.now()で計測しているゲーム内時 間の一時停止を行います。
  40. 40. Copyright Drecom Co., Ltd. All Rights Reserved. 40 スマホ回転やソフトウェアキーボード出現などでの描画領域 が変わる場合がある。 ゲーム体験を損ねないよう、resizeイベントを検知して canvasをリサイズする。 ★ resizeイベントを検知してcanvasリサイズ ライフサイクル管理
  41. 41. Copyright Drecom Co., Ltd. All Rights Reserved. 41 リサイズは少し待ってから - resizeイベント発生直後は正しいwindowサイズが取れな い場合がある - resizeイベントが短時間で多重発生する場合がある ★ resizeイベントを検知してcanvasリサイズ ライフサイクル管理
  42. 42. Copyright Drecom Co., Ltd. All Rights Reserved. 42 ログ、通信量、メモリ使用、ストレージ内容などは ブラウザ備え付けの開発者ツールで確認できま す。 Android Chrome や iOS SafariもPCと接続して 確認する方法があります。 ★ ブラウザ備え付けの開発者ツールを活用 デバッグ機能
  43. 43. Copyright Drecom Co., Ltd. All Rights Reserved. 43 three.js開発者、Mr.doob氏のstats.jsカスタマイ ズ版を公開してます。 ★ @drecom/stats.js デバッグ機能 https://github.com/drecom/stats.js
  44. 44. Copyright Drecom Co., Ltd. All Rights Reserved. 44 ★ @drecom/stats.jsの特徴 デバッグ機能
  45. 45. Copyright Drecom Co., Ltd. All Rights Reserved. 45 まとめ
  46. 46. Copyright Drecom Co., Ltd. All Rights Reserved. 46 まとめ ● グラフィック周りはWebGL ● 描画更新はrequestAnimationFrame ● 時間計算はperformance.now() ● サウンドはWebAudioAPI ● プレイヤーとの対話はMouseやTouchイベント ● ブラウザキャッシュやIndexedDBで通信量節約 ● PageVisibilityAPIやresizeイベントでブラウザの表示状況をハ ンドリング ● パフォーマンスチューニングは開発者ツールを活用
  47. 47. Copyright Drecom Co., Ltd. All Rights Reserved. 47 これでHTML5ゲーム作れますね!
  48. 48. Copyright Drecom Co., Ltd. All Rights Reserved. 48 ご静聴ありがとうございました

×