Phaser3メモ #Phaser

リファレンスマニュアル

検索窓でクラスやメソッドを検索できる。

これを使いこなすとはかどる。もっともTypeScriptを使うとVSCodeでドキュメントをポップアップ表示できるのでそちらの方がいいかも。

画像

座標

デフォルトでは画像の中心が指定座標に来るように表示する。setOrigin()を使うと基準座標を中心以外の場所に変更できる。グローバルに基準座標を変更する方法は無い。Phaser4では実装されるらしい。
一方、Phaser.Physics.Arcade.Bodyのbody.x body.yは左上の座標になる。

// bombは14x14ピクセルの画像なので、その中心を(7, 7)に表示する→画面左端に表示される
this.add.image(7, 7, "bomb");
// setOriginを指定すると画像のそこが指定座標に来るように表示する。(14, 0)だと左端のbombの右隣に表示される
// setOrigin([x], [y])  x, yは0〜1
this.add.image(14, 0, "bomb").setOrigin(0);

// これも画像の中心を指定座標に表示する
player = this.physics.add.sprite(800 - 16, 600 - 16, "dude");

Text

文字列を描画する。

// setScrollFactor: カメラによらず、常に画面の指定位置に表示
this.add.text(32, 16, 'YOU', { fontSize: '16px', fill: '#fff' }).setScrollFactor(0);

Image

Spriteとの主な違いは、Imageはアニメーションを持てない。アニメーション不要な画像であれば、Imageの方が軽量。

this.add.image(32 * 5 + 16, 32 + 8, 'coin');

Sprite

アニメーションを持てる。

// sprite(x, y, texture, frame)
player = this.physics.add.sprite(400, 300, 'dude');
// play(key [, ignoreIfPlaying])
player.anims.play('right', true);

TileSprite

繰り返しテクスチャを持つスプライト。

注意：キャンバスサイズより大きい TileSprite を作成すると大量のメモリが消費されます。 ゲームのマップ全体をスクロールする大きな繰り返し背景を作成する場合は、キャンバスと同じサイズの TileSprite を作成し、プレーヤーの移動に合わせて tilePositionX, tilePositionY プロパティをセットすることでテクスチャをスクロールします。

// tileSprite(x, y, 幅, 高さ, テクスチャキー [, フレームキー])
this.add.tileSprite(400, 300, 800, 600, "sky");

SpriteSheet

1枚の画像に複数の画像が並んで入っているものをスプライトシートと呼ぶ。主にアニメーション用に使う。
横一列に並ぶ形式、縦横に並ぶ形式、どちらも読み込める。
Atlasとの違いは、SpriteSheetは番号でフレームを識別する。Atlasは名前で識別する。

this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }), frameRate: 10, repeat: -1 });

this.load.atlas('explosion', 'assets/explosion.png', 'assets/explosion.json');
this.anims.create({ key: 'explosion', frames: this.anims.generateFrameNames('explosion', { prefix: 'explosion', end: 63 }), repeat: 0 });

物理演算

bodyのメソッド一覧

x, y

x: bodyの左の座標
y: bodyの上の座標

group, staticGroup

staticGroup: 　動かないオブジェクト。衝突はするが、衝突しても動かない。
group: 動くオブジェクト

platforms = this.physics.add.staticGroup();
enemies = this.physics.add.group();

カメラ

ワールド内のどの領域を表示するかを指定する
- setBounds: カメラが写せる領域（それゆえ決して写さない領域も）をワールド座標で設定
- setScroll(x [, y])：ワールド内のどこをカメラの左上とするかを設定
- setZoom: 何倍に拡大して表示するか
ビューポート：画面内のどの領域にカメラ映像を描画するかを指定する
- setViewport(x, y, w, h): ビューポートを設定
- setPosition(x, y): ビューポートの左上を設定
- setSize(w, h): ビューポートのサイズを設定

ユーティリティ

Phaser.Math.DegToRad(deg) 度をラジアンに変換
Phaser.Math.Between(min, max) ランダムな整数値を得る。min, maxともinclusive
Phaser.Math.Clamp(value, min, max) 指定範囲に収まるようにする
Phaser.Math.RND.shuffle(array) 配列をシャッフルする。引数のarrayそのものを変更する
Phaser.Math.RND.pick(array) 配列からランダムに要素を選択して返す
Phaser.Math.RND.integerInRange(min, max) ランダムな整数値を得る。min, maxともinclusive
Phaser.Math.RND.realInRange(min, max) ランダムな実数値を得る。

エフェクト系

tint

指定の色で染める。

// ダメージを受けたときに赤で染める
player.setTint(0xff0000);

setTintは色の乗算なのに対し、setTintFillは色の置き換えなので、影絵のようになる。

Tween

Tween は「Between」が由来な通り、開始時の情報と終了時の情報を入力として、
途中の経過状態を補間して表現する方法です。
https://qiita.com/Cova8bitdot/items/30e4345ba23f51c77e6d

ちょっとした動きのエフェクトのこと。Examplesを見るのが早い。
https://phaser.io/examples/v3/category/tweens

Particle

ParticleEmitterによってランダムに放出されるParticleエフェクト。
Examplesを見るのが早い。