buttons help

stieven.ua · February 21, 2012, 9:50pm

I am trying to make buttons, which when are pressed, change color, and the color stays. they also have a value (lvlOn or lvlOff). the problem is this part of the code is not working:
[lua]local function lvlBtnPreset(event)
if lvl1IsActive == lvlOn then
lvl1Btn.isVisible = false
lvl1BtnOver.isVisible = true
elseif lvl2IsActive == lvlOn then
lvl2Btn.isVisible = false
lvl2BtnOver.isVisible = true
elseif lvl3IsActive == lvlOn then
lvl3Btn.isVisible = false
lvl3BtnOver.isVisible = true
elseif lvl4IsActive == lvlOn then
lvl4Btn.isVisible = false
lvl4BtnOver.isVisible = true
end
end
Runtime:addEventListener( “enterFrame”, lvlBtnPreset )[/lua]

I have the lvlOn, but the
lvl1Btn.isVisible = false
lvl1BtnOver.isVisible = true

is not working.
HEReS THE FULL CODE IF YOU NEED IT:

[lua]module(…, package.seeall)

function new()
local localGroup = display.newGroup()
–Game is active
local gameIsActive = fasle

–Paused
local paused = false

–Start Menu
local lvlOn = 1
local lvlOff = 0
local menu = display.newImage(“menu.png”, true)

localGroup:insert(menu)

lvl1Btn = display.newImage(“lvl1Btn.png”, true)
lvl1Btn.x = display.contentWidth/4
lvl1Btn.y = 400
localGroup:insert(lvl1Btn)

lvl1BtnOver = display.newImage(“lvl1BtnOver.png”, true)
lvl1BtnOver.x = display.contentWidth/4
lvl1BtnOver.y = 400
localGroup:insert(lvl1BtnOver)

lvl2Btn = display.newImage(“lvl2Btn.png”, true)
lvl2Btn.x = display.contentWidth/4 + display.contentWidth/2
lvl2Btn.y = 400
localGroup:insert(lvl2Btn)

lvl2BtnOver = display.newImage(“lvl2BtnOver.png”, true)
lvl2BtnOver.x = display.contentWidth/4 + display.contentWidth/2
lvl2BtnOver.y = 400
localGroup:insert(lvl2BtnOver)

lvl3Btn = display.newImage(“lvl3Btn.png”, true)
lvl3Btn.x = display.contentWidth/4
lvl3Btn.y = 480
localGroup:insert(lvl3Btn)

lvl3BtnOver = display.newImage(“lvl3BtnOver.png”, true)
lvl3BtnOver.x = display.contentWidth/4
lvl3BtnOver.y = 480
localGroup:insert(lvl3BtnOver)

lvl4Btn = display.newImage(“lvl4Btn.png”, true)
lvl4Btn.x = display.contentWidth/4 + display.contentWidth/2
lvl4Btn.y = 480
localGroup:insert(lvl4Btn)

lvl4BtnOver = display.newImage(“lvl4BtnOver.png”, true)
lvl4BtnOver.x = display.contentWidth/4 + display.contentWidth/2
lvl4BtnOver.y = 480
localGroup:insert(lvl4BtnOver)

lvl1BtnOver.isVisible = false
lvl2BtnOver.isVisible = false
lvl3BtnOver.isVisible = false
lvl4BtnOver.isVisible = false

