Help on detecting tap on texture sprite

Hi, I have a problem trying to detect tap on specific location of a sprite instead of the entire bounding box.

So let’s say I have the attached image as sprite, how do I only detect tap on the cyan color area instead of entire sprite by using
sprite->boundingBox().containsPoint(tap);

Thank you in advance.
What’s the engine version?

Cocos2dx 2.2.2


spriteHelp.png (1.9 KB)

Could you make it 2 sprites?

make the red square, then the cyan shape, add the cyan shape as a child or the red square. Then you could have each answering to its own set of listeners.

It still didn’t work in making 2 sprites on top of each other. Because when you touch the area between the cyan and red colour background(Around the yellow stroke/edges) it will still detect as it is tapped on the cyan polygon, instead of the red area. Is there a way to map out the cyan texture?

What about some math to decide if they touched inside the bounding box of the cyan shape but not on the cyan shape?

That’s insane. I’m not very good at math, is there another way other than this? Like mapping out the texture of the sprite and leaving out the transparent texture?

I’m not sure how you mean insane, but I actually do this for a few sprites that I have that are skewed to create depth.

Have a look at this: http://www.cocos2d-x.org/reference/native-cpp/V3.0/d2/d06/classcocos2d_1_1_clipping_node.html#details

@slackmoehrle Thank you so much! Appreciated. That seems like legit way to do it. Let me look into it on how to use clipping node, as I am new to game programming. With no one to teach me and learning it on my own. I’ll get back if I face any problem. Hope you don’t mind though. Cheers! :wink:

Absolutely.

Hi,

I would like to know how this is done. Can you please post your solution?

Thanks!

@jonah1nine

You might want to try to take a look at the cpp tests that’s included with cocos2d-x, there are tons and tons of example there, just tweak it to suit your needs. It’s a treasure. :wink:

Does ClippingNode really help the pixel-perfect touch?

Because ClippingNode has a rectangle bouncing box as Sprite has and doesn’t recognize its clipping shape, I don’t think you can detect if the touch location is inside the cyan shape…

I agree that we should eventually deal with some math, but can’t figure out why that’s related with
ClippingNode…

You need to read the pixel value through an OpenGL call and compare that value with your cyan color, or you create a bitmask for your sprite and test the index against the alpha value(if you want to test against a shape).

Alternatively you can create a polygon path/closed curve and test if your touch is inside that path.

You can study this discussion/code How could i get the alpha value of a pixel in a texture?