Navigation

WebGL Tilemap Renderer Beta 2

Published on 22nd July 2016

image

It's been one heck of a week in the Phaser HQ, and killer new features are flying off the production line at quite a rate. Here is what's new:

WebGL Tilemap Renderer - Beta 2 Ready

At the start of the week we released Phaser 2.7.0 Beta 1. This had the brand new WebGL Tilemap renderer built into it. Pete worked really hard to ensure the shader was powerful, and stupidly fast, and his hard work has paid off.

I took his work and then spent a long time sorting out the implementation, so it was as friendly as possible, and also making some much needed tweaks along the way. And as a result Beta 2 is now ready to download and test.

You can download pre-built versions of Phaser 2.7.0 from the GitHub dev branch. This is a drop-in replacement for any game using Tilemaps under WebGL. Note that 2.7.0 is an upgraded version of Phaser 2.6.1, so if your game doesn't yet run under 2.6.1 you'll need to remedy that, before you can test out the new tilemaps.

Download Phaser 2.7.0 Beta 2

Once you've had a chance to test it, please report your findings in this Phaser Forum thread, or open a GitHub Issue. We're especially interested to know what performance you get on very low-end GPUs or mobile hardware. But it's safe to say we're seeing silky smooth 60fps rendering on a vast range of desktops now.

New Tilemap Features

Aside from using WebGL shaders for the tilemap, what else can it now do?

You can now set the display dimensions of a Tilemap Layer, and you can use the x and y properties to place the map anywhere you like on the screen. This means you can create a smaller 'view' into a tilemap, and yet it will still respond to collision events like normal. The following example demonstates this:

image

In the example above you can run and jump around the map, dropping happily from the view at the top into the view at the bottom, and bouncing between them, even though they're offset. What you're seeing here are two views into the exact same Tilemap Layer, with each view under your control in terms of size and position.

This allows you to do things like dual play fields:

image

Being a WebGL shader it smartly batches draw calls, even when using a map with tiles from split tilesets. So it's capable of rendering the entire map in a single draw call per tileset, no matter how interleaved those tiles are. This means you can have really big playfields, with no performance hit any more. Yay!

The new renderer of course supports all of the various flipped tile options you can set in Tiled. The following example uses just one tileset, but with various states of mirroring and flipping on the tiles. It also supports the new Camera Shake too - click the example to see :)

image

What's Next?

Please help test out Beta 2. It should be a drop-in replacement for pretty much all games, although you will need to use layer.x and layer.y to position a layer now. See the examples above for code.

There are a few more things I'm going to add before this hits release. First is the ability to show the debug tiles in WebGL mode (currently it only works in Canvas). And secondly I want to add the the ability to scroll a tilemap fully independant of the camera. For now, have a play and enjoy the speed :)