local function checkForFile ()
lvl1IsActive = loadFile(“lvl1IsActive.txt”)
if lvl1IsActive == “empty” then
saveFile(“lvl1IsActive.txt”, lvlOn)
end
lvl2IsActive = loadFile(“lvl2IsActive.txt”)
if lvl2IsActive == “empty” then
saveFile(“lvl2IsActive.txt”, lvlOff)
end
lvl3IsActive = loadFile(“lvl3IsActive.txt”)
if lvl3IsActive == “empty” then
saveFile(“lvl3IsActive.txt”, lvlOff)
end
lvl4IsActive = loadFile(“lvl4IsActive.txt”)
if lvl4IsActive == “empty” then
saveFile(“lvl4IsActive.txt”, lvlOff)
end
end
checkForFile()
print("Level 1 "… lvl1IsActive)
print("Level 2 "…lvl2IsActive)
print("Level 3 "…lvl3IsActive)
print("Level 4 "…lvl4IsActive)
local function lvlBtnPreset(event)
if lvl1IsActive == lvlOn then
lvl1Btn.isVisible = false
lvl1BtnOver.isVisible = true
elseif lvl2IsActive == lvlOn then
lvl2Btn.isVisible = false
lvl2BtnOver.isVisible = true
elseif lvl3IsActive == lvlOn then
lvl3Btn.isVisible = false
lvl3BtnOver.isVisible = true
elseif lvl4IsActive == lvlOn then
lvl4Btn.isVisible = false
lvl4BtnOver.isVisible = true
end
end
Runtime:addEventListener( “enterFrame”, lvlBtnPreset )
local function touchlvl1Btn(event)
if event.phase == “ended” then

saveFile( “lvl1IsActive.txt”, lvlOn)
saveFile( “lvl2IsActive.txt”, lvlOff)
saveFile( “lvl3IsActive.txt”, lvlOff)
saveFile( “lvl4IsActive.txt”, lvlOff)
lvl1Btn.isVisible = false
lvl1BtnOver.isVisible = true
lvl2Btn.isVisible = true
lvl2BtnOver.isVisible = false
lvl3Btn.isVisible = true
lvl3BtnOver.isVisible = false
lvl4Btn.isVisible = true
lvl4BtnOver.isVisible = false
end
end

lvl1Btn:addEventListener (“touch”, touchlvl1Btn)

local function touchlvl2Btn(event)
if event.phase == “ended” then

saveFile( “lvl2IsActive.txt”, lvlOn)
saveFile( “lvl1IsActive.txt”, lvlOff)
saveFile( “lvl3IsActive.txt”, lvlOff)
saveFile( “lvl4IsActive.txt”, lvlOff)
lvl1Btn.isVisible = true
lvl1BtnOver.isVisible = false
lvl2Btn.isVisible = false
lvl2BtnOver.isVisible = true
lvl3Btn.isVisible = true
lvl3BtnOver.isVisible = false
lvl4Btn.isVisible = true
lvl4BtnOver.isVisible = false

end
end

lvl2Btn:addEventListener (“touch”, touchlvl2Btn)

local function touchlvl3Btn(event)
if event.phase == “ended” then

saveFile( “lvl3IsActive.txt”, lvlOn)
saveFile( “lvl2IsActive.txt”, lvlOff)
saveFile( “lvl1IsActive.txt”, lvlOff)
saveFile( “lvl4IsActive.txt”, lvlOff)
lvl1Btn.isVisible = true
lvl1BtnOver.isVisible = false
lvl2Btn.isVisible = true
lvl2BtnOver.isVisible = false
lvl3Btn.isVisible = false
lvl3BtnOver.isVisible = true
lvl4Btn.isVisible = true
lvl4BtnOver.isVisible = false

end
end

lvl3Btn:addEventListener (“touch”, touchlvl3Btn)

local function touchlvl4Btn(event)
if event.phase == “ended” then

saveFile( “lvl4IsActive.txt”, lvlOn)
saveFile( “lvl2IsActive.txt”, lvlOff)
saveFile( “lvl3IsActive.txt”, lvlOff)
saveFile( “lvl1IsActive.txt”, lvlOff)
lvl1Btn.isVisible = true
lvl1BtnOver.isVisible = false
lvl2Btn.isVisible = true
lvl2BtnOver.isVisible = false
lvl3Btn.isVisible = true
lvl3BtnOver.isVisible = false
lvl4Btn.isVisible = false
lvl4BtnOver.isVisible = true
print(lvl4IsActive)

end
end

lvl4Btn:addEventListener (“touch”, touchlvl4Btn)

local playNowBtn = widget.newButton{
default = “playNowBtn.png”,
over = “playNowBtnOver.png”,
}

playNowBtn.x = 320
playNowBtn.y = 600
localGroup:insert(playNowBtn.view)

