Multiple Blitter Bobs from a Texture Atlas
Demonstrates how to create multiple bobs within a single Blitter object using different frames from a shared texture atlas, including relative positioning and horizontal flipping.
800 × 600
class Example extends Phaser.Scene
{
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 blitter = this.add.blitter(100, 200, 'atlas');
// Create some bobs, all using different frames from the same atlas texture.
// Note that the x/y coordinates are relative to the blitter position.
blitter.create(0, 0, 'atari400');
blitter.create(100, 0, 'bunny').setFlipX();
blitter.create(200, 0, 'cokecan');
blitter.create(300, 0, 'copy-that-floppy');
blitter.create(400, 0, 'hotdog');
}
}
const config = {
scale: { mode: Phaser.Scale.FIT },
type: Phaser.AUTO,
parent: 'game-container',
width: 800,
height: 600,
scene: Example
};
const game = new Phaser.Game(config);