Join Joseph Labrecque for an in-depth discussion in this video Image assets, part of HTML5 Game Development with Phaser.
We'll now have a look at the image files and sprite sheet animations, which have been prepared for inclusion in our phaser game. These have all been drawn, animated, and generated for phaser with Adobe Flash Professional CC. Of course if you're more familiar with Adobe Illustrator, Photoshop, or some other application, you can always use that instead. So in our exercise files, we have a FLA that's been prepared for us, which is a form flash document file. So let's open that up and go into 01_03.
And fine BunnyDefenderAssets.fla. Once this has been open inside of Flash Professional, you can see that this is basically my workspace when creating any of my animations and image assets for the game. Here, I am going to fit everything in the window so that we can see everything has been laid out in this work area. So, I have things labelled title screen and scratch. Title screen is basically what I use to generate the large image file that we use as the title screen for the start menu.
So to do that, we simply lay out all of our assets and then to go File > Export > Export Image. And here we can call it title.png or whatever you wish and hit Save. This brings up the Export PNG dialog and here we're exporting either the Minimum Image Area or the Full Document Size. If you choose Minimum Image Area, it's going to take into account all these different clouds off to the side and the space for oxen anything else inside your document that's off the stage.
We just want the full document size, which is set to 540 by 960. Here I'll hit Export and it creates that image for us. Going into my Library, I have these little bunny animations. So if I double click on one of these little bunny movie clip symbols, we can see that I have different states. Which will animate within phaser. But to get this out of phaser we can generate a sprite sheet from it. To do that, inside the library itself right click on the movie clip symbol and choose Generate Sprite Sheet.
This brings up the Generate Sprite Sheet dialogue. And it gives us a preview of what our sprite sheet will look like, and we can even preview the animation itself by clicking the Preview tab. Once we hit Export, it’s going to export that sprite sheet for us along with a XML file that has details about each particular frame. So, inside of that same exercise file's folder, 01_03, we can see our images folder. Let's copy that directly into the Bunny Defender project root. Here we can see our different images and associated files.
So I have things such as a title image, our title background, assets for the sky, a hill, a loading bar, a ghost, explosions, and then I've kept my sprite sheets in a separate directory, because each sprite sheet consists of a PNG and also XML format. These are for any of my animated items such as the bunnies and the spacerocks. If we go back into brackets, we can see that we now have our images folder with all of these different items included.
With these images and sprite sheets now included in our project, we can turn our attention to sound effects and typefaces.
- Downloading the Phaser framework
- Creating your first Phaser project
- Building the preloader and menu states
- Creating and spawning entities
- Working with particles and emitters
- Detecting and handling collisions
- Detecting "game over"
- Adding sound effects and text
- Preparing for mobile deployment