Turn a numbered timer into a bar timer.

Solar2D General Questions/Discussion
#1

This might sound confusing but I will do my best to explain. 

So, I have this timer:

local timeLimit = 5 timeLeft = display.newText(timeLimit, 0,0, "Roboto-Light", 52) timeLeft.x = \_W/2 timeLeft.y = \_H/2 - 170 timeLeft.alpha = 0 timeLeft:setFillColor(0,0,0) function resetTimer() timer.cancel(tm) resartTm = timer.performWithDelay(1000, startTimer, 1) timeLimit = 6 end local function timerDown() timeLimit = timeLimit-1 timeLeft.text = timeLimit if(timeLimit==0)then resetTimer() end end

This works fine, but instead of the number representation, I prefer a bar that decreases instead. Rather than setting everything up from scratch is it possible to use that timer setting > hide it out > and link a newRect graphic to it instead?  

#2

There’s no reason why you can’t do that.

#3

Hey Rob, I’ve tried to replace the timeLeft.text fields so that it works with my timeRect graphic instead but it doesn’t work. How is this done? 

#4

We can’t see the changes you’ve made, so re-posting the new code would be a great start. Also a description of what you’re seeing and your expectations would help too. Are you getting an error?

Rob

#5

Hey Rob, sorry for not describing it better. With the code in the OP I see the timer displaying 5 seconds and counts down. The timeLeft.text is displaying it to the screen. The changes I made to the above code were: 

I added a newRect to be the bar that decreases

timeRect = display.newRect(0,0, 320, 3) timeRect.y = \_H/2 - 100 timeRect.x = \_W/2 timeRect.alpha = 0.5 timeRect:setFillColor(0,0,136)

And tried to connect this graphic to the timer by removing this part of the timeDown() code from OP

timeLeft.text = timeLimit

And replaced it with this:

timeRect.xScale = timeLimit

What I was expecting to happen was I remove the text that shows the timer on the screen and use the timeRect bar as its replacement. 

That all works fine, but the bar isn’t decreasing (or shrinking) as the timer is counting down in the background. 

#6

All display objects start with an xScale value of 1. Decreasing this value makes the object appear to become thinner; increasing makes the appearance wider. You are creating the object with the default xScale value of 1. You then set it to the timeLimit value, which is 5, increasing the width of your display object immediately. 

You can either a) create a spritesheet and cycle through the frames, or b) decrease the width of your display object, so that once you set the xScale to 5, you will be able to see the decreasing xScale amount graphically.

#7

Ahh yes I see. It is working now. Thanks for pointing that out  :slight_smile:

#8

There’s no reason why you can’t do that.

#9

Hey Rob, I’ve tried to replace the timeLeft.text fields so that it works with my timeRect graphic instead but it doesn’t work. How is this done? 

#10

We can’t see the changes you’ve made, so re-posting the new code would be a great start. Also a description of what you’re seeing and your expectations would help too. Are you getting an error?

Rob

#11

Hey Rob, sorry for not describing it better. With the code in the OP I see the timer displaying 5 seconds and counts down. The timeLeft.text is displaying it to the screen. The changes I made to the above code were: 

I added a newRect to be the bar that decreases

timeRect = display.newRect(0,0, 320, 3) timeRect.y = \_H/2 - 100 timeRect.x = \_W/2 timeRect.alpha = 0.5 timeRect:setFillColor(0,0,136)

And tried to connect this graphic to the timer by removing this part of the timeDown() code from OP

timeLeft.text = timeLimit

And replaced it with this:

timeRect.xScale = timeLimit

What I was expecting to happen was I remove the text that shows the timer on the screen and use the timeRect bar as its replacement. 

That all works fine, but the bar isn’t decreasing (or shrinking) as the timer is counting down in the background. 

#12

All display objects start with an xScale value of 1. Decreasing this value makes the object appear to become thinner; increasing makes the appearance wider. You are creating the object with the default xScale value of 1. You then set it to the timeLimit value, which is 5, increasing the width of your display object immediately. 

You can either a) create a spritesheet and cycle through the frames, or b) decrease the width of your display object, so that once you set the xScale to 5, you will be able to see the decreasing xScale amount graphically.

#13

Ahh yes I see. It is working now. Thanks for pointing that out  :slight_smile: