Transparent image areas and touch events

Solar2D General Questions/Discussion
#1

Hi guys, I’m drawing a few blanks here and was wondering if anybody had a innovative way around this seemingly simple problem.

I’m making a coloring book app which uses several parts of an image packed onto a graphics sheet.  If you imagine a dog for example, the head, body, each leg, and tale etc. would all be separate images but within the same overall image size. So imagine a massive transparent area with just a leg in one part of the whole area.  To build the whole image I just call a loop that plonks each layer on top of the next and voila I have one whole dog.

I then add a touch listener to each separate part so I can change the fill color when it is touched.  However the issue is, the transparent areas around the boundary of each individual image are also detecting the touch so any overlaps causes the top most layer to grab the event.

I tried masking each image but I then I got the opposite problem where the touch doesn’t fire on the transparent part but it also stops it firing on the non transparent part on lower layers.

The main objective is to solve the problem as simply as possible.  I am trying to avoid having to have a configuration for the layer order of the images or any other configuration specific stuff going on as we have many images that we will be using.  

The main problem to solve is how not to detect touches on transparent parts of images.

Has anyone come across this before?  Did you get around it somehow? As always any advice is much appreciated :slight_smile:

#2

That’s quite a stupid solution, but you can use physics and add the body for each image and customize the body shape.  :lol:

#3

Actually it’s another solution I started to look at but I dismissed the idea for some reason?? Damned if I can remember what that was I’ll have to re-visit it. Already have the shapes mapped out in physics editor too. Sometimes it’s hard to see the forest for the trees :smiley:

#4

You need to have a mask for each image.  The mask will make the outside not touchable.  Look up graphics.newMask in the  help.

#5

There are programs and systems which do this, Spline allows it I think, and there are programs which automatically generate masks.  

The simplest solution would work but it’s an approximation. Rather than having the whole thing as a transparency you could reduce it to the actual drawing rectangle and an x,y offset from the origin. Corona isn’t capable of doing this automatically but Java or Python/PIL could do it easily enough and generate a lua table with the data.

The downside of this approach is it is an approximation, as the touch areas will still all be rectangles. There would be collision issues if you had a leg at 45 degrees, say.

You don’t actually have to have a mask, you could use the sprites you have and put a test in the tap event viz. if the tap is in the area for this specific sprite frame, then act on it, if not let it pass through to the next layer down. This would mean (again) that you would have to have some sort of structure approximately delineating the graphic, but you could (say) test it against more than one square, or you could have another test (minimum distance from bone line ?) which might be more appropriate.

#6

That’s quite a stupid solution, but you can use physics and add the body for each image and customize the body shape.  :lol:

#7

Actually it’s another solution I started to look at but I dismissed the idea for some reason?? Damned if I can remember what that was I’ll have to re-visit it. Already have the shapes mapped out in physics editor too. Sometimes it’s hard to see the forest for the trees :smiley:

#8

You need to have a mask for each image.  The mask will make the outside not touchable.  Look up graphics.newMask in the  help.

#9

There are programs and systems which do this, Spline allows it I think, and there are programs which automatically generate masks.  

The simplest solution would work but it’s an approximation. Rather than having the whole thing as a transparency you could reduce it to the actual drawing rectangle and an x,y offset from the origin. Corona isn’t capable of doing this automatically but Java or Python/PIL could do it easily enough and generate a lua table with the data.

The downside of this approach is it is an approximation, as the touch areas will still all be rectangles. There would be collision issues if you had a leg at 45 degrees, say.

You don’t actually have to have a mask, you could use the sprites you have and put a test in the tap event viz. if the tap is in the area for this specific sprite frame, then act on it, if not let it pass through to the next layer down. This would mean (again) that you would have to have some sort of structure approximately delineating the graphic, but you could (say) test it against more than one square, or you could have another test (minimum distance from bone line ?) which might be more appropriate.