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

Hi Paul,

	I can see this is an important use case.

	However, the proposal as described is likely to be a big
problem for browsers such as WebKit. The basic issue is where image
decoding happens.

	For example, WebKit has a bunch of ports to different back
ends. On Mac/iThing etc. the images such as JPG/PNG are kept compressed
in the in-memory model and the decompress and paint is delegated to
the underlying graphics library which could optionally be H/W
accelerated. So in essence the hit-testing code never actually
sees the decoded PNG image - hit testing would normally be done
on the known bounds of the object. So architecture-wise this would
be a fairly non-trivial thing to implement at least for WebKit.

	It would be good to hash out some alternate way this
could be done to make the use case easier to handle. As it stands
you would need to decompress all the PNGs just to perform the hit
testing which will blow out memory usage and complicate things
quite a bit.

	If you used SVG for the hit testing, the authoring tool
could trace a path around the PNG and place a transparent path
object over the PNG to be the hit-testing target.

Alex

--Original Message--:
>
>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
>
>
>

Received on Wednesday, 20 April 2011 00:59:15 UTC