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 from this url: https://tinyurl.com/yb4ttfdz
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. on moveEnemy local tLocation // 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 end if // Update the enemy space ship location. add gEnemyDirection to item 1 of tLocation move button "enemy" to tLocation end moveEnemy
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. on moveRocket 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 end if 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 end if // 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 end moveRocket
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. on mainEventLoop // Continue this loop until gRun is set to false. lock screen animateEnemy // Animate the enemy space ship. moveEnemy // Move the enemy space ship. animateRocket // Animate the rocket. moveRocket // Move the rocket. unlock screen // 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 end if end mainEventLoop
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.