image changing button

Solar2D General Questions/Discussion
#1

i need to make a button from a .png and that every time it receives a tap event, it changes de source .png file for itself.
imagine it is a button with an apple drawn, after first tap it turns into an orange, afer second touch turns into grapes, and so on. then the cycle loops.

can anybody please help me??
[import]uid: 98755 topic_id: 16998 reply_id: 316998[/import]

#2

i mean, should i use sprite sheets? displaying and removing objects? any help will be appreciated! [import]uid: 98755 topic_id: 16998 reply_id: 63779[/import]

#3

This is a perfect application for a movieClip animation.

Create your different button states: red.png, green.png, yellow.png and so on and setup a movie clip with each image.

You won’t be able to use a pre-factored button widget, like the one in the ui library, or the widget library.

This is UNTESTED code but should get you going:

local buttons = movieclip.newAnim({"red.png", "orange.png", "yellow.png", "green.png", "blue.png"})  
local currentButton = 1  
buttons:play{startFrame=currentButton, endFrame=currentButton, loop=1, remove=false}  
  
local function onTap(event)  
 currentButton = currentButton + 1  
 if currentButton \> 5 then  
 currentButton = 1  
 end  
 buttons:play{startFrame=currentButton, endFrame=currentButton, loop=1, remove=false}  
end  
  
buttons:addEventListener("tap", onTap)

[import]uid: 19626 topic_id: 16998 reply_id: 63783[/import]

#4

THANKS A LOT!! I understand what you are showing to me.
I’m trying the code but log window returns the next error:
Runtime error: attempt to index global ‘movieclip’ (a nil value)

I don’t understand why this is happening since the images loaded into the movieclip existss and are in the same folder as main.lua.

Maybe i made a mistake while rewriting the code. This is how it looks like now:

[blockcode]
local color_buttons = movieclip.newAnim({“pencil_blue.png”,“pencil_red.png”,“pencil_orange.png”})
– group_menu:insert(color_buttons)
color_buttons:setReferencePoint(display.TopLeftReferencePoint)
color_buttons.x = 72; color_buttons.y = 864;
color_buttons:play{startFrame=currentButton, endFrame=currentButton, loop=1, remove=false}
local currentButton = 1

local function color_buttons(event)
currentButton = currentButton + 1
if currentButton > 5 then
currentButton = 1
end
color_buttons:play{startFrame=currentButton, endFrame=currentButton, loop=1, remove=false}
end
[/blockcode]

EDIT: PROBLEM SOLVED! I didn’t know i had to require moviclip. I thought it came with corona. This thing works, thank you very much! [import]uid: 98755 topic_id: 16998 reply_id: 63804[/import]

#5

Yep, movieclip is an external library. Glad you figured it out. [import]uid: 19626 topic_id: 16998 reply_id: 63829[/import]

#6

Is it better if i use a spritesheet to load the images? I read around here that it consumes less memory. [import]uid: 98755 topic_id: 16998 reply_id: 63994[/import]

#7

Sprite sheets do use less memory because the overhead for one image is less than the overhead for a dozen images. But spritesheets are a pain to use, IMHO in particular for something like this. There is more code overhead with spritesheets, which to me trumps memory overhead for smaller things.

You need to learn to use sprite sheets, so it might be a good exercise to try and do it both ways. But the movie clip is by far the more programmer efficient method.
[import]uid: 19626 topic_id: 16998 reply_id: 64030[/import]