使用phaser.js绘制Base64 png数据

Question

我正在与Phaser制作游戏，我想从一个场景中截取屏幕截图并使用game.canvas.toDataURL();将其绘制到另一个场景。

到目前为止，在我尝试的第一个场景中：

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

然后在第二个：

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;

控制台中没有错误，但精灵完全是黑色的。那么......问题是什么？

Answer 1

您有两种选择。

第一种是在创建游戏时强制使用Canvas渲染器。例如：

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

从屏幕截图中可以看出，您目前正在使用Phaser.AUTO或Phaser.WEBGL，它允许使用WebGL渲染器。

第二个选项是在创建游戏时设置preserveDrawingBuffer。

据说这可行：

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

但是在TypeScript中（可能是基于TS吐出的vanilla JavaScript）所以应该这样：

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