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

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

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

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

three.js

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

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

開発者のMr.doobさん

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

@drecom/stats.jsの機能紹介

Mr.doob氏のstats.jsカスタマイズ版として@drecom/stats.jsを紹介しました。

本家との違いとして以下の機能を搭載しています。

  • FPS、1フレームの処理時間、JavaScriptのメモリ使用量を1画面にまとめて表示
  • グラフの上限値を設定可能
  • 負荷が高いと文字色を変えて警告
  • FPSなど各種値にJavaScriptでアクセス可能
  • 任意の文字列を表示できる領域を確保
  • 描画負荷が少ない(描画頻度を落としている。任意で変更可能。)

ブラウザ動向の調査方法

勉強会では特にお話ししませんでしたが、自分たちは日々の業務としてブラウザ動向を監視し、サービスに影響しそうな変更があればリリース前に検証/対策するようにしています。

そのために必要な最新のブラウザ情報は、各ブラウザのβ版リリースノート等から得ています。

Chrome : https://www.chromestatus.com/features/schedule

Safari : https://developer.apple.com/safari/technology-preview/release-notes/

Firefox : https://www.mozilla.org/en-US/firefox/beta/notes/

さいごに

今回の勉強会では、HTML5ゲーム開発の全体像を広く知ってもらうことを目的にお話しました。
テーマ毎のコアな話は、また別の機会にできればと思います。