How do I add Motion to Animated Overlays?
This lessons shows you how to add motion to animated overlays by adding move commands to the animation schedule.
The sample stack for this lesson can be downloaded here.
The Lesson: How do I Create Animated Overlays? shows you how to create sprites that animate through a number of images by means of an indefinite loop or as a result of external influences. This lesson shows you how to add motion to these sprites in order to move them around the screen.
The changes outlined in this lesson focus on modifications to the code only and do not impact on any areas of the graphical interface that is described in lesson: How do I Create Animated Overlays?
Add a global variable that is used to track the direction in which the space ship is traveling.
local gEnemyDirection // The direction in which the enemy is traveling.
Moving the Space Ship
The space ship hovers at a constant height and moves from left to right and right to left. At each call to moveEnemy, the space ship travels horizontally by one pixel. You can change the motion behavior of the space ship by modifying the X and Y values of tLocation in the moveEnemy command.
// Move the enemy space ship.
// Get the current location of the enemy space ship.
put the location of button "enemy" into tLocation
// Test the display range for the enemy ship and
// change the direction of travel if necessary.
if item 1 of tLocation < 100 then
put 1 into gEnemyDirection
else if item 1 of tLocation > 300 then
put -1 into gEnemyDirection
// Update the enemy space ship location.
add gEnemyDirection to item 1 of tLocation
move button "enemy" to tLocation
Moving the Rocket
The rocket motion is controlled by the user selecting the boost button. This allows the rocket to travel upwards and to the right. Once the boost is stopped, acceleration of the rocket decreases and stops, resulting in the rocket drifting slowly to the ground. In order to facilitate extended travel to the right, the space ship warps space by exiting the LiveCode card on the right and entering the card again on the left. As with moveEnemy, you can update the X and Y values of tLocation in moveRocket to change the performance of the rocket.
// Move the rocket.
local tLocation, tMoveVector
// Derive a movement vector,
// based on the current rocket image that is being displayed.
put gRocketImg * 2 & comma & gRocketImg * (- 1) + 1 into tMoveVector
// Get the current location of the rocket.
put the location of button "rocket" into tLocation
// Test the display range of the rocket
// and control the rocket movement accordingly.
if item 1 of tLocation > 338 then
put 40 into item 1 of tLocation
if item 2 of tLocation < 30 then
put 1 into item 2 of tMoveVector
else if item 2 of tLocation > 380 and item 2 of tMoveVector > 0 then
put 0 into item 2 of tMoveVector
// Update the rocket location.
add item 1 of tMoveVector to item 1 of tLocation
add item 2 of tMoveVector to item 2 of tLocation
set the location of button "rocket" to tLocation
Updating the Scheduler
So far, all code changes were made by adding a new variable and new commands to the existing code base. In order for the animation to use the commands, it is necessary to update one existing section of code. The mainEventLoop command is updated by adding moveEnemy and moveRocket to the list of commands that are to be executed. This allows code to be developed and added in a modular fashion.
// Main control loop.
// Continue this loop until gRun is set to false.
animateEnemy // Animate the enemy space ship.
moveEnemy // Move the enemy space ship.
animateRocket // Animate the rocket.
moveRocket // Move the rocket.
// Delay further execution by 50 milliseconds.
// But allow button clicks to be processed.
if gRun is true then
send "mainEventLoop" to me in 50 milliseconds
Running the Animation
Once you have updated the code, you may have something that looks like the image shown here. The start button starts the animation of the space ship and allows you to press the boost button that tilts the rocket and increases the flame from the rocket booster. In addition the space ship and the rocket now also move around the card.