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

Copyright Drecom Co., Ltd. All Rights Reserved. 1
HTML5
ゲームフレームワーク
開発について

自己紹介
山﨑拓也 @zprodev
ドリコム
- HTML5 ゲームフレームワーク開発
- HTML5 技術検証 / 課題解決

HTML5ゲームフレームワーク開発の知見から
ゲーム開発に必要な要素を知ってもらう
HTML5での実現方法を知ってもらう
目的

HTML5ゲームを作れる人が増える
目的

HTML5ゲーム市場が
盛り上がる
目的

アジェンダ
● ゲーム開発に必要な要素とは？
○ ゲームとして成立させるための要素
○ ゲーム開発でラクするための要素
● HTML5でどう実現する？
○ スマホとPCの両対応が前提
○ 約2年前のブラウザでも動作する機能
■ Chrome50系、Safari10系
● まとめ

ゲーム開発に必要な要素とは？

グラフィック描画
見た目大事

サウンド再生
音も無いと盛り上がらない

ムービー再生
演出はド派手にムービーで
(演出の実装は辛い)

プレイヤーとの対話
これが出来なきゃゲームじゃ無い

リソース管理
- 画像や音声など大量リソースへのアクセス
- キャッシュ化やメモリ解放などの効率化
ライフサイクル管理
- シーン単位で開発できるとラク
- デバイスイベントのハンドリング
デバッグ機能
- パフォーマンスチューニングに必要

HTML5でどう実現する？

★ 描画にはWebGLを使う
GPUを使って高速に描画可能
HTML要素はcanvasだけあればOK

★ 描画にはWebGLを使う
WebGLは低レベルなAPIですが、
描画ライブラリを使えばお手軽です
有名どころ
- 2DならPixiJS
- 3Dならthree.js

ブラウザの描画タイミングを拾えるAPI
★ requestAnimationFrameで定期的に更新

最高60FPSで呼ばれる（約16.6ms間隔）
負荷が高いとフレーム間隔が延びる
ゲームを完璧に実装したとしても、
外部要因でFPSは変動します。
（バックグラウンドでのアプリ自動更新とか…）

フレーム毎に固定値のアニメーションは❌
60FPS
30FPS
33.2ms後
66.4ms後

★ performance.now()でフレーム間隔を算出
performance.now() では
起動からの経過時間をマイクロ秒単位で取得できる。
requestAnimationFrameのコールバック毎に経過時間を算
出し、時間ベースでアニメーションさせる。
30FPS
33.2ms後 66.4ms後

★ Web Audio API を使用する
サウンド再生
音声をJavaScriptで制御する多機能API
エフェクトかけたり色々出来ます

自動再生ポリシーへの対応
- ユーザー操作を契機に再生開始する必要がある
メモリ使用量に注意
- 解放バグや解放のためにテクニックが必要です
バックグラウンドでも音が鳴り続ける
- ライフサイクル制御（後述）との連携が必要
サウンド再生

その他の問題や対策などQiitaにまとめてます
サウンド再生

WebGLはHTMLVideoElementを
テクスチャとして受け入れます
★ videoをWebGLに食わせる
ムービー再生

iOSはplaysinline属性が必要
- iOS10から属性付加でインライン再生が可能になった
- 属性を付けないとコントロールUI付きの全画面表示
videoも自動再生ポリシーに抵触する
- 無音で良いならmuted属性をつける
- 音出したいならユーザー操作を契機に再生
ムービー再生

Chrome73からβのみで発生するバグがある
- play直後にWebGLに食わせるとエラーになる
- 74以降もβでは発生するがリリース版では再現しない
- play後に数ms待ってからWebGLに渡すと大丈夫
ムービー再生

MouseEvents
- PCのマウス操作を拾えるAPI
TouchEvents
- スマホなどタッチデバイスの操作を拾えるAPI
★ MouseEvnetsとTouchEventsを併用

TouchEvents
- touchstart
- touchend
- touchcancel
- touchmove
MouseEvents
- mousedown
- mouseup
- mousemove
- mouseenter
- mouseleave
- mouseover
- mouseout
イベントリスナーでキャッチ

TouchEvents
- touchstart
- touchend
- touchcancel
- touchmove
MouseEvents
- mousedown
- mouseup
- mousemove
- mouseenter
- mouseleave
- mouseover
- mouseout
押す離す移動

