【Phaser】Phaser 3での各種記述や変更点メモ

2018年7月25日2019年6月12日JavaScript

Phaser 3から変更点が多く、２までとの互換性がなくなったと言っても良い感じですね

世にある２までのコードはPhaser 3では間違いなく動かない

Phaser 3でのメモ書きになります

基本テンプレート

let config = {
  type: Phaser.AUTO,
  parent: 'phaser-example',
  width: 800,
  height: 600,
  physics: {
    default: 'arcade',
    arcade: {
      debug: false,
      gravity: { y: 0 }
    }
  },
  scene: {
    preload: preload,
    create: create,
    update: update
  }
};

let game = new Phaser.Game(config);

function preload() {
}

function create(){
}

function update(){
}

多くの基本設定をconfigで設定できる様になりました

new Phaser.Game()で設定を読み込み、sceneに記述した関数が順番に実行されます

画像の読み込み処理

単一画像

this.load.image('block', 'src/block.jpg');

スプライトシート

this.load.spritesheet('player', 'src/player.png',{frameWidth: 20, frameHeight: 20});

frameWidthとframeHeightは区切りが固定値の場合

画像オブジェクトの表示

単体画像の表示

player = this.physics.add.image(40, 100, 'player');

スプライト画像の表示

player = this.physics.add.sprite(40, 100, 'player');

オブジェクトのアンカー（基準点）設定

player.setOrigin(0.5, 0.5);

オブジェクト拡大・縮小

player.scaleX = player.scaleX * 3;
player.scaleY = player.scaleY * 3;

アニメーションフレーム処理

アニメーション指定

this.anims.create({
        key: 'walk',
        frames: this.anims.generateFrameNumbers('スプライトシート名', { start: 0, end: 2 }),
        frameRate: 10,
        repeat: -1
    });

動かす

player.anims.play('walk', true);

オブジェクトクループの設定方法

groupA = this.physics.add.group();
var enemy = groupA.create(x, 16, 'enemy');

複数のオブジェクトをコンテナに

container()は初期位置とオブジェクトを指定

container = this.add.container(100, 100, [obj,hpBar]);

オブジェクトに設定してある位置や角度などの情報は作成したコンテナを親にした関係になり、重力や物理演算などの挙動もコンテナ単位で設定可能

this.physics.world.enable(container);
container.body.setGravityY(300).setBounce(0.5).setCollideWorldBounds(true);

ピクセルのアンチエイリアス処理（ぼやける場合）

※canvas描写はCSSのimage-rendering: pixelated;は効かない

Phaser2までは「roundPixels = true」でピクセル表示できたけどPhaser3では今の所効かない

configにrender: {}を追加して「pixelArt: true」を設定すると出来た

 render: {
pixelArt: false
}

キーボード入力

createCursorKeysを使ったタイプ

function create(){
    cursors = this.input.keyboard.createCursorKeys();
}

function update(){
    if (cursors.left.isDown){
　　　//処理
    }
}

KeyCodesを利用するタイプ

function create(){
　this.keyA = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A);
}

function update(){
　if(this.keyA.isDown){
   player.x -= 5;
 }

キャラクターの接地判定

if(player.body.touching.down){
//接地している
}

キャラクターのジャンプ

this.keyW = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W);

body.touching.downで接地しているか判定

if(this.keyW.isDown && player.body.touching.down){
player.setVelocityY(-200);
}

プレイヤー追従

this.cameras.main.startFollow(player, true);

重力の反映設定

player.body.setGravityY(300);

重力の反映設定時にかかる摩擦設定

player.setBounce(0.2);

物理演算の対象とする

groundというオブジェクトに持たせる場合

this.physics.world.enable(ground);

衝突時にオブジェクト同士の物理演算を加えるか設定

this.physics.add.collider(player, block);

物理演算の対象とするが自身は動かさない

※そのままだとプレイヤーが乗るとプレイヤーが持つ重力で落ちていくため

ground.body.immovable = true;

function関数を書いた場合のthis

func(this);
function animationSetup(getThis){}