How to ignore transparent area when touch the image

Anybody know how to ignore transparent when drag an image?

I have a triangle image and I want the touch event only occurs when I touch on the visible part of the triangle, not on the rectangle round the image (include transparent area).

Thank you so much.

The transparent area is part of the image; however I've never found that to be a problem when my images are properly cropped.

How much transparency does your image have?

I use magic erase tool in Photoshop CS5 to delete all the background and see nothing in the transparent area of my image.

I uploaded my image here, can you check it for me?

https://picasaweb.google.com/lh/photo/MHWJqORaIk9nvefGAES2DA?feat=directlink

For now, when I click on the transparent area of the image, I still can drag it. I am using the code of DragPlatforms of Corona.

+++++++++++++++
shape = movieclip.newAnim{ "assets/gfx/box1/triangle.png" }
shape:addEventListener("touch", startDrag)
+++++++++++++++

Thank you so much.

Or can you send me a zip of source code to demo about this case?

Thank you so much.

Hey there,

I can't see a file at that link - can you post a working link, please?

I'm guessing you have a large transparent area around your image that needs to be cropped. (Very simple, but need to see the image.)

Once I've seen it I can advise you.

Peach :)

Hi,

Thank you for your reply. I am sorry, I send you another link of my image.

The transparent area is quite large so it make me a big trouble.

http://www.mediafire.com/?c9sbpy6po34cmuk

Thank you.

hey, try using a custom shape, there is info about it here http://developer.anscamobile.com/reference/index/physicsaddbody and google "gumbo lua" and there is an app to help you create the shapes. I think that changes the touch are, just set physics.setGravity( 0, 0 ) and it won't change much of anything. If this doesn't work you need to have a line within the drag code to check that the event.x, event.y are withing the desired area based on the x,y of the triangle.

Ah I see, it's a triangle!

As ne.hannah said, you may want to use a custom shape - it's the easiest way of doing it. (And Gumbo is great.)

You could also check the x/y as suggested, but a custom shape seems cleanest.

I have already add a custom shape to the triangle and the physic works great. But I can't add the drag event listener to the custom shape. I still only can add the event listener to the movieclip or image of triangle and nothing changed.

Here is my code, please see.
Noted that the triangle is 125x125 px.

===========================
triangle = movieclip.newAnim{ "assets/gfx/box1/triangle.png" }
local myShape = { -125 / 2, -125 / 2, 125 / 2, -125 / 2, -125 / 2, 125 / 2 }
physics.addBody(shape, { density = 1, friction = 1, bounce = 0, shape = myShape })
triangle:addEventListener("touch", startDrag)
===========================

Thank you.

in the start drag function have a separate operation for the triangle ie.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
local startDrag = function( event )
.
.
.
if event.target.mName ~= nil and event.target.mName == "triangle" then
.
.
else
.
.
end
.
.
.
end
 
triangle = movieclip.newAnim{ "assets/gfx/box1/triangle.png" }
triangle.mName = "triangle"
local myShape = { -125 / 2, -125 / 2, 125 / 2, -125 / 2, -125 / 2, 125 / 2 }
physics.addBody(shape, { density = 1, friction = 1, bounce = 0, shape = myShape })
triangle:addEventListener("touch", startDrag)

I don't know if it applies your problem, I just want to point that masks are started working in the daily builds after latest stable release. If you have an image other than a rectangle you can use masks to enable touches for only masked part of an image.

views:1930 update:2011/9/27 8:54:05
corona forums © 2003-2011