MouseEvents
- mousedown
- mouseup
- mousemove
- mouseenter
- mouseleave
- mouseover
- mouseout
TouchEvents
- touchstart
- touchend
- touchcancel
- touchmove
着信など
マウスカーソルが対象から外れた時
“離す”が発火しないパターンに注意

Touchではマルチタッチ考慮も必要
座標はコールバック引数から取得する
★ MouseEvnetsとTouchEventsを統合

MouseとTouchの統合イベント
★ PointerEvnetsがやってくる
Safari対応待ってました

Gamepad APIも結構前から使えます
★ 実はゲームパッドも使える
Chromeのジョイコン対応が少し前にバズってました

★ ブラウザキャッシュで通信量節約
HTML5ゲームでは全てのリソース取得にWeb通
信を伴います。
HTTPレスポンスヘッダーにリソース寿命を設定
することで、ブラウザにリソースがキャッシュされ
再通信時の通信量を節約できます。
リソース管理

★ ブラウザキャッシュで通信量節約
リソース寿命系レスポンスヘッダー
- Expires : 日時指定の強いキャッシュ
- Cache-Control : 秒数指定の強いキャッシュ
- Last-Modified : 更新日時で管理する弱いキャッシュ
- ETag : 更新日時やファイルサイズから生成したユニーク
なIDで管理する弱いキャッシュ
サーバー側で適切な設定を
リソース管理

ブラウザで動作するDBシステム
バイナリデータも保存可能なため、
大容量ファイルストレージとして使える
★ IndexedDBでJS主導の通信量節約
リソース管理

iOSは12.2までblob非対応
- blob → ArrayBufferに変換すれば保存可能
容量上限にも注意
- Web上には実際の挙動と異なる情報が散見されます
- 現状実機で見る限り、Android Chromeで数GB、iOS
Safariはストレージを食い潰すまでは保存可能
- Safari13で上限が実装されます
- Exceptionが発生しても死なない実装を！
リソース管理

リソースキャッシュに特化したライブラリをOSSと
して公開してます。
リソース管理
https://github.com/drecom/idb-cache

@drecom/idb-cache の特徴
- データ容量 or ファイル数で保存上限を設定可能
- ファイル毎にキャッシュ期間を設定可能
- 上限を超える場合は期限の近いファイルから削除
- 期限などのmetaデータとファイルの実データを分割保存
し検索を効率化
- String、Blob、ArrayBufferの保存に対応
リソース管理

★ Page Visibility API でポーズ・レジューム
Page Visibility API でブラウザ表示状況を監視できます。
これを利用し、サウンドがバックグラウンドで鳴り続ける問題
への対処や、performance.now()で計測しているゲーム内時
間の一時停止を行います。

スマホ回転やソフトウェアキーボード出現などでの描画領域
が変わる場合がある。
ゲーム体験を損ねないよう、resizeイベントを検知して
canvasをリサイズする。
★ resizeイベントを検知してcanvasリサイズ

リサイズは少し待ってから
- resizeイベント発生直後は正しいwindowサイズが取れな
い場合がある
- resizeイベントが短時間で多重発生する場合がある
★ resizeイベントを検知してcanvasリサイズ

ログ、通信量、メモリ使用、ストレージ内容などは
ブラウザ備え付けの開発者ツールで確認できま
す。
Android Chrome や iOS SafariもPCと接続して
確認する方法があります。
★ ブラウザ備え付けの開発者ツールを活用
デバッグ機能

three.js開発者、Mr.doob氏のstats.jsカスタマイ
ズ版を公開してます。
★ @drecom/stats.js
デバッグ機能
https://github.com/drecom/stats.js

★ @drecom/stats.jsの特徴
デバッグ機能

まとめ

まとめ
● グラフィック周りはWebGL
● 描画更新はrequestAnimationFrame
● 時間計算はperformance.now()
● サウンドはWebAudioAPI
● プレイヤーとの対話はMouseやTouchイベント
● ブラウザキャッシュやIndexedDBで通信量節約
● PageVisibilityAPIやresizeイベントでブラウザの表示状況をハ
ンドリング
● パフォーマンスチューニングは開発者ツールを活用

これでHTML5ゲーム作れますね！

ご静聴ありがとうございました

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

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

Similar to HTML5 ゲームフレームワーク開発について (20)

More from Drecom Co., Ltd.

More from Drecom Co., Ltd. (20)

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