[Resolved] Touch Event for Sprite with transparent area

Solar2D General Questions/Discussion
1

Hi,

How would you guys propose to handle touch event for a sprite that has quite a bit of transparent area if I do not want those transparent region to react to touch? I believe custom body shape only work for physics collision and not for touch. I read somewhere that I would need to define my own polygon shape for each sprite and do a hit test but that would be pretty tedious if I have many sprites and each has its own shapes and sizes.

Kindly advise. Thanks in advance.

Cheers [import]uid: 70056 topic_id: 23485 reply_id: 323485[/import]

2

Take a look at this page: http://developer.anscamobile.com/reference/index/objectishittestmasked

It uses a mask to prevent touches where you don’t want them, basically.

Peach :slight_smile: [import]uid: 52491 topic_id: 23485 reply_id: 94221[/import]

3

Thanks Peach.

But since the mask is also a rectangular shape, it will not help much for irregular shape image as well? [import]uid: 70056 topic_id: 23485 reply_id: 95681[/import]

4

No :slight_smile: Grab the image.png and circlemask.png files out of CoronaSDK > SampleCode > Graphics > Flashlight and put them in with a main.lua file containing;

[lua]display.setStatusBar( display.HiddenStatusBar )

– Create and position image to be masked
local image = display.newImageRect( “image.png”, 768, 1024 )
image:translate( display.contentCenterX, display.contentCenterY )

– Create mask and apply to image
local mask = graphics.newMask( “circlemask.png” )
image:setMask( mask )

– Touch events on the image will be masked to the mask bounds
– (always rectangular for an image, regardless of the image contents)
image.isHitTestMasked = true

– Transform mask
image.maskScaleX, image.maskScaleY = 2,2

local function testMask()
print (“Hit”)
end
image:addEventListener(“tap”, testMask)[/lua]

You’ll see :slight_smile: [import]uid: 52491 topic_id: 23485 reply_id: 95867[/import]

5

That’s cool. Thanks!

Edit: Got confused with how the black pixel in the bitmap mask works. Kindly ignore. :slight_smile: [import]uid: 70056 topic_id: 23485 reply_id: 95993[/import]

6

No worries, good luck with your project!

Peach :slight_smile: [import]uid: 52491 topic_id: 23485 reply_id: 96025[/import]

7

I don’t understand how is this post is resolved,
the question is how to apply mask to animated sprite using the new sprite API.

let’s say I create image sheet

 local picSheetData = {  
 width = 100,  
 height = 60,  
 numFrames = 8,  
 sheetContentWidth = 200,  
 sheetContentHeight = 240  
 }  
 local picSheet = graphics.newImageSheet("images/pic.png", picSheetData);  
 local picSequence = {  
 {  
 name = "animate",  
 start = 1,  
 count = 4,  
 time = 500,  
 loopDirection = "bounce"  
 }  
 }  
 local pic = display.newSprite(picSheet, picSequence);  
 pic.x = 420;  
 pic.y = 880;  
 pic:setSequence("animate");  
 pic:play();

Falcon777 question was :
How would you guys propose to handle touch event for a sprite that has quite a bit of transparent area if I do not want those transparent region to react to touch?

I don’t how to do that, at which line should I set the masking and how?
What size the mask have to be? So many questions…
Thank you [import]uid: 31508 topic_id: 23485 reply_id: 129223[/import]

8

I don’t understand how is this post is resolved,
the question is how to apply mask to animated sprite using the new sprite API.

let’s say I create image sheet

 local picSheetData = {  
 width = 100,  
 height = 60,  
 numFrames = 8,  
 sheetContentWidth = 200,  
 sheetContentHeight = 240  
 }  
 local picSheet = graphics.newImageSheet("images/pic.png", picSheetData);  
 local picSequence = {  
 {  
 name = "animate",  
 start = 1,  
 count = 4,  
 time = 500,  
 loopDirection = "bounce"  
 }  
 }  
 local pic = display.newSprite(picSheet, picSequence);  
 pic.x = 420;  
 pic.y = 880;  
 pic:setSequence("animate");  
 pic:play();

Falcon777 question was :
How would you guys propose to handle touch event for a sprite that has quite a bit of transparent area if I do not want those transparent region to react to touch?

I don’t how to do that, at which line should I set the masking and how?
What size the mask have to be? So many questions…
Thank you [import]uid: 31508 topic_id: 23485 reply_id: 129223[/import]