Change TileSprite Frame and Size
Demonstrates how to dynamically update a TileSprite's dimensions and change its texture frame from an atlas while it is scrolling.
800 × 600
class Example extends Phaser.Scene
{
iter = 1;
ts;
preload ()
{
this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
this.load.atlas('atlas', 'assets/atlas/megaset-2.png', 'assets/atlas/megaset-2.json');
}
create ()
{
const atlasTexture = this.textures.get('atlas');
const frames = atlasTexture.getFrameNames();
const i = 0;
let size = 64;
this.ts = this.add.tileSprite(400, 300, size, size, 'atlas', 'hotdog');
this.add.text(10, 10, 'Click to change frame and size', { font: '16px Courier', fill: '#ffffff' });
this.input.on('pointerdown', () =>
{
size += 16;
this.ts.setSize(size, size);
let frame = Phaser.Utils.Array.GetRandom(frames);
// Otherwise you can't see it scrolling
if (frame === 'platform')
{
frame = 'hotdog';
}
this.ts.setFrame(frame);
}, this);
}
update ()
{
this.ts.tilePositionX += this.iter;
this.ts.tilePositionY += this.iter * 2;
}
}
const config = {
scale: { mode: Phaser.Scale.FIT },
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#2d2d2d',
parent: 'game-container',
scene: Example
};
const game = new Phaser.Game(config);