Detecting touch collision with masking

Audio and Graphics
#1

I’m using the corona’s flashlight sample code to create a interaction where the user searches the scene for stars hidden in the dark. When the touch moves over a star, I want an event to be triggered. What is the best way to achieve this? 

This is my code so far: 

(It isn’t quite working as the transition only triggers once - maybe I’m going out it the wrong way?)

local radiusMax = math.sqrt( centerX\*centerX + centerY\*centerY ) function findStars(event) if event.x == goldStar.x or event.y == goldStar.y then print("found a star") transition.to(goldStar, {rotation = 360, time = 1000}) end end function onTouch( event ) local t = event.target local phase = event.phase if "began" == phase then display.getCurrentStage():setFocus( t ) t.isFocus = true -- Store initial position t.x0 = event.x - t.maskX t.y0 = event.y - t.maskY elseif t.isFocus then if "moved" == phase then findStars(event) local maskX = event.x - t.x0 local maskY = event.y - t.y0 t.maskX = maskX t.maskY = maskY -- Stretch the flashlight as it moves further away -- from the screen's center local radius = math.sqrt( maskX\*maskX + maskY\*maskY ) local scaleDelta = radius/radiusMax t.maskScaleX = 1 + scaleDelta t.maskScaleY = 1 + 0.2 \* scaleDelta -- Rotate it appropriately about screen center local rotation = math.deg( math.atan2( maskY, maskX ) ) t.maskRotation = rotation elseif "ended" == phase or "cancelled" == phase then display.getCurrentStage():setFocus( nil ) t.isFocus = false end end return true end image:addEventListener( "touch", onTouch )
#2

Im not sure what you want exactly… Can you take to time to explain what you want and need?

Thanks!

#3

Basically, the user touches and drags a flashlight around the screen to reveal an image underneath. Star images will be hidden in the background beneath the masked image. When the user finds a star, an event is triggered. So I need to be able to detect when the user’s finger (ie the flashlight) is over a star image. 

#4

Hi @amy.laura.b,

You may get the results you need by adding touch event listeners to each star. Then, detect the “moved” phase (and possibly also “began”) which would be equal to the user touching that star.

Also, remove the “return true” from your flashlight touch handler so that the touch event propagates through to the stars.

Of course, this won’t work ideally if you want the “light” itself to reveal the star, but the user’s touch isn’t necessarily in the same place as the light. In that case, this scenario gets more complicated. :confused:

Best regards,

Brent

#5

Im not sure what you want exactly… Can you take to time to explain what you want and need?

Thanks!

#6

Basically, the user touches and drags a flashlight around the screen to reveal an image underneath. Star images will be hidden in the background beneath the masked image. When the user finds a star, an event is triggered. So I need to be able to detect when the user’s finger (ie the flashlight) is over a star image. 

#7

Hi @amy.laura.b,

You may get the results you need by adding touch event listeners to each star. Then, detect the “moved” phase (and possibly also “began”) which would be equal to the user touching that star.

Also, remove the “return true” from your flashlight touch handler so that the touch event propagates through to the stars.

Of course, this won’t work ideally if you want the “light” itself to reveal the star, but the user’s touch isn’t necessarily in the same place as the light. In that case, this scenario gets more complicated. :confused:

Best regards,

Brent