Swapping Images from table

Getting Started Newbie Questions
#1

Can anyone help me with my code?

This code does not work correctly!

That is something like the tutorial “Techniques for swapping images” by Rob Miracle, but my code doesn’t work.

The loop “for” is executing only the last image “orange”.

My idea is swap the 3 images with a space of time between them.

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

Please help me.

Thank you,

Daniel

local mySlide = { "blue.png", "red.png", "orange.png" } print(#mySlide) for i =1, #mySlide do Slide = display.newImage(mySlide[i]) Slide.x = 320 Slide.y = 480 print "Running Slide!" timer.performWithDelay( 1000, mySlide ) end
#2

0. Note: When referring to a tutorial, please be sure to link to it. Don’ta assume we know it.  I am not familiar with that tutorial so I couldn’t compare your code to it.

1. That code doesn’t make a lot of sense when I read it.

This statement in particular:

timer.performWithDelay( 1000, mySlide )

 timer.peformWithDelay() takes a reference to a function or a closure, not a table.

This code would swap the image repeatedly and forever, once per second.

local mySlide = { "blue.png", "red.png", "orange.png" } print(#mySlide) local slideNum = 1 local lastSlide local function swapSlide() display.remove( lastSlide ) lastSlide = display.newImage(mySlide[slideNum]) lastSlide.x = 320 lastSlide.y = 480 slideNum = slideNum + 1 if( slideNum \> #mySlide ) then slideNum = 1 end end timer.performWithDelay( 1000, swapSlide, -1 )

2. Why not just fill with a new texture?
 
This article talks about using repeating fills, but it covers everything you need to know about changing the fill:
https://coronalabs.com/blog/2013/11/07/tutorial-repeating-fills-in-graphics-2-0/

local mySlide = { "blue.png", "red.png", "orange.png" } print(#mySlide) local slideNum = 1 local lastSlide = display.newImage(mySlide[slideNum]) lastSlide.x = 320 lastSlide.y = 480 local function swapSlide() slideNum = slideNum + 1 if( slideNum \> #mySlide ) then slideNum = 1 end lastSlide.fill = { type = "image", filename = mySlide[slideNum] } end timer.performWithDelay( 1000, swapSlide, -1 )
#3

Hi, roaminggamer!!

Thank you very much for your quick help! This works perfectly well. :slight_smile:

I apologize for not putting the proper references, this is because I am not very familiar with this forum and English is not my native language.

In the final version of the code, I intend to replace the (“blue.png”, “red.png”, “orange.png”) with different illustrations.

I’m going to study your tips, I understand digital illustration and I do not have much control over programming.

It is always good to have help from someone experienced.

Thank you.

Daniel

Website: http://www.studiodomingos.com

https://www.behance.net/dsddomigose064

YouTube: https://goo.gl/mwIyrL

#4

@roaminggamer pointed out the problem with the timer. But in addition Slide seems to be global variable and you’re writing over the object each pass and loosing reference to them. Finally a for loop runs very quickly and that code will likely run completely in one frame update. 

He’s offered great techniques that you should consider implementing. But I want to suggest another. Store each display object in a table, then you can just show/hide the one you want.

local slideImages = {} for i =1, #mySlide do slideImages[i] = display.newImage(mySlide[i]) slideImages[i].x = 320 slideImages[i].y = 480 slideImages[i].inVisible = false end slideImages[1].isVisible = true

Then you can use whatever logic to show the images.

Rob

#5

Hi, Rob!

It’s a pleasure for me to get tips from great programmers and you’re sure to be one of them.

The language “Lua” was developed here in Brazil and I feel I should know more about it … :frowning:

At first, I did something similar to what you suggest, but both before and now, I can not implement a cycle of images, only the last image of the table is shown.

Daniel

#6

My idea is this:

I’m making an application to present my portfolio (I’m a freelance illustrator).

The initial screen will display an input button, and while there is no user action (click the button), I would like to show 1 or 2 different picture on this home screen.

I do not know the correct name for this, but it would be like a slide with 1 or 2 images shown over a period of time between them.

#7

What should trigger the images to change?

#8

Maybe a timer for 4 or 5 seconds.

#9

Something like this should work. This is untested code, but when mixed with my code above it should do the trick.

local currentImage = 1 local function swapImages()     slideImages[currentImage].isVisible = false     currentImage = currentImages + 1     if currentImage \> #slideImages then         currentImage = 1     end     slideImage[currentImage].isVisible = true end timer.performWithDelay(5000, swapImages, 0)

Now I’m using the .isVisible value to toggle if the image shows or not. You could use the .alpha property (0 invisible, 1 fully visible, 0.5 half-way visible.  You can use transition.to() to change the alpha over a period of time. Or you could use transition.to() to move the image in a sliding fashion.

Rob

#10

Thank you very much, Rob.

I’m going to study your code and try to put something together.

#11

0. Note: When referring to a tutorial, please be sure to link to it. Don’ta assume we know it.  I am not familiar with that tutorial so I couldn’t compare your code to it.

1. That code doesn’t make a lot of sense when I read it.

This statement in particular:

timer.performWithDelay( 1000, mySlide )

 timer.peformWithDelay() takes a reference to a function or a closure, not a table.

This code would swap the image repeatedly and forever, once per second.

local mySlide = { "blue.png", "red.png", "orange.png" } print(#mySlide) local slideNum = 1 local lastSlide local function swapSlide() display.remove( lastSlide ) lastSlide = display.newImage(mySlide[slideNum]) lastSlide.x = 320 lastSlide.y = 480 slideNum = slideNum + 1 if( slideNum \> #mySlide ) then slideNum = 1 end end timer.performWithDelay( 1000, swapSlide, -1 )

2. Why not just fill with a new texture?
 
This article talks about using repeating fills, but it covers everything you need to know about changing the fill:
https://coronalabs.com/blog/2013/11/07/tutorial-repeating-fills-in-graphics-2-0/

local mySlide = { "blue.png", "red.png", "orange.png" } print(#mySlide) local slideNum = 1 local lastSlide = display.newImage(mySlide[slideNum]) lastSlide.x = 320 lastSlide.y = 480 local function swapSlide() slideNum = slideNum + 1 if( slideNum \> #mySlide ) then slideNum = 1 end lastSlide.fill = { type = "image", filename = mySlide[slideNum] } end timer.performWithDelay( 1000, swapSlide, -1 )
#12

Hi, roaminggamer!!

Thank you very much for your quick help! This works perfectly well. :slight_smile:

I apologize for not putting the proper references, this is because I am not very familiar with this forum and English is not my native language.

In the final version of the code, I intend to replace the (“blue.png”, “red.png”, “orange.png”) with different illustrations.

I’m going to study your tips, I understand digital illustration and I do not have much control over programming.

It is always good to have help from someone experienced.

Thank you.

Daniel

Website: http://www.studiodomingos.com

https://www.behance.net/dsddomigose064

YouTube: https://goo.gl/mwIyrL

#13

@roaminggamer pointed out the problem with the timer. But in addition Slide seems to be global variable and you’re writing over the object each pass and loosing reference to them. Finally a for loop runs very quickly and that code will likely run completely in one frame update. 

He’s offered great techniques that you should consider implementing. But I want to suggest another. Store each display object in a table, then you can just show/hide the one you want.

local slideImages = {} for i =1, #mySlide do slideImages[i] = display.newImage(mySlide[i]) slideImages[i].x = 320 slideImages[i].y = 480 slideImages[i].inVisible = false end slideImages[1].isVisible = true

Then you can use whatever logic to show the images.

Rob

#14

Hi, Rob!

It’s a pleasure for me to get tips from great programmers and you’re sure to be one of them.

The language “Lua” was developed here in Brazil and I feel I should know more about it … :frowning:

At first, I did something similar to what you suggest, but both before and now, I can not implement a cycle of images, only the last image of the table is shown.

Daniel

#15

My idea is this:

I’m making an application to present my portfolio (I’m a freelance illustrator).

The initial screen will display an input button, and while there is no user action (click the button), I would like to show 1 or 2 different picture on this home screen.

I do not know the correct name for this, but it would be like a slide with 1 or 2 images shown over a period of time between them.

#16

What should trigger the images to change?

#17

Maybe a timer for 4 or 5 seconds.

#18

Something like this should work. This is untested code, but when mixed with my code above it should do the trick.

local currentImage = 1 local function swapImages()     slideImages[currentImage].isVisible = false     currentImage = currentImages + 1     if currentImage \> #slideImages then         currentImage = 1     end     slideImage[currentImage].isVisible = true end timer.performWithDelay(5000, swapImages, 0)

Now I’m using the .isVisible value to toggle if the image shows or not. You could use the .alpha property (0 invisible, 1 fully visible, 0.5 half-way visible.  You can use transition.to() to change the alpha over a period of time. Or you could use transition.to() to move the image in a sliding fashion.

Rob

#19

Thank you very much, Rob.

I’m going to study your code and try to put something together.