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.

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

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

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

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.