ロード時間の最適化

備考

このドキュメントは、playcanvas/developer.playcanvas.com を元に翻訳されたものです。

ドキュメントはMITライセンスの下で提供されています。詳細については、https://github.com/playcanvas/developer.playcanvas.com/blob/main/LICENSE を参照してください。

最適化はフレームレートの向上だけではありません。ロード時間の短縮も非常に重要です。アプリケーションのロードが速ければ速いほど、ユーザーがそれを体験するために留まる可能性が高くなります。ユーザーの離脱を防ぐために、アプリケーションのロード時間を5秒未満にすることを目指しましょう。

超高速なロード時間を実現するためのヒントをいくつか紹介します。

• 一般的に、AVIF画像は同じ画質の場合、WebP、JPG、PNGよりもファイルサイズが小さくなります。また、WebPやPNGのようにアルファチャンネルもサポートしています。ただし、すべてのブラウザが現在AVIFをサポートしているわけではないため、プロジェクトにとって意味のある場合にのみ使用してください。AVIFを使用できない場合は、WebPのサポートがはるかに広く、JPEGやPNGよりも同等の品質でファイルサイズが小さくなりますが、さまざまな形式でテストすることを推奨します。
• 特定のテクスチャ画像をダウンサンプリングする機会を探してください。たとえば、小さなグラフィカルオブジェクトで使用されている2048x2048のテクスチャは、1024x1024や512x512でもほとんど同じに見える場合があります。
• 非同期でロードできるアセットをプリロードしないでください。たとえば、ゲーム開始時にすぐにゲーム音楽を再生する必要がない場合は、インスペクターパネルでそのアセットの「Preload」オプションをオフにすることを検討してください。
• プリフィルターされたキューブマップがあり、スカイボックスのトップレベルのミップマップを表示していない場合は、6つのフェース画像のすべてのプリロードをオフにできます。
• ランタイム時にテンプレートをインスタンス化しない場合は、アセットのプリロードをオフにしてください。それらは不要です。（詳細については、'テンプレートアセットをロードする必要があるのはいつですか？'を参照してください）。
• インポートされたモデルに必要な頂点属性のみが含まれていることを確認してください。たとえば、モデルに2番目のUVセットがあるがそれを使用していない場合や、すべての頂点カラーが白の場合、モデリングアプリケーションに戻ってこれらの属性を削除してください。
• Chrome DevTools（または他のブラウザの同等のもの）のネットワークパネルを使用して、ロードされたアセットをサイズでソートし、目立つものを探してください。使用されていないため削除できるアセットを探してください。実質的に重複しているアセットを探して削除してください。
• PlayCanvasの組み込み物理エンジンを使用すると、379KBの追加ダウンロードコストが発生します。物理エンジンを使用して非常に単純な問題を解決している場合は、ダウンロードのペナルティが発生しない代替ソリューションを検討してください。
• PlayCanvasアプリをセルフホストする場合は、WebサーバーがGZIP圧縮でファイルを配信するように構成してください。特にJSONファイルとJSファイルです。

ロードシーケンスのベストプラクティス

上記のガイドラインに加えて、ユーザーに操作したり見たりする新しいものを提供しながら、ロードを複数の段階に分けることで、ユーザーを引き付けることができます。

Virtual Voodooを例として使用すると、ほとんどのブラウザエクスペリエンスで使用される「典型的な」シーケンスを示すことができます。

ゲームには3つのフェーズがあります。

1. プリローダー
2. タイトル画面とキャラクターカスタマイズ
3. メインゲーム

プリローダーフェーズでは、最初のPlayCanvasシーンに必要なアセット、つまりタイトル画面とキャラクターカスタマイズに必要なアセットをロードします。これには、UI、キャラクターモデル、およびアセットのアセットが含まれます。

タイトル画面がアクティブになると、ゲームはメインゲームに必要なアセットのバックグラウンドロードを開始します。タイトル画面への移行中、およびキャラクターカスタマイズとのやり取りの可能性によって、ユーザーが開始ボタンを押すまでに、メインゲームのアセットのロードがすでに完了している場合があります。

ただし、ユーザーがアセットのロードが完了する前に開始ボタンを押すと、ボタンに進行状況バーが表示されます。100％に達すると、ゲームは自動的にメインゲームに移行します。

アセットを段階的にロードし、ユーザーが定期的に操作したり見たりする新しいものを提供することで、ロード時間が長くてもユーザーは関与し続けます。

さらなる改善

一部の開発者は、プリローダーフェーズを最小限に抑え、アプリケーション関連のアセットやテキストを入力したり、アニメーションを使用したりできる「アプリケーション内」ロード画面を追加するところまで行きます。これにより、ユーザーはアプリケーションに直接関連するものを目にすることで関与します。

ゲームで許可されている場合は、より詳細なアセットがロードされる間、一般的なプレースホルダーを使用すると、ユーザーはより早くアプリケーションを操作できるようになります。

以下の例は、完全にロードされるまでキャラクターのシルエットをプレースホルダーとして使用しています。シルエットのプレースホルダーはファイルサイズが小さいため、プリロードシーケンスの一部にすることができ、アプリケーション内の他のキャラクターにも再利用できます。