相机不跟随宇宙飞船

Posted 2023-03-15

【中文标题】相机不跟随宇宙飞船

【英文标题】：Camera not following spaceship

【发布时间】：2021-02-25 18:28:01

【问题描述】：

在开发游戏方面，我是新手，尤其是使用新语言和框架。我无法让相机粘在播放器上。不知道我应该把this.camera.startFollow(); 语句放在哪里，这样它才能工作。该游戏是小行星重制版，但地图大于 800x600。游戏已经用 socket.io 设置好了。代码如下：

var config = 
  type: Phaser.AUTO,
  parent: 'phaser-example',
  width: 3200,
  height: 2400,
  physics: 
    default: 'arcade',
    arcade: 
      debug: false,
      gravity: 
        x: 0,
        y: 0
      
    
  ,
  scene: 
    preload: preload,
    create: create,
    update: update
  
;

const game = new Phaser.Game(config);

function preload() 
  this.load.image('ship', 'assets/spaceShips_001.png');
  this.load.image('otherPlayer', 'assets/enemyBlack5.png');
  this.load.image('star', 'assets/star_gold.png');
  this.load.image('backgroundStar1', 'assets/star2.png');
  this.load.image('backgroundStar2', 'assets/star3.png');
  this.load.image('space', 'assets/deep-space.jpg');
  //this.load.image('background', 'assets/background.png');


function create() 
  var self = this;

  this.add.tileSprite(0, 0, 6400, 4800, 'space');
  this.physics.world.setBounds(0, 0, 3200, 3200);
  //this.cameras.main.setBounds(0, 0, 3200, 3200);

  this.socket = io();
  this.otherPlayers = this.physics.add.group();
  this.socket.on('currentPlayers', function (players) 
    Object.keys(players).forEach(function (id) 
      if (players[id].playerId === self.socket.id) 
        addPlayer(self, players[id]);
        //this.camera.startFollow(self.ship); - does not work
       else 
        addOtherPlayers(self, players[id]);
      
    );
  );
  this.socket.on('newPlayer', function (playerInfo) 
    addOtherPlayers(self, playerInfo);
  );
  this.socket.on('disconnect', function (playerId) 
    self.otherPlayers.getChildren().forEach(function (otherPlayer) 
      if (playerId === otherPlayer.playerId) 
        otherPlayer.destroy();
      
    );
  );
  this.socket.on('playerMoved', function (playerInfo) 
    self.otherPlayers.getChildren().forEach(function (otherPlayer) 
      if (playerInfo.playerId === otherPlayer.playerId) 
        otherPlayer.setRotation(playerInfo.rotation);
        otherPlayer.setPosition(playerInfo.x, playerInfo.y);
      
    );
  );

  this.cursors = this.input.keyboard.createCursorKeys();

  this.blueScoreText = this.add.text(16, 16, '',  fontSize: '32px', fill: '#0000FF' );
  this.redScoreText = this.add.text(584, 16, '',  fontSize: '32px', fill: '#FF0000' );
  
  this.socket.on('scoreUpdate', function (scores) 
    self.blueScoreText.setText('Blue: ' + scores.blue);
    self.redScoreText.setText('Red: ' + scores.red);
  );

  this.socket.on('starLocation', function (starLocation) 
    if (self.star) self.star.destroy();
    self.star = self.physics.add.image(starLocation.x, starLocation.y, 'star');
    self.physics.add.overlap(self.ship, self.star, function () 
      this.socket.emit('starCollected');
    , null, self);
  );


function addPlayer(self, playerInfo) 
  self.ship = self.physics.add.image(playerInfo.x, playerInfo.y, 'ship').setOrigin(0.5, 0.5).setDisplaySize(53, 40).setCollideWorldBounds(true);
  if (playerInfo.team === 'blue') 
    self.ship.setTint(0x0000ff);
   else 
    self.ship.setTint(0xff0000);
  
  self.ship.setDrag(100);
  self.ship.setAngularDrag(100);
  self.ship.setMaxVelocity(200);


function addOtherPlayers(self, playerInfo) 
  const otherPlayer = self.add.sprite(playerInfo.x, playerInfo.y, 'otherPlayer').setOrigin(0.5, 0.5).setDisplaySize(53, 40);
  if (playerInfo.team === 'blue') 
    otherPlayer.setTint(0x0000ff);
   else 
    otherPlayer.setTint(0xff0000);
  
  otherPlayer.playerId = playerInfo.playerId;
  self.otherPlayers.add(otherPlayer);


function update() 
  if (this.ship) 
    if (this.cursors.left.isDown) 
      this.ship.setAngularVelocity(-150);
     else if (this.cursors.right.isDown) 
      this.ship.setAngularVelocity(150);
     else 
      this.ship.setAngularVelocity(0);
    
  
    if (this.cursors.up.isDown) 
      this.physics.velocityFromRotation(this.ship.rotation + 1.5, 100, this.ship.body.acceleration);
     else 
      this.ship.setAcceleration(0);
    
  
    this.physics.world.wrap(this.ship, 5);

    // emit player movement
    var x = this.ship.x;
    var y = this.ship.y;
    var r = this.ship.rotation;
    if (this.ship.oldPosition && (x !== this.ship.oldPosition.x || y !== this.ship.oldPosition.y || r !== this.ship.oldPosition.rotation)) 
      this.socket.emit('playerMovement',  x: this.ship.x, y: this.ship.y, rotation: this.ship.rotation );
    
    // save old position data
    this.ship.oldPosition = 
      x: this.ship.x,
      y: this.ship.y,
      rotation: this.ship.rotation
    ;
  

【参考方案1】：

在create()函数中加入如下代码解决：

window.scene = this;

然后更改了我的注释行

//this.cameras.main.setBounds(0, 0, 3200, 3200);

到

scene.cameras.main.setBounds(0, 0, 3200, 3200);

最后添加

scene.cameras.main.startFollow(self.ship);

在我的 addPlayer() 函数中。