Tappable images in table

[babzzz]

Hi

I’m trying to figure out how to make one of this images"tappable" : 

local images = {} images[1] = "image01.png" images[2] = "image02.png" images[3] = "image03.png" images[4] = "image01.png" images[5] = "image02.png" images[6] = "image03.png" images[7] = "image01.png" images[8] = "image02.png" images[9] = "image03.png" images[10] = "image01.png" images[11] = "image02.png" images[12] = "image03.png" for i = 1, 12 do

i tried this : 

function onPlayeff01( event ) myRoundedRect.alpha = 1 groupbtn.alpha = 1 end images[1]:addEventListener( "tap", onPlayeff01 )

Can someone tell me how to target one of the image please?

Thank you

[bjsorrentino]

Hi @babzzz,

Do you mean, how to identify the image within the “onPlayeff01” function? That would be event.target.

Hope this helps,

Brent

[roaminggamer]

I’m not seeing any code where you create display objects, nor is your listener correct.  Please try this:

local images = {} images[1] = "image01.png" images[2] = "image02.png" images[3] = "image03.png" images[4] = "image01.png" images[5] = "image02.png" images[6] = "image03.png" images[7] = "image01.png" images[8] = "image02.png" images[9] = "image03.png" images[10] = "image01.png" images[11] = "image02.png" images[12] = "image03.png" local touchImages = {} local function onTouch( self, event ) if(event.phase == "ended") then for i = 1, #touchImages do touchImges[i].alpha = 0.5 end self.alpha = 1 end end local width = 40 local height = 40 local perRow = 4 local startX = width/2 local curX = startX local curY = height/2 for i = 1, #images do local tmp = display.newImageRect( images[i], width, height ) touchImages[i] = tmp tmp.touch = onTouch tmp:addEventListener( "touch" ) -- Note I may have goofed this placement code tmp.x = curX tmp.y = curY curX = curX + width if( i % perRow == 0 ) then curX = startX curY = curY + height end end

[ToeKnee]

@Roam

Any special reason for 

[lua]

for i = 1, #images do

local tmp = display.newImageRect( images[i], width, height )
touchImages[i] = tmp

tmp.touch = onTouch
tmp:addEventListener( “touch” )

[\lua]

rather than something like

[lua]

for i = 1, #images do
touchImages[i] = display.newImageRect( images[i], width, height )

touchImages[i].touch = onTouch
touchImages[i]:addEventListener( “touch” )

[\lua]

Thanks T.

[roaminggamer]

Easier to type and faster to execute, one lookup penalty vs 3 as in your example.  Also, as you add more lines like that you add one penalty per lookup.  Again though, easier to type ‘tmp’ than ‘touchImages[i]’ over and over.

Faster yet would to be to make 

local tmp for i, ...

 outside (before) loop.

[babzzz]

@roaminggamer

Thank you for your help!really.

But i was wondering if there wass any “easier” solution cause this is a lot of code that i don’t understand…

I asked somebody by private message and he told me : 

To add the tap event to your existing code, just use your existing code but add this line

myRectangle:addEventListener(“tap”, onPlayereff01)

inside the loop. Can be anywhere in the loop but must be after the “local myRectangle” line.

 

1. onPlayereff01 must be the name of your tap function

2. onPlayereff01 must be BEFORE the loop in your code

I want to add a tap event to each of the images but i don’t fully understand how to achieve this.

any idea?

Thank you

[ToeKnee]

@roaminggamer

Easier to type and faster to execute, one lookup penalty vs 3 as in your example.  Also, as you add more lines like that you add one penalty per lookup.  Again though, easier to type ‘tmp’ than ‘touchImages[i]’ over and over.

Faster yet would to be to make 

local tmp for i, ...

 outside (before) loop.

Thanks Roam,

So a “lookup” is just related to tables, or is (what you do later) tmp.x = curX considered a “lookup” as well? I assume it has to lookup curX to get the value - the only diff being curX is not a tble.

PPS. Thanks Roam for this little understanding 

[lua]

local perRow = 4

for i = 1, 12 do

if( i % perRow == 0 ) then

    print(“hey every 4th”)

else

print(“NOT a 4th”)

end

end

[\lua]

OP.

Roam has used touch event whereas it appears you want to use tap.

Roams code creates display objects via a loop - easier than creating individual.

adds the listener within the loop rather than 12 adlistner lines

Then rather than doing obj.x, and obj.y for each individually - does some math based on starting position of the first display obj to position the remaining 11 obj - all within the loop.

As for the function your original post function did something with alpha - but was unclear - so his function looped thru all images making alpha 0.5 and then the one you touched - it’s alpha is put back to 1 to make it stand out.

Check out the docs on tap and touch events.

T. 

[babzzz]

Hey @roaminggamer

i change a little bit your code to make the elements appear as they were before : 

local images = {} images[1] = "image01.png" images[2] = "image02.png" images[3] = "image03.png" images[4] = "image01.png" images[5] = "image02.png" images[6] = "image03.png" images[7] = "image01.png" images[8] = "image02.png" images[9] = "image03.png" images[10] = "image01.png" images[11] = "image02.png" images[12] = "image03.png" local touchImages = {} local function onTouch( self, event ) if(event.phase == "ended") then for i = 1, #touchImages do groupslide.alpha = 0 resetbtn.alpha = 1 mybtnmenu.alpha = 1 groupbtn.alpha = 0 groupbottom.alpha = 1 end self.alpha = 1 end end local xPos = 50 -- this is the first rectangle position local yPos = 0 -- this is the yPosition of all your rectangles for i = 1, #images do local tmp = display.newImageRect( images[i], 91, 122 ) tmp.x = xPos tmp.y = yPos tmp.anchorY = 1 tmp.y = display.actualContentHeight + display.screenOriginY touchImages[i] = tmp scrollView:insert( tmp ) tmp.touch = onTouch tmp:addEventListener( "touch" ) xPos = xPos + 100 end

