web-dev-qa-db-ja.com

Phaser.io 3：シーン内のゲームサイズを取得する

簡単な質問のようですが、解決できません。

ES6クラスでPhaser.io 3 HTML5ゲームフレームワークを使用しており、実際の「ゲームサイズ」（またはキャンバス/ビューポートサイズ）を把握して、オブジェクトを画面の中央に配置できるようにしています。

class Scene1 extends Phaser.Scene {
    constructor(config) {
        super(config);
    }

    preload() {
        this.load.image('ship', 'assets/spaceship3.png');
    }

    create() {

        let ship = this.add.Sprite(160,125, 'ship');
        // Here I need to figure out the screen width / height:
        // ---> How do I achieve that?
        ship.setPosition(width / 2, height / 2);
    }
}

実際のビューポート/キャンバスのサイズを読み取るか計算する方法が見つかりませんでした。ヒントはありますか？

phaser-framework
6
Alex Schenkel

デフォルトのカメラを使用できます。

ship.setPosition(this.cameras.main.centerX, this.cameras.main.centerY);

CameraのPhaser 3 APIドキュメント から：

デフォルトでは、カメラはゲームと同じサイズで作成されますが、カメラの位置とサイズは任意に設定できます。

1
James Skemp

シーンでは、preload()およびcreate()メソッド（コンストラクターではnot）で、this.sys.game.canvasを使用してキャンバス要素にアクセスできます。キャンバスサイズを取得するには、次のようにします。

create() {
    let { width, height } = this.sys.game.canvas;
}

私の部分では、キャンバスへのアクセスを容易にするために次のコードを追加したいと思います。

preload() {
    this.canvas = this.sys.game.canvas;
}
2
yolenoyer