Phaser 3 : 迷路ゲームを作る③ カメラのズーム

引き続き迷路ゲームを作っていきます。
今回は迷路を移動できるプレイヤーオブジェクトを作ってみます。 gpnotes.hatenablog.jp

画面からキャンバスサイズ以上のスプライトを作成する

迷路が画面サイズだとせせこましくなるので、大き目の迷路を作っておきます。
tileSizeを40、mazeWidthとmazeHeightを画面幅の二倍に設定します。

MyScene1
~~
//迷路の道幅
public tileSize: number = 40;

Preload(){
~~
//大きいステージを作るために幅と高さを2倍に
this.mazeWidth = this.sys.canvas.width *2/ this.tileSize 
this.mazeHeight = this.sys.canvas.height *2/ this.tileSize 
~~
}

generateTextureはデフォルトでは画面幅でしかテクスチャを作成してくれませんが、引数を指定するとキャンバスに描画されていない部分もきちんとテクスチャ化してくれます。

//テクスチャの作成
this.graphics.generateTexture("maze",this.sys.canvas.width*2,this.sys.canvas.height*2);

実行すると大きくなった迷路が取得できます。 f:id:Phaser_3:20181205145106p:plain

camera.zoomとcamera.centerOnでカメラを調節する

全体を映すためにカメラをズームアウトしてみます。
camera.zoomでカメラのズーム率を変更できます。
今回は迷路の二辺を画面サイズの二倍で作っているので、ズーム率に0.5を指定します。
f:id:Phaser_3:20181205145533p:plain
ズームはされたものの、中心がずれてしまっているので、camera.centerOnを使って中心を指定します。
camera.centerOnの引数に迷路の中心点(800,600)を指定します。

this.cameras.main.centerOn(800, 600);

これでカメラが迷路全体を映せるようになりました。
前回の結果と大差ないように見えますが全体の大きさが二倍になっています。 f:id:Phaser_3:20181205150013p:plain

カメラをプレイヤーに追従させる

迷路内を移動できるプレイヤーを作成してみます。
移動の制御には前回のブロック崩しで作成したコントローラーシーンを流用します。

MyScene1{
~~
//プレイヤー
public player: Phaser.Physics.Matter.Image;

//自機の移動速度
public speed: number = 10;

//入力検知シーンの設定
public controller: InputManager;
~~
preload(){

//InputManagerシーンを実行
this.scene.launch("InputManager")
this.controller = this.scene.get("InputManager") as InputManager;
~~
//球を画面中央に配置
this.player = this.matter.add.image(50, 50, 'block');
this.player.setScale(0.5, 0.5);
this.player.setTint(0x1a1a1a, 0x1a1a1a, 0x1a1a1a, 0x1a1a1a);
this.player.setIgnoreGravity(true);
}

update(){
//プレイヤーの移動処理
this.player.angle += this.controller.xRotate * this.speed;
this.player.setVelocity(this.controller.xAxis * this.speed, this.controller.yAxis * this.speed);
}

f:id:Phaser_3:20181205150648g:plain

zoomとcenterOnを用いズームイン/アウトを切り替える機能とプレイヤーへのカメラ追従機能を付けます。

update() {

    //プレイヤーの移動処理
    this.player.angle += this.controller.xRotate * this.speed;
    this.player.setVelocity(this.controller.xAxis * this.speed, this.controller.yAxis * this.speed);

    if (this.zoom) {
        this.cameras.main.centerOn(this.player.x, this.player.y);
    }

    if (this.input.activePointer.justDown) {
        if (this.zoom) {
            //全体カメラ
            this.cameras.main.zoom = 0.5;
            this.cameras.main.centerOn(800, 600);
        } else {
            //自機中心カメラ
            this.cameras.main.zoom = 1;
            this.cameras.main.centerOn(this.player.x, this.player.y);
        }

        this.zoom = !this.zoom

    }

}

これで迷路内を動くプレイヤーに追従するカメラができました。 f:id:Phaser_3:20181205151304g:plain

今回のソースはこちらになります。

http://firestorage.jp/download/8648795eb14f5c5e89f642568d0dc9ace21b38f1