Day 4 - Animation

All the code and assets for this tutorial are on github !

On day 3, we added some simple input to control our player. This time we are going to add some simple running animation.

To catch up, download day3 from github

Open up the DIV IDE. If you choose to continue at the splash screen, we should see where we were when we left off yesterday.





The DIV IDE makess it easy to do animation. Lets add some walking movements to our player.

First lets close the open maps we have in the IDE. This should only be our player standing graphic. Select "Close All" from the MAPS Menu:



At the prompt, press accept



Now lets open our player graphic from the FPG we created by dragging the image from the map onto our desktop:









now do this 2 more times so we have three copies of our graphic so your screen looks like this:

double click on one of these to open the editor (alternatively press "edit map" from the MAP Menu)



now we have three frames on animation to play with. lets start editing.


For the first frame, lets move the players head slightly forward and down, so it looks like he's leaving forward.

Select the "scissors" tool from the menu, and then the box selection tool:








Select the players head using the box, and then press the snip tool to select that part of the graphic



The press the "DEL" icon to remove the selection:



using your mouse over the original graphic, you can now re-position the player's head anywhere. We want to just move it down one pixel and to the right like this:



If you press the TAB button you can now cycle through your 3 animation frames and see the head move forward in the frame we edited!



Now we can edit the rest of the body to indicate the players animation framea movement by editing the arms to create a simple 3 frame walking sequence







Now we drag those images back into our fpg. being careful not to overwrite our original graph with ID 1






Be sure to add your images in the right order and change the id in each. I used 2 3 and 4




Our FPG now looks like this




now we have our animation we can apply this to our player. Lets go back to our code window:





We need to keep track of the animation, between frames 2 3 and 4, so lets add that now.


So we understand how to animate, lets make our player "walk" continuously to begin.

Add the following code ABOVE our IF statements.

Each frame, the graph variable is incremented with "graph = graph +", it is then checked to see if it has gone beyond our range - the IF statement "graph>4" checks to see if the graph variable goes above 4 (our animation is in ids 2, 3 and 4) and if so, sets the graph variable back to the start of our animation loop graph "2". This cycles through our animation frames in a continuous loop.

We can check the graphs next to the code by looking at the FPG file.

Your PRG and FPG should look like this.




Lets see how this looks by running the program with F10



Because the animation is changing every frame, and we don't have many frames, our player looks like he is running very fast! So lets fix this with a PRIVATE variable we can check to only change the animation frame when we want to.

Above the BEGIN in our player PROCESS, add a private variable ike this:

now the graph animation logic only runs when the animcount counter is greater than 3 - which is then reset and the graph is incremented and so on.

our player PROCESS code should look like this now:



Run the code, and use the left / right keys to move our character.




Keywords learned in this lesson: