// Create the animation using the frames from the Atlas // Note: We use the 'prefix' property to easily grab the frames this.anims.create({ key: 'run', frames: this.anims.generateFrameNames('knight', { prefix: 'run_', // Assuming files were named run_01.png, etc. start: 1, end: 10, zeroPad: 2 }), frameRate: 10, repeat: -1 });
To get started with Phaser Texture Packer, download and install the application from the official website. phaser texture packer
A texture packer takes all those loose images and smashes them into a single large PNG file (the "atlas"). It also generates a JSON or XML file that tells Phaser exactly where in that big image each smaller picture lives. // Create the animation using the frames from
Instead of this.load.image , use this.load.atlas : It also generates a JSON or XML file
"Now," the Archmage said, "instead of loading 50 files, you load just two: the image and the map. One HTTP request. Instant speed."
Leo returned to his workstation, eager to implement this new wisdom. He had his new files: cyber-knight.png and cyber-knight.json . He opened his Phaser preload scene.
While there are many tools, some are specifically optimized for Phaser. 1. TexturePacker by CodeAndWeb (Recommended)