Swapping images in a display group?

Solar2D General Questions/Discussion
#1

I’m not sure if I’m using display groups correctly, but here’s what I’m trying to do.

I’ve created a group that makes up a set of on screen controls. There are 4 buttons and a background image.
The buttons are just a left, right, thrust and fire. I’ve made an up and down state for each button.
Now, I just used a display.newImageRect to load each image.
What I want to do is if someone touches a button, say the left button, I want to swap out the currently display UP version with the DOWN one.

I decided to put them into a group so I can move the entire control around the screen, and maybe even shake it.

I can’t seem to figure out how to get the coordinates of the grouped images to replace, so I’m looking for advice on whether I’m approaching this correctly or if there is a better way to achieve what I’m after.

Thanks! [import]uid: 100618 topic_id: 32033 reply_id: 332033[/import]

#2

Hi there,

If you’re using the widget library (http://developer.coronalabs.com/reference/index/widgetnewbutton) to create your buttons, you can use the [lua]default[/lua] and [lua]over[/lua] parameters to define the image that should display when the button is not pressed (default, which corresponds to what you call UP) and when it is pressed (over, which corresponds to what you call DOWN).

Alternatively, you could create a similar functionality yourself. For each button, you could insert both the UP and DOWN versions into your display group at the same coordinates. When a button is pressed, set it’s [lua]isVisible[/lua] property to false and the DOWN image’s [lua]isVisible[/lua] property to true.

Hope this helps.

  • Andrew [import]uid: 109711 topic_id: 32033 reply_id: 127675[/import]
#3

Thanks Andrew, using the isVisible worked like a charm. I guess the only funny thing I had to consider though is I had to put an event down for both the up and down images so they toggled each other, since once the UP went invisible it wouldn’t detect the release…

So I ended up with code that looks like this:

p1Right\_Up.touch = onRightClick  
p1Right\_Up:addEventListener("touch",p1Right\_Up)  
p1Right\_Down.touch = onRightClick  
p1Right\_Down:addEventListener("touch",p1Right\_Down)

Is that the best way to handle this situation? [import]uid: 100618 topic_id: 32033 reply_id: 127681[/import]

#4

Maybe the example here will be a better way of structuring it by listening to the began and ended phases?

http://docs.coronalabs.com/api/event/touch/phase.html [import]uid: 62706 topic_id: 32033 reply_id: 127710[/import]

#5

Hi there,

If you’re using the widget library (http://developer.coronalabs.com/reference/index/widgetnewbutton) to create your buttons, you can use the [lua]default[/lua] and [lua]over[/lua] parameters to define the image that should display when the button is not pressed (default, which corresponds to what you call UP) and when it is pressed (over, which corresponds to what you call DOWN).

Alternatively, you could create a similar functionality yourself. For each button, you could insert both the UP and DOWN versions into your display group at the same coordinates. When a button is pressed, set it’s [lua]isVisible[/lua] property to false and the DOWN image’s [lua]isVisible[/lua] property to true.

Hope this helps.

  • Andrew [import]uid: 109711 topic_id: 32033 reply_id: 127675[/import]
#6

Thanks Andrew, using the isVisible worked like a charm. I guess the only funny thing I had to consider though is I had to put an event down for both the up and down images so they toggled each other, since once the UP went invisible it wouldn’t detect the release…

So I ended up with code that looks like this:

p1Right\_Up.touch = onRightClick  
p1Right\_Up:addEventListener("touch",p1Right\_Up)  
p1Right\_Down.touch = onRightClick  
p1Right\_Down:addEventListener("touch",p1Right\_Down)

Is that the best way to handle this situation? [import]uid: 100618 topic_id: 32033 reply_id: 127681[/import]

#7

Maybe the example here will be a better way of structuring it by listening to the began and ended phases?

http://docs.coronalabs.com/api/event/touch/phase.html [import]uid: 62706 topic_id: 32033 reply_id: 127710[/import]