W3C home > Mailing lists > Public > www-style@w3.org > April 2011

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

From: Paul Bakaus <pbakaus@zynga.com>
Date: Wed, 20 Apr 2011 02:54:26 -0700
To: Simon Fraser <simon.fraser@apple.com>
CC: www-svg <www-svg@w3.org>, "www-style@w3.org" <www-style@w3.org>, Doug Schepers <schepers@w3.org>, Dean Jackson <dino@apple.com>
Message-ID: <C9D4795D.66D2%pbakaus@zynga.com>
Hey Simon,

Von: Simon Fraser <simon.fraser@apple.com<mailto:simon.fraser@apple.com>>
Datum: Tue, 19 Apr 2011 10:40:38 -0700
An: Paul Bakaus <pbakaus@zynga.com<mailto:pbakaus@zynga.com>>
Cc: www-svg <www-svg@w3.org<mailto:www-svg@w3.org>>, "www-style@w3.org<mailto:www-style@w3.org>" <www-style@w3.org<mailto:www-style@w3.org>>, Doug Schepers <schepers@w3.org<mailto:schepers@w3.org>>, Dean Jackson <dino@apple.com<mailto:dino@apple.com>>
Betreff: Re: [css-pointer-events] proposal: opacity threshold (for easy hitmapping)


On Apr 19, 2011, at 2:30 AM, Paul Bakaus wrote:

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!

I think this needs to be a new property, since you may want to specify > 0 opacity for the existing pointer-event values, like 'visiblePainted', 'painted' etc. Or, it's a value stuck on the end:

pointer-events: painted 60%;
or
pointer-events visibleFill 0.6;

This sounds good to me. I was thinking prop(val) like transforms, but I realized they're functions, while what we are discussing aren't. A second value stuck at the end sounds good. I also realize it is not a cheap addition. If we can get this done somehow, it would be a huge win to web developers though.


Note that WebKit doesn't implement the "painted" values in HTML yet, this is not a cheap addition.

Simon
Received on Wednesday, 20 April 2011 09:54:57 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:39 GMT