revUp - Updates and news for the LiveCode community
Issue 121 | October 28th 2011 Contact the Editor | How to Contribute

Add Motion to Animated Overlays
This lessons shows you how to add motion to animated overlays by adding move commands to the animation schedule.

by Hanson Schmidt Cornelius

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.

Introduction

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?

Global Variables

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.

Hanson Schmidt-Cornelius

About the Author

Hanson Schmidt-Cornelius is an experienced software developer with an interest in artificial intelligence.

 

Main Menu

What's New

Get LiveCode 5 with Free Animation Engine Today