Widget.newButton graphics

[trickster_boi]

So I’m making buttons using the widget.newButton. I’d like to change the widget icons with a custom graphic instead of a square. This is what I have done so far:

for i = 0,2 do  
 for j = 1,3 do  
 current = i\* 3+ j  
 local button1 = widget.newButton {  
 label = current,  
 id=current,  
 width = 120,  
 height=122,  
 defaultColor = {255,0,0,255},  
 strokeColor = {0,0,0,0},  
 onRelease = buttonRelease  
 --default = square = display.newRect(0,0,120,122),  
 }  
  
 --levelsGroupOne[current].x = 15 + (j\*150)  
 --levelsGroupOne[current].y = 275 + (i\*165)  
 button1.x = 15 + (j\*150)  
 button1.y = 275 + (i\*165)  
 levelGroupOne:insert(button1)  
 end  
 end  

I was using this tutorial which helped a bit: http://developer.coronalabs.com/reference/index/widgetnewbutton But it doesn’t really go into describing how to use custom graphics. How can I do this?

While I’m asking, is it possible to change these graphics; what the buttons are used for are level selectors and I essentially wanted a unlockable levels. I have a separate graphics for locked levels and unlocked levels; is it possible to use two sets of graphics?

Thank you [import]uid: 184921 topic_id: 36151 reply_id: 336151[/import]

[Danny]

In my own game, skyworld. I approached this like so: (psudo code below)

  
-- Where you create your button.  
  
-- Set the image to use as the unlocked image by default  
local imageToUse = "notLocked.png"  
  
-- If the level in question is locked, use the locked image  
if level[i].isLocked then  
 imageToUse = "isLocked.png"  
end  
  
-- Use the correct image here  
local img = display.newImage( imageToUse )  

Hope this helps. [import]uid: 84637 topic_id: 36151 reply_id: 143591[/import]

[trickster_boi]

Thank you for the reply; I’ve managed to load up a custom graphics sheet for my widget buttons, and now on having the levels locked. I understand the general gist of your pseudo code, just wondering whether it’ll work with widgets >.< reason I’m using widgets instead of having the levels as separate individual objects is so that I won’t have to write as much code… yeah, I’m lazy :s [import]uid: 184921 topic_id: 36151 reply_id: 143594[/import]

[greenrift]

To use custom graphics for your widget buttons do this:

if(locked) then  
 button = widget.newButton{  
 label = current,  
 id=current,  
 default="mylocked.png", --used as the default non-pressed button  
 over="mylocked\_pressed.png", -- shown when the button is pressed  
 width = 120,  
 height=122,  
 onRelease = buttonRelease  
 --default = square = display.newRect(0,0,120,122),  
 }  
else  
 button = widget.newButton{  
 label = current,  
 id=current,  
 default="myunlocked.png", --used as the default non-pressed button  
 over="myunlocked\_pressed.png", -- shown when the button is pressed  
 width = 120,  
 height=122,  
 onRelease = buttonRelease  
 --default = square = display.newRect(0,0,120,122),  
 }  
end  
  

**edit**
Sorry, fully read the question. Use the above to easily specify the graphics for a widget, however you can overlay widgets on top of each other or do an if/else to display a lock icon instead of the unlocked level. When a level is unlocked you can either hide (isVisible = false) or choose to only display the unlocked version of the button. [import]uid: 92150 topic_id: 36151 reply_id: 143598[/import]

[nick_sherman]

There’s no reason why you’re just limited to widgets when creating objects this way (i.e. in a loop).

You could create a table of buttons from normal images like this:
[lua]

local menuButtons = {}
local rows = 3
local cols = 3
local buttonGroup = display.newGroup()
local touchButton = function (event)

local obj = event.target
local bId = obj.id

if event.phase == “ended” then

print (“Level “…bId…” button pressed”)

end

end
for a = 1, rows, 1 do

for b = 1, cols, 1 do

local current = (a-1)*rows + b
local imageToUse = “notLocked.png”

if level[current].isLocked then
imageToUse = “isLocked.png”
end

local i = display.newImageRect(imageToUse,120,122)
i.id = current
i:addEventListener(“touch”,touchButton)
i.x = 15 + (b*150)
i.y = 275 + (a-1)*165
buttonGroup:insert(i)
menuButtons[current] = i

end

end
[/lua]

[import]uid: 93133 topic_id: 36151 reply_id: 143599[/import]

