Pimp my Game – Using your own Character artwork

Note: this tutorial has been updated here http://gamefroot.com/knowledgebase/animate-and-upload-your-own-character/

 

With Gamefroot we make it easy for the entry level game designer to effortlessly create a game using the default assets, but for the next level of game designer* we offer a lot more customization. You can design your own characters, terrain, in-game items, and backgrounds. You can then upload these assets into Gamefroot to build games that are uniquely your own. In this series of tutorials I’m going to show you how to do all of that to create a masterpiece you can be proud of. *To take advantage of Gamefroot’s customization it is important that you have image editing software and a working knowledge of how to use it.

How Gamefroot Characters work

All characters in Gamefroot require an image with all the character animation on it – this is called a sprite sheet. These sprite sheets consists of 16 frames to display and animate the character, and the sprite sheet measures 1200 pixels wide by 234 pixels high. The sprite sheet is laid out in 2 rows of 8 frames, with the frames measuring 150 pixels wide by 117 pixels high. Each frame in the sprite sheet is part of a particular animation seqence. The sprite sheet must be a PNG file with transparency so that the background of the sprite sheet doesn’t show up in the game. The image below illustrates the required dimensions and what each frame represents in the character’s animation.

 

Designing a Character

Sketch a few character designs up. Consider body shape, costume, facial expression, emotion. Think of the artistic style of your character. Pixel art? Clean vectors? Rough sketch or painted?

When I was designing a character for a game about Isaac Newton, I did some searching for inspiration and sketched out a few ideas.

We were toying with the idea of making our Isaac Newton game in a pixellated style.

 

 

Animating your Character

The way you animate the walk cycle can convey a lot about the character. Are they happy, angry, scared, relaxed,or in a rush? Look at some youtube clips of characters running. Do a google image search for “Run cycle” or “Walk cycle” – you will be amazed and inspired.

Remember the frame limit in the sprite sheet: 1 frame for standing still, 6 for running, 1 for crouching, 1 for lying down, 1 for jumping, 1 for falling, 5 for dying. So make sure you capture the essence of your run cycle in 6 frames, and that it flows smoothly.

If you work large and then shrink your characters down to the right size afterwards, it is a lot easier to work out the details.

I sketched out all the animation roughly, then cleaned up the lines, filled them in with color, and added highlights and shadows.

Creating a Sprite sheet

Once you have all your animation completed, place the frames into the sprite sheet template (it’s at the top of the article – download it by right-clicking it and saving it). Ensure that frames are all scaled correctly and are 150 pixels apart in each row, or else your character will animate jittery with offset frames. Then remove the template so that you are left with your character frames surrounded by transparent space. Save this as a PNG file with transparency.

 

Uploading and testing your Character

To see how your new character looks in a game, open the Asset Manager and select a pack that you want to add your character to.

Click “Create new assets” and choose Characters. Then click “Upload your own” and upload your PNG file.

 

Your new character will appear in the characters tab. Select and place the new character onto the level and preview the game.

Run around the level and test out the character – does it animate properly? Are there messy bits that you have to go and clean up? Is your character too bright or too dark for its environment? Is your character the wrong size? You can make all of these tweaks if need be, and then upload your updated sprite sheet as a new character to replace the old one.

Have fun and share your creations!