概要

javascript のゲーム作成フレームワーク Phaser3 でスプライトシートを使ったマップの作成方法について。

環境を用意する

Phaser3 を簡単に試したい場合にはこちらのテンプレートを使うのがおすすめです。

npm install でライブラリをインストールしてから npm run start でローカルサーバーが立ち上がるようになっています。

スプライトシートの読み込み

スプライトシートはこちらを使用しました。

ダウンロードしたフォルダにある sokoban_tilesheet.png を public/assets フォルダ下へコピーします。

そして、src/scenes/HelloWorldScene.js を開いて preload() を以下のように書き換えます。

preload() {
  this.load.spritesheet("tiles", "assets/sokoban_tilesheet.png", {
    frameWidth: 64,
    startFrame: 0,
  });
}

マップデータの作成

次にマップデータを作成します。

先ほど読み込んだスプライトシートには各画像に右上から連番が振り当てられています。
この連番と配列を使ってどの画像をどこに表示するかを表現します。

create() を以下のように書き換えます。

create() {
  const level = [
    [97, 97, 100, 97, 97, 97, 97, 97],
    [97, 89, 89, 97, 89, 89, 89, 97],
    [97, 89, 6, 89, 89, 6, 89, 97],
    [97, 89, 6, 89, 8, 89, 89, 97],
    [97, 89, 28, 89, 89, 9, 89, 100],
    [97, 89, 89, 97, 89, 89, 89, 100],
    [97, 97, 97, 97, 97, 100, 100, 100],
  ];

  const map = this.make.tilemap({
    data: level,
    tileHeight: 64,
    tileWidth: 64,
  });
}

マップを画面に描写する

マップデータが用意できたので、これを画面に描写してみます。

create() {
  //..
  const tiles = map.addTilesetImage("tiles");
  map.createStaticLayer(0, tiles, 0, 0);
}

localhost:8000 を開くと以下のように表示されているはずです。

結果