Why this.add.group({}) works well in tutorial but not in my game?

I’m making a game with Phaser and I’m trying to group tiles together and
render them out like this:

My code:

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() {

}

code in tutorial:

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);

this.add.group({}) works fine in tutorial but when I use it in my game I get only 1 tile rendered. What’s happening here ?

>Solution :

I assume the problem is the stepY, that value seems too be much to big. this.sys.game.config.height - 80 will put the second tile outside the display area, thats why you see only one tile. (Here is the link to the documentation for more details on the config object for a phaser group)

Solution: Try setting a smaller value for the property stepY, than you should see the tiles.