Ignoring Transparent Image Corners

Question

Say you have a tile image that you use to create an isometric map. Each tile is selectable. The problem is that the transparent corners around the tile image overlap the tiles behind them. I want the transparent area of ​​the image to be ignored so that other tiles can be more precisely selected.

Here is an example of such a tile. The outline is made red, so it is easy to see the transparent area.

We use a browser that supports pointer-event . I was wondering if there is a way to include this in the corner areas, or if I need to find a way for the program to recognize transparent pixels on its own.

These tile images are not constructed using canvas. CSS is simple:

 div.content { position: absolute; top: 105px; width: 10px; height: 50%; } div.content div.tile { width:96px; position: absolute; height:102px; line-height:96px; background-image:url('images/tiles.png'); } div.content div.tile:hover { opacity:0.8; } 

Answer 1

As far as I know, pointer-event only applies to SVG elements.

What would i do

• create a canvas element for each tile having a tile size
• draw tiles in every canvas
• get imageData from each canvas context and save it somewhere
• Mousedown events provide coordinates, get the pixel color from this imagesData file, and check its alpha value.

change

Rethinking this, there may be complications with events, because the tiles in the foreground are likely to cover the tiles behind them.
You should probably let the mousedown events bubble into the container element and manually select the tiles that “hit” with the click of a button and perform a “pixel check” on all of these.

Answer 2

I would try to do something like the one described in this question to get the color of the pixel that is under the mouse. if you have this, you can say that when you click to prevent it from selecting a tile, if the color of this pixel is equal to the color of your background (looks white).

Answer 3

You can:

• use HTML images: Images of HTML images . This is an easy option. Kon, however, you need to create a map of all the fragments yourself.

• I know that some people created an isometric game engine that used the Canvas object to not draw things, but simply calculate whether the mouse clicked on a transparent tile to delegate the onclick event to the next fragment. An explanation of the project, including their delegation of mouse events, can be found here .

Answer 4

I would suggest:

• create canvas sized tiles

• on the mouse event (hover, click, whatever) you will draw the fragment that caused the event for this canvas

• get alpha value and associate the counter event with reset canvas

3.1. if alpha-zero delegates the event to the next geometric plate (top right, left-top, right-bottom or left-bottom) and performs actions there

3.2. if alpha is greater than zero, follow the tile actions that triggered the event

it will only draw onto the canvas, if necessary, and thereby save computation time