Make a Bobbing Bar

There was a question on the Forums asking for a Bobbing Bar, one that could be used in a game to indicate power, or something similar.

There was this video that I had made a couple of nights before in about 5 minutes and it is interesting to see the number of attempts and the complexity that people have tried to add to re-create something similar.


link to Video [Here]

It takes time and effort to create content and write code, now not everyone asks for money in return for their time, because it might not be plausable for many to pay the $100+/Hour rate to write simple lines of code like these. So I request you all for one thing.

You can follow me on Twitter, Facebook and read the different sites that I run. I am giving, not asking for anyone to buy anything, so the least any one can do is show appreciation by following and reading. That shall motivate me to get more content, otherwise as many are doing, sites will become paid subscriptions only. So, keep it free...

Right, back to the code

display.setStatusBar(display.HiddenStatusBar)

local back = display.newImage("backdrop.jpg",0,0,true)
local rect=display.newRect(100,300,20,70)
 rect:setFillColor(100,100,200,200)
local text = display.newText("Value",10,10,nil,40)
 text:setTextColor(0,0,0)
 text:scale(0.5,0.5)
 text:setReferencePoint(display.BottomLeftReferencePoint)
 text.x=140
 text.y=300
 
 
local time = 20
local counter = 0 
local dir=1
local isStopped = false

local function move(e)
 --print("!!")

 if isStopped == true then return end

 counter=counter+dir
 if counter>=time or counter<=0 then
  dir=-dir
 end

 rect.height = 8*counter
 rect:setReferencePoint(display.BottomLeftReferencePoint)
 rect.y=300
 
 text.text = counter

end

local function stop()
 isStopped=not isStopped
end

Runtime:addEventListener("enterFrame",move)
back:addEventListener("tap",stop)

This can be bundled into a routine in itself so, hope to get many out of their miseries by attempting different ways to achieve it. Hope that journey brought you some learning. Explanation of the Code
line 1: hides the Status Bar
line 3: creates the background that I use for my samples
line 4: creates the rectangle Bar
line 5: set's the color to a purple with transparency
line 6: creates a text label to display the value
line 7: set's the color to Black
line 8: Scales the text to half (to provide a better Crisper Text)
line 9-11 position the text label on screen

line 14-17: Variables that will be used

line 19-35: the move function
line 37-39: the stop function
line 41: add an event listener for enterFrame
line 42: add an event listener for taps

Move Function Line 19-35
line 22: if the variable isStopped is set then do not do anything
line 24: the counter value is incremented by the value of dir
line 25: if the content is greater than the MaxValue or less than 0
line 26: then make the variable dir negative, i.e. from 1 to -1 and from -1 to 1, so it will either increment or decrease by 1, if you want to change the granularity, this value can be changed
line 29: the height of the rectangle is set to 8x the value can change this to what you like
line 30-31: reposition the rect as it will otherwise jump when it changes height
line 33: display the value on the screen

Stop Function Lines 37-39
line 38: Toggle the value of isStopped to the reverse of what it was, this is done by using NOT

Well, that is all there is to it. Have fun.

cheers,

?:)