Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So in the last movie I showed how you can incorporate images into your game using that Assets class and embedding the images there. But typically in a game you are going to have lots of different image files, and the problem with that, if you keep them all separated, is that everytime your game loads it's going to have to make multiple network requests. So if this game is embedded on the web, you don't want every single little image file to have to create a new network operation to get it.
What's better is to pack all of the graphics in your game into either a single image or sometimes you have too many and you have to go into, let's say, a second or a third, but packing them all together into a single image and this gives you numerous benefits. First of all again, you only have to make one network operation to get the image, and then the other is that you are not having to upload multiple textures on to the GPU, you essentially upload, in our case, it's going to be a single image on to the GPU as a texture and then we can pull the individual pieces of that texture out.
Now for the sky image that we did in the last movie, since it's such a large image we are not going to include that into a sprite sheet, but all of the other images that we are going to deal with can be packed together into a single image. So we are going to be using TexturePacker for this, so go ahead and launch it up. Now when you first see it, it will give you a message saying you are currently using the free version. I definitely recommend if you are doing a lot of this type of work to upgrade and buy the license, it's not very expensive. But for our case we are just going to use the essential version here.
And what we need to do first is to import all of those images that we want to add on to our sprite sheet. So I am going to click this Add Sprites button here at the top. And what I am going to do is to navigate to where my Spacer project is, so mine is in Documents > Flash Builder 4.6 > Spacer and then to that assets folder. And now I need to choose which assets do I want to actually include on my sprite sheet.
So here I have this image sequence of this alien, this little animated sequence, so I want to include those. I want to include this bullet.png, which is the bullet that we are going fire out of the ship, this explosion particle, the hero.png which is our main ship. I am not going to include this font PNG because we'll get to that later in this chapter. I am going to include the logo, the playButton, the smoke particle PNG and the tryAgainButton.png.
Again, we are not going to include the sky because that's such a big image, it's just better for us to embed that directly. Now I am going to click Open, and now you will see all of those various images laid out here. Now we need to do some tweaks to this so we get the format that we want. The first thing we want to do is to come down and we want to check off Allow free sizes. That will essentially create the smallest possible sprite sheet based on the images that we have in it.
Now under Layout we want to change the Layout to Basic and the MaxRect is a more advanced algorithm which actually is only available if you buy the license. If you use that it will actually tint one of your frames red, so you can't really use it in a real game. So we are going leave everything down here at the default, except we are going to uncheck Allow rotation and we are uncheck Trim. Okay, so we are going to leave that at its very basics here. But we can see all of the individual images that are being packed into the sprite sheet, so we have out little animation sequence, we have our explosion particle, our hero ship, logo, buttons; all packed together in this nice little sprite sheet.
So when we export this or publish it, it's going to save two things, first it's going to save a PNG, which is going to be the actual sprite sheet image itself, but then also it's going to export a data file. And this data file is required because when we tell Starling to, let's say, give me this hero texture, Starling needs to know the X and the Y and the width and the height of where in this big sprite sheet that lives, and that's what the data file does.
Now if we come under Output here, we can see there is a lot of different data formats that are supported. The one we are going to use is a data format called Sparrow. The creator of Starling, Gamua, actually created an iOS game framework called Sparrow and Starling is actually based on Sparrow. So it uses the same data format. Now for Data File I am going to click this, because we want to save that data file into our assets folder. So again, make sure that you are in the right folder.
So I am going to go to Documents > Flash Builder 4.6 > Spacer > assets, and I am going to call this atlas. And the reason is when we get into Starling, we are going to be creating what's called a texture atlas. So we are going to call it atlas here and click Save. And you can see by default TexturePacker is also going to save that atlas.png file in the same directory, which is what we want. So now all I am going to do is click Publish, and now if we go back to Flash Builder, you should see if we refresh the project here that we have our atlas.png and our atlas.xml.
So if I load that up here we can see our sprite sheet that was exported, and if I look in the XML, let's say I just open this with the XML Editor here, we can see what has happened here is this created a texture atlas for us. And essentially when we want to request a certain texture out of the sprite sheet, this is the name that we are going to give. So if I want, let's say, the bullet texture, I am going to be able to reference it using a string of bullet, but you can see what the structure of it, it's saying the x, the y, the width and the height of the various positions of the sprites.
So with that atlas created, in the next movie I am going to show you how to create that texture atlas here in Starling.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 92470 Viewers
82 Video lessons · 104137 Viewers
71 Video lessons · 75603 Viewers
56 Video lessons · 106976 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.