Action script 3 - is it possible to trigger a click event only when the mouse clicks on a part of the image?

Question

I have a problem and I have a potential solution. But I would like to confirm if there is a simple and easy way to solve my problem.

Application type:

Isometric game

Description of the problem:

I load images into my flash application and bind mouse events to them.

The images I upload are images such as vehicles, trees, buildings, etc., and they are all transparent.

Example: Red ball asset (please ignore the yellow background that I used to describe the problem)

If I click on the actual area of ​​the image (colored red) then everything works fine

I don’t want to start mouseevent when I click on the blank part of the image (or the transparent area that I showed in yellow)

There is one way that I know when creating masks in flash. I do not want to do this if this is not the final version, because I load graphic resources instead of flash assets, t want to create a new mask resource for all assets

There is another method that I am going to accept using the getPixel Bitmap method. What is discussed here .

But there is another problem with this method.

I could ignore the click event when I click on the empty part of the asset, but if there is another object for the image in the same place, then I need to handle the click event for the occluded image.

Well, thinking about solving this problem, I move on to getObjectsUnderPoint , where I can scan closed assets

Answer 1

One interesting solution is to use Sprite objects with individual opaque pixels burned onto them.

Suppose this is your Loader "complete" handler:

 private function loaderCompleteHandler(event:Event):void { // Loader is not our child, we use a Sprite instead (below). var loader:Loader = Loader(event.target); var sprite:Sprite = new Sprite(); addChild(sprite); var w:Number = loader.content.width; var h:Number = loader.content.height; // Use transparent bitmap. var bitmapData:BitmapData = new BitmapData(w, h, true, 0); bitmapData.draw(loader.content); // Now burn the image onto the Sprite object, ignoring // the transparent pixels. for (var xPos:int = 0; xPos < w; xPos++) { for (var yPos:int = 0; yPos < h; yPos++) { var pixel32:uint = bitmapData.getPixel32(xPos, yPos); var alpha:int = pixel32 >>> 24; if (alpha != 0) { sprite.graphics.beginFill(pixel32 & 0xFFFFFF, alpha / 0xFF); sprite.graphics.drawRect(xPos, yPos, 1, 1); sprite.graphics.endFill(); } } } } 

Essentially, you want “empty” pixels to not be clickable, and fully transparent pixels are not at all the same. With this solution, you get empty pixels.

The only problem is that it can be slow. Take a picture.

Answer 2

Well, what you proposed as a solution is 100% valid. Just move the logic to determine which game object is clicked outside of that object.

• Listen to the MOUSE_DOWN/MOUSE_UP in the container that contains your game objects.
• Catch an event
• Check if the game object that is the object of this event is transparent with BitmapData.getPixel32
• If getObjectsUnderPoint used to find out all other game objects at this point
• Find in the loop the first object that is currently not transparent

Now you got the actual object that hit.