It's possible to use portions of a image as a button?

I have an image of diretional buttons wich I want to use to control the hero in the game.

The image is a png file with transparency, with 4 arrow buttons (up, down, left, right).

If I create the image and make an eventlistener for when the image is pressed, can I handle the tap coordinates to discover wich arrow button (i.e. what section of the image) was pressed?

Or I have to separate the image in 4 diferent images (4 arrow buttons), posicionate them correctly and create each eventlistener individually?

If it is actually possible to handle the image as a whole and discover what section was pressed, how to do that?

Help me.

Thanks!

You can use transparent rectangles over the area you want to touch and use a single image under them if you don’t want any effect to visually show it’s being touched.  You can use the .isVisible = false to hide your rectangle and use the .isHitTestable = true attribute to make it respond to touch (normally hidden items don’t respond to touches).  Then you can just add your event listener to each individual touch area and be good to go.

It worked!

Thanks.

You can use transparent rectangles over the area you want to touch and use a single image under them if you don’t want any effect to visually show it’s being touched.  You can use the .isVisible = false to hide your rectangle and use the .isHitTestable = true attribute to make it respond to touch (normally hidden items don’t respond to touches).  Then you can just add your event listener to each individual touch area and be good to go.

It worked!

Thanks.