Platform Game tutorial 02 - Animating the hero

If you have finished the first tutorial, great job!

Now let's move on to the 2nd part of the tutorial. It is a little bit challenging but if you follow these steps closely, you should be ok :)

let's start with....

Step 1:

In Tutorial 1 we have created 6 attributes:

    a) buttonLeft [boolean]
    b) buttonRight [boolean]
    c) buttonJump [boolean]
    d) maxJumpCount [Integer]
    e) heroSpeed [Integer] set this to 200
    f) heroJumpHeight [Integer] set this to 250

Now let's Create 9 more attributes!

    g) heroX   [real]
    h) heroY   [real]
    i) heroDead  [boolean]
    j) lives  [integer]    set this to 3
    k) heroShoot  [boolean]
    l) heroDirection   [integer]    set this to 1
    m) ringsCollect   [integer]
    n) doorUnlock   [boolean]
    o) key   [boolean]

So altogether you will have all these attributes shown below:

Step 2:

Let's track the X and Y position of the hero actor so that other actors know where the hero actor is on the screen. This is useful when you want to stick something onto the hero actor or you want the enemies to know where the hero is so that it can chase after the hero.

    a) Go into the hero actor
    b) add 4 behaviors:

         i)   [constrain Attribute] game.heroX to self.Position.X
         ii)  [constrain Attribute] game.heroY to self.Position.Y
         iii) [change Attribute]    self.Color.Alpha to 0
         iv) control camera

Step 3:

Right now our hero is just a simple white rectangle. Let's add the animations and images to the heroImage actor by adding rules to it. We won't be doing this to the hero actor because we want to make the heroImage actor "stick" to the hero actor.

Go into the heroImage actor (which you have already created in tutorial 1)

     i) Add the image walk2.png into the actor

     ii) Next add a RULE.

              when game.heroDead is false

                  [change attribute]       self.Color.Alpha    to   1
                  [constrain Attribute]   self.Position.X       to   game.heroX
                  [constrain Attribute]   self.Position.Y       to   game.heroY + 5


                  otherwise/else

                 [change attribute] self.Color.Alpha to 0

           You can refer to the screenshot below:

Step 4:

Now we will add the walking animation when the hero moves to the left.

In the heroImage actor,

i) Add another RULE.

              when game.buttonLeft     is   true
               when game.buttonRight  is   false

                  [change attribute]       self.Graphics.Flip Horizontally to   true
                  Animate (add the images walk1.png, walk2.png, walk3.png, walk4.png)

           You can refer to the screenshot below:

ii) Now we'll make the animation when the hero moves to the Right.
 
     Copy the RULE above, paste below it and just change:

               when game.buttonLeft    is  FALSE
               when game.buttonRight  is  TRUE
               [change attribute]       self.Graphics.Flip Horizontally to   FALSE

 see the screenshot below:

iii) Next, when both Left and Right button is pressed, stop the animation and show just One image.

        Copy the RULE above, paste below it and just change:

               when game.buttonLeft    is  TRUE
               when game.buttonRight  is  TRUE
               [change image]  set Image  to:  walk2

               otherwise/else

               [change attribute] self.Motion.Linear.Velocity.X to 0


 see the screenshot below:
 

iv) Next, when both Left and Right button is NOT pressed, stop the animation and show just One image.

        Copy the RULE above, paste below it and just change:

               when game.buttonLeft    is  FALSE
               when game.buttonRight  is  FALSE
               [change image]  set Image  to:  walk2
 
               otherwise/else

               [change attribute] self.Motion.Linear.Velocity.X to 0


 see the screenshot below:

Step 5:

Finally, we'll make the animation for the hero when it jumps.

Add another RULE.

              when game.maxJumpNum = 1

                  Animate (add the images jump1.png, jump2.png, jump3.png, jump4.png, jump5.png)

 Now preview your game!
Continue on to tutorial 3