JavaScript»ゲーム制作»リソースの読込 2つ以上の画像をロードする(Promiseを使用)

ファイル名: js-game/quest_00943.html

下のソースコードをうつして、草原そうげんとキャラクターの画像がぞうを読み込み、いっしょに表示ひょうじしてください。

画像がぞうは下のリンクからダウンロードできます。

画像をダウンロード

画像をダウンロード

ソースコード

class Game {

  constructor() {
    this.assetPromises = [];
    this.assets = {};
  }

  addImage(name, url) {
    const img = new Image();
    img.src = url;
    const promise = new Promise((resolve, reject) => {
      img.addEventListener("load", e => {
        this.assets[name] = img;
        resolve(img);
      });
    });
    this.assetPromises.push(promise);
  }

  loadAssets() {
    return Promise.all(this.assetPromises);
  }
}

const game = new Game();
game.addImage("mapchip", "array-map.png");
game.addImage("character", "pipo-charachip022.png");
game.loadAssets().then(() => {
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  for (var y = 0; y < 10; y++) {
    for (var x = 0; x < 10; x++) {
      context.drawImage(game.assets.mapchip, 40, 0, 40, 40, x * 32, y * 32, 32, 32);
    }
  }
  context.drawImage(game.assets.character, 0, 0, 32, 32, 96, 96, 32, 32);
});

解説

Promiseは、処理が完了するのを待たずにいったん仮の状態を返します。画像の読み込み処理が成功すると、resolveによってimgが返されます。

 

thenで囲まれた関数は、その前の処理が完了してから実行されます。このソースコードの場合は、loadAssets内のPromise.all(this.assetPromises)で、配列assetPromises内のpromiseがすべて完了状態になっているのを確認してから、キャンバスに表示する関数を実行します。