Coatsink が『Ready, Set, Cook！』のウェブ読み込み時間を 25% 短縮できた理由

『Ready, Set, Cook!』は、『Jurassic World Aftermath』や『Transformers: Battlegrounds』の Coatsink が制作した Messenger 向けの協力型レストラン経営ゲームです。モバイルウェブ開発への初挑戦を通して、同社が学んだことをご紹介します。

Messenger ルームでのリリースを目指し、スタジオはいかにしてゲームをデスクトップからモバイルに移行させたのでしょうか。

『Ready, Set, Cook!』はもともとデスクトップ用のウェブゲームとして作られたもので、プレイヤーが PC やラップトップからビデオ通話に入って遊ぶようになっていました。Coatsink がモバイルをターゲットに開発の軸足を移そうとしていたころ、同社はモバイルでランタイムを動作させるために、すでに戦略的パートナーシップを結んでいた Meta、そして Unity と連携しました。これは、近日リリースされる Unity 6 で Unity Web に行われる主要なアップデートの 1 つで、この他にも、WebAssembly 2023 のサポート追加、WebGPU の早期アクセス、Emscripten 3.1.38 ツールチェーンの追加などがアップデートに含まれています。来年ゲーム開発者は Unity の Instant Games プラットフォームのサポートにより、Meta の巨大なゲームエコシステムを利用できるようになります。

新しいプラットフォームをテストする

「『Ready, Set, Cook!』で気に入っているのは、クリックからプレイまでの時間が短いこと。Messenger でビデオ通話をしていれば、ボタンを押すだけで全員がロビーに集まり、そのままゲームに入れます。セットアップが必要ないんです」と Coatsink のプログラミング部門の責任者である、Ross Furmidge 氏は語ります。

この時点の Coatsink ではウェブゲーム開発は初めてのことだったので、目標はプラットフォームのワークフローを最大限に活用することでした。同社はこのプロジェクトを、プラットフォームの実現可能性とモバイルウェブ開発における自分たちの強みを分析するための研究開発プロジェクトとして扱いました。

チームはほとんどの部分を既存の機能をベースに開発しました。同社は、HUD、ゲームマネージャー、ネットワーク、インタラクティブ、ロビー、ゲームインストラクションに取り付けるプレハブなど、既製のビルディングブロックを使用し、ユーザーが何をすべきかをより明確に示すために洗練された機能を追加しました。また、一時停止、衣装のランダム化、ロビーの調整とメッセージング、HUD の変更、柔軟なアスペクト比サポート、難易度のバランス調整などの新機能追加も盛り込まれました。

「私たちは、マルチプレイヤーとしての側面と、ビデオ通話で友人と楽しむことを中心にゲームを開発し、バランスをとりました」と Furmidge 氏は説明します。「私たちがこのプロジェクトに取り組んだとき、デスクトップからモバイルへ移行するゲームによくある課題にぶつかりました。UI にこだわる必要があったこと、そして特にウェブについて、プレイヤーが Wi-Fi に接続しているとは限らないので、モバイルデータでのダウンロード時間を考慮しなければなりませんでした。」

成果

• ゲームの読み込み時間を 25% 短縮
• WebAssembly（Wasm）ファイルのサイズを2.5% 削減
• ゲームの転送時間と展開時間を 10% 短縮

動的な UI 方向の切り替えに対応

Coatsink チームはプロジェクトを開始させましたが、すぐに UI に考慮しなければならないことが多数あることに気づきました。初期段階では、プレイヤーとそうでないビデオ通話ユーザーの両方が参加できるようにすることに気を配っていました。チームは、プレイヤーを常にオンラインに保ちながら、他のユーザーにもポジティブな観戦体験を提供するため、既存の観戦機能を改良する必要がありました。

Coatsink のジュニアデザイナー、Kamil Bazydlo 氏は、「観戦体験は、ゲームの他の側面をデザインする際にも、常に最優先事項でした」と説明します。「他のプラットフォームなら、どのゲームジャンルでも一般的に見られる機能ではありませんが、ここではプレイヤーはビデオ通話中なので、ゲーム全体を通して包括的なユーザー参加を強調することが重要でした。」

