【Phaser3】簡単なスプライトシートを作成する方法

Phaser3で簡単なスプライトシートを作成する方法 技術ネタ

Phaser3 でゲームを作成していると、スプライトシート(Texture Atlas)を使いたくなったのですが、このスプライトシート(json)を簡単に作る方法がわからなかったので調べてみました。

Unity を使えばできるようですが、無料でできる方法を紹介したいと思います。



gulp + 自作スクリプトで変換

やり方としては、gulpを使って変換します。
  → ①画像を結合: gulp.spritesmith
  → ②json変換: 自作スクリプト(gulpfile.js)

①の gulp.spritesmith ついては、ググるとたくさん出てくるので、そちらで詳細を確認してください。

②では、①で作成された json ファイルを、Phaser3 の load.atlas で読み込める形式に変換します。

文章で説明してもわかりにくいので、gulpのサンプルソースを以下に載せておきます。

サンプルソース(gulpfile.js)

var gulp = require("gulp");
var rimraf = require("rimraf");
var spritesmith = require("gulp.spritesmith");
var fs = require("fs");

gulp.task("sprite_create", function(done) {
  let spriteData = gulp.src("./dev/*.png").pipe(
    spritesmith({
      imgName: "images.png",
      cssName: "images.json"
    })
  );
  spriteData.img.pipe(gulp.dest("./img/"));
  spriteData.css.pipe(gulp.dest("./dev/"));
  done();
});

gulp.task("sprite_convert", function(done) {
  setTimeout(function() {
    let sprite_json = JSON.parse(fs.readFileSync("./dev/images.json", "utf8"));
    let new_json = { frames: [] };
    for (let key of Object.keys(sprite_json)) {
      let row = sprite_json[key];
      new_json.frames.push({
        filename: key,
        frame: {
          x: row.x,
          y: row.y,
          w: row.width,
          h: row.height
        }
      });
    }
    fs.writeFileSync("./img/images.json", JSON.stringify(new_json));
    rimraf("./dev/images.json", done);
    done();
  }, 1000);
});

gulp.task(
  "sprite",
  gulp.series("sprite_create", "sprite_convert", function(done) {
    done();
  })
);

サンプルソースの説明

ディレクトリ構成は以下の通りです。
├dev
│ ├画像ファイル(*.png)
│ ├ ︙
└img
  ├images.png  …… 結合された画像ファイル
  └images.json  …… 作成したAtlasJSONFile

dev ディレクトリ配下に、png画像を置き、 gulp sprite を実行すると、img ディレクトリに、images.png と images.json ファイルが作成されます。

後は、それを、Phaser3 で load.atlas(“hoge”, “images.png”, “images.json”) といったような感じで読み込めば使用できます。

なお、今回のサンプルソースでは、textureKey は ファイル名(拡張子なし)としています。

スクリプトでは1秒ウエイトを設定しています。
理由はわかりませんが、私の環境だと”sprite_create”タスクで作成したファイルが、後続タスクで存在しないエラーになるため1秒待ちを入れています。

最後に

ここでの説明は単純なスプライトシートのやり方です。
どんなものにでも対応できるかはわかりませんので、利用する際は注意願います。