🔖

Phaserでプレイヤーの周囲を回転する子機

2022/06/01に公開

JavaScript

Game

Phaser

tech

プレイヤーの周囲を回転する子機

プレイヤーはカーソルキーで上下左右に移動します。プレイヤーの上下左右に子機を配置します。子機はプレイヤーの移動に連動して移動します。子機はプレイヤーの周囲を回転しながら移動します

回転する子機を実現するポイント

コンテナを作成する
コンテナがプレイヤーの役割を果たす
コンテナの中央に親機を配置する
コンテナの上下左右に子機を配置する
上下左右の子機を回転させるために、コンテナを時計回りに回転させる
回転すると、中央の親機、上下左右の子機も向きが上向きではなくなる
コンテナの回転に連動して、中央の親機、上下左右の子機を反時計回りに回転させる

createメソッド

createメソッドはシーンの最初に実行するメソッドです。各メソッドを呼び出します。

mainScene.create = function() {
    // コンテナ作成
    this.createContainer();
    // ジェット機の作成
    this.createJets();
    // 子機の作成
    this.createChildJets();
};

コンテナの作成

プレイヤーの役割を果たすコンテナを作成します。コンテナですが、実質的にプレイヤーなので、this.playerにします。回転角度と回転量を意味する変数を事前に用意します

プレイヤーが操作しているのは、コンテナ。

mainScene.createContainer = function() {
    // 画面中央のX座標
    const x = this.game.config.width / 2;
    // 画面中央のY座標
    const y = this.game.config.height / 2;
    // 画像オブジェクトを保持するコンテナを作成して、プレイヤーにする
    this.player = this.add.container(x, y);
    // 左右の移動量
    this.player.dx = 5;
    // 上下の移動量
    this.player.dy = 5;
    // 回転角度
    this.player.angle = 0;
    // 回転量
    this.player.dangle = 3;
};

中央のジェット機作成

コンテナの中央に配置するジェット機を作成します。とりあえず、子機とは別にメソッドで作成します。プレイヤーはコンテナなので、親機と子機を分ける必要は全然ないのですが、中央に配置していてユーザからはプレイヤーに見えるはずなので、とりあえず分けておく。

mainScene.createJets = function() {
    // 中央のジェット機　座標はコンテナからの相対位置
    this.jets = this.add.sprite(0, 0, 'jets');
    this.jets.setDisplaySize(50,50);
    this.jets.setFrame(1);
    
    // プレイヤーを意味するコンテナに追加
    this.player.add(this.jets);

    this.input.keyboard.on('keyup', function(event) {
        this.jets.setFrame(1);
    }, this);
};

子機の作成

親機の上下左右に配置する子機を作成します。子機の位置はコンテナの中央からの相対座標に作成します。子機の座標を配列でデータとして持たせて、作成します。わかりやすくするために子機は赤色に変換します

mainScene.createChildJets = function() {
    // 子機の配置用データ
    // 座標位置はコンテナ位置からの相対座標
    const jetsData = [{
        x: 100, y : 0,
    },{
        x: -100, y : 0,
    },{
        x: 0, y : 100,
    },{
        x: 0, y :-100,
    }];
    
    // 子機を作成してプレイヤーを意味するコンテナに追加
    jetsData.map(jets => {
        const j = this.add.sprite(jets.x, jets.y, 'jets');
        j.setDisplaySize(50,50);
        j.setTint(0xff0000);
        j.setFrame(1);
        this.player.add(j);
    });
};

updateメソッド

プレイヤーの移動処理は省略。プレイヤー（コンテナ）を時計回りに回転させます。プレイヤーが保持するゲームオブジェクトを取り出して、反時計回りに回転させます。プレイヤーの角度から360を減算すると反時計回りの回転角度を得られる。これで、コンテナが回転することに伴って、子機が回転する。実際には、コンテナが時計回りに回転している。親機と子機は反時計回りに回転している

mainScene.update = function() {
    // 移動処理は割愛
    
    // プレイやを意味するコンテナの回転角度を加算
    // 時計回りに回転させる
    this.player.angle += this.player.dangle;
    this.player.setAngle(this.player.angle);
    
    // コンテナのゲームオブジェクトを取得
    const jets = this.player.getAll();
    // コンテナのゲームオブジェクトを反時計回りに回転させる
    // これで正面を向いているようにみえる
    jets.map(jet => jet.setAngle(360 - this.player.angle));
};

実行結果

カーソルキーでプレイヤーが移動します。親機、子機は連動して移動します。子機は時計回りに回転します