Keeping Time
Carpe diem! “Gather ye rosebuds while ye may, Old Time is still a-flying,” the poet Virgil exhorted the youth of his day. Makers of today know to seize the moment, in our world and the worlds we create with raw code and microprocessors. Like oarsmen moving in synchronicity to drummer’s beat, animated characters rock our digital worlds to a clock’s pulsating rhythm.
“Mole Mash” is the second app we build in CwC. It exposes concepts around animation using clocks and timers. These concepts are at the heart of iconic games like Super Mario Run or Flappy Bird. Master the time-keeper’s art to build the next iconic game to uplift and educate!
Rhyme & Rhythm
All life moves to a rhythm. When rhythm goes missing, we immediately sense discord. In the digital world, clocks provide a rhythm to use for orchestration. In the event-driven paradigm, we set timers on clocks to trigger events at a regular interval. Let’s unpack this, step by step.
The washing machine makes a wonderful illustration of the use of a timer to orchestrate multiple electromechanical systems. Imagine a rotisserie-like shaft that turns slowly at a constant speed. On the shaft are cams, circular discs with bumps on the periphery. As the shaft turns, these bumps operate switches that turn different systems on or off — inlet valves, outlet valve, motor. The profile of a cam’s periphery determines when the system it operates comes online and goes offline and the duration in between. The relative positioning of cams on the shaft provides coordination among systems.
The shaft and cams have given way to code with clocks and timers on a microprocessor. In your home appliances such as dishwasher, washer and dryer, cooking range, you will find microprocessors made by large semiconductor manufacturers such as Texas Instruments or Broadcom and running code written in the C or C++ programming languages. The microprocessor in a smartphone is also made by these semiconductor manufacturers. And we have the opportunity to write code to run on these microprocessors in App Inventor as easily a building with LEGOs.
Nick of Time
Use App Inventor’s Clock component from the Sensors drawer. Whereas a sensor signals an event when triggered, the clock component signals events in a steady stream at a set time interval. Set the interval using the clock’s TimerInterval property, say 500 ms. Now, an event is signaled every 500 ms or half-second.
Now that we have our time-keeper, It is now time to gather the rest of our ensemble. We need a Canvas component to set the stage. And an ImageSprite component for the actor. These are found in the Drawing and Animation drawer of App Inventor.
All the world’s a stage,
And all the men and women merely players;
They have their exits and their entrances,
And one man in his time plays many parts.
William Shakespeare
Creative Canvas
Use a canvas to provide an interesting backdrop for action. The sprites “live” in the canvas and sprites exist only within a canvas perimeter. A canvas may not have any components other than sprites and as many sprites as needed can share a canvas. As the backdrop, the canvas not only provides cool graphics, it provides a frame of reference for sprite location.
Get Sanjay Bhatikar’s stories in your inbox
Join Medium for free to get updates from this writer.
The main canvas properties are background image and size. It is customary to set the canvas dimensions in relation to the screen for consistency of display (within reason) across the diversity of screen sizes and aspect ratios among Android phones or tablets. Sprite location can then be specified in relation to canvas size.
In “Mole Mash”, which is a game of whack-a-mole, we have set the canvas to show mole-holes, thus creating an ambience suitable to the game. We have set dimensions to use up the entire available real-estate of the screen. Below the canvas, we have positioned a label to show the score and a button to start the game or reset.
Spirited Sprites
A sprite has properties for aesthetics as well as animation. The Picture property sets the look and the Height and Width properties set the size. The sprite has location in cartesian coordinates, with the top-left corner of the canvas as the origin (i.e (0, 0)). In “Mole Mash”, the mole moves to a new random location every time the timer fires, e.g. 500 ms. The x-coordinate is calculated as a random fraction of the canvas width and the y-coordinate is calculated as random fraction of the canvas height.
What about “shooter” games that have a projectile that is launched at a moving target? A key set of properties for sprite animation is heading, speed and interval. Simply put, heading is the compass direction in which to move, speed is the size of the step and interval is the time (in milliseconds) in which to take the step. Use these properties to animate a sprite without explicitly updating the coordinates every time.
You may have guessed that a sprite has own internal clock. In “Mole Mash”, we provided a clock, set the timer, calculated a location and explicitly set coordinates at each step. To use a sprite’s own clock, set the Enabled property to truth. The sprite will then follow a trajectory according to the animation settings, marching to own tune. We use this method in the “Pong” game which is the third app we build in CwC.
Tactile Feedback
The challenge that “Mole Mash” throws up is to hit the canny mole in the fleeting pause between hops and score points. A sprite has a rich set of events for a responsive gaming experience based on tactile feedback from the gamer. These events lend the twist to the plot that makes a game interesting. In a software sense, these are timer interrupts that allow interleaving parcels of code for deviation from the regular timer-driven flow.
These events include collisions among sprites and sprite and canvas edge. They are as follows:
- Touched: The player touches a sprite. This can be further resolved into TouchUp and TouchDown depending on whether the player puts their finger on the sprite or lifts it off the sprite.
- Dragged: The player drags the sprite across the screen with the finger.
- EdgeReached: The sprite touches an edge of the canvas.
- CollidedWith: The sprite bumps into another sprite.
- Flung: Think “golf swing”.
With sprites and characters from Drawing and Animation drawer of App Inventor, you have a complete toolbox for animation. Go ahead and make apps that entertain and educate!
