2

HTML5 と JavaScript で簡単なゲームを作成しています。

ゲーム開始当初は、画像や音声の読み込みに時間がかかります。この間、ユーザーは待たなければならず、画面は不快に見えます。

だからここで私がやりたいことです

  1. 画像と音声の読み込み状況を確認します。

  2. リソースがロードされたときにロードの割合を増やし、それぞれ進行状況バーを増やします。

どこから始めればいいのか、本当に鍵がありません。案内してください。

4

3 に答える 3

6

ロード中のすべてのアイテムのロード ステータスを監視するのは困難な場合がありますが、簡単に言うと、次の手順を実行するのが最善の方法です。

  • まず、カウンターに追加してtotalResources、ゲームが期待するリソースの数を認識できるようにします。

  • 読み込みリソースに追加eventListenersし、loadingResourcesカウンターに追加します。loadingResourcesロードが成功または失敗した場合は、カウンターに追加します。

  • カウンターが等しくなったら、すべてのリソースが読み込まれたか、特定のファイルの読み込み中にエラーが発生しました。

このメソッドの問題点は、まれに、変数が時期尚早loadingResourcesに一致する可能性があることです。totalResourcesロードする必要のあるすべてのリソースがすでにロードを開始しているかどうかを確認するフラグを作成することで、これを修正できます。

ゲームの作成方法によっては、リソースの読み込みに失敗しても、ゲームの動作が実際に停止することはありません。たとえば、サウンドが正しくロードされない場合、サウンドは再生されません。リソースをロードする必要がある場合は、再試行または中止することができます。

％ベースのローディングに関しては、少し不確かです。HTML5 仕様にはプログレス バーが含まれていますが、リソースが複数ある場合は、リソースが読み込まれるにつれてバーがいっぱいになるのが最善の策かもしれません。

補遺:

サウンド ファイルを読み込むのは非常に面倒で、すべてのブラウザで完璧に仕上げることはほとんどできていません。これが私がそれについて行った方法です：

  1. まず、要素load()の読み込みを呼び出す関数に依存しないでください。audio代わりに、次のように強制的に再生します。

    sound.channels[i].volume = 0;

    sound.channels[i].play();

    (また、サウンドを再生するdurationには、サウンドが一時停止されているときに を 0 に近い値に設定します。)

  2. 複数のサウンドを同時に再生できるようにするため、複数のオーディオ要素 (channels上記の配列) を用意することをお勧めします。ただし、すべてのサウンド チャンネルがロードされるまで待つ必要はありません。1 つがロードされたら、ノードのクローンを作成し、サイレント プレイを再度強制して、遅延を回避します。

  3. canplaythroughイベントコールバックを使用してサウンドの準備ができているかどうかを確認する方が信頼性が高いという逸話があります。サウンドの読み込みに失敗した場合は、errorコールバックを使用してください。問題は、サウンド ファイルの読み込みに失敗する原因となる多くのエラーがあることです。

  4. <source>要素を使用して、複数のオーディオ形式を許可することを忘れないでください。

于 2012-08-14T12:20:03.507 に答える
1

私の2セントの価値を追加することを考えました。に加えて、現在のファイルが成功したか失敗したかに応じて、これらの各変数をインクリメントloadCounterすることをお勧めします。errorCounterループの最後で、これら 2 つの合計が に等しいかどうかを確認できますtotalCounter。

于 2012-08-15T05:48:37.243 に答える