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. [import]uid: 71824 topic_id: 14117 reply_id: 314117[/import]
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? [import]uid: 52491 topic_id: 14117 reply_id: 51974[/import]
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. [import]uid: 71824 topic_id: 14117 reply_id: 51988[/import]
Or can you send me a zip of source code to demo about this case?
Thank you so much. [import]uid: 71824 topic_id: 14117 reply_id: 51989[/import]
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 
[import]uid: 52491 topic_id: 14117 reply_id: 52081[/import]
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. [import]uid: 71824 topic_id: 14117 reply_id: 52115[/import]
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. [import]uid: 19176 topic_id: 14117 reply_id: 52236[/import]
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. [import]uid: 52491 topic_id: 14117 reply_id: 52262[/import]
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.
Thank you. [import]uid: 71824 topic_id: 14117 reply_id: 52333[/import]
in the start drag function have a separate operation for the triangle ie.
[lua]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)[/lua]
I did the nil check in case you don’t wana give all your objects name attributes
for all other objects use the normal code but for the triangle wrap the normal code in an if function where it only works if it is in the section the image is in. This will be a bit complex and you will need to think geometrically. I suggest setting the origin to the bottom left to make it simple to define the slope of the triangle as -1 ie. y=-1x+125 is the line. from there you will define the area using > and < statements. The main issue you will then run into is rotation and you will have to look into that on your own as I havn’t but I am sure there is a way to adjust your > and < statements based on what is returned by triangle.rotation.
Best of luck [import]uid: 19176 topic_id: 14117 reply_id: 52354[/import]
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. [import]uid: 46529 topic_id: 14117 reply_id: 52356[/import]
Hi Hannah, I am having a similar problem with a masked object. I like the idea of checking the even.x and event.y but I am not sure how to go about doing that. Could you provide a sample code? Thanks.
SM [import]uid: 79586 topic_id: 14117 reply_id: 61128[/import]
[lua]if event.x > object.x -10 and event.x < object.x + 10 then[/lua]
I think this was pretty well explained before, you just use if then statements to create an area and only apply the dag code if the statements are true. There is no “sample code” for this because it applies to the individual shape you are hoping to achieve, thus the “sample code” I did give was open ended. [import]uid: 19176 topic_id: 14117 reply_id: 61165[/import]
hmm, ok I will give this a try, it’s basically a square, but I have masked it so only the upper right hand corner of the square shows. Do I have to put these if then statements inside a transition or anything?
Would it be something like this?
if event.x > object.x -10 and event.x < object.x + 10 then
local function ontouch (event)
object.x = event.x
object.y = event.y
end
object:addEventListener(“touch”, ontouch)
I am still really new to programming, I have read through tutorials and am continuing to read through all the available materials but I still have trouble with syntax and statements. Thanks for the extra help. These forums are pretty good.
SM [import]uid: 79586 topic_id: 14117 reply_id: 61173[/import]
Follow this as before just use your dimensions instead of 10 and add additional if statements to narrow the area, what you had before was way off would suggest doing some simple programming tutorials before continuing www.codecademy.com is supposed to be an OK site:
[lua]local startDrag = function( event )
if event.target.mName ~= nil and event.target.mName == “triangle” then
if event.x < event.target.x + 10 and event.x > event.target.x - 10 then
if event.y < event.target.y + 10 and event.y > event.target.y - 10 then
PUT DRAG CODE HERE FOR ALL EVENT CASES (START MOVED CANCELED ENDED)
end
end
else
.
PUT DRAG CODE HERE FOR ALL EVENT CASES (START MOVED CANCELED ENDED) this allows you to only apply the drag restrictions to certain object names, you can expand this using elseif statements
.
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)[/lua] [import]uid: 19176 topic_id: 14117 reply_id: 61183[/import]
I will check out that website, and thanks for the code examples. These help give me a good direction.
SM [import]uid: 79586 topic_id: 14117 reply_id: 61187[/import]
here is the function I am working with. I just can’t figure out how to place it in the code example you posted.
local function ontouch( event )
local t = event.target
local phase = event.phase
if “began” == phase then
– Make target the top-most object
local parent = t.parent
parent:insert( t )
display.getCurrentStage():setFocus( t )
t.isFocus = true
– Store initial position
t.x0 = event.x - t.x
t.y0 = event.y - t.y
elseif t.isFocus then
if “moved” == phase then
– Make object move (we subtract t.x0,t.y0 so that moves are
– relative to initial grab point, rather than object “snapping”).
t.x = event.x - t.x0
t.y = event.y - t.y0
elseif “ended” == phase or “cancelled” == phase then
display.getCurrentStage():setFocus( nil )
t.isFocus = false
–if section1.y >= 480 then
end
end
– Important to return true. This tells the system that the event
– should not be propagated to listeners of any objects underneath.
return true
end
section1:addEventListener(“touch”,ontouch) [import]uid: 79586 topic_id: 14117 reply_id: 61195[/import]