[nick_sherman]

It is trying to access frames 10-19 on a sheet that only contains 9 frames.

I assume the button widget uses the defaultIndex and overIndex to decide which frame to load. Because current is being calculated using k*3+l, it starts from 10.

Try:

[lua]

defaultIndex =current - 9,
overIndex = current- 9,

[/lua]

on the second group.

[import]uid: 93133 topic_id: 36151 reply_id: 143605[/import]

[trickster_boi]

I’ve hit another problem which I hope you guys won’t mind answering;

On my level selection, I have two sets of for-loops to create a 3x3 widget buttons. I’ve attached graphics to the first group, but when i attach graphics to the second group, I get the following error on the output:

WARNING: Supplied frameIndex(10) exceeds images sheet’s maximum freamIndex (9). Value will be clamped.

The framInddex error goes up to 19.

Here’s my code (note that I am placing the button widgets into display groups as I am using storyboard):

 local sheetOptions =   
 {  
 width = 146,  
 height = 154,  
 numFrames = 9,  
 sheetContentWidth = 438,  
 sheetContentHeight = 462  
  
 }  
  
  
 local buttonSheet1 = graphics.newImageSheet("images/levelselection/lvlGroup1temp.png", sheetOptions)  
 local buttonSheet2 = graphics.newImageSheet("images/levelselection/lvlGroup2.png", sheetOptions)  
  
 -- Pots group 1  
 for i = 0,2 do  
 for j = 1,3 do  
 current = i\* 3+ j  
 local button1 = widget.newButton {  
 --label = current,  
 id=current,  
 sheet = buttonSheet1,  
 defaultIndex =current,  
 overIndex = current,  
 width = 120,  
 height=122,  
 --defaultColor = {255,0,0,255},  
 strokeColor = {0,0,0,0},  
 onRelease = buttonRelease  
 --default = square = display.newRect(0,0,120,122),  
 }  
  
 --levelsGroupOne[current].x = 15 + (j\*150)  
 --levelsGroupOne[current].y = 275 + (i\*165)  
 button1.x = 15 + (j\*150)  
 button1.y = 275 + (i\*165)  
 levelGroupOne:insert(button1)  
 end  
 end  
  
 -- pots group 2  
 for k = 3,5 do   
 for l = 1,3 do   
 current = k\*3+l  
 local button2 = widget.newButton {  
 --label = current,  
 id = current,  
 sheet = buttonSheet2,  
 defaultIndex =current,  
 overIndex = current,  
 width = 120,  
 height = 122,  
 --defaultColor = {150,170,0,255},  
 strokeColor = {0,0,0,0},  
 onRelease = buttonRelease  
 }  
 button2.x = 550 + (l\*150)  
 button2.y = -220 + (k\*165)  
 levelGroupTwo:insert(button2)  
 end  
 end  

@nick_sherman : The problem is that the level numbers are written on the graphics themselves which are all in one sheet :S
[import]uid: 184921 topic_id: 36151 reply_id: 143602[/import]

[trickster_boi]

Thank you Otter! The worked!

Now time to actually make a start on the level unlock and lock [import]uid: 184921 topic_id: 36151 reply_id: 143608[/import]

[nick_sherman]

No problem. I see what you mean about the image sheets, in that case you would use something like:

[lua]

local frameToUse = current

if level[current].isLocked then
frameToUse = 10
end

local i = display.newImageRect(buttonSheet1, frameToUse,120,122)

[/lua]

Even if you stick with the widgets, you could use this approach for your levels locked/unlocked code - add a generic lock image to frame 10 of your imageSheet. If the level is locked set your defaultIndex and overIndex to 10 instead of current.

We do a template based on the Angry Birds menu system, although that’s not exactly what you’re after you might find some stuff you can use, such as saving/loading a database of levels, scrollViews etc.
http://developer.coronalabs.com/forum/2013/01/28/angry-birds-menu-and-levels-database-template [import]uid: 93133 topic_id: 36151 reply_id: 143612[/import]

[Danny]

In my own game, skyworld. I approached this like so: (psudo code below)

  
-- Where you create your button.  
  
-- Set the image to use as the unlocked image by default  
local imageToUse = "notLocked.png"  
  
-- If the level in question is locked, use the locked image  
if level[i].isLocked then  
 imageToUse = "isLocked.png"  
end  
  
