[SOLVED] Get content of a Graphics object

[Benjamin13]

Hello everyone,

I am currently using a Graphics object to manually draw a set of Bezier curves (with bezierCurveTo and a filling set to 0xffffff) to make a mask that will be used by a sprite to display an island.

Since the island is drawn by the user I need to make some checks on it before it can be used in the game. The method I came up with requires to check the content of the Graphics object to detect if a pixel is part of the island (0xffffff) or not (0x0). After some research I haven't found any way to do so so I was wondering if it is even possible? If it is, can you provide me a way do to it please? I don't really care about performance since this check is only done once in a while.

[samme]

I think you can go from Graphics to Image to BitmapData, something like

var img = game.make.image(0, 0, graphics.generateTexture());

var bd  = game.make.bitmapData(img.width, img.height).copy(img).update();

bd.processPixelRGB(function (pixel){
    pixel.r && pixel.g && pixel.b; // pixel is not black
    // …
});

 

[Benjamin13]

Thanks, that works great! I'm not using the processes function since I have to access pixels at certain coordinates only but that's what I needed.

Just a note for people who might be in the same situation, before accessing bd.pixels or bd.data you have to call bd.update() after bd.copy() because it's not immediately updated for performance reason (as mentioned in the documentation).