Phaserで単純な画像の回転

画像の単純な回転処理

画像オブジェクトを中央に配置して、画像が時計回りに回転します

画像の読み込み

mainScene.preload = function() {
    // スプライト画像の読み込み
    this.load.spritesheet('jets', 'assets/images/jets.png', {frameWidth: 64, frameHeight: 64});
};

createメソッド

ジェット機を作成します

mainScene.create = function() {
    // 画面中央のX座標
    this.centerX = this.game.config.width / 2;
    // 画面中央のY座標
    this.centerY = this.game.config.height / 2;

    // ジェット機の作成
    this.createJets();
};

画面中央に表示

ジェット機を作成します。回転を表す「this.jets.angle」を作成します

mainScene.createJets = function() {
    // ジェット機の作成
    this.jets = this.add.sprite(this.centerX, this.centerY, 'jets');
    this.jets.setDisplaySize(50,50);
    this.jets.setFrame(1);
    this.jets.angle = 0;
};

updateメソッド

回転を呼び出す

mainScene.update = function() {
    this.rotateJets();
};

単純な回転処理

ジェット機が回転します

mainScene.rotateJets = function() {
    // ジェット機が時計回りに回転する
    this.jets.angle++;
    this.jets.setAngle(this.jets.angle);
};

実行結果

完成版

https://github.com/hiroshees/phaser-game-sample/blob/main/src/work13.html