-- Use the correct image here  
local img = display.newImage( imageToUse )  

Hope this helps. [import]uid: 84637 topic_id: 36151 reply_id: 143591[/import]

[trickster_boi]

Thank you for the reply; I’ve managed to load up a custom graphics sheet for my widget buttons, and now on having the levels locked. I understand the general gist of your pseudo code, just wondering whether it’ll work with widgets >.< reason I’m using widgets instead of having the levels as separate individual objects is so that I won’t have to write as much code… yeah, I’m lazy :s [import]uid: 184921 topic_id: 36151 reply_id: 143594[/import]

[greenrift]

To use custom graphics for your widget buttons do this:

if(locked) then  
 button = widget.newButton{  
 label = current,  
 id=current,  
 default="mylocked.png", --used as the default non-pressed button  
 over="mylocked\_pressed.png", -- shown when the button is pressed  
 width = 120,  
 height=122,  
 onRelease = buttonRelease  
 --default = square = display.newRect(0,0,120,122),  
 }  
else  
 button = widget.newButton{  
 label = current,  
 id=current,  
 default="myunlocked.png", --used as the default non-pressed button  
 over="myunlocked\_pressed.png", -- shown when the button is pressed  
 width = 120,  
 height=122,  
 onRelease = buttonRelease  
 --default = square = display.newRect(0,0,120,122),  
 }  
end  
  

**edit**
Sorry, fully read the question. Use the above to easily specify the graphics for a widget, however you can overlay widgets on top of each other or do an if/else to display a lock icon instead of the unlocked level. When a level is unlocked you can either hide (isVisible = false) or choose to only display the unlocked version of the button. [import]uid: 92150 topic_id: 36151 reply_id: 143598[/import]

[nick_sherman]

There’s no reason why you’re just limited to widgets when creating objects this way (i.e. in a loop).

You could create a table of buttons from normal images like this:
[lua]

local menuButtons = {}
local rows = 3
local cols = 3
local buttonGroup = display.newGroup()
local touchButton = function (event)

local obj = event.target
local bId = obj.id

if event.phase == “ended” then

print (“Level “…bId…” button pressed”)

end

end
for a = 1, rows, 1 do

for b = 1, cols, 1 do

local current = (a-1)*rows + b
local imageToUse = “notLocked.png”

if level[current].isLocked then
imageToUse = “isLocked.png”
end

local i = display.newImageRect(imageToUse,120,122)
i.id = current
i:addEventListener(“touch”,touchButton)
i.x = 15 + (b*150)
i.y = 275 + (a-1)*165
buttonGroup:insert(i)
menuButtons[current] = i

end

end
[/lua]

[import]uid: 93133 topic_id: 36151 reply_id: 143599[/import]

[nick_sherman]

It is trying to access frames 10-19 on a sheet that only contains 9 frames.

I assume the button widget uses the defaultIndex and overIndex to decide which frame to load. Because current is being calculated using k*3+l, it starts from 10.

Try:

[lua]

defaultIndex =current - 9,
overIndex = current- 9,

[/lua]

on the second group.

[import]uid: 93133 topic_id: 36151 reply_id: 143605[/import]

[trickster_boi]

I’ve hit another problem which I hope you guys won’t mind answering;

On my level selection, I have two sets of for-loops to create a 3x3 widget buttons. I’ve attached graphics to the first group, but when i attach graphics to the second group, I get the following error on the output:

WARNING: Supplied frameIndex(10) exceeds images sheet’s maximum freamIndex (9). Value will be clamped.

The framInddex error goes up to 19.

