Cacheable Runtime Generated Bitmaps

[quarks]

I asked a version of this question a while back and never got a response. Hopefully I can ask it better this time.

 

Phaser has several canvas-like objects for generating bitmaps on the fly: Graphics, BitmapData, and RenderTexture. What are the important differences between them?

 

BitmapData seems to be a thin wrapper around the html canvas. Graphics looks like a thicker wrapper, with a few more convenience methods. I think Graphics objects by default rerun their vector drawing commands with every frame unless they are set to cache. It also seems like Graphics was intended, or is intended in the future, to support direct attachment to a physics body, but last time I checked it doesn't work. I'm not sure at all how RenderTexture fits into the ecosystem.

 

In event, I have been more or less successful getting vectory graphics attaching a Graphics object to a sprite. But what about animation? Assuming I want to avoid rerun the vector commands every render, what's the best way to generate and cache several frames of bitmap data? Is it possible to generate several frames from one Graphics object and cache them separately for later use? Or maybe a RenderTexture would be better for that sort of thing. My goal is to make sure that the generated textures only have to be copied to the GPU once.

 

Thanks.

 

 

[Tom Atom]

Hi, not 100% your problem, but something about BitmapData and RenderTexture is in this question: http://www.html5gamedevs.com/topic/14778-slow-rendering-into-rendertexture/

 

In the end, if you have WebGL support, than both BitmapData and RendreTexture will be turned into WebGL texture. With RenderTexture, you will probably have more possibilities with rendering (OpenGL way). But, watch for way you use it! I had big problems with performance until I found solution (at the link). There is also small project attached, in which you can simply change (in code) BitmapData for RenderTexture and it will do the same thing. It was uploaded before I found the performance problem, so solution in attached project works very bad with RenderTexture and BitmapData is far more faster. But in final answer you will find clue to fast rendering with RenderTexture.

 

Yes, you can do some animation with prerendered frames. It is exactly what I do in project: when started, I render random curve from top to bottom of screen (RenderTexture) and I use this image as texture for sprites, that are then drawn on screen. When scrolling, I only update curve RenderTexture with few more new lines... as this RenderTexture is also used as texture for sprites, sprites texture is automatically updated. Imagine, you can do animation like this: have 10 sprites with single texture, which is RenderTexture. Then render into RenderTexture .... and all sprites are changed without animation at once ... great for animated tiles (for example water...)