[Webkit-unassigned] [Bug 65538] New: CSS: Native hitmaps (pointer-events: opacity)

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=65538

           Summary: CSS: Native hitmaps (pointer-events: opacity)
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Unspecified
        OS/Version: Unspecified
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: pbakaus at zynga.com
                CC: simon.fraser at apple.com, dino at apple.com


(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.

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.