No relationship is perfect. TexturePacker’s "polygon" packing algorithm (which rotates images to fit better) can cause havoc in Phaser if you aren't careful. Phaser’s canvas renderer doesn’t love rotation, while WebGL handles it fine. You learn to use "Basic" or "MaxRects" algorithms for Phaser.
Phaser respects this offset perfectly. This means you can draw sprites by their "pivot" (the hilt of the sword) rather than their bounding box corner. For physics-based games, this is a revelation. Your collision boxes suddenly match the art, not the empty space the artist left behind. texturepacker phaser
function preload() { // Parameters: Key, TextureURL, AtlasURL this.load.atlas('hero', 'assets/hero.png', 'assets/hero.json'); } Use code with caution. 2. Creating a Sprite from the Atlas No relationship is perfect
In that single line, you have loaded your entire visual universe. But the real magic happens in the create function. TexturePacker allows you to use frame names instead of file paths. You no longer think in files; you think in assets . You learn to use "Basic" or "MaxRects" algorithms for Phaser
TexturePacker can automatically trim transparent pixels and rotate frames to fit, tasks that would be impossible to do manually. Creating Your First Atlas in TexturePacker
Here's some sample code to give you an idea of how this works: