In a previous tutorial I've shown you how to create an animated sprite with a spritesheet in Phaser. In this tutorial I'm going to show you how to use something called a texture atlas instead. Here's an animation I created recently for a game I'm building using a texture atlas:
I'm going to jump right into how to use a texure atlas for animations in this tutorial so if you want a little more background on sprites and how we can use them for animations check out this tutorial first – make sure to come back to this tutorial though, using an atlas is far superior to using a spritesheet.
A texture atlas places all of your sprites into a single file (much like a normal spritesheet) and uses either an XML or JSON file to describe where each sprite begins and ends (kind of like a HTML map if you remember ever using those). Take a look at the following example of an atlas vs a spritesheet that we could use with Phaser:
(sorry about the watermark lines, I purchased these sprites so can't share them unfortunately!)
I started using spritesheets for my animations initially because it is the first thing I came across and assumed it was the way sprite animations should be done, however after reading this response from Richard Davey:
['dying1', 'dying2', 'dying3', 'dying4', 'dying5', 'dying6'];
<p> and you should end up with something like this: </p> <p> <a href="https://www.joshmorony.com/media/2015/09/phaser-depth-animation.gif"><img src="https://www.joshmorony.com/media/2015/09/phaser-depth-animation.gif" alt="Phaser Atlas Animation" width="463" height="743" class="aligncenter size-full wp-image-3360" /></a> </p> <p> That's not actually my death animation, it's my swimming animation but you get the idea! </p> <h3> Summary </h3> <p> What I really like about using a texture atlas over a sprite sheet is that you don't have to worry about making all of your sprites the same size (which might not be desirable for your game) and it makes it super easy to generate animations by referencing the names of the files (especially with the help of <strong>generateFrameNames</strong>) rather than specifying the frame names by number like in my other tutorial. </p> <p> If you're currently using spritesheets for animations I highly recommend switching to an atlas. </p> <div class="rfvft5bdadd781dcd4" > <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-1731118875740147" data-ad-slot="6944256848"></ins> <h3> What to watch next... </h3> <div style="position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0;"> <iframe style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;" width="560" height="315" src="https://www.youtube.com/embed?listType=playlist&list=PLvLBrJpVwC7ocO1r-xu218C15iE9gTWBA" frameborder="0" allowfullscreen></iframe> </div> </div>
If you enjoyed this article, feel free to share it with others!Tweet