💭

Phaserでポイントライト

2022/06/09に公開

JavaScript

Game

Phaser

tech

プレイヤーを追跡するポイントライト

プレイヤーはカーソルキーで上下左右に移動します。プレイヤーを追跡して、周囲を照らすポイントライトを配置します。その他にも、シーン内を移動するライトを2個配置します

ポイントライトの利用はv3.50.0以上で対応しています

ポイントライト

周辺を照らすことができるライト
もともと存在しているLightクラスよりも高速に処理できる
銃の発射エフェクトなどにも対応可能なライト

ポイントライトの作成

以下の処理で簡単に作成可能

const ポイントライトオブジェクト = this.add.pointlight(x, y, 色, 半径, 強さ, 減退);

ポイントライトクラスについて

createメソッド

背景画像を設定します。また、画面全体を覆うカバーのようになる四角形を画面全体に配置します。四角形は画面全体を暗くする役割を担います。四角形を黒色にしますが、fillStyleの第2引数で透過させることで、背景画像が透けて見えるようにします

mainScene.create = function() {
    // 背景画像
    this.background = this.add.tileSprite(0,0, this.game.config.width, this.game.config.height, 'background');
    this.background.setOrigin(0, 0);
    
    // 背景画像を覆いつくす四角形
    const rect = new Phaser.Geom.Rectangle(0, 0, this.game.config.width, this.game.config.height);
    const graphics = this.add.graphics();
    // 四角形を透過する
    graphics.fillStyle(0x000000, 0.8);
    graphics.fillRectShape(rect);

    // ジェット機の作成
    this.createJets();
    // プレイヤー用ライトの作成
    this.createLight();
    // その他のライト作成
    this.createOtherLights();
};

プレイヤー用ポイントライトの作成

画面中央にポイントライトを作成します。ライトの色、半径、強さを調整します。透過しないと、プレイヤーがライトで見なくなるので、setAlphaで透過します。この調整が難しい。

プレイヤーに連動した動きは、updateメソッドで実現します

mainScene.createLight = function () {
    // 画面中央のX座標
    const x = this.game.config.width / 2;
    // 画面中央のY座標
    const y = this.game.config.height / 2;
    
    // プレイヤー用ライト作成
    this.light = this.add.pointlight(x, y, 0xffffff, 400, 0.8);
    this.light.setAlpha(0.1);
};

その他のライト作成

赤色ライト、緑色ライトを作成します。これは、ただの動きを実現するためだけのライトです

mainScene.createOtherLights = function () {
    // 赤いライト作成
    this.rLight = this.add.pointlight(100, 100, 0xff0000, 200, 1).setAlpha(0.1);
    this.rLight.dx = 10;
    // 緑のライト作成
    this.gLight = this.add.pointlight(100, 300, 0x00ff00, 200, 1).setAlpha(0.1);
    this.gLight.dx = 10;
    this.gLight.dy = 20;
};

プレイヤーに合わせて移動するポイントライト

updateメソッドでプレイヤーの移動に合わせて、ポイントライトの座標をプレイヤーの座標に連動します。

mainScene.update = function() {
    this.light.x = this.player.x;
    this.light.y = this.player.y;    
};

赤色ライトの左右移動

    // 赤いライトの左右の移動
    if(this.rLight.x > this.game.config.width || this.rLight.x < 0) {
        this.rLight.dx *= -1;
    }
    this.rLight.x += this.rLight.dx;
};

緑色ライトの上下左右の移動

mainScene.update = function() {
    // 緑のライトの全方向の移動
    if(this.gLight.x > this.game.config.width || this.gLight.x < 0) {
        this.gLight.dx *= -1;
    }
    if(this.gLight.y > this.game.config.height || this.gLight.y < 0) {
        this.gLight.dy *= -1;
    }
    this.gLight.x += this.gLight.dx;
    this.gLight.y += this.gLight.dy;

};

実行結果

画面全体は黒色でおおわれています。カーソルキーでプレイヤーが移動します。白色のポイントライトがプレイヤーに連動して移動します。プレイヤーの周辺のみがポイントライトにより照らされており、背景画像が透けて見えます。その他のライトはおまけ。

https://youtu.be/f63esUKkgXM