Utilizing SVG with Phaser may not be straightforward since Phaser relies on HTML5 Canvas (as mentioned by "Orkhan Alikhanov" in the comments).
To extract an image from Phaser, you can follow these steps:
// access the phaser-canvas
let canvas = document.querySelector('canvas');
let dataURL = canvas.toDataURL('image/png');
// initiate the download process
let downloadHelper = document.createElement('a');
downloadHelper.setAttribute('download', 'download.png');
downloadHelper.setAttribute('href', dataURL);
downloadHelper.click();
For high resolution, increase the size of the phaser application (adjust the width and height in the game configuration) to match the desired final resolution.
Note: If you wish to save only a portion of the canvas, refer to this post & answer () which demonstrates how to save sections of the phaser-canvas as a PNG file (using the file-saving library https://github.com/eligrey/FileSaver.js).
However, if you only deal with HTML5 canvas, you could utilize this library to generate SVG. This was referenced in this post and acts as a wrapper for HTML5 canvas, BUT it's incompatible with Phaser. Update: It might function if you are using Phaser.CANVAS. You could inject the context/canvas similarly to this example, into the Phaser config
Check out a demo for creating images from WebGL:
(Link to the documentation)
document.body.style = 'margin:0;';
var config = {
type: Phaser.WEBGL,
width: 536,
height: 183,
// ensure this property is set correctly
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');
// begin downloading by triggering the event ....
let downloadHelper = document.querySelector('#link');
downloadHelper.setAttribute('download', 'download.png');
downloadHelper.setAttribute('href', dataURL);
});
}
new Phaser.Game(config);
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea9a828b998f98aad9c4dfdfc4d8">[email protected]</a>/dist/phaser.js"></script>
Right Click and select "Save Link as ..."<br>
<a id="link">DOWNLOAD </a> <br/>