Web で開始する
このページでは、Web ブラウザで実行するプロジェクトの開発を始めるために必要な情報について説明します。
このリリースでは次の操作を行うことができます。
- Stingray Editor から直接ブラウザでプロジェクトを起動する。
- プロジェクトをディスクに配置し、後で Web サーバ上でホストする。
次の操作は行うことはできません。
- Stingray Editor ビューポートをブラウザにミラーリングする。
- Stingray Editor またはそのいずれかのツールをブラウザで実行し、レベルとプロジェクトを編集する。
さらに、プロジェクトがブラウザで実行されているときに、シェーディング環境で提供されるレンダリング設定のすべてが利用可能になっていない場合があります。当社では WebGL でこれらの高品質な効果をさらに多く利用できるように取り組んでいます。
Stingray Web は WebAssembly および WebGL 2.0 の両方を必要とします。これらは現在、次のブラウザでサポートされています。
- Google Chrome (バージョン 57 以降)
- Mozilla Firefox (バージョン 52 以降)
Stingray Editor からブラウザでプロジェクトを起動するには、Connections パネルを使用し、使用する各ブラウザに対して新しい Web ターゲットを設定します。(「Connections パネルを使用する」も参照してください)。
Connections パネル(Windows > Deploy and Connect > Connections)で、接続を識別する名前を指定します。
Platform オプションを Web に設定します。
Browser Path には、既定の Web ブラウザの .exe ファイルが示されます。そのブラウザがサポート対象の Web ブラウザではない場合は(前述のリストを参照)、[参照]ボタンをクリックし、ファイル システム内にあるサポート対象の Web ブラウザの .exe ファイルを選択する必要があります。
Command Line は空白のままにします。Web 接続ではこのフィールドを使用することにより、起動 HTML ページに対して送信する追加パラメータを定義し、URL 検索文字列として送信できます。これらのコマンドライン パラメータは GET パラメータとして URL に渡され、そこでエンジンに読み取られ、任意のプラットフォームと同様に扱われます。HTML ページをカスタマイズする場合は、ここにパラメータを入力します。Web ページのコンテキストで意味を持たないパラメータを指定すると、予期した結果が得られないことがあります。
Connections パネルまたはビューポートのツールバーから Run Project ボタンを押します。
プロジェクトがブラウザで正常に実行されると、次のようになります。
プロジェクトをディスクに配置する(Web サーバでホストできるようにする)には、Deployer パネルを使用します。HTML5 アイコンが付いたタブに移動し、必須フィールドを設定して、Package Project for Web をクリックします。
「Deployer パネルを使用する」も参照してください。
Stingray Editor からプロジェクトを実行する場合、またはプロジェクトをディスクに配置する場合のどちらでも、同一のエンジン バイナリが使用されます。ただし配置の場合は、他のプラットフォームと同様に、さらに多くのプロジェクトデータがバンドルされます。配置後、Deployer パネルで指定した最終的な配置フォルダを確認すると、次のファイルとフォルダが見つかります。
.wasm と .js ファイル。いくつかの JavaScript グルー コードを使用して、エンジンのランタイムを WebAssembly にコンパイルしたときの結果です。
.html ラッパー。エンジンのランタイム WebAssembly と JavaScript ファイルをロードし、プロジェクトを起動するように指示します。この既定のページは、Stingray ロゴが刻印されていますが、必要に応じて自由にカスタマイズしたり、ユーザ独自の HTML ラッパー ページを書き込むモデルとして使用できます。
scripts フォルダ。エンジンを適切に初期化するために必要な他の JavaScript ファイルが含まれています。このファイルは任意に設定できます。
content フォルダ。プロジェクトでコンパイルされ、バンドル済されたデータが含まれています。
ブラウザで Stingray プロジェクトを開始するのは、複数ステップのプロセスです。このシーケンスはユーザの介入なしで自動的に行われますが、シーンの背景で何が起こっているのかについて理解しておくと役に立ちます。
ダウンロード。このステップでは、ブラウザがエンジンのランタイム .wasm および .js ファイルをダウンロードしてコンパイルします。このステップでは、実際のプロジェクトデータはダウンロードされません。
該当のブラウザでプロジェクトを初めて実行する場合は、このステップの完了に多少時間がかかることがあります。通常、その後の起動は速くなります。
接続速度は、CPU が WebAssembly および JavaScript ファイルをコンパイルする際の速度に影響するだけでなく、このステップの処理時間にも影響します。
同じコンテンツを次回ダウンロードする時間を節約するために、Stingray はダウンロードしたコンテンツをブラウザの IndexedDB ローカル ストレージに保存します(これにより、特にリモート サーバ上のプロジェクトを実行している場合に処理を高速化することができます)。コンテンツに対する更新を想定通りに確認できない場合は、ブラウザのキャッシュをクリアすることが必要な場合があります。
リソースの同期。 このステップでは、プロジェクト データは、リモートからダウンロードされるか、またはブラウザの IndexedDB ローカル ストレージからロードされます。
ブラウザでプロジェクトを初めて実行したときは、すべてのファイルがブラウザの IndexedDB ローカル ストレージに存在するわけではないので、それらはすべてリモートからダウンロードされます。
その後の起動では、ほとんどの(すべてではない)ファイルが IndexedDB ローカル ストレージに存在するはずなので、基本的にはリモートからのダウンロードがなくなり、このステップは大幅に高速化されます。IndexedDB ローカル ストレージには、ブラウザごとに異なる制限が適用されるため、大きなファイルやプロジェクトは IndexedDB ローカル ストレージに適切に保存されない可能性があります。
リソースのロード。このステップでは、エンジンが実行され、プロジェクトのリソースがメモリに実際にロードされます。
このステップの完了にかかる時間は、プロジェクトのコンテンツの量とロードしているリソースの種類によって異なります。
たとえば、マテリアルはロードするのに時間がかかる傾向があるため、多くのマテリアルがあるプロジェクトでは待機時間が長くなります。 これは、これらのマテリアルを構成するシェーダがこのプラットフォームでランタイムにコンパイルされる必要があるためですが、後続の実行は、ブラウザにシェーダ キャッシュが組み込まれている場合には、通常、より高速になります。
ブラウザでプロジェクトを実行していない場合:
上記で指定したように、WebAssembly と WebGL 2.0 の両方をサポートするブラウザを使用していることを確認します。
Connections パネルから起動できない場合は、Browser path がブラウザの .exe を参照しているか(その他のファイルではないか)を再確認します。
ブラウザで、通常、開発ツールを開くには[F12]を押します。
開発者ツールの Console タブには、ブラウザでプロジェクトを開こうとしたときに発生したエラーがリストされます。また、ゲーム プロジェクトがログに書き込むメッセージもすべて表示されます。これは問題の発生箇所を診断するのに役立つ場合があります。
以下に、いくつかの既知のエラーとそれらの修正方法を説明します。
エラー: WebGL 2.0 コンテキストの作成に失敗しました。
解決法: 通常、これは、使用中の Web ブラウザが WebGL 2.0 をサポートしていない、この機能が環境設定で無効になっている、ビデオ カード ドライバが最新ではない、デバイスに複数のグラフィック アダプタが装備されていて正しくないアダプタが Web ブラウザで使用されている、のいずれかであることを意味します。いずれの場合でも、WebGL 2.0 がコンピュータ上で動作するかどうかを確認するために、常に他の Web サイトを試してみてください。
エラー: メモリが不足しています。
解決法: プロジェクトで要求されるメモリが多すぎます。これは、32 ビットのブラウザを使用するときにより頻繁に発生します。代わりに 64 ビットの Web ブラウザを試してください。また、テクスチャ圧縮を使用してプロジェクトのメモリ使用量を削減することを忘れないでください。そのほかにも役立つ方法が常に存在します。
別の問題が発生しましたか?上記の解決法が役に立ったかをフォーラムにご投稿ください。