Aug 092011
 

This tutorial will show you how to use a timer bar in your Android or iPhone application.

Time bars are important in lots of kinds of apps and making one can prove a headache for anyone who has never had to implement one before.

The most confusing part for me was how to make the bar appear to stay in one spot and not occasionally jump a little.

This tutorial is going to be done in a plug and play style, (is that right? “plug and play“?) as in, you can copy my code, whack it in your main.lua file and have it just work – no images or extra code required!

Let’s see the code!

1
2
3
4
5
6
7
8
9
10
11
12
13
--Show a basic white bar
local timeBar = display.newRect( 20, 165, 280, 20 )
timeBar:setReferencePoint(display.BottomLeftReferencePoint)
timeBar.x = 20
timeBar.y = 165

--Make the bar shrink over time
local function loseTime (event)
timeBar.width = timeBar.width - 2
timeBar:setReferencePoint(display.BottomLeftReferencePoint)
timeBar.x = 20
end
gameTimer = timer.performWithDelay(100,loseTime, 0)

And that’s it!

You can then easily add in functions to add more time, to end the game when time is up, to make time go faster or slower, etc. (You can also use your own image just as easily, which I’d recommend as a plain white bar is not the most aesthetically pleasing.)

It’s only a tiny snippet of code and yet it’s been SO useful to me; I hope it will be for you as well.

Peach Pellen :)

PS – I do hope to write many more tutorials over the coming months so if you have a suggestion or a request please share it on the Facebook page!

Like this post? Subscribe to the monthly newsletter!

 

  11 Responses to “Using a Time Bar in your Corona App”

  1. Hello, I’m Joseph (Temena) founder and head coder at Le Codage Valide (http://codage-valide.weebly.com) and I just wanted to let you know that I use most of your tutorials for my companies projects.
    They are amazing, easy, and work great! There are some outdated things such as setReferencePoint is outdated thanks to anchors.
    Anyway, thank you for all these great (free) tutorials :D
    You are quite amazing, and my whole team uses you for learning some stuff here and there.
    You never cease to amaze me so please, keep up the good work. I will donate as soon as I can (at least $5-10) since I’m 13.

    • Hi Joseph – thanks for the kind words :) My old tutorials relating to corona will never be updated as I no longer support it, but please check out my new Platino tutorials; they’re just as good and I am regularly adding more!

  2. Sorry Tadd, the notification for this got swallowed up by an onslaught of emails ^-^;

    Can you make a forum thread and share the link? Post what you have and I can try to assist :) (Much easier than trying to work in comments – plus I check the forum even when I am not on top of my emails ;))

  3. I don’t suppose you can give me a quick “This is how it would look” example, would you? I’ve been workin on this and my brain is now trying to bore a hole in the back of my skull to escape ….

  4. Hey Peach – this is awesome and I’ve used this in an app. Now I’m trying to redo things a bit …

    Basically, we have a fuse and I’m thinking a mask would go over the fuse hiding the fuse.

    Can this excellent example be used this way? Or will I need to redo the timer a different way?

  5. 1
    2
    3
    4
    5
    6
    7
    originalTimeWidth

    local function refuel (event)
    timeBar.width = timeBar.width + originalTimeWidth / 3
    timeBar:setReferencePoint(display.BottomLeftReferencePoint)
    timeBar.x = 20
    end

    That would actually do 33.333333 (etc) %, but something like that, maybe?

  6. Right now I am working on some weird stuff.

    The timer, I am using as a ‘fuel’ gauge. When I collect ‘fuel’ packs I am trying to get the ‘fuel’ gauge to fill back up by a certain amount, like 30% or whatever

  7. Glad it seems useful for you :)

    The bar will never totally disappear – it can get down to 1 pixel but that’s it as there is no width=0.

    Removing it or toggling visibility will work though, as you said.

    …. My house is cold. Stupid 2AM weather >.<‘

  8. This will be handy.

    This would be handy for a bar for when a power up is recieved then I could match this with the time of the power up to let the player know when they lose the powerup.

    ….pause

    ..Had to go try the code – it works! I put an event listener on the power up that would display this at the top and it goes down to nothing. I’ll have to put some kind of removeself or something to remove the little sliver that’s left of the white bar but overall very cool.

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notify me of followup comments via e-mail. You can also subscribe without commenting.