How do you add repeating images in Phaser?

user_12907088 0
Viewed 322

In my Phaser game, I want to use a cell-like background texture which moves when you move.

My idea was to add each cell in a for loop like this:

  let width=100, height=100;
  for(let y=0;y<width;y++){
    ;
    for(let x=0; x<height;x++){
    
      this.physics.add.image(width/2+64*x, height/2+64*y, "snow_field").setScale(4,4);
      
    }
  }

The problem: The game gets very (very) slow

So is there a better / recommended way to add repeating images/backgrounds?

phaser-framework html javascript
1 Answers

You are looking for: Phaser.GameObjects.TileSprite (link to the documentation)

...
A TileSprite is a Sprite that has a repeating texture.
...

this.add.tileSprite(posX, posY, width, height, "snow_field");

here is an small example on phaser.io, where you can see it in action.

user_16792860
Related