CODEWITHSUNDEEP
javascriptbase64phaser-framework
Sky Walker
Sky Walker

Reputation: 1018

Draw Base64 png data with phaser.js

I'm making a game with Phaser and I want to take a screenshot from one scene and draw it to another by using game.canvas.toDataURL();.

So far, in the first scene I've tried:

GAME.cc = game.canvas.toDataURL();

and then in the second one:

var img = new Image();
img.onload = function() {
    var base = new PIXI.BaseTexture(this),
                texture = new PIXI.Texture(base);

    var sp = game.add.sprite(0, 0);
    sp.setTexture(texture);
};

img.src = GAME.cc;

There's no error in the console, but the sprite is completely black. So ... what's the problem?

demo

Upvotes: 3

Views: 1905

Answers (1)

James Skemp
James Skemp

Reputation: 8581

You have two options.

The first is to force the Canvas renderer when you create your game. For example:

var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', {
    preload: preload, create: create, update: update
});

As evident in your screenshot, you're currently using either Phaser.AUTO or Phaser.WEBGL, which is allowing the WebGL renderer.

The second option is to set preserveDrawingBuffer when you create your game.

Supposedly this will work:

var game = new Phaser.Game({
    width:800, height:600, renderType:Phaser.AUTO, parent:'', preserveDrawingBuffer:true
});

But in TypeScript (and probably vanilla JavaScript based upon what TS spits out) so should this:

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', {
    preload: preload, create: create, update: update
});
game.preserveDrawingBuffer = true;

Upvotes: 1

Related Questions