1 button to cycle random images?

Solar2D General Questions/Discussion
#1

Hello -

I have a simple question. Im trying to make a simple app where there is 1 button and 3 images. When the user clicks the button, 1 of the 3 images will appear for the user. So everytime the user clicks the button, the current image disappears and a new images appears in its place.

I have 3 images I want to use. Its a pretty simple app, but Im still learning, so this is difficult for me. Can anyone point me to a tuorial or maybe a forum post answer to this inquiry?

I appreciate any help. I want to make this app as soon as possible so I can sleep at night without having dreams about it, lol… :blink:

So far, I only created a table that holds the images I want to use. I dont have anything else, yet.

Thanks again, in advance.

#2

This tutorial might help you:

http://coronalabs.com/blog/2013/11/26/tutorial-techniques-for-swapping-images/

Rob

#3

It seems like the tutorial you provided will be enough for what I’m trying to do. If I have a question about it, i will just post back here. Thanks Rob. :slight_smile:

#4

I tried some of the examples, but after getting frustrated, I just deleted everything. I dont understand how the code in the tutorial is working. And that goes for any and all of it - Can anyone explain  how to do this. I really want to learn this, but programming seems to be my cryptonite. I feel like Im trying to read chinese…And i CANT read or write chinese at all…Can anyone help me with a sample and explanation.

I dont just want an answer, rather I want to learn…I know this should be a simple app, but its really frustrating me. I appreaciate any help.

I have 1 button and 3 images. I want to click the button and have the images randomly change from one to another. Any help is greatly appreciated. I have a headache from stressing with this all day, so Im going to sleep, now. :wacko:

#5

I typed some new code. Here is what I have so far. Im stuck at this point and have no idea what to do…

--insert background local bgImg = display.newImageRect( "images/myBG.jpg", 625, 450 ) bgImg.x = display.contentCenterX -- center bg on X bgImg.y = display.contentCenterY -- center bg on Y -- table with images to be used... myTable = { display.newImage("images/btnLogo1.png"), display.newImage("images/btnLogo2.png"), } randomPic = myTable[math.random(1,2)]
#6

Let me try to take it back a notch.

Corona doesn’t have a simple automatic way of swapping images.  There used to be a function called “movieclip”.  With movieciip, you would give it a list of images and it would return on a single display object.  It had a “play” function that would let you decide which frame you wanted to play.  We got rid of it for several reasons including that it was inefficient with memory usage and there were too many copies of the function that people had altered and made available to support. 

The way movieclip worked is by creating a display group, which is an object holds multiple images and other groups.  It would take each image passed to it and create a display object, put it in the group and draw them all at the same spot on the screen.  Thing about stacking a bunch of coins on top of each other and looking down from top.  You can only see the top on unless the ones under it are larger.  To prevent you from seeing the coins underneath, it would make the other ones invisible until it’s needed.

Then if you need the image to move, you move the group so that it will move all the images at once.

So the tutorial goes over ways to accomplish that.  You are going to have to write code to make it happen.  The multi-image using a table/array is going to be the closest to what you want since you have 3 images.   You will still need a touch handler for your button that tells Corona which image to display.

Though I think you would be better served by learning how to do sprites.  After all that’s what they are for.  Before rushing to your end goal, it might be worth some time going through a few sprite tutorials and learn how they work.  They will become less intimidating the more you get used to them.

#7

This tutorial might help you:

http://coronalabs.com/blog/2013/11/26/tutorial-techniques-for-swapping-images/

Rob

#8

It seems like the tutorial you provided will be enough for what I’m trying to do. If I have a question about it, i will just post back here. Thanks Rob. :slight_smile:

#9

I tried some of the examples, but after getting frustrated, I just deleted everything. I dont understand how the code in the tutorial is working. And that goes for any and all of it - Can anyone explain  how to do this. I really want to learn this, but programming seems to be my cryptonite. I feel like Im trying to read chinese…And i CANT read or write chinese at all…Can anyone help me with a sample and explanation.

I dont just want an answer, rather I want to learn…I know this should be a simple app, but its really frustrating me. I appreaciate any help.

I have 1 button and 3 images. I want to click the button and have the images randomly change from one to another. Any help is greatly appreciated. I have a headache from stressing with this all day, so Im going to sleep, now. :wacko:

#10

I typed some new code. Here is what I have so far. Im stuck at this point and have no idea what to do…

--insert background local bgImg = display.newImageRect( "images/myBG.jpg", 625, 450 ) bgImg.x = display.contentCenterX -- center bg on X bgImg.y = display.contentCenterY -- center bg on Y -- table with images to be used... myTable = { display.newImage("images/btnLogo1.png"), display.newImage("images/btnLogo2.png"), } randomPic = myTable[math.random(1,2)]
#11

Let me try to take it back a notch.

Corona doesn’t have a simple automatic way of swapping images.  There used to be a function called “movieclip”.  With movieciip, you would give it a list of images and it would return on a single display object.  It had a “play” function that would let you decide which frame you wanted to play.  We got rid of it for several reasons including that it was inefficient with memory usage and there were too many copies of the function that people had altered and made available to support. 

The way movieclip worked is by creating a display group, which is an object holds multiple images and other groups.  It would take each image passed to it and create a display object, put it in the group and draw them all at the same spot on the screen.  Thing about stacking a bunch of coins on top of each other and looking down from top.  You can only see the top on unless the ones under it are larger.  To prevent you from seeing the coins underneath, it would make the other ones invisible until it’s needed.

Then if you need the image to move, you move the group so that it will move all the images at once.

So the tutorial goes over ways to accomplish that.  You are going to have to write code to make it happen.  The multi-image using a table/array is going to be the closest to what you want since you have 3 images.   You will still need a touch handler for your button that tells Corona which image to display.

Though I think you would be better served by learning how to do sprites.  After all that’s what they are for.  Before rushing to your end goal, it might be worth some time going through a few sprite tutorials and learn how they work.  They will become less intimidating the more you get used to them.