This tutorial demonstrates how to create sprites and game loops in Hippo animator.
Sprites by what game developers call in item that moves around the screen.
Here we import an image of a beach ball to use as a sprite, drag the beach ball the editor and change it’s width and height to 100, turn of the timeline so the ball can be controlled using script and set the script ID to bar.
In the Movie properties, opened the general script.
This is where global variables can be declared.
Create two new variables for the velocity of the ball.
Ball velocity X is set to 5 velocity Y set to 8. Any initial values will work.
Now that we have created a sprite we need to create a game loop fortunately hippo animator has one built in.
Be on update script event in the movie properties is called every time the
Movie updates just like a game loop.
To move the ball sprite set Ball.X
Plus equals ball velocity X and Ball.Y
Plus equals ball velocity.Y.
This adds the velocity to the X&Y values the ball every time the movie updates.
Okay let’s see what we’ve created, the ball flies of the bottom the player it’s moving far too fast.
In the general script adjust to the values the ball velocity to make it move slower.
That’s a better speed but the ball still flies off the bottom of the player let’s make it bounce.
Earlier we set the width the height of the ball to 100 so the radius of the ball is 50.
The y value of the ball is at the center of the ball, we can create a new variable Max Y and set it to get movie height -50.
This is the maximum by value over the ball before it should bounce if Ball.Y is greater than Max Y, Ball Y equals Max Y ball velocity Y equals minus ball velocity Y.
stop the ball from going off the bottom and reverse the Y velocity so it goes upwards.
Okay so now it bounces but goes off the right create a Max X variable equal to getMovie width -50 and create if test for the value of the ball just like the Y value it should be so to create test for the left and top bounce.
If Ball.Y is less than 50, set it 250, reverse the velocity in the same for Ball.X. The ball now bounces off every edge love the movie.
Export the movie to HTML using the default settings.
Notice that the ball moves a little faster in the web browser.
Every device in browser runs a slightly different speed but when developing a game we need the animation to run it exactly the same speed everywhere.
In the General script add a new variable LastTime and send it to a new date value.
The LastTime variable contains the exact time indeed at the moment it was created.
In the On Update script we will calculate the change in time since the last update, create a new variable new time and again set it to a NewDate.
We can calculate the change in time by subtracting the GetTime values of the new in LastTime.
Finally set the value of the LastTime to the NewTime ready for the next update.
Now when we move the ball, we can multiply the velocities by the change in time.
This will make the ball move at the same speed on all browsers and devices.
When we test the movie, the ball is moving too fast again.
Adjust to the velocities in the general script until the ball moves it a speed you are happy with.
There we go! finally export the movie again. notice that the ball in the player moves exactly the same speed as the ball in the web browser.
Click here to Download Hippo Animator.
This HTML5 Software is supported on Windows and Mac OS X.