チームは早い段階から画面の向きにも注目していました。このゲームはもともとデスクトップ向けに作られたため、横向き画面を前提に作られています。同社がモバイルに移行したとき、横向きと縦向きの両方の表示をサポートする必要がありました。Messenger ではビデオ通話中なので、プレイヤーはスマートフォンを持つ向きに画面を向けます。そのためスマートフォンを回転させるとカメラが横向きになってしまい、理想的ではありません。「それ（横向き・縦向きの両方）をサポートする環境を設計する際、このことは大きな懸念事項でした」と Furmidge 氏は言います。

ゲームコントロールの再考

『Ready, Set, Cook!』は画面サイズやアスペクト比の異なるさまざまなデバイスでプレイできますが、Meta のビデオフィードやプラットフォームコントロールなどの要素にスペースを割り当てているため、ゲームのビューポートが画面全体に広がることはありません。これらはゲームアプリケーションの一部ではないので、開発者がゲームに取り組んでいるときに Unity エディターに表示されることはありません。

「画面に UI 要素を配置する際には、そのことを考慮しなければなりませんでした」と Bazydlo 氏は言います。「私たちは、これらのプラットフォーム要素にどれだけの画面領域が取られているかを大まかに把握し、QA チームと協力して、ターゲットとする最も狭いアスペクト比を特定しました」。

モバイルの場合、デバイス固有のコントロールは画面の下端にあります。このゲームは横向きの画面を念頭に置いて作られているため、チームは画面の下の部分を重要なゲームプレイの入力用ではなく、HUD 要素を表示するために使用しました。

このタイトルがアメリカでソフトローンチされたとき、チームはいつプレイヤーがゲームを離脱するかを割り出す重要な機能として、アプリケーションに直接アナリティクスを組み込みました。そしてチームは早い段階で、ゲームの読み込みが終わらないうちにユーザーが離れていくことに気づきました。

「ロビーにいるユーザーに、メニューの情報量がやや過多で、ゲームに入るまでのフローが長すぎると思われてしまうと、すぐに離脱されてしまうことがわかりました。ゲームに入ったとたん、大半のプレイヤーがそのままプレーを続けてくれました」と Furmidge 氏は言います。「これは私たちにとって有益なデータでした。アナリティクスは私たちの意思決定の多くに大きな影響を与えました。」

読み込み時間の最適化

Coatsink の分析によると、ゲームのファイルサイズが大きすぎて、読み込みに時間がかかりすぎると、ユーザーはメインメニューやゲームプレイにたどり着く前に離脱してしまうことがわかりました。

Coatsink の開発者である Andrei M. 氏は、Unity のビルド設定内のオプションを使って、ファイルサイズを小さくすることに注力しました。例えば、彼はコードの最適化設定を「Disk Size with LTO」に設定し、Brotli 圧縮フォーマットを使用し、IL2CPP のコード生成をより高速な（よりファイルサイズの小さい）ビルドに設定し、またマネージストリッピングレベルを「High」に設定するなどの設定を行いました。こうしたウェブ向けの最適化のおかげで、チームは読み込み時間を大幅に短縮することができました。

また、チームは Unity の WebAssembly（WASM）ツールも活用しました。このツールは、Unity エンジンの使われていない部分を取り除き、最適化された .wasm ファイルを出力します。このファイルサイズを小さくすることで、圧縮、転送する容量が減り、実行時にデバイス上で展開する容量も抑えられました。「こうすれば、ユーザーは情報のダウンロードを終えると、そのままゲームに入ることができます」と Furmidge 氏は説明します。

これらのゲーム最適化により、.wasm ファイル全体で 2.5% の削減に相当する 4MB のサイズ削減を実現しました。その結果、転送時間と展開時間の両方を 10% 短縮することができました。4MB というと小さいと思われるかもしれませんが、モバイルブラウザ上で動作するゲームなので、全体から見れば大きなインパクトがある成果でした。

ファイルサイズの削減

ファイルサイズを削減するために、Coatsink チームはアセットバンドル（プラットフォーム固有のコード以外のアセットを含むアーカイブファイル）を使いました。チームはアセットバンドルを外部サーバーでホスティングし、ビルドが走ってユーザーをできるだけ早くゲームのロビーに入れるようにして、その裏でアセットバンドルをダウンロードするようにしました。

