2. Phaser Editor

はじめに

今回はプレイヤーのキャラをアニメーション付きで表示します。あまり考えずにPhaserに課金したのですが、せっかくなのでPhaser Editorも使ってみます。

参考リンク
https://docs.phaser.io/phaser-editor/intro/welcome

アセットの準備

アセットは下記のものを使用しました。 Ninja Adventure

1コマが16x16ピクセルで、左上から下に4コマで、下向きに歩くアニメーションになっています。

このファイルboy.pngは、public/assets/に入れておきます。

Asset Packとは

画像情報やアニメーション情報をまとめてアセットパック(Asset Pack)として扱います。アセットパックに画像をスプライトシートとして登録したり、アニメーションファイルを登録しておいて、コードから読み出して使います。アセットパックを使わずに直接、画像ファイルなどをコードから読み込むこともできますが、ゲームが複雑になるとアセットパックを使うほうが便利です。

注意：アセットパックは単なるjsonファイルであり、画像データやアニメーションデータそのものが含まれているわけではありません。

このアセットパックを簡単に作成できるツールがPhaser Editorです。画像ファイルやアニメーションをプレビューしながらGUI操作でアセットパックを作成できます。

Phaser Editor でアニメ作成

アセットパックにスプライトシートとアニメーションを追加します。

Phaser Editorを起動し、Open Projectでプロジェクトをクリック
boy.pngを選び、Asset Pack Entry → Import as spritesheetをクリック
public/assets/asset-pack.jsonに保存
Spritesheetからboyを選択し、Frame Width,Frame Heightを16に設定
左上のボタン(Create new content)からAnimations Fileを選択
public/assets/animations.jsonに保存
animations.jsonを選択し、Asset Pack Entry → Import as animationsをクリック
Blocksのboyを展開して、[00,04,08,12]を選択して Build 1 animationsをクリック
walk-down-というprefixを入力すると、walk-down-boyとして登録される
- 長いのでwalk-downにリネームした
Frame Rateを10に設定
同様に walk-up,walk-left,walk-right も登録

注意：keyはグローバルでユニークにすること(別アニメーションでwalk-downは使えない)

なんかクセがあるけど、手作業で書くより楽なのかな。月$10を払うかどうかは微妙なところ🤔

コード

main.ts

Physicsを使うために、configで以下を追加する。

// main.ts
const config: Phaser.Types.Core.GameConfig = {
  // 以下を追加する
  physics: {
    default: "arcade", // ← これが必要！
    arcade: {
      debug: false,
    },
  },
};

Start.ts

// src/scene/Start.ts
import Phaser from "phaser";

export default class StartScene extends Phaser.Scene {
  private player!: Phaser.Physics.Arcade.Sprite;

  constructor() {
    super({ key: "StartScene" });
  }

  preload() {
    this.load.pack("pack", "assets/asset-pack.json"); // アセットパックを読み込み
  }

  create() {
    this.player = this.physics.add.sprite(400, 300, "boy"); // boyは初期テクスチャ
    this.player.anims.play("walk-down"); // アニメーション表示
    this.player.setScale(4); // 16x16は小さすぎるので4倍に拡大
  }

  update(time: number, delta: number) {}
}

まとめ

とりあえずキャラをアニメーション付きで表示しました。次は上下左右に動かしたいですね。