Games in general can get by with just basic shapes like squares, circles and triangles if the gameplay is good enough.
But we don’t want to just get by, so we are going to add images to our game that have a theme.
If you recall from earlier in the series, our theme is being underwater in a submarine fighting various kinds of biological and mechanical enemies.
We Need Art
The first thing we need is art.
There are a variety of ways to acquire game art. You can make your own, hire someone to draw you custom art, buy some already created art assets, or use some free art from a site like opengameart.org
Personally I like to draw and make little art assets. There are a lot of free tools that you can use and the images you make don’t have to be great, especially not for your first game.
What Will We Draw?
Let’s start by making a list of the objects in our game that we want to have art for.
- The Player
- 3 or more Enemy types
- 1 or more Bosses
- 1 or more Projectiles
- 1 or more Power Ups
For now we are going to start with the Player, some Enemies, some Projectiles, and a Boss. We will save the power ups and other images for later.
What Style Will We Use
One of the important things about your art is that is has a consistent style. Most of the time you don’t want to be mixing some 8 bit pixel art with cartoonish drawing style art.
You also want a style that lends itself to the theme and setting of your game. For example, you probably don’t want a cartoony and silly style for a horror game.
If you want you can pick a different style but for this I chose a simple flat basic shape style.
Adding the Images to the Game
Pack it Up
One of the ways to make your images more efficient for your game is to pack it into something called a sprite sheet. There is a free tool that will help with this called Texture Packer that works with FantomEngine.
You simply bring in the set of images that you want to turn into a sprite sheet and it puts them all together and allows you to export them into a single image. It then lets you save a file that describes that image so your game knows how to grab each one.
Fantom Engine only knows how to read the LibGDX and Sparrow data file formats for sprite sheets so make sure you pick one of those in the Texture Packer output file settings.
The Player
Let’s just start with the player and a single image and animation.
I created a simple set of 3 images to represent the player’s submarine. The only difference being the propeller so when we animate it, it will look like the propeller is spinning.
We are going to put it into our games ‘.data’ folder so we can load it later.
Loading the Images and Animation
Now that we have created an image, we need to load it into the game and associate it with the player.
What we are doing here is loading the image into memory, then creating an Animation object to replace our regular box that we had before. The Animation needs an image, it needs to know where in the image the animation starts, how big each frame is, and how many frames there are.
Everything else about the Fantom object remains the same so collision, movement, and everything else still works but now we have an animated little submarine instead of a box.
Using a Sprite Sheet
Now that we have a single image and animation working, we will see how to use a full sprite sheet.
I created an image for 3 different enemies, 2 different projectiles, the player, and a boss.
We then put all of the images into Texture Packer and publish the sprite sheet and the atlas mapping file. Remember to use the LibGDX or Sparrow formats for the atlas mapping file. Then we are going to put both into our games ‘.data’ folder.
Let’s start adding our new sprite atlas to the game and by getting our player’s animation from the new combined sprite sheet.
As you can see, this is not all that different from using an individual image for the animation, but it saves our game time and resources.
Fewer Enemy Types
Previously, we had all sorts of randomly sized enemies flying around the screen. Now since we have images or animations for 3 enemies, we will limit our enemy characters to being 1 of the 3 that we have images for. This is going to be a major overhaul of our enemy generator function.
First we need to pick our next enemy type at random. Then we will build the animation or regular image from our sprite sheet based on which enemy type it is.
Projectiles
The final 2 things that need to use our sprite atlas currently our the projectiles and the Boss.
Let’s start with projectiles.
And the Boss
Last but not least the Boss.
Now just by adding some images our game has a little underwater theme going on.