How to make a bar moving up and down? (Beginner question)

Games
#1

Do you remember Worms? The moving bar, that goes from full to empty until you hit a button. Thats what I was trying to make, but since I’m very new to all this I failed miserably.

Here is something I came with but that didn’t work:

function powerBar()
if bar < bar_max then
bar = bar +1
elseif bar > bar_min then

bar = bar -1
end

I know, this is pathetic but I can’t think of anything else. I was thinking I could also make a “meter” thing, where a needle moves up and down a meter until you tap, but…yeah, can’t do it.

Could some kind soul help a fellow out here? How could I accomplish this?

It doesn’t help that I wanted the min value to be 3 and the max value to be 18, that just further got me stuck.

Thanks for reading and thanks if you can try to help! [import]uid: 65258 topic_id: 10636 reply_id: 310636[/import]

#2

kunio, there is a different kind of “meter” in the Ghosts vs. Monsters example that you may want to check out. It uses a “fling” type of meter, but it may get you on the right track.

Basically, think of capturing where you first touch an object, moving it some distance (in this case the the left) - subtracting the difference in those positions and creating an algorithm to apply a force in some direction.

Run the code and search for “flingNow” in the level1.lua file

It may help get you going… or not LOL Hope it helps!

Croisened [import]uid: 48203 topic_id: 10636 reply_id: 38655[/import]

#3

I already had a look at that, but its not what I want, and it seems too complex to take it apart and translate, since I can’t even make the simple “bar moving up and down” work. As you can see above.

It was so simple to make in Flash, in Corona it seems very hard. (For a beginner at least) [import]uid: 65258 topic_id: 10636 reply_id: 38688[/import]

#4

@kunio,
Welcome on your first day, here’s a video sample of what you wanted to do, right?

http://iphone.oz-apps.com/a-bobbing-powerbar-sample

cheers,

?:slight_smile: [import]uid: 3826 topic_id: 10636 reply_id: 38711[/import]

#5

Yes, thats exactly what I am trying to do. Then, when you tap, it should stop at that value, and then you’d use it for something.

Can you help me with that? I didn’t see an explanation on the site you linked.

Thank you! [import]uid: 65258 topic_id: 10636 reply_id: 38712[/import]

#6

Sorry for bumping, but could you please help? I still couldn’t figure this out nor find an example that I could understand. [import]uid: 65258 topic_id: 10636 reply_id: 38800[/import]

#7

@kunio,
I made that last night past 1:00 in the morning, and right now it is 1:47 am. Neways, since I am up, let me tell you the secret.

it is what you would use to bounce a ball in pong. Still did not get it, right…here’s the code

local dir=1
local value=0

local function getValue()
–start a loop here
value=value+dir
if value > max or value < 0 then
dir=-dir
end
–end loop here
end

while true do

getValue()
end

[import]uid: 3826 topic_id: 10636 reply_id: 38804[/import]

#8

@kunio,
I made that last night past 1:00 in the morning, and right now it is 1:47 am. Neways, since I am up, let me tell you the secret.

it is what you would use to bounce a ball in pong. Still did not get it, right…here’s the code

local dir=1
local value=0

local function getValue()
–start a loop here
value=value+dir
if value > max or value < 0 then
dir=-dir
end
–end loop here
end

while true do

getValue()
end

[import]uid: 3826 topic_id: 10636 reply_id: 38805[/import]

#9

the rest what you saw in the video were just pretty UI elements displaying the data.

do not run the code as is, the while loop might halt the OS on you.

cheers,

?:slight_smile: [import]uid: 3826 topic_id: 10636 reply_id: 38806[/import]

#10

What does "while true do

getValue()
end"

do? While what is true? Also, do you then just make a rectangle that adjusts the length by the value of dir? What do you have to put in the touch event to stop the bar? Make whatever “while true” refers to “false”? Sorry that I see numb skulled but it sounds very abstract to me. [import]uid: 65258 topic_id: 10636 reply_id: 38808[/import]

#11

“while true do” simply performs the loop without stopping. true is the boolean test, and when it’s true (which, in this case, is every iteration), the conditional statements run.

it’s exactly like saying “while a = a do” because a will always equal a ( a = a is always true ).

while true do  
 print("this will print forever, if you let it")  
end

So, what you’d need to do is have something like (pseudo-code):

counter = true  
while counter do  
 showBar()  
 counter = mouse\_was\_clicked  
end

Your showbar() will change the value you’re trying to obtain, as well as show the bar. mouse_was_clicked is set by your events handler.

I’m a n00b with Corona, so I’m not quite sure where to put this loop construct. I’m guessing in a timer, as otherwise I don’t know how you’d obtain other events. Hopefully, an expert will chime in… :slight_smile:

I’m writing a game that requires an animated bar and a click to determine the value, so I’ll be back…
[import]uid: 61132 topic_id: 10636 reply_id: 38815[/import]

#12

Thank you coronasdk730, I really appreciate your input. It would be great if you could share your experience when you got further along with this.

So it executes constantly, like an OnEnterframe Event? From your pseudo code, it would set counter to true when clicking the mouse/tapping the screen though, no?

I still don’t get how you make the bar. Do you do a rectangle that adjusts its length based on the variable?

Still having trouble with the increasing and decreasing of the value too, damn I feel dumb. [import]uid: 65258 topic_id: 10636 reply_id: 38846[/import]

#13

> From your pseudo code, it would set counter to true
> when clicking the mouse/tapping the screen though, no?

Yes, and it would then exit the loop.

> I still don’t get how you make the bar. Do you do a
> rectangle that adjusts its length based on the variable?

