Spriter Tutorial : Import a Character/ Create a Walking Animation Go...

Lecturer: David Nicol Spriter Tutorial

Spriter Tutorial: Import a Character/Create a Walking Animation

When you create a character, you should create the body parts in separate layers and also organise those graphic parts within a folder. Pay attention to the way that the parts of the character are organised (The folder structure).

Open up Spriter

Go to File > New Project > OK and Locate root folder which for this project is named Spriter Character.

You should now see the Canvas set out as below with the sub-folders for character body parts on the right under palette. If you expand the sub-folders you will be able to access/view the body parts. It is from here you can drag the parts onto the canvas

If I move the palette section out and expand it looks something like this:


Double click the torso graphic from the palette. Click to set the pivot point. I set mine as below for each part and then clicked OK.

We have to set the pivot points for the other body parts. I set mine like below. They can always be adjusted later if required.

Left Hip 1

Left Hip Right Hip Left Leg Right Leg Head

Left Shoulder Right Shoulder Left Shoe Right Shoe Left Knuckle

Right Knuckle


We are now ready to drag our body parts on to the canvas.

I dragged the torso over to the canvas first, then re-sized and adjusted it accordingly.

You should then bring all the remaining body parts across and build the character on the canvas. It may help to have an image of the fully assembled character as a visual aid to help with this.

There is a Z-order window which allows you to re-order the parts of the image e.g. to place the left arm behind the torso you can click and drag it below the torso in the Z-order window.

You may find it easier to assemble the left arm and leg separately before putting the body parts in order as shown. Note if you use the ctrl key and left-click on the arm and hand you can select both parts together and then move around the canvas.

It may take some time to order and assemble the character parts.

When I have assembled the character on the canvas it should look something like below.

Z-Order Window

Ctrl and left-click to select multiple parts or objects.


We now have to create bones for our character.

A bone is created by using the alt key then clicking and dragging to create the bones. Ensure this is set as below.

I am going to create my first pelvic bone so I hold Alt then click and drag to create this first bone.

If I have a bone selected and create another bone it will be linked and will move with (be a child of that bone).

So I will ensure the first bone I have created is selected and go on and make another bone for head as shown below.


Now we have to create bones for the right shoulder, arm and knuckle. Before doing this select the bone in the main torso.

After selecting the bone in the main torso we will make the shoulder, arm and hand (knuckle) bone in that order.

Click on the main torso bone again. Now we are going to create bones for the left shoulder, arm and hand (knuckle) in that order. It should end up like below.

Now we will again highlight the torso bone and create bones for the right hip, right leg and right foot in that order. Then select the torso bone again and create bones for the left hip, left leg and left foot in that order. It should end up like the example shown below.


We have now created the skeleton for the character.

The next stage will involve assigning the image sprites to the bones.

Select the head bone. Hold the b button down (good reminder is b for bone). The character sprite parts will turn an opaque colour. While holding down the b key, left-click on the character’s head sprite. This will assign the head bone to the head.

Repeat this for all bones. If you have completed this correctly you can test this by clicking on the main torso bone and check that the whole character and skeleton moves together. You can also check each bone is assigned a sprite by clicking on bones and viewing the hierarchy list as shown below.

We are now ready to start our walk animation.

The character will be placed in the first pose for this walking animation. I set my first walking pose as below:

We need to set up the timeline next. We want to adjust the timeline from 1000 to 782. We will be creating eight key frames for the walk animation.

You may wish to click the lock sprites button at the top of the screen to prevent accidentally moving the sprites out of place.

If you left click on the time line with ctrl and adjust the timeline so that it is completely visible this makes it easier to create and view all of your key frames.


Click about halfway along your timeline to create the next walking key frame – something like below:

If you scroll back and forward between the first key frame and second key frame you have created, it should be starting to view the basic walking animation so far.

Now we wish to create the midway point between the two key frames we have created. We are trying to create an up and down movement to fit with the walking animation.

Click at the mid-point between the two key frames you have created. Select the main torso bone and move the character up with the up cursor key about eight clicks.

Now we should create another key frame in between the middle key frame and the end key frame and again click the cursor key up about eight times.

Half-way on timeline for the next key frame.

Timeline fully visible on screen.


Now we should add some finishing touches to the animation to improve the look of the walk movement.

You can toggle between your key frames using the 1 and 2 keys of the keyboard (this prevents accidentally creating additional unwanted key frames).

Using the 1 and 2 keys toggle to the second key frame you created for the walk sequence.

Adjust the character as follows like below with the right leg raised and foot adjusted a little:

Toggle to the next key frame and select the left thigh bone. Toggle to the following key frame and lift the left thigh and adjust the left leg and shoe like below:

So we now have a walking character sprite. We can tweak the movement to improve the walk movement by adding more key frames in between and making some adjustments.

I have added more key frames and made slight adjustments to the legs and feet to try and make the walking animation more lifelike.


If you wish to view the walking sprite without the bones showing click on show bones. Note that you can also adjust the speed of the animation playback using the slider at the bottom of the screen. This is a useful way to spot where improvements could be made. We can now look for glitches and spend time to tidy up the animation. I adjusted the time from 782 to 1200 and clicked stretch keys and apply length.

Spriter will allow the exporting of the series of frames in the animation. To do this - create a folder to save the frames.

You can opt to export the animation by going to File > Export Animation to PNG/GIF then you have the option of exporting as:

A series of numbered images/a sprite strip or sprite sheet/an animated gif.

When you have completed this tutorial you will have learned how to animate a character in Spriter, and should be ready to start work on your own animated characters.

You are required to produce two animated characters – and the series of frames/images to evidence this.

You should complete this tutorial before attempting the practical assessment.

Click show bones to view animation without bones in view

Adjust playback/preview speed.

Spriter Tutorial : Import a Character/ Create a Walking Animation Go...

Documents

Transcript of Spriter Tutorial : Import a Character/ Create a Walking Animation Go...