Contents

Holding Buttons Responsive Layouts

Creating a Game Loop

When creating games, images or sprites, are added to the movie to represent elements in the games such as characters, vehicles or explosions. The position of the sprite is adjusted many times a second from inside a loop depending on some game logic. Every movie has a built in game loop, called 'On Update'. It is called every time the animation updates, and it can be found in the movie properties.


Creating a Game Loop 1

Create a new movie and add an image, also called a sprite. We've used a beach ball.


Import Import

Click to save this image to your computer.


BeachBall.png
Creating a Game Loop BeachBall

Creating a Game Loop 2

in the properties of the first frame of the beach ball, turn off the timeline and set its 'Script ID' to Ball. Turning off the timeline allows the ball to be controlled using Javascript.


Creating a Game Loop 3

We're going to make the beach ball bounce around the movie. So we need to create some velocity variables in the 'General' script event. Any initial values will do.



var VelocityX=10,VelocityY=7;

In the 'On Update' event, we can make the ball move by adding the velocity values to the X and Y values of the Ball.



Ball.X+=VelocityX;
Ball.Y+=VelocityY;

Press play to test the movie. The ball should fly straight off the movie.


Play Play

Creating a Game Loop 6

The X and Y properties of the ball are its center point. By checking these values against the width and height of the movie, we can check to see if the ball should bounce. To bounce the ball, simply reverse the velocity.



Ball.X+=VelocityX;
Ball.Y+=VelocityY;
var MovieWidth=600,MovieHeight=400,BallRadius=50;
if(Ball.X>MovieWidth-BallRadius){VelocityX=-VelocityX;}
if(Ball.X<BallRadius){VelocityX=-VelocityX;}
if(Ball.Y>MovieHeight-BallRadius){VelocityY=-VelocityY;}
if(Ball.Y<BallRadius){VelocityY=-VelocityY;}

Press play to test the movie again. The ball should now bounce around.


Creating a Game Loop 8

Export the movie to HTML and notice that the Ball moves at a slightly different speed to the player. This is because different web browsers and different devices run at different speeds.


Creating a Game Loop 9

To make the ball move at the same speed everywhere, we need to calculate the difference in time between updates. The 'On Update' event includes two helpful variable that do just that. TimeChange : The number of frames that have passed since the last update. SecondsChange : The number of seconds that have passed since the last update. These values are independent of whether the movie has been stopped or not. They are simply a way to calculate the time since the last update. To make animation always run at the same speed, each change in position, angle or opacity needs to be multiplied by the change in time or seconds.



Ball.X+=VelocityX*TimeChange;
Ball.Y+=VelocityY*TimeChange;
var MovieWidth=600,MovieHeight=400,BallRadius=50;
if(Ball.X>MovieWidth-BallRadius){VelocityX=-VelocityX;}
if(Ball.X<BallRadius){VelocityX=-VelocityX;}
if(Ball.Y>MovieHeight-BallRadius){VelocityY=-VelocityY;}
if(Ball.Y<BallRadius){VelocityY=-VelocityY;}

Test the movie in the player and HTML. The ball should move at exactly the same speed in both.


Holding Buttons Responsive Layouts