That’s one way. Probably the easiest, if your bar isn’t a color gradient (mine is).

Here’s some more pseudo-code with a value adjustment:

local str = 0 -- this will be the user's result  
local adj = 1 -- are we going UP in value or DOWN  
local clicked = get\_mouse\_event()  
local max = 300 -- no values over 300 to be used  
  
while not clicked do  
 str = str + adj -- if adj is 1, then str is going up  
 -- otherwise, adj is -1 and str is going down  
 if str \> max or str \< 0 then  
 adj = -adj  
 end  
 draw\_line( x, y, x1, y1 ) -- or resize the image  
 clicked = did\_mouse\_click()  
end  
  
-- okay, we've exited the loop and have our value for str  
  
myObj:applyLinearForce( ... str ... ) -- use str

Feel free to ask if you have any questions. I’m researching on how to use a while loop in my code. I hope I don’t have to limit the adjustment to the frame rate! YIPES! Might have to go to straight Obj-C if that’s the case. UGH! :slight_smile:
[import]uid: 61132 topic_id: 10636 reply_id: 38849[/import]

#14

Why is it a mouse event anyway, isn’t the standard a touch event? I will try that and mess around with the code when I get home. Looks way more clear now, hopefully I really got it.

Of course a gradient looks nicer, is that a lot more work? I miss the masking from flash, you could do awesome UI elements with that. [import]uid: 65258 topic_id: 10636 reply_id: 38850[/import]

#15

> Why is it a mouse event anyway,
> isn’t the standard a touch event?

Yes, it’s a mouse event.

I’m new to Corona SDK and iPhone programming, so I’m still used to thinking of the mouse instead of touches… :smiley:
[import]uid: 61132 topic_id: 10636 reply_id: 38852[/import]

#16

Everything’s working good EXCEPT for updating the display of the bar.

I’ve posted this topic to get to the bottom of some of the issues I’m having.
[import]uid: 61132 topic_id: 10636 reply_id: 38868[/import]

#17

Guys try this… I threw this together and maybe it will help get going. it is certainly not optimized or anything. Some features that would be good to add would be to set up some interval timers to make the bar move faster and faster as it gets going, also if you click right when the meter hits maximum it will reset to the beginning so that needs cleaned up. Other than that maybe it will help, check it out…

You need to get a copy of the “ui.lua” file and include it in your project directory, then put this into your main.lua file and throw some small image named “play.png” in there as well to server as the trigger button.

It works like this: Click it once - the meter starts moving, click it a second time - the meter stops and a third time - it will reset to start all over again.

Enjoy…

[code]
local ui = require(“ui”)

local startingX = 10
local startingY = 100
local maxX = 310
local meterInterval = 5

local bar = display.newRect(10, 111, 300, 4) --paint a line that the meter indicator will travel on
bar:setFillColor(255,255,255,255) --set the color to white

local meter = display.newRect( startingX, startingY, 10, 25 ) --paint meter indicator
meter:setFillColor( 125, 220, 125, 255 ) --set the color to green

local readyToFire = true --track when we are ready to move the meter
local meterInMotion = false --track when the meter is in motion

local function Move(event)

–Move the meter
meter.x = meter.x + meterInterval
meterInMotion = true

–If we hit the max stop the meter
if (meter.x >= maxX) then
Runtime:removeEventListener( “enterFrame”, Move )
meter.x = maxX
print(“Meter Stopping”)
meterText.text = "Power: " … (meter.x - startingX)
meterInMotion = false
end
end

local function startMoving()

if (readyToFire) then
print(“Starting to move the meter”)
readyToFire = false
Runtime:addEventListener( “enterFrame”, Move )
else
if (meterInMotion) then
print(“Just need to stop the meter”)
Runtime:removeEventListener( “enterFrame”, Move )
meterInMotion = false
else
–reset back to the beginning
print(“Resetting the meter”)
meter.x = startingX
readyToFire = true
end
meterText.text = "Power: " … (meter.x - startingX)
end
end

local theButton = ui.newButton{
default = “play.png”,
over = “play.png”,
onRelease = function(event) startMoving() end
}

theButton.x = display.contentWidth / 2
theButton.y = 400

meterText = display.newText( “”, 10, 300, “Helvetica-Bold”, 20 )
meterText.x = display.contentWidth / 2
meterText:setTextColor( 255, 255, 255, 255 ) --> white
[/code] [import]uid: 48203 topic_id: 10636 reply_id: 38902[/import]

#18

croisened, thank you. The problem with your code is that your input values are limited to the resolution of your FPS (30 or 60).

At 30 FPS, if I wanted the bar to go from 0 to 300 in half a second, I would have to increment in steps of 20. My user would only be able to select from 15 values between 0 and 300, instead of able to select ANY value from 0 to 300. That’s unacceptable, but is it inevitable when working with Corona? I hope not!

As you can see from the example code I posted in the other thread (see my post above for the link), I can get a resolution much much higher, but I need to be able to update the graphics and query events. Take a look at that and tell me what you think.
[import]uid: 61132 topic_id: 10636 reply_id: 38969[/import]

#19

I didn’t even think of that, thats indeed something to keep in mind. How would you do that in another SDK, or why does it seem that corona doesn’t allow it?

Also croisened, thanks a lot, I’m taking a look at that now. [import]uid: 65258 topic_id: 10636 reply_id: 38987[/import]

#20

I coded up an example that should give me the finest resolution possible with Corona, here. There are problems with it, and I’m hoping a developer will address them soon, even if it’s to tell me 1) can’t be done, or 2) do it another way.
[import]uid: 61132 topic_id: 10636 reply_id: 38991[/import]