Jump to content

Cacheable Runtime Generated Bitmaps


Recommended Posts

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.





Link to comment
Share on other sites

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...)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...