[solved] Sprite-picking, ignore transparent areas?

[aWeirdo]

Hi all,
I'm working with some sprites which are very close together and have over-lapping transparent areas,

i need to be able to pick each sprite, but due to the overlapping (which in this case can't be avoided), it sometimes picks the wrong sprite.

I have been trying to look around for a solution,
but so far came up empty handed,

Does anyone know of a way to detect if you hit one of these transparent areas?

cheers.

[aWeirdo]

This is what i've been able to track down so far, getting an alpha value from canvas image, http://jsfiddle.net/cwolves/GaEeG/2/
I suspect it should be possible to apply it to a texture's data aswell..

[Gijs]

Hi, you can do this with BABYLON.WeirdSpriteManager:

https://www.babylonjs-playground.com/#2A9U5V#1

The manager has the function pickSpritePixel, which takes a child sprite as argument, and returns the pixel under the pointer. It does this by putting a plane mesh at the sprite position with the right rotation and scale, then pick that mesh to get the image (x, y) coordinates, and then get the pixel from the imageData like in your jsfiddle. It uses its own copy of the sprite image.

Edit: Here is the typescript source:

WeirdSpriteManager.ts

Edit 2:

With the mesh not pickable, and Math.round instead of Math.floor in the pickSpritePixel function:

https://www.babylonjs-playground.com/#2A9U5V#2

WeirdSpriteManager.ts

[aWeirdo]

I love it  
thank you Gijs