Bug 65538 – CSS: Native hitmaps (pointer-events: opacity)

• Status: RESOLVED
• Resolution: INVALID
• Component: CSS

[Paul Bakaus]

(Copied from http://lists.w3.org/Archives/Public/www-svg/2011Apr/0050.html)

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.

[Simon Fraser (smfr)]

There was discussion of this at the recent Graphics FX F2F in Seattle. One of the main points was that in some cases just looking at alpha won't work very well; e.g. in the case where the image has a hole in it. This is the classic desktop icon hit testing problem. The right way to solve this would be to allow the author to provide a hit-test mask image.

It was also noted that hit testing based on alpha could be very expensive in some cases (e.g. when you have to do read back the pixels from the GPU).

[Paul Bakaus]

If the image has a whole in it, we most likely want the API to respect it, so there would be no extra handling involved. Meaning, if you'd click on the whole, you'd click the element behind it.

I agree that there is a need for a more generic masking, but I think there are enough generic usecases for the simple alpha API to make it happen. Not even the ones related to games, but simple ones, such as "I want fat rounded corners on my element, but the ability to click behind the transparent edges". It'd be a one liner with this new API.

Re: Expensive: Do you think it is more expensive than me implementing it in a custom way in JS?

[Brent Fulgham]

This should be designed in the relevant CSS WG before requesting an implementation.