なぜ正確に描画されなかった？

前回まで、GameとGameMapを作り上げて、画面描画が出来そうな感じでした。

しかし、実際にpnpm tauri devで実行したウィンドウにはタイルは描画されていませんでした。

なぜなのでしょうか。

画像の読み込みが終わってない？

今回の肝はGameMapクラスのgenerateMapTilesメソッドです。

abstract class GameMap {
  ...

  protected generateMapTiles() {
    for (let l = 0; l < this.tiles.length; l++) {
      if (!this.realtiles[l]) this.realtiles[l] = [];
      for (let t = 0; t < this.tiles[l].length; t++) {
        const tile = this.tiles[l][t];
        fakeTileToRealTile(tile.tile).then((realTile) => {
          this.realtiles[l][t] = {
            x: tile.x,
            y: tile.y,
            tile: realTile,
          };
        });
      }
    }
  }

  ...
}

このメソッドでMapTileからDrawableTileに変換しています。
答えは単純で、fakeTileToRealTile関数が非同期処理を行っているためです。

いやいや、thenを使って処理を行うから動くんでしょ？って思われるかもしれません。

非同期処理の「投げっぱなし」とは？

Day 7 で以下のように書いております。

async関数をawaitを付けずにそのまま実行すると、本当の値(今回ならTile)ではなくPromiseが返ってきます。
また、awaitを付けないと、処理完了まで止まることはなく、どんどん次の処理へと進んでいってしまいます。

これは、thenだろうと同じです。
この、async関数なのにawaitを使わないせいで、処理が止まらずに次の処理へと進んでしまうことを「非同期処理の投げっぱなし」と言います。

fakeTileToRealTile(tile.tile).then((realTile) => {
  this.realtiles[l][t] = {
    x: tile.x,
    y: tile.y,
    tile: realTile,
  };
});

このコードは、fakeTileToRealTile関数が終わったらthen内の処理を実行するということです。
この時、realTileはPromise<RealTile>ではなく、RealTileになります。これは、thenを使ったためにPromiseが解決されているからです。
しかしながら、「終わったらthen内の処理をしてね」ということが書いてあるだけで、それを理解したforループは終わるのは待たずに次のループへと進みます。

最終的にこの関数では、then内の処理が全て終わることはなく、ループが終わり、generateMapTilesメソッドが終了してしまいます。
そのため、this.realtilesはgenerateMapTilesメソッドが終了したときには不完全な場合があります。

その不完全な状態でdrawを行ったらどうなるかはわかりますよね～...

では、どうすればいいのでしょうか？

`Promise`を使ってみよう

Promiseは、非同期処理を行うためのクラスです。
今までのPromise<T>と同じPromiseです。
このクラスを使うことで、非同期処理をより高度に扱うことが出来ます。

では、もう早速答えを指し示してしまいましょう。

abstract class GameMap {
  ...

  protected generateMapTiles() {
    let loadable: number = 0;
    let loaded: number = 0;

    for (let l = 0; l < this.tiles.length; l++) {
      if (!this.realtiles[l]) this.realtiles[l] = [];
      for (let t = 0; t < this.tiles[l].length; t++) {
        const tile = this.tiles[l][t];
        loadable++;
        fakeTileToRealTile(tile.tile).then((realTile) => {
          this.realtiles[l][t] = {
            x: tile.x,
            y: tile.y,
            tile: realTile,
          };
          loaded++;
        });
      }
    }

    return new Promise((resolve) => {
      const interval = setInterval(() => {
        if (loaded === loadable) {
          clearInterval(interval);
          resolve();
        }
      }, 100);
    });
  }

  ...
}

まず、読み込まれるべきタイルの数をloadableという変数で管理します。
そして、then内で読み込みが終わったらloadedを増やします。
つまり、loadableとloadedが一致したら全てのタイルが読み込まれたということです。

return new Promiseとありますが、これはPromiseインスタンスを返すということです。
Promiseは、resolveとrejectを引数に取るコールバック関数を引数に取ります。
そのうちrejectは省略可能です。

コールバック関数の中身

const interval = setInterval(() => {
  if (loaded === loadable) {
    clearInterval(interval);
    resolve();
  }
}, 100);

このresolveとrejectは、指定したコールバック関数の中で呼び出される関数になります。
そのうち、resolveを呼び出すと、処理を解決したことにし、Promiseを完了させます。
rejectは、処理が何らかの理由で失敗してしまったことにして、Promiseを失敗させます。(呼び出し側でエラーとなる)

今回は、setIntervalという、インターバルで処理を行うものを使って、100msごとに確認しています。
loadedとloadableが一致したら、clearIntervalでインターバルの処理を終了させて（もうこれ以降はインターバル処理が行われなくなるものであって、即座にすべてのインターバル処理が停止するようなものではない。）、resolveを呼び出してPromiseを完了させます。

「Promiseが完了」すると、このgenerateMapTilesを呼び出した側でいうと、await generateMapTiles()が終了し、次の処理へと進むことが出来ます。

じゃあそれを反映させてメインを書き直そう

もう一度、お試しのためだけにgenerateMapTilesをpublicにしましょう。

src/main.ts

import { Game } from "./lib/game";
import { SampleMap } from "./maps/sample";

let game: Game;

const main = async () => {
  game = new Game();
  game.changeMap(SampleMap);
  await game.map?.generateMapTiles();
  game.map?.draw();
};

window.addEventListener("DOMContentLoaded", () => {
  main();
});

ちなみに、このコードにおけるmain関数もasync関数になります。
window.addEventListener("DOMContentLoaded", () => { ... })の中でmain関数を呼び出していますが、awaitは付けず、投げっぱなしで処理しています。
投げっぱなしでも問題がないのは、それ以降に処理がないからです。

これで、タイルが正しく描画されるはずです。

$ pnpm tauri dev

まとめ

少し高度な非同期処理を行うために、Promiseを使ってみました。

ちなみになんですが、「そもそもfakeTileToRealTileをawaitで呼び出せば、うまくいくのでは？」とお思いでしょうか。
確かに、以下のコードでも描画は出来ます。

abstract class GameMap {
  ...

  protected async generateMapTiles() {
    for (let l = 0; l < this.tiles.length; l++) {
      if (!this.realtiles[l]) this.realtiles[l] = [];
      for (let t = 0; t < this.tiles[l].length; t++) {
        const tile = this.tiles[l][t];
        this.realtiles[l][t] = {
          x: tile.x,
          y: tile.y,
          tile: await fakeTileToRealTile(tile.tile);,
        };
      }
    }
  }

  ...
}

一方で、これではfakeTileToRealTileの処理が終わるまで次の処理に進みません。
つまり、1タイルごとに画像を読み込み、処理を進めていくことになります。

今回のPromiseを使ったコードであれば、全てのタイルの読み込み処理を一度に行うため、並列的に画像読み込み処理が行われます。
そのため、より素早くタイルを読み込むことが出来るのです。多分。
(あんまりI/Oには詳しくないのだ...)