[css-pointer-events] proposal: opacity threshold (for easy hitmapping)

Hi everyone,

This is a proposal for a new value to the pointer-events property in both SVG and CSS.

It is seldom that games have overlapping functionality as most games are very custom. Hitmaps is one of the functionalities that almost every game that runs on the open web stack needs to support. It basically describes that the player should be able to click "through" transparent areas of objects. Take an isometric image of a house that is represented as a png with some transparency around the edges. I want the click event to only fire if the user clicks on a pixel that actually includes visible content (the actual house).

With current tools, and if you don't want to draw and manage every pixel using canvas, this is a non-trivial problem. We have to create dynamic hitmaps by writing the image resource into a canvas, reading out the pixel data, saving it and then later use event delegation to map every click to the right object. Therefore, I'm proposing to add syntax that looks similar to the following:

.house {
width: 200px;
height: 200px;
background-image: url(house.png);
pointer-events: opacity(60);
}

This example would say "When hovering or clicking a pixel, check if the computed alpha value is higher than 60 (either based on percentage or 0-255), and only in this case fire the event, otherwise delegate to the element below".

This amazingly simple API addition would make thousands of game developers a lot happier, including Zynga. I realize this might not be trivial to implement at the browser side, but I expect it will still be easier and faster than me doing it in Canvas/JS.

I'm eagerly awaiting your feedback!

Thanks,

Paul
CTO, Zynga Germany