Phaser to .png

[hbkmad]

Hello,

 

I tried to make a screenshot of the game using game.canvas.toDataURL("image/png"); but the screenshot it returns me is a black one. Is there a property that I have to set before making the screenshot or something like that?

 

Thanks.

[drhayes]

Are you using a WebGL renderer? Check out this thread.

 

You might also be capturing at the wrong part of the render cycle. Check out this thread.

[hbkmad]

Thank you, the first topic helped me, I guess I'm using webGL.

 

But now I have the data in Uint8Array how can I convert it to .png?

Or is it better alternative to change my render to Canvas, how could I do that?

 

Thank you again!

[drhayes]

AFAIK, if you have the pixels you can draw them to an offscreen canvas and toDataURL that one. Maybe I'm off-base.

 

It depends... if you're just taking screenshots for, like, a review of your game then, sure, switch the renderer. The renderer is the third argument in your Phaser.Game constructor, e.g. "new Phaser.Game(800, 600, Phaser.CANVAS);" instead of "new Phaser.Game(800, 600, Phaser.AUTO);".

 

Of course, those screenshots won't be able to do any WebGL stuff that you might be doing, like shaders and filters and stuff. But maybe that would work for you?

[hbkmad]

My idea is to have a stage where it would be like a "Wardrobe" where the player would choose different clothes and etc. on his character and when he's ready the screenshot would be send to a server where it will be used later for an avatar of this account.

 

How do you think it will be best way to send the information about the screenshot to the server via AJAX ? I mean what type of data should I send and then convert it on Server- side and save it there. Can I send Uint8Array ?

 

Thank you very much once again.

[drhayes]

You sure can send the UInt8Array. There's an overload of XMLHttpRequest#send that sends ArrayBufferViews... which is an alias-sort-of of UInt8Arrays.

[hbkmad]

Thank you very much for your help !

[ForgeableSum]

For game.canvas.toDataURL in webgl, try setting preserveDrawingBuffer to true on your Phaser.Game. 

[Brian Jordan]

Worth noting—you must set preserveDrawingBuffer early on in the initialization sequence, it is now a game configuration parameter.

 

Source: https://github.com/photonstorm/phaser/issues/987