ブラウザゲームを作ってみよう(その15:サンプルゲーム作成その8)

はじめに

その14ではサウンド再生を行いました。

ローディングについて

サウンドファイルを追加したことで読み込むファイルが増えたため、起動前にファイルのローディング処理を行いたいと思います。
イメージとしては以下になります。

ファイルの読み込みを全て完了するとタイトル画面へ遷移するというイメージになります。

読み込み完了のチェックについて

読み込むファイルは画像ファイルとサウンドファイルですが、それぞれ読み込み完了のチェック方法が少し異なります。

• 画像ファイル
  読み込みが完了すると、onloadメソッドが実行されるのでそれの実行回数をカウントすれば可能です。

• サウンドファイル
  再生可能になると「readyState」プロパティが「4」になるのでそれをカウントすれば可能です。

具体的なソースは下記になります。

読み込み完了チェック

// ローディング用変数
let loadingFileCnt;
const loadingFileMax;

loadingFileCnt = 0;
loadingFileMax = imgNames.length + sndNames.length;

// ローディング画面ループ
function loadingLoop()
{
    let i;

    // 画像ファイル読み込み完了数カウント
    for( i=0; i<img.length; i++ ){
        img[i].onload = function() {
            loadingFileCnt++;
        }
    }

    // サウンドファイル読み込み完了数カウント
    for( i=0; i<audioObject.length; i++ ){
        if( audioObject[i].readyState == 4 && !isAudioLoad[i] ){
            loadingFileCnt++;
            isAudioLoad[i] = true;
        }
    }

    drawText( "ファイルロード中 "+loadingFileCnt+" / "+loadingFileMax+"", 0, 0, '#000000', 12, TEXT_HCENTER | TEXT_VCENTER );

    if( loadingFileCnt >= loadingFileMax ){
        titleInit();
    }
}

■ポイント

• 画像ファイルとサウンドファイルのファイル総数を変数「loadingFileMax」に保存しておきます
• 画像ファイルの読み込み数は前述のonloadメソッドでカウントします
• サウンドファイルの読み込み数は「readyState=4」でカウントするのですが、一度だけカウントしたいためisAudioLoad変数も合わせてチェック、更新します
• 読み込んだファイル数(loadingFileCnt)が、読み込みファイル総数(loadingFileMax)に達したらタイトル画面へ遷移します

サンプル

今までのサンプルにローディング処理を追加しました。

See the Pen Qiita26_sample01 by nojima (@noji505) on CodePen.

最後に

今回はローディング処理を追加しました。
こういう汎用的な処理は、一度作成しておくと他のゲームでも使い回せるので便利です。