Phaser3の豆知識

■ポイント：画像アセットが既にロードされたかどうかの確認方法

画像アセットをロードする時で、この画像アセットが既にゲームオブジェクトに割り当てられていたかどうかを確認する必要があります。
画像アセットがTextureManagerに保存されていますので、Textureインスタンスとしてアクセスできます。

・方法１

var tex = game.textures.get('key');

keyに一致するTextureManagerからTextureを返します。
キーが未定義の場合、__DEFAULTテクスチャを返します。キーが与えられたが見つからない場合、__MISSINGテクスチャを返します。

・方法２

var　isExist = game.textures.checkKey('key');

指定されたtextureのkeyをチェックし、keyが既に使用されている場合はconsole.warnをスローし、falseを返します。
console.warnを避けたい場合は、TextureManager.exists代わりに使用してください。

■ポイント：Spriteクラスを作成する時の必須な処理

以下は、新しいSpriteクラスを作成しておきます。

class Player extends Phaser.Physics.Arcade.Sprite {
  constructor(scene, x, y, texture, frame) {
    super(scene, x, y, texture, frame);
    this.scene = scene;
    //シーンのDisplayListとUpdateListにゲームを追加する
    this.scene.add.existing(this);
    //Arcade物理ボディをゲームオブジェクトに追加する
    this.scene.physics.world.enable(this);
    this.setTexture(texture, frame);
    this.setPosition(x, y);
    this.setSize(1, 1);
    this.setOffset(0, 0);
  }
}

・this.scene.add.existing(this);

上記ステップで、シーンのDisplayListとUpdateListに、このゲームを追加しておきます。
このステップが漏れたら画像は画面に表示することができないでしょうか。

・this.scene.physics.world.enable(this);

上記のステップで、物理エンジンのボディをゲームに追加しておきます。
このステップが漏れたら画像におけるいろいろな設定や制御ができないはずです。

■ポイント：衝突処理の実現方法

・衝突ファンクション(collider)のコールバック関数で衝突処理を実行

create() {
player = this.add.sprite(100, 100, 'image1');
//ライルマップから川レイヤーを作ります
river = this.map.createStaticLayer("River", this.tileset, 0, 0);
//属性設定(collision=true)から、衝突しようとするタイルを決定しておく
river.setCollisionByProperty({ collision: true });
//衝突発生
scene.physics.add.collider(player, river, this.hitRiver, null, this);
}
hitRiver() {
//ここで、衝突処理を実施する
}

・衝突対象がオーバーしたかどうかを判断してから衝突の処理を実行

create() {
    sprite1 = game.add.sprite(100, 200, 'atari1');
    sprite1.inputEnabled = true;
    sprite1.input.enableDrag();
    sprite2 = game.add.sprite(400, 400, 'atari2');
    sprite2.inputEnabled = true;
    sprite2.input.enableDrag();
    text = game.add.text(16, 16, 'Drag the sprites. Overlapping: false', { fill: '#ffffff' });
}
update() {
    if (checkOverlap(sprite1, sprite2)){
        text.text = 'Drag the sprites. Overlapping: true';
    } else {
        text.text = 'Drag the sprites. Overlapping: false';
    }
}
checkOverlap(spriteA, spriteB) {
    var boundsA = spriteA.getBounds();
    var boundsB = spriteB.getBounds();
    return Phaser.Rectangle.intersects(boundsA, boundsB);
}

・スプライトの座標によって、タイルマップに対応しているタイルオブジェクトを取得できるかどうかから、衝突処理を実行

create() {
    var tile = ropeLayer.getTileAtWorldXY(monkey.x, monkey.y);
    if (tile.index == 1) {
      this.hitRope();
    }
}
hitRope() {
    //ここで、衝突処理を実施する
}

ロープレイヤーから、モンキーの座標のところにあるタイルを取得してみましょう。
タイルオブジェクトが作られていたら、衝突が発生した。タイルが取得できない(Null)場合は、衝突が発生しませんでした。

■ポイント：背景の画像がずっと横移動する方法

これは、タイルスプライトを使用して、「tilePosition」を移動することで実行できます。

function preload () {
   game.load.image('bgtile', 'bgtile.jpg');
}
function create () {
   this.bgtile = game.add.tileSprite(0, 0, game.stage.bounds.width, game.cache.getImage('bgtile').height, 'bgtile');
}
function update () {
   this.bgtile.tilePositionX -= 1;
}

縦移動する吐合は、tilePositionYを使います。