javascript 如何在Phaser中使用一个场景的摄像机

jpfvwuh4  于 2023-03-16  发布在  Java
关注(0)|答案(1)|浏览(171)

我有一个 Bootstrap ,我用来设置我的相机

import Phaser from 'phaser'

export default class Bootstrap extends Phaser.Scene {
  private camera: Phaser.Cameras.Scene2D.Camera | null = null
  private zoomLevel: number = 1
  constructor() {
    super('Bootstrap')
  }

  private resizeCamera() {
    // Responsively set camera size to window size
    const width = window.innerWidth;
    const height = window.innerHeight;
    
    this.zoomLevel = (width > 600) ? 1.5 : 1;

    this.cameras.main.zoom = this.zoomLevel
    this.cameras.main.setSize(width, height);
    this.cameras.main.setScroll(0, 0);
  }

  create() {
    this.camera = this.cameras.main;

    this.resizeCamera();
    this.scale.on('resize', this.resizeCamera, this)
    
    // launch GameScene and pass in the camera
    this.scene.launch('GameScene', { 
      existingCamera: this.camera,
    });
  }
}

我使用this.scene.launch来并行运行GameSceneBootstrap
我正在尝试在GameScene中使用来自Bootstrap的相机

import Phaser from 'phaser'

export default class GameScene extends Phaser.Scene {
  private player: Phaser.Physics.Arcade.Sprite | null = null;
  private camera: Phaser.Cameras.Scene2D.Camera | null = null
  constructor() {
    super('GameScene')
  }

  init(data: any) {
    this.camera = data.existingCamera;
  }

  create() {
    // Create player sprite and add physics
    this.player = this.physics.add.sprite(1200, 1200, 'adam', 18)

    this.camera?.setBounds(0, 0, 2400, 2400);
    this.camera?.startFollow(this.player, true);
  }
}

我正在使用init函数从Bootstrap获取摄像机并将其用于GameScene中的摄像机。我可以在create函数中console.logthis.camera,并看到场景父级是Bootstrap,但我没有看到我的摄像机跟随我的播放器。我做错了什么?
另外,是否可以制作一个全局摄像头以在不同场景之间共享,或者每个场景都有自己的单独摄像头更好,即使它们的功能是共享的?

ef1yzkbh

ef1yzkbh1#

据我所知,你 * 不能/不应该 * 共享相机,因为这可能会有很多副作用。
然而,如果你想这样做,因为你想重用设置,你可以解决这个问题,例如 * 继承
只需要根据你的相机需求创建一个自定义场景。在你需要这个相机的场景中,
设置/功能 * 从自定义场景继承,而在其他场景中,只需要从基本Phaser.Scene继承。

此处为可能的演示:

class MyCameraScene extends Phaser.Scene {
    constructor(name){
        super(name);
    }

    init(){
        this.resizeCamera();
        this.scale.on('resize', this.resizeCamera, this)
    }

    resizeCamera() {
        // Responsively set camera size to window size
        const width = window.innerWidth;
        const height = window.innerHeight;
        
        this.zoomLevel = (width > 600) ? 1.5 : 1;
    
        this.cameras.main.zoom = this.zoomLevel
        this.cameras.main.setSize(width, height);
        this.cameras.main.setScroll(0, 0);
    }
}

class Bootstrap extends MyCameraScene {
    // ...
}

class GameScene extends MyCameraScene { 
    // ...
}

相关问题