Work continues on Eggheadz Bounce, and I really need to catch up with some “journal” work here on the blog. Lately I’ve been finding some spare moments to “dress up” some otherwise bland portions of the UI. A case in point is the “tap to begin” message at the start of a new game.

This type of message should be a “call to action”, because in effect it’s like a mini help screen – it’s letting the user know what’s expected of them right now. Often you’ll see such messages blinking, flashing, pulsing, glowing or otherwise animated, because it helps draw the players attention to them.

(Too often I download a game, press “play”, and am left wondering “ok, how do I make it go?!”. While “Bounce” isn’t a flappy-clone, and does have separate help screens, I felt that borrowing the simple start message strategy might aid the player.)

Question was: how to make it stand out? There are various “glows” and other such effects used elsewhere in the UI, so I wanted something unique for the game screen.

Enter the old-school (Commodore Amiga -era) wavy sinus text scrolly effect. Sure, it’s a bit cheesy, but I’ve tried to keep it subdued, not over-the-top, just enough to catch your eye, without being incredibly annoying. What do you think, have I succeeded?

This type of effect is quite easy to achieve, provided that you can treat your text strings as individual characters. Then it’s simply a matter of keeping some sort of running animation counter and using it as the “theta” in a set of trig calcs to determine the current offsets. For example:

-- convert frame counter into theta
-- the scaling factor will determine overall speed of the wave
local scalingFactor = 0.1
local theta = frameCounter * scalingFactor
local magnitude = 10 -- how far should the characters "wander"?
local offsetX = magnitude * math.cos(theta) -- calc the x offset
local offsetY = magnitude * math.sin(theta) -- calc the y offset
-- let's assume the "home" position in stored in centerX/centerY, then:
textObject.x = textObject.centerX + offsetX
textObject.y = textObject.centerY + offsetY