But i still don’t understand how to individualy add a Tap event on each images…

If i have 1 exemple for 1 image i could understand…

Thnx

[bjsorrentino]

Hi @babzzz,

Do you mean, how to identify the image within the “onPlayeff01” function? That would be event.target.

Hope this helps,

Brent

[roaminggamer]

I’m not seeing any code where you create display objects, nor is your listener correct.  Please try this:

local images = {} images[1] = "image01.png" images[2] = "image02.png" images[3] = "image03.png" images[4] = "image01.png" images[5] = "image02.png" images[6] = "image03.png" images[7] = "image01.png" images[8] = "image02.png" images[9] = "image03.png" images[10] = "image01.png" images[11] = "image02.png" images[12] = "image03.png" local touchImages = {} local function onTouch( self, event ) if(event.phase == "ended") then for i = 1, #touchImages do touchImges[i].alpha = 0.5 end self.alpha = 1 end end local width = 40 local height = 40 local perRow = 4 local startX = width/2 local curX = startX local curY = height/2 for i = 1, #images do local tmp = display.newImageRect( images[i], width, height ) touchImages[i] = tmp tmp.touch = onTouch tmp:addEventListener( "touch" ) -- Note I may have goofed this placement code tmp.x = curX tmp.y = curY curX = curX + width if( i % perRow == 0 ) then curX = startX curY = curY + height end end

[ToeKnee]

@Roam

Any special reason for 

[lua]

for i = 1, #images do

local tmp = display.newImageRect( images[i], width, height )
touchImages[i] = tmp

tmp.touch = onTouch
tmp:addEventListener( “touch” )

[\lua]

rather than something like

[lua]

for i = 1, #images do
touchImages[i] = display.newImageRect( images[i], width, height )

touchImages[i].touch = onTouch
touchImages[i]:addEventListener( “touch” )

[\lua]

Thanks T.

[roaminggamer]

Easier to type and faster to execute, one lookup penalty vs 3 as in your example.  Also, as you add more lines like that you add one penalty per lookup.  Again though, easier to type ‘tmp’ than ‘touchImages[i]’ over and over.

Faster yet would to be to make 

local tmp for i, ...

 outside (before) loop.

[babzzz]

@roaminggamer

Thank you for your help!really.

But i was wondering if there wass any “easier” solution cause this is a lot of code that i don’t understand…

I asked somebody by private message and he told me : 

To add the tap event to your existing code, just use your existing code but add this line

myRectangle:addEventListener(“tap”, onPlayereff01)

inside the loop. Can be anywhere in the loop but must be after the “local myRectangle” line.

 

1. onPlayereff01 must be the name of your tap function

2. onPlayereff01 must be BEFORE the loop in your code

I want to add a tap event to each of the images but i don’t fully understand how to achieve this.

any idea?

Thank you

[ToeKnee]

@roaminggamer

Easier to type and faster to execute, one lookup penalty vs 3 as in your example.  Also, as you add more lines like that you add one penalty per lookup.  Again though, easier to type ‘tmp’ than ‘touchImages[i]’ over and over.

Faster yet would to be to make 

local tmp for i, ...

 outside (before) loop.

Thanks Roam,

So a “lookup” is just related to tables, or is (what you do later) tmp.x = curX considered a “lookup” as well? I assume it has to lookup curX to get the value - the only diff being curX is not a tble.

PPS. Thanks Roam for this little understanding 

[lua]

local perRow = 4

for i = 1, 12 do

if( i % perRow == 0 ) then

    print(“hey every 4th”)

else

print(“NOT a 4th”)

end

end

[\lua]

OP.

Roam has used touch event whereas it appears you want to use tap.

Roams code creates display objects via a loop - easier than creating individual.

adds the listener within the loop rather than 12 adlistner lines

Then rather than doing obj.x, and obj.y for each individually - does some math based on starting position of the first display obj to position the remaining 11 obj - all within the loop.

As for the function your original post function did something with alpha - but was unclear - so his function looped thru all images making alpha 0.5 and then the one you touched - it’s alpha is put back to 1 to make it stand out.

Check out the docs on tap and touch events.

T. 

[babzzz]

Hey @roaminggamer

i change a little bit your code to make the elements appear as they were before : 

local images = {} images[1] = "image01.png" images[2] = "image02.png" images[3] = "image03.png" images[4] = "image01.png" images[5] = "image02.png" images[6] = "image03.png" images[7] = "image01.png" images[8] = "image02.png" images[9] = "image03.png" images[10] = "image01.png" images[11] = "image02.png" images[12] = "image03.png" local touchImages = {} local function onTouch( self, event ) if(event.phase == "ended") then for i = 1, #touchImages do groupslide.alpha = 0 resetbtn.alpha = 1 mybtnmenu.alpha = 1 groupbtn.alpha = 0 groupbottom.alpha = 1 end self.alpha = 1 end end local xPos = 50 -- this is the first rectangle position local yPos = 0 -- this is the yPosition of all your rectangles for i = 1, #images do local tmp = display.newImageRect( images[i], 91, 122 ) tmp.x = xPos tmp.y = yPos tmp.anchorY = 1 tmp.y = display.actualContentHeight + display.screenOriginY touchImages[i] = tmp scrollView:insert( tmp ) tmp.touch = onTouch tmp:addEventListener( "touch" ) xPos = xPos + 100 end

But i still don’t understand how to individualy add a Tap event on each images…

If i have 1 exemple for 1 image i could understand…

Thnx