Phaser CE Advanced Rendering Tutorial

To enable multi-texture support you first have to tell Phaser to use it when it boots. This has the effect of swapping to a new set of WebGL shaders that we wrote specifically for this.

There are two ways to do this:

1) The RendererType Constant

When you create a new Phaser game you have to specify the type of renderer to use, i.e:

var game = new Phaser.Game(800, 600, Phaser.AUTO)

Here it's using the AUTO renderer, which means it'll check for WebGL support, and if found, use that. By default multi-texture support is disabled. To enable it you can use the new renderer type WEBGL_MULTI:

var game = new Phaser.Game(800, 600, Phaser.WEBGL_MULTI)

Using this will still fall back to Canvas if WebGL isn't supported.

Using Phaser.WEBGL, or Phaser.AUTO will use the old single-texture WebGL renderer. This may be preferable in some cases, which is why we left it in there. For example games where you know all your assets fit into a single draw call will benefit from the older system.

2) Enable it in a Game Configuration Object

You can also pass a Game Configuration Object to the Phaser constructor. The property multiTexture is a boolean, that controls if multi-texture support is enabled or not:

var config = {
    width: 800,
    height: 600,
    renderer: Phaser.AUTO,
    antialias: true,
    multiTexture: true,
    state: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

Either way you do it, if the browser supports WebGL it'll now be using the new shaders.

← Previous Next →