Is it possible to somehow get the info when a finger is moving from a masked image to the transparent image area of this masked image?
I know I can use object.isHitTestMasked = true , so a touch is only working on the visible image when it’s masked. But what about the movement of a finger over this image… is there a way to only get the feedback whenever the finger is moving over the visible area of the masked image somehow?
Thx for all your help!
Daniela
Have you read this: http://docs.coronalabs.com/guide/media/imageMask/index.html#hit-masking
You are basically asking for touches not to be reported when they are over the masked area - but still be reported so you know they are specifically over the masked area. You want opposites.
Solution: Load the image twice into a group. Make the bottom image invisible but set .isHitTestable=true. Apply the mask to the top image and set .isHitTestMasked=true. Listen for touches on each image separately - both addEventListener can still call the same listener function, it will determine which image was reporting the touch with the event.target value.
You can now have a masked image and still detect the touch when it moves from masked/visible to masked/invisible.
Thank you so much! I appreciate your fast help with this and can’t thank you enough for this. I just did the changes and it works perfectly! 
I still have one open problem with this:
I need the detection to work while moving another object around the screen at the same time. How can I build a touch handler who is capable to let this information through?
Thx for your help!
You need to turn multi-touch on. Attach touch listeners to the objects (called local listeners) and handle touches per-object. Do not use global listeners (this is generally a bad idea for code maintenance anyway) to keep it simple.
I can’t figure out how I should design the code for the object I’m moving around the screen, so I still can get the information from the masked image group behind the object (see first post). I can either touch an empty space on the screen, move the finger on the masked image group then or touch the masked image group directly to get the information about the mask and the mask end from this group. When I touch the (other) object and move it around I don’t get the information from the image group behind this object.
I don’t use the “return true” on this object, and now I don’t have any ideas on how to make this work.
How do I have to use the multitouch here? Just turning it on and handle touches per-object isn’t working. I think I’m missing something here… 
Any further help much appreciated!!! 
Thank you!
It seems like you’ve slipped back to wanting to get touch inputs from two different objects from one touch at the same time, which is simply impossible.
Can you draw a diagram to explain what you’d like to do - maybe a screen shot with clean explanation. I’m pretty sure what you want is not hard, but you’ve gotten confused between the wood and the trees.
Thank you for your fast answer. I guess you are right and I haven’t used the same mechanics you told me about in the first place. Maybe I have worked with the sample stuff for too long. I will look into it asap… but I also have attached a sample image to show the problem…
The flower is the image I’m using with a mask, so the area 1 is transparent. Regarding to your solution from the beginning I can touch on the screen, move the finger and always get the information if my finger is touching the flower 2, or if the finger is leaving the flower (while moving) to a transparent image 1 area.
Now I want to use graphic 3 as a movable cursor which can be dragged over the screen. After I click image 3 and move it around (I’m using a different event listener for this image), I couldn’t figure out how to still get the information from the flowerimage(s) behind of image 3… meaning if image 3 is moving over area 1 or area 2 of the image behind image 3.
Hope that makes more sense now
Thank you!
One last question: Do you want a user’s touch to be moving the #3 finger image and a separate user’s touch to be moving over (but not controlling the position of) the flower image?
If not, do you just want the user’s touch to move the image of the finger around and detect whether or not the finger image is in contact with the flower image?
the last one. I want the user’s touch move the image of the finger around and detect whether or not the finger image is in contact with the flower or the transparent space in the flower image.
So, then, this is really just a matter of a single touch being used to move one image around and then detecting whether or not that image is in contact with another image…
Let me work some code up. I’m at my day job right now, so give me a little while.
Thank you so much for your help with this! I really appreciate it!
Btw, should the finger image be used like a mouse pointer?
mhhh… not for now. But it would be good to know how this can be done.
What I mean is; If you touch the finger image at the bottom and swipe left, should the finger just move left or should it look like you’re dragging it from that point, and sort of trail behind the point at which you touched it?
This is the difference between the implementation using the physics engine vs. only images.
just swipe is okay. the image just should move with the finger.
Well, here is the start of the code I would use. Because the flower is an odd shape, I would use a physics object for it. This would just be a sensor which would collide with a sensor on the end of the finger image. This is pretty straight forward, but to get the outline of the flower, I’m attempting to use the new graphics.newOutline() function, which is not working for me. I’m hoping someone on the Corona staff can point me in the right direction here…
https://dl.dropboxusercontent.com/u/10254959/Help/DragFingerTouchHelp/DragFingerTouchHelp.zip
-- drag finger touch demo require("physics") physics.start() physics.setDrawMode("hybrid") physics.setGravity(0,0) local stage = display.getCurrentStage() local outline = graphics.newOutline( 2, "flower.png" ) print(#outline) local flower = display.newImage( "flower.png" ) flower.x, flower.y = display.contentCenterX, display.contentCenterY physics.addBody( flower, { outline=outline, isSensor=true } ) local finger = display.newImage( "finger.png" ) finger.x, finger.y = display.contentWidth-finger.width, display.contentHeight-finger.height local function touch(e) if (e.phase == "began") then e.target.hasFocus = true stage:setFocus( e.target ) e.target.prev = e return true elseif (e.target.hasFocus) then e.target.x, e.target.y = e.target.x+(e.x-e.target.prev.x), e.target.y+(e.y-e.target.prev.y) if (e.phase == "moved") then else stage:setFocus( nil ) e.target.hasFocus = false end e.target.prev = e return true end return false end finger:addEventListener( "touch", touch )Ok, sorted it. The flower is slightly transparent and gives the effect of lighting up when the finger tip touches it. It’s not perfect, but I’m sure you can tweak the image and the physics body outline, maybe by using PhysicsEditor…
Full solution: https://dl.dropboxusercontent.com/u/10254959/Help/DragFingerTouchHelp/DragFingerTouchHelp.zip
Code:
-- drag finger touch demo require("physics") physics.start() physics.setDrawMode("normal") -- use "hybrid" to see the physics bodies physics.setGravity(0,0) local stage = display.getCurrentStage() local flower = display.newImage( "flower.png" ) flower.x, flower.y = display.contentCenterX, display.contentCenterY flower.alpha = .7 physics.addBody( flower, { outline=graphics.newOutline( 20, "flower.png" ), isSensor=true } ) local finger = display.newImage( "finger.png" ) finger.x, finger.y = display.contentWidth-finger.width, display.contentHeight-finger.height local function newSensor( x, y ) local group = display.newGroup() group.x, group.y = x, y physics.addBody( group, "dynamic", { isSensor=true, radius=10 } ) function group:collision(e) if (e.phase == "began") then flower.alpha = 1 else flower.alpha = .7 end return true end group:addEventListener("collision",group) return group end local function touch(e) if (e.phase == "began") then e.target.hasFocus = true stage:setFocus( e.target ) e.target.prev = e e.target.sensor = newSensor( e.target.x-84, e.target.y-92 ) return true elseif (e.target.hasFocus) then local dx, dy = e.x-e.target.prev.x, e.y-e.target.prev.y e.target.x, e.target.y = e.target.x+dx, e.target.y+dy e.target.sensor.x, e.target.sensor.y = e.target.sensor.x+dx, e.target.sensor.y+dy if (e.phase == "moved") then else stage:setFocus( nil ) e.target.hasFocus = false e.target.sensor:removeSelf() e.target.sensor = nil end e.target.prev = e return true end return false end finger:addEventListener( "touch", touch )WOW! Thank you so much for your detailed help with this one!!! I don’t know what to say… wow!
Just saw your post and will look into this asap.
Btw, I think 13 is the best value to use, in this particular case:
physics.addBody( flower, { outline=graphics.newOutline( 13, "flower.png" ), isSensor=true } )