Use Graphics cacheAsBitmap as Sprite Image

[jackrugile]

I am aware of the method of manually creating bitmap data and using the canvas context to draw. Then, that bitmap data can easily be passed to the creation of a sprite as an image and it works fine.

 

However, I'd like to do the same thing, but with a graphics object. It looks like cacheAsBitmap is a property of the graphics object, but after trying to set it manually, I have no idea where the actual bitmap is being stored so I can reference it. In theory, I am interested in doing something like this with my code:

var graphics = this.add.graphics(0, 0);graphics.beginFill(0xFFFF0B, 0.5);graphics.drawCircle(470, 200, 100)graphics.cacheAsBitmap = true;var sprite = this.add.sprite(0, 0, graphics);

I realize this is incorrect and doesn't work, but that spells out my intention. Also, once the graphics are created, they would never change, so I wouldn't need to update the bitmap data ever.

 

I found the references to this in the Pixi graphics and display object files, but I still couldn't figure it out.

 

Thanks in advance for replies.

 

[lewster32]

Is this not exactly what a RenderTexture would be used for? This is actually what pixi does when you enable cacheAsBitmap - and you can access the interanally generated RenderTexture at sprite._cachedSprite.texture, though I'd probably say it's much easier just to use a RenderTexture directly for this rather than try to fish out these 'private' values.

[jackrugile]

Shoot, what you're saying sounds right, but I am having trouble implementing it. The examples have some use of RenderTexture, like here, but I don't think there is one that goes through the whole process with getting a graphics object onto a RenderTexture. Do you have any thoughts on how I would integrate my above graphics code into a RenderTexture?

[lewster32]

Ok this is weird - the below could should by all rights work (unless I'm missing something plainly obvious) but it doesn't... 

var graphics = this.make.graphics(0, 0);graphics.beginFill(0xFFFF0B, 0.5);graphics.drawCircle(470, 200, 100);var renderTexture = this.add.renderTexture(graphics.width, graphics.height);renderTexture.renderXY(graphics, 0, 0, true);var sprite = this.add.sprite(0, 0, renderTexture);

The docs don't mention Graphics objects as one of the accepted types, and even if I put the graphics into a group it doesn't work.

 

I think this is a bug so I'll submit an issue later. For now, use cacheAsBitmap = true on your graphics object, then pass graphics._cachedSprite.texture as the texture for your image/sprite. It's hacky but does the same thing as above - except it works!

[jackrugile]

Ok, thanks for looking into this. I'll keep an eye that issue on GitHub. Much appreciated!