如何在 Phaser 中截取游戏 div 的屏幕截图

Question

我现在正在使用这段代码，但它returns 是一个空白的透明图像：

$(document).ready(function(){
    $("#t").click(function() {
        html2canvas(document.querySelector("#bracelet_maker"), 
         { onrendered: function(canvas){ 
            src = canvas.toDataURL();
            window.open(src); } });
    });
});

如果我使用 game.canvas.toDataUrl(); 它 returns 黑色图像。

游戏在#bracelet_maker div

中是这样开始的

var game = new Phaser.Game(width,height,Phaser.AUTO,"bracelte_canvas",{
    preload:preload,
    create:create,
    update:update  });

Answer 1

使用 Phaser.AUTO 将允许使用 Phaser.WEBGL 或 Phaser.CANVAS，具体取决于您的浏览器支持什么。

如果您在创建 new Phaser.Game 时切换到 Phaser.CANVAS，您应该可以使用 canvas.

例如，在 Phaser 中通过绑定 S 键：

function create() {
    // ...
    var screenshotKey = game.input.keyboard.addKey(Phaser.Keyboard.S);
    screenshotKey.onDown.add(function () { window.open(game.canvas.toDataURL()); 
}

还有preserveDrawingBuffer which should allow you capture from WebGL as well, but it needs to be set early on in the process.

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

如何在 Phaser 中截取游戏 div 的屏幕截图

How to take screenshot of game div in phaser

javascript

screenshot

phaser-framework