Phaser3 でスペースを押したときにスプライトが落下するサンプル

• 概要
• 環境
• サンプルコード
• 動作確認
• Tips
• 最後に

概要

Phaser3 ではないっぽかったので作ってみました

環境

• macOS 10.13.2
• Phaser 3.4

サンプルコード

var score = 0;
var scoreText;

var config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 300 },
      debug: false
    }
  },
  scene: {
    preload: preload,
    create: create,
    update: update,
  }
};

var game = new Phaser.Game(config);

function preload () {
  this.load.image('star', '../assets/star.png');
}

function create () {
  // key
  space = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
  cursors = this.input.keyboard.createCursorKeys();
  // mark
  mark = this.physics.add.sprite(0, 0, 'star');
  mark.disableBody(true, false);
  // star
  stars = this.physics.add.group();
}

function update() {
  // key
  if (Phaser.Input.Keyboard.JustDown(space)) {
    fallStar();
  }
  // cursors
  if (cursors.left.isDown) {
    mark.x += -4
  } else if (cursors.right.isDown) {
    mark.x += 4
  }
}

function fallStar() {
  // 最上段の真ん中に星を生成
  var star = stars.create(mark.x, 0, 'star');
  // 反発係数を設定
  star.setBounce(0.1);
  // 壁と衝突する設定
  star.setCollideWorldBounds(true);
  // 星に X, Y 軸に対して力を与える
  star.setVelocity(0, 20);
  // 重力の影響を受ける
  star.allowGravity = true;
}

動作確認

左右のカーソルで星を移動させスペースを押すと星が次々に落下します

Tips

create メソッドの最後に

• this.physics.add.collider(stars, stars);

を追加して星同士が衝突するようにしてみたのですが一定の星が上に積み上げられると星が重なってしまいました
本当は重ならないようにしたかったのですがやり方がわからず断念しました

最後に

Phaser3 でキーを押した時にスプライトが落下するサンプルを紹介しました
Phaser3 はドキュメントがまだ未成熟なので console.log などを駆使してプロパティなどを探っていく必要がある気がします