チームはオンデマンドでアセットの読み込みを行うために、Addressables アセットシステムも使いました。これにより、パッケージはゲーム内の各パートで必要なものごとにグループ分けされました。この構造が読み込み時間を 25% 削減する上で大きく貢献しました。

「こうすることで、ロビーに最低限必要なアセットを用意し、プレイヤーが素早くロビーに入れるようにします。また、ステージごとに最低限必要なアセットを用意しておく一方で、各ステージに共通のアセットを持つパッケージも用意しておきます」と Andrei M. 氏は説明します。「HTTP/2 がどこでも使えるわけではないので、ダウンロードするファイルをできるだけ少なくすることが目標です。」

チームは、ユーザーがゲームを起動したときにモバイルかデスクトップかを検出するワークフローを作成しました。ウェブテンプレートでは、読み込み中にデバイスがモバイルかどうかを判断し、モバイルであれば、そのプラットフォームに最適化されたアセットを使用するようにデータとアセットディレクトリを変更することができます。

「私たちは独自のダブルビルドシステムを作り、一部共通の部分を持つ 2 つのバージョンを作りました。このシステムは異なるアトラスを参照することで、圧縮タイプと圧縮サイズの両方を変更します。つまり、コードベースは同じにしつつ、アセットのビューが 2 つあるということです」と Andrei M. 氏は言います。

ユニークなテストとデバッグの課題に対応

ゲームのテストとデバッグを行う際、従来のウェブブラウザーではなく Messenger アプリ内でゲームを実行するという特殊な状況のため、チームはいくつかの課題を抱えることになりました。ダミープレイヤーを使ってブラウザー上で実行できるビルドはありましたが、Messenger の中でしか現れないバグを深く掘り下げる必要がありました。

「これらのバグに対処するため、開発ビルドで AWS サーバーにログをアップロードするシステムを作り、それを読むことができるようにしました」と Furmidge 氏は説明します。

チームはまた、コンソールでエラーをキャッチし、API 呼び出しを追跡するためにウェブブラウザーの開発ツールを使いました。これはプログラマーである Furmidge 氏にとって重要なことでした。

「ブラウザーのコンソールでは、コマンドを入力して手動で実行することができます」と Furmidge 氏は言います。「JavaScript と Unity の間を行き来するために作ったネイティブプラグインの外部のJavaScript ライブラリがあったので、必要なときにそれを利用することができました。」これは、Unity が将来のリリースでパッケージとしてリリースするために取り組んでいる機能であり、今回のケースでは Coatsink のノードマルチプレイヤーサーバーと通信できるように Meta JavaScript SDK をラップするために使われました。

開発をスピードアップするために、Andrei M.氏は必要な Meta API 呼び出しを模倣する独自のローカルラッパーも作成しました。「私は、ローカルサーバーの設定、プログラム可能なレスポンス、レイテンシを扱う API 呼び出しに集中しました」と彼は説明します。

プラットフォームの自然な延長になる

Coatsink チームは、『Ready, Set, Cook!』の体験を、Messenger ユーザーにとってシームレスなものにしたいと考えていました。プレイヤーがゲームセッションに素早く参加できるようにすることから、読み込み時間を短くすることまでさまざまな取り組みを行っていますが、同社の究極の目標は、プラットフォームの有機的な延長として機能することでした。

その一環として、プレイヤーが中断することなく前進し、多くのデバイスでプレーし、観戦しているときは友人を応援できるような直感的なゲームプレイを提供していることが挙げられます。そのために、読み込み中にスクロール可能なゲーム機能に関するヒントや、便利な遊び方説明用のアニメーション、そしてインタラクティブな要素を取り入れています。これらの機能は、プレイヤーが混乱を極めるキッチンを何とか管理しながら、友人との楽しみを見つけるのに役立つものです。

Coatsink のシニアプロデューサー、Nick Taylor 氏は「私たちは、Messenger をすでに使っている人たちを自然に取り込み、その人たちのビデオ通話の体験に付け加えるものを出したかったのです」と言います。「Meta と Unity とは本当に協力的な関係の元で仕事をしてもらえ、彼らは私たちが大きな規模で体験を広げる機会を与えてくれました。」

Unity 6で広がる可能性

Unity 6 は、あらゆる環境のプレイヤー向けに、ゲームを迅速かつ簡単に作成できるようにすることを目的としています。Unity Hub で Unity 6 をダウンロード。