Home > フロントエンド技術 > HTML5 ゲームフレームワーク開発について【勉強会フォローアップ】

HTML5 ゲームフレームワーク開発について【勉強会フォローアップ】

2019年7月2日公開

enzaプラットフォーム事業統括部の山﨑（@zprodev）です。

先日の6月17日に弊社にて HTML5 ゲームを支える技術勉強会が開催されました。
本勉強会で自分からは「HTML5 ゲームフレームワーク開発について」という題で、ゲーム開発に必要な要素とHTML5での実現方法を紹介させていただきました。

この記事では、勉強会でさらっと流した部分の補足や、調査検証に便利なWebサイト等を紹介させていただきます。

有名どころとして紹介したWebGLライブラリについて

three.js

WebGLの勧告は2011年ですが、three.jsでは2010年からWebGLを取り入れています。

WebGL草案時代からWebGL開発を支えている有名なライブラリです。

開発者のMr.doobさん

10 years since I joined @github. What a decade… pic.twitter.com/BU6H8LKceY

— Mr.doob (@mrdoob) 2019年6月19日

PixiJS

PixiJSは2D用描画ライブラリで、2018年ハロウィンに公開されたGoogleのハロウィン企画ゲームでも使用されていました。

Google Doodle 2018年ハロウィーン

最近バージョン5がリリースされましたが、周辺プラグインの対応が追いついておらず、最新版は若干使い辛い状況です。

その他のWebGLライブラリ

その他にもWebGLのライブラリやフレームワークは色々あります。
GistでWebGLライブラリ情報をまとめて下さっている方がいるので、色々試してみてはどうでしょうか。
A collection of WebGL frameworks and libraries · GitHub

気になったライブラリはGitHub上でパフォーマンス比較ページを公開していますので参考までに。
GitHub – zprodev/webgl-libs-test

ライブラリは手軽ではありますが、大規模なモバイル向けゲームを開発する場合、チューニング等でどうしてもWebGL自体の知識が必要になります。
WebGLの学習には wgld.org がオススメです。

WebAudioAPI以外の選択肢

サウンド再生にはWebAudioAPIの利用をオススメしました。

他にブラウザで音を鳴らす方法として、Audioタグの利用が挙げられます。
Audioタグはメモリ負荷が少ないというメリットがありますが、iOSでは次のような問題が発生するため、ゲームでの利用はあまりオススメできません。

サイレントモードが無視される
再生開始がワンテンポ遅れる（SEへの利用は致命的）
ループ再生もワンテンポ遅れる（BGMにも使い辛い）

ちなみに、WebAudioAPIは音源としてAudioタグを使用することもできます。
その場合も同様の問題が発生するため、勉強会資料で紹介したサンプルコードのように音源にはArrayBufferを使用してください。

Mouse/Touch/Pointerイベントの挙動

プレイヤーの操作を受け入れるためにMouseEventsとTouchEventsの併用をオススメしました。
また、Safariが次のメジャーバージョンでPointerEventsに対応するため、主要ブラウザでPointerEventsが使えるようになるという話もしました。

Mouse、Touch、Pointerの各イベントの発火タイミングを過去にQiitaでまとめたので参考までに。（Safari13は含まれていません）
PCとスマホの Pointer Events 挙動まとめ – Qiita

検証のためのページもGitHubで公開しているので、実機で確認したい場合はこちらをご利用ください。
GitHub – zprodev/interaction-event-test: HTML5 interaction test site

iOSのIndexedDBにBlobが保存できない件の対処

iOSは12.2までIndexedDBにBlobを保存できないため、BlobからArrayBufferへ変換しましょうという話をしました。

実際に@drecom/idb-cacheでは相互に変換して対処しています。

BlobからArrayBufferに変換

ArrayBufferからBlobに復元

IndexedDBの容量制限について

Web上には実際の挙動と異なる情報が散見されるという話をしました。

いくつかソースを・・・

Googleの情報
Progressive Web App のオフラインストレージ | Web | Google Developers

Chrome : 空き容量の6%
Firefox : 空き容量の10%
Safari : 50MB

chromiumのコード
storage/browser/quota/quota_settings.cc – chromium/src – Git at Google

Chromeは66から仕様が変わったとのメモ書きがありますね。
chromiumのログを見る限り66、67辺りで変更が入っているようで、
現在は空き容量が「ストレージの10%」か「2GB」のいずれか小さい方に達した時が、新規保存可否の境界になっていると思われます。
Googleの情報はバージョンが古いのか、現状の仕様とは異なりそうです。

mozillaの情報
ブラウザーのストレージ制限と削除基準 – Web API | MDN

ストレージの50%がブラウザの上限 : グローバルリミット
グローバルリミットの20%が各ドメインの上限 : グループリミット
全体の空き容量の10%が上限ということで、Googleの情報と一致しそうです。

Appleの情報
Release Notes – Safari Technology Preview – Safari – Apple Developer
Safari Technology PreviewのRelease70でIndexedDBにストレージ上限が追加されています。つまり次のSafari13から上限が設定されます。
Googleの情報にある50MB制限は、現状は機能していない状態でした。

こんな感じで、出回っている情報が古かったり、実際の実装状況と異なっている例があります。
正しい動作を把握するには実機で確認するのが確実なので、そんな時に便利なサイトを紹介しておきます。
Browser Storage Abuser