Export a hi-res image from PhaserJS-CodePudding

I'm creating graphics with PhaserJS and I need to export them either as a hi-res image or even better as a vector based one.

Example code:

var config = {
    width: 800,
    height: 600,
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    scene: {
        create: create
    }
};

var game = new Phaser.Game(config);

function create ()
{
    var graphics = this.add.graphics();

    graphics.fillGradientStyle(0xff0000, 0xff0000, 0x0000ff, 0x0000ff, 1);

    graphics.fillCircle(300, 300, 200);

    graphics.fillGradientStyle(0xff0000, 0xff0000, 0xffff00, 0xffff00, 1);

    graphics.fillCircle(500, 300, 140);
}

How can this be done? Any ideas are welcome.

CodePudding user response：

Well SVG is not really possible (out-of-the-box), since phaser is based on HTML5 Canvas (as "Orkhan Alikhanov" mentionin the comments).

To get a image from Phaser you can simply do this:

// get the phaser-canvas
let canvas = document.querySelector('canvas');
let dataURL = canvas.toDataURL('image/png');

// to start the download, you could ....
let downloadHelper = document.createElement('a');
downloadHelper.setAttribute('download', 'dowload.png');
downloadHelper.setAttribute('href', dataURL);
downloadHelper.click();

For high-res, just make the phaser application( the width and height of the game config) really big (the final resolution you want).

Sidenote: If you want to save only a part of the canvas, checkout this post & answer (https://stackoverflow.com/a/69358678/1679286), it shows how to save parts of the phaser-canvas as an png file (it uses the file saving library https://github.com/eligrey/FileSaver.js).

That said, if you would only be using html5 canvas, you could use this libray http://gliffy.github.io/canvas2svg/ to create svg. This was mentioned in this post https://stackoverflow.com/a/21069008/1679286 and seems to be a wrapper for the html5 canvas, BUT this won't work with phaser. Update: I might work, with if you are using Phaser.CANVAS. You could inject the context/canvas similar as in this example, into the Phaser config

Demo to create image from WebGL:
(Link to the documentation)

document.body.style = 'margin:0;';

    var config = {
        type: Phaser.WEBGL,
        width: 536,
        height: 183,
        // this property should/can be set
        preserveDrawingBuffer: true,
        physics: {
            default: 'arcade',
            arcade: {            
                gravity:{ y: 100 },
                debug: true
            }
        },
        scene: {
            create
        },
        banner: false
    }; 

    function create () {
        var graphics = this.add.graphics();

        graphics.fillGradientStyle(0xff0000, 0xff0000, 0x0000ff, 0x0000ff, 1);
        graphics.fillCircle(300, 300, 200);
        graphics.fillGradientStyle(0xff0000, 0xff0000, 0xffff00, 0xffff00, 1);
        graphics.fillCircle(500, 300, 140);
        
        this.input.on('pointerdown', _ => {
        let canvas = document.querySelector('canvas');
    let dataURL = canvas.toDataURL('image/png');

    // to start the download, you could ....
    let downloadHelper = document.querySelector('#link');
         downloadHelper.setAttribute('download', 'dowload.png');
         downloadHelper.setAttribute('href', dataURL);
         
        });
    }

    new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
Right Click and select "Save Link as ..."<br>
<a id="link">DOWNLOAD </a> <br/>