teachinTech


Animate characters

In this activity we are going to configure out characters and enemies to move around and some of them we will incorporate animation to make their movement seem more realist (or just funny).

Turn In: Animation-Exploration.capx

Animation is changing the look of a set of images to make the eye believe there is motion. Long ago, flip books were used for animation. Each page of the book had a slightly different image than the previous page. When the pages of the book were flipped through quickly, the image appeared to be moving.

Construct2 uses a similar concept for animation. In this activity we are going to create a few different animations and then look at some events/actions that will help display those animations.

Note: Create and use your own graphics for this activity. The focus is on learning the animation process and techniques, not your art work. Learn by doing.

Our Three Images

For this activity, we are going to create three base images and focus on three different animations with those base images. One animation will go left to right, the next animation will go up and down, and the third animation will go left, right, up, and down.

If you have not already done so, create a new Construct2 empty project and save it as Animation-Exploration.capx. Place your three images around the screen spaced out from each other. All three images will have the 8Direction behavior. For the Directions property of the 8Direction behavior, change it to "Left & right" for the image that will only go left and right. Change it to "Up and down" for the image that will only go up and down. Change the Directions behavior to "4 Directions" for the animation that will go up, down, left, and right.

Selecting the three images is your choice. Here some suggestions ...

For the up, down, left, and right animation choose a player object that normally makes those movements. It might be a realistic looking person, it might be a cartoon looking character, or you may have a completely different idea. We want something that when moving left, right, up, and down the images are distinctive and we can visually tell which way that player is moving.

A vehicle might be a good choice for the left and right direction animation. As the vehicle moves to the left or the right, we should be able to see a distinction in those images. People/characters may also be your choice for this.

For the up and down image, think of things that fly and descend. It might be a hot air balloon, bird/plane, Mary Poppins with her umbrella, or an object that is thrown up in the air.

Images to Create Illusion of Animation

How do we trick the eye into believing what we see on the game is moving? Change image slightly from one image to the next to give your eye the illustion of movement.

One way to do this is by observing the physical world around you, some ideas will come to mind.

Watch a bird fly ... what changes? Wings move, angle of body is different, head position changes. When we see a vehicle move the hub caps on the wheels are spinning/changing, exhaust may be coming out of the rear of the vehicle, the shape of the car tells us which is the front and the back of the car so we know if the front of the car is going to the left or to the right.

When humans walk their knees bend, their feet/ankle positions are different, their arms swing to different positions, and their head may move back and forth.

Some other things that you may want to consider when animating ... eyes moving, feet shuffling, hair bouncing up/down, balloon fuller when floating and flatter when falling, hair bouncing, larger when closer and smaller when farther away.

If needed, look at other animations and other physical world motions to get some ideas for animation.

Either mentally or with simple sketches, decide what images you are going to use to create your animations. Shoot for 5 different images/looks for each of the three animations.

Edit image in Construct2 to Create Your Animations

If you have not already done so, create the image you are going to use for your left and right animation. Insert a new sprite object to do this. Once in the Edit iamge, you may wish to resize the image to something smaller than the default, for instance maybe 125 wide and 75 high. Use the zoom in button to zoom in on the image as you draw it.

Draw your initial image. What does the object look like when not moving?

Tip: You may create your images in GIMP and open them up in the Edit image tool or you can do your work in Construct2's Edit image tool. Consider using the pencil tool to sketch out your outline then fill in with the paintbrush. You may want to do a bucket fill then erase out the features of your image. You can use the rectangle tool to draw solid areas to your image.

Once you have the non-moving image done, we are ready to work on the animation when moving to the left. While in the Edit image tool, find the box that says Animations. Right click on the Default animation and pick Duplicate. Rename the duplicate as Left. Click on Left in the Animations to select that animation. You may want to use this image as the first image for the series of left animation images or you may want to alter it. Once you have that image set, find the "Animation frames" box which is usually below the Edit image. Right click on image 0 and pick duplicate.

You now have two images that are identical in the animation frames. You can click on either of the two images to move back and forth. There are a number of ways to proceed from here. One way is to alter the second image to be as much different as the first image that will be in your animation. Another way is to alter the image slightly as it would look next. Make the changes. Once done, you can either duplicate the 0 or the 1 image. Make the changes. Continue until you have around 5 different images that will form your animation. You can click and drag the images to change the order of them in the Animation frames.

Next we are going to make the Right animation by flipping the left animation. In the Animations window, right click on the Left animation and pick Duplicate then rename it to Right. Select the Right animations. In the Animation frames, select each image then click on the Mirror button with the arrows pointing to the left and right. Do this for each of the images. This is flip them to point to the right instead of the left.

Close out of the Edit image.

Displaying the Animations

Run the layout and use your arrow keys to move to the left and the right. Notice that your initial image only is displayed and it gets flipped over when you go left then back to normal when you go right. In the 8Direction behavior, change the "Set angle" to No. Run layout and verify that your initial image does not change when you go left and right.

To use our animations, we need to do some work on the event sheet. Before doing that, we need to add the Keyboard object to the layout so right click on your layout and insert a new object then pick the Keyboard.

Click on Event sheet 1 and add an event. Select the Keyboard and choose "Key is down". Click to select the key and press the left arrow key. Click Ok then click Done. Click on Add action and pick the object you created for your left and right animation. Choose the "Set animation" action and type "Left" in for the Animation then leave beginning for the From. Click Done. Add an event for Keyboard->"Key is down" then choose the right arrow key. Add the action for your left/right image object to Set animation to "Right" and play from the beginning.

Run layout and use your left/right arrow keys. Notice that as you press the left key you see the left animation and when you press the right key you see the right animation.

If you have a different still or default animation, that is no longer visible. To correct that, add a new event. Select Keyboard then "On key released". Select the left arrow key. Add the action to the left/right image object to Set the animation to "Default". Add an event on the release of the right arrow to set the animation to "Default". Run layout and observe the changes.

Up/Down and 4 Directions

Follow the process for the up/down animation and also for the 4 direction (up, down, left, right) animation. For the up/down, you will be using the up and down arrow keys instead of the left and right. For the 4 direction, you will be doing all four keys. Since there will already be events for all four directions, you can just add a section action to the existing events for the 4 direction animation.

Wrap Up

This is just the beginning of the type of animation that can be done. Graphic artists spend a lot of time perfecting their techniques to create really good animated image sequences.

There are a number of additional things that you can find in Construct2 to make the animations display even more realistic.

As time permits and you have interest, explore some of the additional ways to create better animations in your games.


Copyright © 2021 Eric Schumm. Permission granted to freely use this in your classroom.