local function touchPlayNowBtn (event)
if event.phase == “ended” then
director:changeScene (“game”)
end
end

playNowBtn:addEventListener (“touch”, touchPlayNowBtn)

return localGroup
end[/lua] [import]uid: 104376 topic_id: 22237 reply_id: 322237[/import]

peach_pellen · February 21, 2012, 11:00pm

There are easier ways of doing this IMHO - sprites for each button would be helpful.

The Runtime listener I’m also a tad confused by; what is the reasoning behind it? [import]uid: 52491 topic_id: 22237 reply_id: 88585[/import]

stieven.ua · February 21, 2012, 11:09pm

how would I use sprites for this? I think movie clips would be better. But I didn’t think of that.

And the runtime for the first code is basically I am trying to make a button show the “over” image if that option is selected (e.g. if lvl2IsAvtive = lvlOn then I want The lvl2BtnOver to show, and the lvl2Btn to disappear.) if you have any better way of doing this please tell me, because I am having trouble with that first code.

Thanks! [import]uid: 104376 topic_id: 22237 reply_id: 88589[/import]

peach_pellen · February 22, 2012, 12:59am

A sprite with two frames prep’d for each button would let you flick between images easily.

button.currentFrame = 1
or
button.currentFrame = 2

is all you’d need. No messing around with toggling visibility, etc.

If you provide a plug and play sample I can take a look and see what I can do with that how you currently have things set up, though. [import]uid: 52491 topic_id: 22237 reply_id: 88609[/import]

stieven.ua · February 22, 2012, 8:15am

@peach I will try that, but I have a question. does a sprite set have to be it one file (sprite sheet) or can it be multiple files?
@ Revaerie I am a begginer and some of that code is really confusing for me. In the create buttons part, you are only creating 1 button right? I need four. And I don’t really like using tables. they confuse me :P. [import]uid: 104376 topic_id: 22237 reply_id: 88665[/import]

Kyle_Coburn · February 22, 2012, 9:52am

Where it says:

 for name,mode in pairs(modes) do

“modes” would be stored as a table that looks like this:

local modes = {  
 ["Level 1"] = {  
 x=160,  
 y=50  
 },  
 Moderate = {  
 x=160,  
 y=80  
 },  
 Default = {  
 x=160,  
 y=110  
 }  
}

Basically modes is a table of tables that hold our button’s name (the table’s key in this case so we can look it up) and where we want to position it, each could also hold anything else like your lvlOn/lvlOff value.

If we use that table in conjunction with the code in my previous post we’d get 3 buttons at the x/y coords we specified in the table. And notice since we named the 3rd one “Default” it will be selected right away upon its creation.

I’ve added a few more comments to my original code to hopefully make it a little better to follow (it was late last night when I wrote that haha).
Tables do take a little getting used to, but experiment a bit and you’ll get the hang of it. And don’t be scared of them, tables are your friend! [import]uid: 87138 topic_id: 22237 reply_id: 88678[/import]

Kyle_Coburn · February 22, 2012, 9:57am

Alternatively, you can actually accomplish buttons that stay selected via the Widgets API.

 event.target[1].isVisible = false;  
 event.target[2].isVisible = true;

Put that in the button’s onEvent and and you can force the selected image ([2]) to stay visible, while hiding the standard one ([1]). Store the index of the last selected button.

Then, if the index of the button is not equal to the previous button, we’re selecting a new button.
So, for all the other buttons (stored in a table in this case), we need to set them back to normal:

 for i,bt in ipairs(buttons) do  
 bt[1].isVisible = true;  
 bt[2].isVisible = false;  
 end  
 event.target[2].isVisible = true;  
 event.target[1].isVisible = false;

No more Runtime listener! I might suggest a for loop, there’s a lot of copy/paste code there you could eliminate.

It would be great to have official support for this though.
Full code:

[code]
local prevSelection;

local function onMode(event)
local id = event.target.id;

– If the button doesn’t match the previously clicked button, it’s a new one
if (id ~= prevSelection) then
– New button selected, let’s do something about it!
if (event.phase == “release”) then
– Store the button’s ID so we know we don’t need to click it again
prevSelection = id;

