rendering backgrounds

[raylu]

if I want to render a tiled background (randomly select one of a few grass sprites and just tile them over the whole canvas), should I use actors or is there a lighter weight way? actors feel like overkill

[raylu]

the answer given on discord was https://excaliburjs.com/docs/category/tile-maps

[eonarheim]

@raylu Thanks for asking the question in the discord! Generally we recommend TileMaps as you say

Another way to do a tiled background with 1 repeating image using a tiling sprite using ImageWrapping.Repeat

var game = new ex.Engine({
  canvasElementId: 'game',
  width: 600,
  height: 400,
  displayMode: ex.DisplayMode.FitScreenAndFill,
  pixelArt: true
  // antialiasing: false
});

var tex = new ex.ImageSource('https://cdn.rawgit.com/excaliburjs/Excalibur/7dd48128/assets/sword.png', {
  wrapping: ex.ImageWrapping.Repeat
});

var loader = new ex.Loader([tex]);

var sprite = new ex.Sprite({
  image: tex,
  sourceView: {
    x: 0,
    y: 0,
    width: 500,
    height: 500
  },
  destSize: {
    width: 1000,
    height: 1000
  }
});
var actor = new ex.Actor({ 
  x: 0, y: 0, 
  anchor: ex.vec(0, 0),
  coordPlane: ex.CoordPlane.Screen,
  z: -10
});
actor.onInitialize = () => {
  actor.graphics.add(sprite);
};
actor.onPostUpdate = (engine, delta) => {
  sprite.sourceView.x += .05 * delta;
}
game.add(actor);
game.start(loader);

game.currentScene.camera.pos = actor.pos;

If you want a tiling animation you need to hack a bit, future work is planned to make this friendlier

// Terrible terrible hack to enable animation tiling
for (let frame of this.backgroundAnim.frames) {
    const sprite = (frame.graphic as Sprite);
    sprite.image.wrapping = { x: ImageWrapping.Repeat, y: ImageWrapping.Repeat };
    sprite.image.image.setAttribute('wrapping-x', ImageWrapping.Repeat);
    sprite.image.image.setAttribute('wrapping-y', ImageWrapping.Repeat);
    sprite.image.image.setAttribute('forceUpload', 'true');
    sprite.sourceView.width *= 5;
    sprite.sourceView.height *= 5;
    sprite.destSize.width *= 5;
    sprite.destSize.height *= 5;
}

[eonarheim]

Tilemap gives you the ability to tile multiple images

Example of the tiled single sprite

20240414-1430-04.2978303.1.mp4

Example of tiled single animation

animated-tiling.mp4