How to link a Button to an Image Sheet

Getting Started Newbie Questions
#1

Hi,

I’m a newbie when it comes to programming. I’ve been through the Getting Started tutorials and am now attempting to create my first app from scratch.

The premise is a “paper doll”, where the user will tap on a button and the clothes on the doll will change. Each time they tap on the button the clothes change, and eventually cycle back through (ie, clothing 1, clothing 2, clothing 3, clothing 1, clothing 2, clothing 3, clothing 1, as they tap on the button).

I thought this would be a simple project but I’m already stuck.

I’ve created my background, which includes the blank “paper doll”. And I’ve got my clothing/overlay elements in an Image Sheet. I’ve also created my button, which does nothing right now except change colour when it’s tapped.

My problem is that I have no idea how to link the button to the image sheet, to cause it to cycle through the image sheet images each time it’s pressed.

I’ve tried going through the YouTube Corona channel, the various documents on this website, and have even tried Google, but I’ve no idea really what terms to search for, and I’ve had no luck so far.

I’d really appreciate any tips that can be offered.

#2

Hi again,

Since I posted it’s dawned on me that my goal could also be accomplished in perhaps a simpler way.

If I have my ‘doll’ dressed in an outfit, and the user taps on that outfit, I could make it disappear and load up the next outfit from the image sheet. Image sheet object 1 would disappear and give way to image sheet object 2, which would in turn give way to object 3, which would then give way back to object 1. All by the user tapping on the object/image.

I get that for this I’d need a tap function, but again I’m stumped as to how to make each object disappear and the next object appear, with each tap.

Really sorry for asking possibly very obvious questions. I truly am stumped, and am doing my best to research the answers myself, but so far to no avail.

#3

Hi @jones.han,

Welcome to Corona! I think your first approach is actually fine, but you may want to incorporate a sprite object for the purpose (not an “animated” sprite but more like a sprite which is used to flip between different clothing frames, under the button’s control).

Basically, I suggest you begin here and learn how to assemble basic sprite objects:

https://docs.coronalabs.com/guide/media/spriteAnimation/index.html

Next, assign a basic custom property to the button like “currentItemIndex”, like this (after you create the button):

[lua]

myButton.currentItemIndex = 1

[/lua]

You may want to set it to something other than 1, but it should match the starting frame of the sprite. So, if you are representing 10 clothing items in the sprite, and you decide (for whatever reason) to begin with a default of 3, you should set the above property to 3 to match.

Next, when the button is tapped, you should increase this property by 1, with a little cycle check to loop back to 1 (again, let’s assume a count of 10 possible frames):

[lua]

   – Inside your button event handler, assuming ‘event.target’ represents the button

   event.target.currentItemIndex = event.target.currentItemIndex + 1

   if event.target.currentItemIndex > 10 then

      event.target.currentItemIndex = 1   

   end

[/lua]

Directly below that, also inside the button event handler, set the sprite frame to the new index:

[lua]

   – Assuming the sprite object for this clothing set is ‘dollDress’

   dollDress:setFrame( event.target.currentItemIndex )

[/lua]

That will basically switch the frame of the clothing item each time the button is pressed, and cycle through all 10 options over and over again as the user tinkers around.

That’s all just an overview, but I hope you see the line of thought here. Let me know if you have any other questions. :slight_smile:

Brent

#4

Wow thank you so much Brent for that thorough and informative reply! I’ll give that a shot.

#5

Thanks again Brent, I got it working thanks to your instructions…!

#6

Hi again,

Since I posted it’s dawned on me that my goal could also be accomplished in perhaps a simpler way.

If I have my ‘doll’ dressed in an outfit, and the user taps on that outfit, I could make it disappear and load up the next outfit from the image sheet. Image sheet object 1 would disappear and give way to image sheet object 2, which would in turn give way to object 3, which would then give way back to object 1. All by the user tapping on the object/image.

I get that for this I’d need a tap function, but again I’m stumped as to how to make each object disappear and the next object appear, with each tap.

Really sorry for asking possibly very obvious questions. I truly am stumped, and am doing my best to research the answers myself, but so far to no avail.

#7

Hi @jones.han,

Welcome to Corona! I think your first approach is actually fine, but you may want to incorporate a sprite object for the purpose (not an “animated” sprite but more like a sprite which is used to flip between different clothing frames, under the button’s control).

Basically, I suggest you begin here and learn how to assemble basic sprite objects:

https://docs.coronalabs.com/guide/media/spriteAnimation/index.html

Next, assign a basic custom property to the button like “currentItemIndex”, like this (after you create the button):

[lua]

myButton.currentItemIndex = 1

[/lua]

You may want to set it to something other than 1, but it should match the starting frame of the sprite. So, if you are representing 10 clothing items in the sprite, and you decide (for whatever reason) to begin with a default of 3, you should set the above property to 3 to match.

Next, when the button is tapped, you should increase this property by 1, with a little cycle check to loop back to 1 (again, let’s assume a count of 10 possible frames):

[lua]

   – Inside your button event handler, assuming ‘event.target’ represents the button

   event.target.currentItemIndex = event.target.currentItemIndex + 1

   if event.target.currentItemIndex > 10 then

      event.target.currentItemIndex = 1   

   end

[/lua]

Directly below that, also inside the button event handler, set the sprite frame to the new index:

[lua]

   – Assuming the sprite object for this clothing set is ‘dollDress’

   dollDress:setFrame( event.target.currentItemIndex )

[/lua]

That will basically switch the frame of the clothing item each time the button is pressed, and cycle through all 10 options over and over again as the user tinkers around.

That’s all just an overview, but I hope you see the line of thought here. Let me know if you have any other questions. :slight_smile:

Brent

#8

Wow thank you so much Brent for that thorough and informative reply! I’ll give that a shot.

#9

Thanks again Brent, I got it working thanks to your instructions…!