– For each of the buttons, flip it back to the default == visible, over == hidden
for i,bt in ipairs(buttons) do
bt[1].isVisible = true;
bt[2].isVisible = false;
end
– Now flip our target (newly selected) button the other way around to show it’s selected
event.target[2].isVisible = true;
event.target[1].isVisible = false;

– Handle your button’s custom tasks here

end
else
– Button already selected, override the colors anyways in case we move outside
event.target[2].isVisible = true;
event.target[1].isVisible = false;
end
return true;
end
local function createButtons()
for name,mode in pairs(modes) do
–Create a button object for every mode specified:
local btn = widget.newButton{
id = name,
left = mode.x, mode.y,
label = name,
onEvent = onButton
}

–The button we want to start selected (optional)
if (name == “Default”) then
prevSelection = name;
btn[2].isVisible = true;
btn[1].isVisible = false;
end

–Insert the button object into our buttons table for later access, and our stage’s view group if you’re using director/storyboard
table.insert(buttons, btn);
group:insert(btn);
end
end
[/code] [import]uid: 87138 topic_id: 22237 reply_id: 88614[/import]

stieven.ua · February 22, 2012, 11:29am

What if I want four different buttons (lvl1Btn, lvl2Btn, lvl3Btn, lvl4Btn) and all of the buttons have to be different pictures,
[import]uid: 104376 topic_id: 22237 reply_id: 88695[/import]

Kyle_Coburn · February 22, 2012, 12:54pm

Save the image names identically to whatever you name your button and then do something like this:

 local btn = widget.newButton{  
 id = name,  
 default = name.."Default.png",  
 over = name.."Over.png",  
 left = mode.x, mode.y,  
 label = name,  
 onEvent = onButton  
 }

Or again, specify it in the table, but I find naming the images according to their labels more elegant anyways [import]uid: 87138 topic_id: 22237 reply_id: 88715[/import]

stieven.ua · February 22, 2012, 7:26pm

Well I got this far:

[lua] local lvl1Btn = widget.newButton{
default = “lvl1Btn.png”,
over = “lvl1BtnOver.png”
}
lvl1Btn.x = display.contentWidth/4
lvl1Btn.y = 400
localGroup:insert(lvl1Btn.view)
local lvl2Btn = widget.newButton{
default = “lvl2Btn.png”,
over = “lvl2BtnOver.png”
}
lvl2Btn.x = display.contentWidth/4 + display.contentWidth/2
lvl2Btn.y = 400
localGroup:insert(lvl2Btn.view)

local lvl3Btn = widget.newButton{
default = “lvl3Btn.png”,
over = “lvl3BtnOver.png”
}
lvl3Btn.x = display.contentWidth/4
lvl3Btn.y = 480
localGroup:insert(lvl3Btn.view)

local lvl4Btn = widget.newButton{
default = “lvl4Btn.png”,
over = “lvl4BtnOver.png”
}
lvl4Btn.x = display.contentWidth/4 + display.contentWidth/2
lvl4Btn.y = 480
localGroup:insert(lvl4Btn.view)[/lua]
Now I need that when the button is pressed it goes to “over” state, and stays in “over” state. then I need the other three buttons, if the over state in active, to change back to default state.

And I also need something like this:

[lua]if lvl == 1 then
–first button is in over state
elseif lvl == 2 then
–second button is in over state
elseif lvl == 3 then
–third button is in over state
elseif lvl == 4 then
–fourth button is in over state
end[/lua]

I need that in the very beginning, so that when the app launches one of the buttons is already selected depending on the “lvl” value. [import]uid: 104376 topic_id: 22237 reply_id: 88773[/import]

stieven.ua · February 22, 2012, 7:40pm

and @peach this is a question to you:

I am using ego.lua, and I have this code

