为何Phaser中this.add.group({})在教程正常，我的游戏却仅渲染1个tile？

你遇到的问题是因为setXY配置里的stepY值设置过大，导致后续的tile被渲染到了游戏画布之外，所以看起来只有1个tile显示。

你的代码： #

let gameScene = new Phaser.Scene('Game');

gameScene.preload = function() {
    this.load.image('background', 'assets/backgrounds/beach/game_background_1.png');
    this.load.image('tile', 'assets/images/tile.png');
}

gameScene.create = function() {
    let bg = this.add.sprite(0, 0, 'background').setOrigin(0, 0);
    this.tiles = this.add.group({
        key: 'tile',
        repeat: 5,
        setXY: {
            x: 150,
            y: this.sys.game.config.height - 80,
            stepX: 150,
            stepY: this.sys.game.config.height - 80, // 问题核心所在
        }
    });

    Phaser.Actions.ScaleXY(this.tiles.getChildren(), -0.5, -0.5);
}

gameScene.update = function() { }

教程代码对比： #

gameScene.preload = function(){
  // load images
  ...
  ...
  this.load.image('enemy', 'assets/dragon.png');
  ...
};

gameScene.create = function() {
    this.enemies = this.add.group({
      key: 'enemy',
      repeat: 5,
      setXY: {
        x: 90,
        y: 100,
        stepX: 80,
        stepY: 20 // 教程使用小步长，元素均在画布可见范围内
    }
  });

  Phaser.Actions.ScaleXY(this.enemies.getChildren(), -0.4, -0.4);
}

原因分析： #

你设置的stepY: this.sys.game.config.height - 80意味着每个新tile的Y坐标会在前一个的基础上增加整个画布高度减80的数值。第一个tile的Y坐标刚好在画布底部附近，第二个tile的Y坐标直接变成(画布高度-80) + (画布高度-80)，完全超出了画布可见范围，后续tile同理，因此只有第一个tile能被看到。

解决方案： #

根据布局需求修改stepY的值：

• 若要水平排列（同一行），将stepY设为0：

  setXY: {
      x: 150,
      y: this.sys.game.config.height - 80,
      stepX: 150,
      stepY: 0,
  }
  

• 若要垂直排列，设置一个与tile尺寸匹配的小步长：

  setXY: {
      x: 150,
      y: this.sys.game.config.height - 80,
      stepX: 0, // 保持同一水平位置
      stepY: -80, // 向上排列，设为80则向下排列
  }
  

内容的提问来源于stack exchange，提问作者appdeveloper