Here’s my code (note that I am placing the button widgets into display groups as I am using storyboard):

 local sheetOptions =   
 {  
 width = 146,  
 height = 154,  
 numFrames = 9,  
 sheetContentWidth = 438,  
 sheetContentHeight = 462  
  
 }  
  
  
 local buttonSheet1 = graphics.newImageSheet("images/levelselection/lvlGroup1temp.png", sheetOptions)  
 local buttonSheet2 = graphics.newImageSheet("images/levelselection/lvlGroup2.png", sheetOptions)  
  
 -- Pots group 1  
 for i = 0,2 do  
 for j = 1,3 do  
 current = i\* 3+ j  
 local button1 = widget.newButton {  
 --label = current,  
 id=current,  
 sheet = buttonSheet1,  
 defaultIndex =current,  
 overIndex = current,  
 width = 120,  
 height=122,  
 --defaultColor = {255,0,0,255},  
 strokeColor = {0,0,0,0},  
 onRelease = buttonRelease  
 --default = square = display.newRect(0,0,120,122),  
 }  
  
 --levelsGroupOne[current].x = 15 + (j\*150)  
 --levelsGroupOne[current].y = 275 + (i\*165)  
 button1.x = 15 + (j\*150)  
 button1.y = 275 + (i\*165)  
 levelGroupOne:insert(button1)  
 end  
 end  
  
 -- pots group 2  
 for k = 3,5 do   
 for l = 1,3 do   
 current = k\*3+l  
 local button2 = widget.newButton {  
 --label = current,  
 id = current,  
 sheet = buttonSheet2,  
 defaultIndex =current,  
 overIndex = current,  
 width = 120,  
 height = 122,  
 --defaultColor = {150,170,0,255},  
 strokeColor = {0,0,0,0},  
 onRelease = buttonRelease  
 }  
 button2.x = 550 + (l\*150)  
 button2.y = -220 + (k\*165)  
 levelGroupTwo:insert(button2)  
 end  
 end  

@nick_sherman : The problem is that the level numbers are written on the graphics themselves which are all in one sheet :S
[import]uid: 184921 topic_id: 36151 reply_id: 143602[/import]

[trickster_boi]

Thank you Otter! The worked!

Now time to actually make a start on the level unlock and lock [import]uid: 184921 topic_id: 36151 reply_id: 143608[/import]

[nick_sherman]

No problem. I see what you mean about the image sheets, in that case you would use something like:

[lua]

local frameToUse = current

if level[current].isLocked then
frameToUse = 10
end

local i = display.newImageRect(buttonSheet1, frameToUse,120,122)

[/lua]

Even if you stick with the widgets, you could use this approach for your levels locked/unlocked code - add a generic lock image to frame 10 of your imageSheet. If the level is locked set your defaultIndex and overIndex to 10 instead of current.

We do a template based on the Angry Birds menu system, although that’s not exactly what you’re after you might find some stuff you can use, such as saving/loading a database of levels, scrollViews etc.
http://developer.coronalabs.com/forum/2013/01/28/angry-birds-menu-and-levels-database-template [import]uid: 93133 topic_id: 36151 reply_id: 143612[/import]

[Danny]

In my own game, skyworld. I approached this like so: (psudo code below)

  
-- Where you create your button.  
  
-- Set the image to use as the unlocked image by default  
local imageToUse = "notLocked.png"  
  
-- If the level in question is locked, use the locked image  
if level[i].isLocked then  
 imageToUse = "isLocked.png"  
end  
  
-- Use the correct image here  
local img = display.newImage( imageToUse )  

Hope this helps. [import]uid: 84637 topic_id: 36151 reply_id: 143591[/import]

[trickster_boi]

Thank you for the reply; I’ve managed to load up a custom graphics sheet for my widget buttons, and now on having the levels locked. I understand the general gist of your pseudo code, just wondering whether it’ll work with widgets >.< reason I’m using widgets instead of having the levels as separate individual objects is so that I won’t have to write as much code… yeah, I’m lazy :s [import]uid: 184921 topic_id: 36151 reply_id: 143594[/import]

[greenrift]

To use custom graphics for your widget buttons do this:

if(locked) then  
 button = widget.newButton{  
 label = current,  
 id=current,  
 default="mylocked.png", --used as the default non-pressed button  
 over="mylocked\_pressed.png", -- shown when the button is pressed  
 width = 120,  
 height=122,  
 onRelease = buttonRelease  
 --default = square = display.newRect(0,0,120,122),  
 }  
else  
 button = widget.newButton{  
 label = current,  
 id=current,  
 default="myunlocked.png", --used as the default non-pressed button  
 over="myunlocked\_pressed.png", -- shown when the button is pressed  
 width = 120,  
 height=122,  
 onRelease = buttonRelease  
 --default = square = display.newRect(0,0,120,122),  
 }  
end  
  

**edit**
Sorry, fully read the question. Use the above to easily specify the graphics for a widget, however you can overlay widgets on top of each other or do an if/else to display a lock icon instead of the unlocked level. When a level is unlocked you can either hide (isVisible = false) or choose to only display the unlocked version of the button. [import]uid: 92150 topic_id: 36151 reply_id: 143598[/import]