Creating a picture of entire game world

[ForgeableSum]

var bmd = game.add.bitmapData(150, 150);bmd.copy(game.canvas,0,0,game.width,game.height,0,0,150,150); var miniMap = bmd.addToWorld(300,300);

I'm expecting to see a 150 x 150 copy of the game world (or at least a small portion of it) show up at 300x, 300y but nothing.  Works fine if I give it a sprite (instead of game.canvas) already added to the world. 

 

I just want to take a picture of the entire game canvas, scaled it down and put it into the game world but nothing seems to work. any ideas?

[lukaMis]

Have you tried using game.world instead game.canvas?

[MichaelD]

you can try to take an image of the canvas and then pass it as an image inside phaser

var canvas = document.getElementById('myCanvas');var dataURL = canvas.toDataURL();this.game.cache.addImage('key',null,dataURL);

[ForgeableSum]

 

you can try to take an image of the canvas and then pass it as an image inside phaser

var canvas = document.getElementById('myCanvas');var dataURL = canvas.toDataURL();this.game.cache.addImage('key',null,dataURL);

This code doesn't work as-is. Don't you need to specify the dataURL as well as image data itself? like so:

game.cache.addImage('gameCanvas',dataURL,imageData);

Anyway, I've tried both and doesn't work. I'm using webgl mode so I can't get the image data using:

var test = game.canvasvar ctx=test.getContext("2d");var imageData = ctx.getImageData(); 

 

I don't see anyway of getting the canvas element by ID because Phaser dynamically generates the canvas element and does not put an ID on it. Can I used game.canvas instead of getElementByID?

[ForgeableSum]

Looks like my original code works fine but only if the game is in Phaser.Canvas mode (not webgl which is default for Phaser.AUTO on browsers that have webgl). 

 

var bmd = game.add.bitmapData(150, 150);bmd.copy(game.canvas,0,0,game.width,game.height,0,0,150,150); var miniMap = bmd.addToWorld(300,300);

So now it's just a matter of getting this code to work with webgl. I suspect the problem is related to the fact that you can't use getImageData on a webgl context. 

[MichaelD]

You can manually set an id yourself by editing the html meaning if you create a canvas element with an id you can pass this id to Phaser.Game,

var game = new Phaser.Game(420, 800, Phaser.CANVAS, 'game');// it needs a <canvas id="game"></canvas> in the html 

as for webgl I'm not familiar with the way it taps into the canvas and thus not sure if the suggested function will work.

[ForgeableSum]

You can manually set an id yourself by editing the html meaning if you create a canvas element with an id you can pass this id to Phaser.Game,

var game = new Phaser.Game(420, 800, Phaser.CANVAS, 'game');// it needs a <canvas id="game"></canvas> in the html 

as for webgl I'm not familiar with the way it taps into the canvas and thus not sure if the suggested function will work.

Ah but because the canvas element is added dynamically, I can't edit the HTML to add the ID. Doesn't matter though, game.canvas is sufficient. 

 

Anyway, even if I could use canvas mode, i can't get the desired result. Passing game.canvas only copies the visible part of the canvas, not the entire game world. 

[lukaMis]

Check this code. This is phaser-state transition plugin and it does copy state snapshot in to some image and then tweens it away. Maybe you will get an idea how to do it for your mini-map. But i do not know if it is compatible with webgl. 

 

https://github.com/cristianbote/phaser-state-transition/blob/master/src/phaser-state-transition.js

[ForgeableSum]

@lukaMis I'm afraid that code is deprecated so I don't want to touch it. 

 

 

I opened up an issue on gitHub and Richard informed me that you need to set preserveFrameBuffer if you are using Webgl (Phaser.Auto). My code works fine in webgl after that. Now my only problem is that I can't seem to capture the entire canvas. Instead I can only capture the visible portion. 

[ForgeableSum]

Okay, so I figured out that if I don't scale the canvas while drawing/copying, I can capture the entire thing (including non-visible portions) in bitmap data.

 

No all I need to do is figure out how to scale down the bitmap data object! Shouldn't be too hard from here. I can see that there is a method for resize:http://phaser.io/docs/2.3.0/Phaser.BitmapData.html#resize

 

Doesn't seem to work though if I pass it a width/height. 

[ForgeableSum]

Well, this sure is odd. 

 

For some reason, when I convert the bitmap to a Phaser.Image and scale, the image texture width/height changes to whatever the visible window width/height is:

     var bmd = game.add.bitmapData(game.width, game.height);        bmd.copy(game.canvas, 0, 0, game.width, game.height, 0, 0, null, null, 0, 0, 0);        var image = game.add.image(200, 200, bmd);        image.scale.setTo(.1);

If I don't scale, everything is there (the entire canvas I copied). But simply the act of scaling causes the new image to cut off, as if the original bitmap data was only of the visible window and not the entire canvas .... 

 

Even if I set the scale to 1, the new image shows only the visible portion of the canvas. 

 

Why the hell is the act of scaling my image, also cropping it? If I could just figure out this last piece, the puzzle is solved!

[ForgeableSum]

Bump.