Working with Phaser?

[mustardseed312]

Now that Ejecta supports AppleTV, I'm really interested in trying to get Phaser working with it. I've done a ton of searching and found people saying they use Phaser with Ejecta, but I can't find any solid example showing how to use it. I keep getting an error when Phaser tries to create it's own canvas element instead of using Ejecta's canvas. Does anyone have an example? Thanks!

[phoboslab]

Judging from the phaser documentation the new Game() constructor only lets you specify a parent element for the canvas, but not the canvas itself. It seems Phaser will always create its own canvas.

Please open an issue over in the phaser repo: https://github.com/photonstorm/phaser

In the meantime, you can hack this, by replacing line 684 in Game.js with:

this.canvas = document.getElementById('canvas');

[amadeus]

The preferred way to do this would be to subclass Game, like so:

var MyGame = function(){
    Phaser.Game.apply(this, arguments);
};

MyGame.prototype = Object.create(Phaser.Game.prototype);
MyGame.prototype.setUpRenderer =  function(){
    // ======================= Fix this line ==================================
    this.canvas = Phaser.Canvas.create(this, this.width, this.height, this.config['canvasID'], true);

    if (this.config['canvasStyle'])
    {
        this.canvas.style = this.config['canvasStyle'];
    }
    else
    {
        this.canvas.style['-webkit-full-screen'] = 'width: 100%; height: 100%';
    }

    if (this.renderType === Phaser.HEADLESS || this.renderType === Phaser.CANVAS || (this.renderType === Phaser.AUTO && !this.device.webGL))
    {
        if (this.device.canvas)
            {
                //  They requested Canvas and their browser supports it
                this.renderType = Phaser.CANVAS;

                this.renderer = new PIXI.CanvasRenderer(this);

                this.context = this.renderer.context;
            }
            else
                {
                    throw new Error('Phaser.Game - Cannot create Canvas or WebGL context, aborting.');
                }
    }
    else
    {
        //  They requested WebGL and their browser supports it
        this.renderType = Phaser.WEBGL;

        this.renderer = new PIXI.WebGLRenderer(this);

        this.context = null;

        this.canvas.addEventListener('webglcontextlost', this.contextLost.bind(this), false);
        this.canvas.addEventListener('webglcontextrestored', this.contextRestored.bind(this), false);
    }

    if (this.device.cocoonJS)
    {
        this.canvas.screencanvas = (this.renderType === Phaser.CANVAS) ? true : false;
    }

    if (this.renderType !== Phaser.HEADLESS)
    {
        this.stage.smoothed = this.antialias;

        Phaser.Canvas.addToDOM(this.canvas, this.parent, false);
        Phaser.Canvas.setTouchAction(this.canvas);
    }
};

This way, you can drop in new versions of Phaser and you don't have to remember to change that line. Of course that means you will be using new MyGame instead of new Phaser.Game

[walkandre]

It seems that ejecta support is already included in phaser: https://github.com/photonstorm/phaser/pull/280

[amadeus]

@walkandre You're right, I herped a derp there.

You just have to pass in an object to the Phaser.Game instantiation with a canvasID:'canvas'

[phoboslab]

If I understand the Phaser Canvas.js correctly, the Canvas.create function, will always create a new canvas element. The id is just assigned to that newly created canvas. Kinda weird.

So I'm not sure how to understand https://github.com/photonstorm/phaser/pull/280 - passing in a canvasID wont help for Ejecta, I think.

[amadeus]

I really need to NOT write github comments while multitasking and after I just woke up...

I guess I was right after all.

[TimMensch]

For what it's worth (and for future people who search and find this thread), the relevant code is now:

        if (this.config['canvas'])
        {
            this.canvas = this.config['canvas'];
        }
        else
        {
            this.canvas = Phaser.Canvas.create(this, this.width, this.height, this.config['canvasID'], true);
}

So it doesn't call Canvas.create() if there's a canvas, at least in the current version of Phaser.

[thefixx]

Is there a way to get the latest phaser (v2.6.1) working with ejecta (2.0)? After including the source files in the index.js all I get is a black screen (no errors).