Animate and upload your own character

Knowledgebase / Animate and upload your own character

To create your own images, you need some understanding of how to use image editing software such as Paint, Photoshop or Pixlr.

All characters in Gamefroot require multiple images to animate them. These images appear one after the other, and this creates the illusion of movement. So you’ll need to create multiple images that work together.

 

horses

horse-anim

1. 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.

2. 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.

You should create 7 different animation sequences made up of images (frames). Those should be:

  • idle: Animation of your character standing still (needs at least 1 frame)
  • walking: Animation of your character moving in a direction (try to have at least 6 frames)
  • jumpUp: Animation of your character jumping upwards (needs at least 1 frame)
  • jumpDown: Animation of your character falling (needs at least 1 frame)
  • dying: Animation of your character dying (try to have at least 3 frames)
  • ducking: Animation of your character curled up in a ducking position (needs at least 1 frame)
  • prone: Animation of your character lying down (needs at least 1 frame)

You can create each of the individual images for your animation, and then upload them to a site like http://gifmaker.me/ to see how they animate together.

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.

3. Saving the images

Once you have all your animation completed, ensure that your images are all scaled correctly so they are the right size for your game. Save each image as a PNG. Here are some example character images you can use.

4. Uploading your character images in the Animation Editor

To upload your character animation frames, open the Asset Manager and select a pack that you want to add your character to. Click ADD NEW ASSET and choose Characters, From Animation Editor.

Screen Shot 2016-03-12 at 5.02.23 pm

When the Animation Editor opens, click ADD NEW to upload your images into your animation.

Screen Shot 2016-03-12 at 5.13.45 pm

When your images have been uploaded, they will all appear in the sidebar to the right.

animation-editor

 

You can click on the + button on an image to add that image to the current sequence. Add your idle image(s) to the idle sequence. Then add your walking images to the walking sequence, (click on the name of a sequence to open it), and then open each sequence and add their corresponding image(s) until you have all sequences with at least one image in them.

5. Adjust the hitbox

Every game object has a hitbox which is an invisible rectangle used for detecting collisions in the game. By default, your character’s hitbox will be as large as the images that you’ve uploaded — this is probably too large to feel normal when playing your game.

You can adjust the size of your character’s hitbox by clicking SHOW HITBOX to see the hitbox. Click and drag on its corners to change how large it is. You can also manually change its position and size by clicking ATTRIBUTES and typing in the numbers for the hitbox size and offset.

 

Click SAVE to save your animated character, and click the X to close the animation editor.

 

6. Using your new character

Your new character will appear in the Game Objects sidebar. Select and place the new character into your level, and then attach the Player Controls script to it. Now play your game to see your character animating.

 

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? Do you need to go back and adjust your hitboxes?

You can make changes to your character by placing it somewhere in your level, and then right-clicking on it and selecting Edit Animation.

Have fun!