[lua] lvl1IsActive = loadFile(“lvl1IsActive.txt”)
lvl2IsActive = loadFile(“lvl2IsActive.txt”)
lvl3IsActive = loadFile(“lvl3IsActive.txt”)
lvl4IsActive = loadFile(“lvl4IsActive.txt”)
local gameSpeed
local function gameSpeedChanger(event)
if lvl1IsActive == lvlOn then
gameSpeed = 1
elseif lvl2IsActive == lvlOn then
gameSpeed = 2
elseif lvl3IsActive == lvlOn then
gameSpeed = 3
elseif lvl4IsActive == lvlOn then
gameSpeed = 4
end
end
gameSpeedChanger()[/lua]
even though I know for sure that “lvl2IsActive = lvlOn” the gameSpeed doesn’t change to 2.
I know for sure that everything else works, except that gameSpeed isn’t defined. Do you know what might be the problem? [import]uid: 104376 topic_id: 22237 reply_id: 88778[/import]

ertzel · February 22, 2012, 7:55pm

When you do

lvl1IsActive = loadFile("lvl1IsActive.txt")

That sets level1IsActive to a string value of either “lvlOn” or “lvlOff” but you are not looking for that in your if statements. Try changing gameSpeedChanger to the following:

local function gameSpeedChanger(event)  
 if lvl1IsActive == "lvlOn" then  
 gameSpeed = 1  
 elseif lvl2IsActive == "lvlOn" then  
 gameSpeed = 2  
 elseif lvl3IsActive == "lvlOn" then  
 gameSpeed = 3  
 elseif lvl4IsActive == "lvlOn" then  
 gameSpeed = 4  
 end  
end

(You could also just use ’ instead of " )

You have to make sure its checking for a string value since that is what you are setting the IsActives to by loading the value from ego. [import]uid: 69700 topic_id: 22237 reply_id: 88780[/import]

stieven.ua · February 22, 2012, 7:59pm

I tried that it still doesn’t work [import]uid: 104376 topic_id: 22237 reply_id: 88782[/import]

stieven.ua · February 22, 2012, 8:11pm

Never Mind I got it! Thanks that helped a lot!!
[import]uid: 104376 topic_id: 22237 reply_id: 88783[/import]

ertzel · February 22, 2012, 8:19pm

Try adding print(gameSpeed) or print(lvl2IsActive) at the bottom of gameSpeedChanger just to make sure it actually isn’t setting up gameSpeed and that lvl2IsActive does = lvlOn

You could also try something like this:

 local function gameSpeedChanger(event)  
 local speed  
 if lvl1IsActive == "lvlOn" then  
 speed = 1  
 elseif lvl2IsActive == "lvlOn" then  
 speed = 2  
 elseif lvl3IsActive == "lvlOn" then  
 speed = 3  
 elseif lvl4IsActive == "lvlOn" then  
 speed = 4  
 else -- No level is active  
 speed = 0  
 end  
  
 return speed  
 end  
  
 local gameSpeed = gameSpeedChanger()  
 print(gameSpeed)

That way is a level is set to “lvlOn” then that speed will be returned and set for gameSpeed.

[Edit] Oh, didn’t see your post saying you got it working till after I submitted this one. Good to hear its working now for you.
[import]uid: 69700 topic_id: 22237 reply_id: 88784[/import]

stieven.ua · February 22, 2012, 8:27pm

Yeah the reason it wasn’t working after you corrected me is that because I had a string at the beginning “lvlOn = 1” so when I put in “if lvl1IsActive == “lvlOn”” I was expecting it to look for"1" and not for “lvlOn”. So I changed it to 'if lvl1IsActive == “1"” and it worked!

THANK YOU VERY MUCH! you solved my original problem too!

So @Revaerie I figured it out thanks for the help!

@ ertzel I didn’t know that I had to put “” if I was looking for a value using ego.lua. You solved all of my current difficulties.

One last question:

Do you know a way I could put in “lvlOn” and it would look for the value “1” [import]uid: 104376 topic_id: 22237 reply_id: 88786[/import]

peach_pellen · February 23, 2012, 12:55am

Sorry, time zones make things tricky sometimes.

Ertzel, thanks for explaining Ego related stuff [import]uid: 52491 topic_id: 22237 reply_id: 88834[/import]