Sprite Sheets in Construct 2

I spent a few months traveling and not doing much of anything useful to anyone else, but I had a good time!

I did manage to review a book on Construct 2 that will help people make apps for Firefox OS. Especially for games, Construct 2 is a fast drag and drop game engine that thinks in HTML5! In case you missed it, my review of Construct 2 Game Development by Example is at http://firefoxosgaming.blogspot.com/2014/09/construct-2-game-development-by-example.html.

I'll also get back to reviewing games for Firefox OS, so if you know of any games in the Firefox OS Marketplace that you'd like me to review, let me know!

Efficient Artwork

The last real programming post I did was on how to do a platform game in Construct 2 for Firefox OS. You can read it here at http://firefoxosgaming.blogspot.com/2014/06/platform-game-using-construct-2-game.html. Essentially the game worked, but over on the Construct 2 site, a person named Aphrodite (from France) pointed out that it is somewhat inefficient to load in individual pieces of art for each block on the screen.

Here's what the game looks like:

The blue hero is standing on a platform made up of lemon lollypops (minus the stick). Each lollypop is a sprite. Sprites are an easy way to create patterns on the screen. The same sprite can be reused throughout your game, saving on memory. But loading sprites one at at time (which is what I did) isn't the best way.

But here's a better way to create objects on the screen.

Step 1 - Start a new project.

Download the latest Construct 2 which you can always get from www.scirra.com. Open up Construct 2 and open up a new project. Use the New Empty Project template.

Why do you want the latest? Construct 2 is trying to match every browser, and every browser is updating madly. So keep up!

Step 2 - Set up Grid and Snap

Up near the top is a View tab. Open it up and find Snap to grid. Click the box to make snapping happen. For grid-based platformers and role-playing games, grids are great and snapping makes sure that all the squares line up! Also set the grid width to what will match the pieces. In this case the squares are 32x32 pixels.

You can also click the box next to Show grid. I like this so I can see the grid. You can always turn it off it you want to get the feel of the game after you've assembled the pieces.

Step 3 - Find a Sprite Sheet

Sprite sheets are wonderful. Instead of loading each little sprite image separately, you can load one bitmap which contains all the sprites you want to use. Here's a great one from the artist I used last time, Kenney. You can get his free art at http://kenney.nl/.

If you look closely, you can see that he's created 49 sprites and placed them in a 7x7 grid. Thank you, Kenney!

Step 4 - Pull the Sprite Sheet into Construct

The next step is tricky. Make sure you are looking at a Layout screen. Double-click anywhere on the screen. You'll bring up the Insert New Object screen. Double-click on the Sprite object. The Insert New Object screen disappears and you're left with a cursor that has a target shape. Click anywhere on the Layout screen to start the Sprite Sheet process.

Essentially the process is:

  1. Double-click on the Layout screen.
  2. Double-click on the Sprite object.
  3. Single-click on the Layout.

This will place an object where you click, but you can easily move it later.

When you do that, you get the Edit Image editor. This editor consists of three separate screens. The main screen looks like this:

This screen is where you can manipulate art and do lots of cool things.

But there are two other screens that are useful for sprite sheets.

Usually to the right of the main edit screen is the Animations screen. It looks like this:

And finally, the Animation Frames screen, which is usually below the main screen and looks like this:

Construct 2 has an elaborate animation system that can let you do all kinds of cool things with animated characters, but it also uses its animation system to place pieces of a sprite sheet by treating each sprite as an animation frame. Very interesting!

So now that you know these three screens and you've brought up the editor, it's time to load the sprite sheet.

Right-click on the Animation frames screen and select Import frames and then From sprite strip....

Construct 2 will load the sprite sheet and attempt to figure out how the sprites are arranged. Sometimes it does and sometimes it doesn't. In my case it didn't. I just got this:

Well, no problem. Just tell Construct 2 how the sprites are laid out inside the sprite sheet. I inserted 7 into the horizontal cells and 7 into the vertical cells. I said OK.

When I do that, the sprites are arranged into 49 numbered parts.  Here is what it now looks like in the Animation frames screen:

Right-click on the first sprite (blank) and delete it. Your sprites are now numbered 1-49. We need to do two more steps before we are ready to blast Kenney's sprites onto the Layout.

Step 5 - Remove White Space

If you look very carefully, you'll see that Kenney left a tiny bit of space between each sprite. You need to remove this so the sprites join up perfectly with no gaps. Other sprite sheets have the sprites flush, but we've got Kenney and the price is right - free!

Luckily for us all, Construct 2 thought of this and has a way to automatically remove all the white space. Here's what you do.

Go to the main Image editor window. You should see something like this, with the first sprite in the center.

 

Near the upper-middle you'll see a button that looks like a little target. Counting from the right, it's the sixth one over. Hover over it and it will say Crop transparent edges. Hold shift to crop all of the 49 images. After a minute, the extra white space is gone.

There's a lot of smarts behind Construct 2, which is why it is cooler than any other game engine. But there's one more prep step to go!

Step 6 - Resize the Sprites

Kenney's sprites are 74x74 pixels. Why? Who knows. Maybe it's because he's from the Netherlands. Doesn't matter. We want our sprites to be 32x32.

Once again, Construct 2 to the rescue. Right to the left of the button that you used to remove extra white space is the Resize button. Click on it and you'll get a little window.

You want to make some changes. The first change is to put 32 for the Width (pixels) and 32 for the Height (pixels). Then click the box to Apply to whole animation. And keep the Stretch Image choice the same.

When you press okay, there will be a pause and the sprites will all shrink to 32x32!

Step 7 - Place the Sprite Objects

I covered this part in the last tutorial. Essentially you just close the editor to place your first sprite object.

You can click and drag on it, taking advantage of the grid. This is image#0, but you might get bored with that later.

You can copy a sprite object by just clicking on it, pressing control, and then dragging it. You'll be dragging a copy and when you let go, you have a new copy of the sprite. It is still image#0, but you can change that.

If you click on the sprite object, over to the left, you'll see the properties of the sprite object.

You'll see that the initial frame is 0, but you can choose from any of the 49 images. Let's make it 11, which is a cherry!

If you can't remember what frames correspond to which images, just double click on an object on the screen and the Edit Image windows will come up. You might want to even print them out so you can make really cool worlds by combining the individual sprites.

Next

I'll be getting back to reviewing some Firefox OS games from the Marketplace, working a bit more to improve some code I wrote for the same tutorial as I improved just now, checking to see if the Firefox OS build process has changes, seeing if I can upgrade my phones, and beginning to work on a real role-playing and/or puzzle game.

I've done enough with Construct 2 for now and I'm eager to get back to native HTMl5. Especially the siren song of SVG, and the cool things that only it can do in a web page. 

Until then, stay tuned but not iTuned!