Adventures in Phaser with TypeScript–Using Sprite sheets ( and Texture Atlases )

 

 

In my previous Phaser tutorial on particles I used a sprite sheet to provide particles in one of the examples, then realized I hadn’t covered how to actually use a sprite sheet yet, oops!  So this tutorial is going to correct that oversight.  A spritesheet ( also known as a texture atlas ), is simply a collection of images together in a single image file.  Loading a single file into memory is often more efficient than loading dozens on small images.  It’s also generally easier from a resource management perspective.

 

Let’s take a look using the texture I used for the particle example.  It’s a seamless animation of a robin in flight that I downloaded from here.  Here is a small version of the image:

robin-782x1024

 

Now imagine the above image as a 5×5 grid of images.  This gives 22 240×314 bird images and 3 empty spaces.  Now let’s look at using that image to create an animation.

 

/// <reference path="phaser.d.ts"/>  class SimpleGame {      game: Phaser.Game;      bird: Phaser.Sprite;        constructor() {          this.game = new Phaser.Game(640, 480, Phaser.AUTO, 'content', {              create: this.create, preload:              this.preload, render: this.render          });      }      preload() {          // Load the spritesheet containing the frames of animation of our bird          // The cells of animation are 240x314 and there are 22 of them          this.game.load.spritesheet("ss", "robin.png", 240, 314, 22);      }      render() {      }      create() {          this.bird = this.game.add.sprite(0, 0, "ss", 0);          // Create an animation using all available frames          this.bird.animations.add("fly");          // Play the animation we just created at 10fps, looping forever          this.bird.play("fly", 10, true);      }  }    window.onload = () => {      var game = new SimpleGame();  };

 

And running:

 

 

 

So I mentioned earlier about a texture atlas.  What is that if not a spritesheet?  Well basically it’s the same thing, but with a  table of contents if you will.  The spritesheet relies entirely on images being the same size in a grid like the above.  A texture atlas on the other hand is more flexible.

 

First is the matter of how to create them.  There are actually several applications capable of creating Phaser compatible texture atlases, but TexturePacker is probably the easiest.  I am not going to go into detail on how to use TexturePacker in this post as I have already done so in the past.  For more information click here.

 

There are a couple things to be aware of that are Phaser specific.  For this example I am going to use the animation I created in my Blender tutorial series.  It’s simply the jet in a barrel roll animation, rendered as individual frames, like so:

 

0005000100020003

 

When choosing your project type, Phaser is not listed.  Instead choose Sparrow/Starling:

image

 

Simply drag and drop your frames on animation then set the following settings:

image

 

Size Constraints does not need to be set to Power of 2, but it’s generally a good idea for performance.

Allow Rotation CANNOT be checked, it will break Phaser.

Trim mode is important for this case, as I want to keep the white spaces so the image size remains the same across all animations.  For animations you will generally want to set this to keep your frames the same size.  For non-animations, it can save a great deal of space not selecting this option.

 

When ready click Publish Sprite Sheet at the top button bar.  This will then save an xml file and a png for you to use.  I called mine jet.xml and jet.png, but I am a creative type.

 

Now let’s look at the code for using a texture atlas instead of a sprite sheet… a bit of a warning, it’s awfully same-y.

 

/// <reference path="phaser.d.ts"/>  class SimpleGame {      game: Phaser.Game;      jet: Phaser.Sprite;        constructor() {          this.game = new Phaser.Game(640, 480, Phaser.AUTO, 'content', {              create: this.create, preload:              this.preload, render: this.render          });      }      preload() {          this.game.load.atlasXML("jet", "jet.png", "jet.xml");      }      render() {      }      create() {          this.jet = this.game.add.sprite(0, 0, "jet", 0);          // Make it bigger so we can see          this.jet.scale.setMagnitude(3);          this.jet.animations.add("fly");          this.jet.animations.play("fly", 15,true);      }  }    window.onload = () => {      var game = new SimpleGame();  };

 

And when we run it:

 

 

And that is how you use a spritesheet or texture atlas.

Programming


Scroll to Top