Navigation

Part 3 - Enable Support

Published on 25th November 2016

<div class="warning-box"> <strong class="title">Phaser CE</strong> All code shown here requires <a href="https://github.com/photonstorm/phaser/tree/master/v2-community">Phaser CE</a>, version 2.7.0 or above. </div>

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.