Games CG – 2020 edition

The Games Community Group was created end of 2011, following a W3C workshop on Web games organized in Warsaw, Poland. The group investigating game needs for a few years, the Web platform evolved to address most of these needs, and the group progressively became dormant, patiently waiting for a wake up signal…

A second W3C Workshop on Web Games, organized in 2019 in Seattle, USA, provided the wake up signal and the group is now back to life, exploring new (and remaining!) pain points for Web game developers, and reviewing Web technology proposals that could impact games.

The Games Community Group met (online) in October 2020 during W3C TPAC event (see Summary of TPAC Web Games CG email in the archives of the group’s mailing-list).

Are you willing to improve the quality of open Web standards that developers rely on to create games? Please come and join!

The group uses the HTML5 Web Gaming Standards discussion forum as well as its public public-games@w3.org mailing-list (with public archives) for discussions. Calls are organized once every two months or so, check the mailing-list for announcements!

deviceNormalPixelRatio: proposal for zoom-independent devicePixelRatio for HD Retina games

Reposted from /community/respimg per Marcos Caceres’ request.

This is a proposal for addition of a zoom-independent version of window.devicePixelRatio to HTML5.

The issue

Before Firefox 18 and Chrome 25, to make a 3D (WebGL) game drawn in HD, we could set the scale in <meta name="viewport"> to 1 and multiply the size of 2D things (HUD elements, menus) by window.devicePixelRatio.

However, since these versions of the browsers, devicePixelRatio started to take browser zoom level into account.

While the change works perfectly for loading of high-resolution versions of <img> images and background-images, it has been impossible to draw HUD elements in HD 3D games with correct sizes since that.

Glossary of this proposal

DPR – zoom-dependent window.devicePixelRatio.
Old DPR – devicePixelRatio behavior before Firefox 18 and Chrome 25.
New DPR – devicePixelRatio behavior since Firefox 18 and Chrome 25.

Issue details

With the old DPR, when <meta name="viewport"> scale is 1, we could simply multiply the size of HUD elements by DPR to get resolution-independent size of the element (so that it doesn’t look too small too dense displays):

//drawing a 48dip cross at (16dip;16dip)
ctx.fillRect(32 * devicePixelRatio, 16 * devicePixelRatio, 16 * devicePixelRatio, 48 * devicePixelRatio);
ctx.fillRect(16 * devicePixelRatio, 32 * devicePixelRatio, 48 * devicePixelRatio, 16 * devicePixelRatio);

On screen, the cross would have the following size with the old behavior:

This is fine, on high-DPI displays 384×384 looks like 192×192 on low-DPI displays, so it’s correctly zoomed by 400% (48 * 4 = 192).

However, with the new DPI, DPR is multiplied by the zoom level too, so if we multiply the size by DPR, we get the element scaled twice (in the script by DPR and in the browser by zoom):

On high-DPI displays, 1536×1536 looks like 768×768 on low-DPI displays. 768×768 is 1600% larger than 48×48, while we only wanted to zoom by 400%.

So, as I said before, we get the element zoomed by zoomLevel^2 instead of zoomLevel.et the element zoomed by zoomLevel^2 instead of zoomLevel.

Use case example

If you open WebQuake on a high-DPI display, you can see that the game is rendered in HD, but the HUD and the menus appear too small.

This is because I set <meta viewport> scale to 1. If I didn’t do this, the HUD size would be correct, but the game would be blurry.

What exactly I want is to render the game in HD while having the HUD drawn at correct size.

The solution

The solution is very simple.

A constant value which behaves the same way as the old DPR – doesn’t take zoom level into account.

Let it be named window.deviceNormalPixelRatio or navigator.deviceNormalPixelRatio.

Another important thing is to make it viewport scale-independent. It would have no point then, since it is to be used when viewport scale is forced to 1 (for manual scaling of selected elements).

It must be accessible from CSS queries too so we won’t have to use JavaScript to resize every element.

For HD image loading, the old devicePixelRatio would be used, and for manual <meta name="viewport"> correction, deviceNormalPixelRatio would be.

Another possible use

Along with DPI scaling, deviceNormalPixelRatio can be used to retrieve zoom level in a cross-browser way (there’s no way to retrieve zoom level yet!):

var zoom = devicePixelRatio / deviceNormalPixelRatio;