TextSprite to Sprite
Elliot

I have this big TextSprite, with several lines of text on it. It also has a shadow and an outline, using my custom web font.

It's nice, but it's also very slow to render. Every time that there is something moving behind the text, the text needs to be redrawn, and my game slows down. I know I can put the text on a different layer, so it ends up on a separate html5 canvas. However, I'm worried that having so many layers will be a problem for memory on mobiles, because I'm using 6 layers already.

So I would like to cache the TextSprite rendering, maybe drawing it once and transforming it into a normal, image-based Sprite if that makes sense. Is it at all possible?

All 3 Comments
Taddeus

I think that I can answer this. I had same problem, and did this:
 

 
textSprite.drawToImage('myText.png');var sprite = new Sprite('myText.png');


That solves the problem for me  

Elliot

Cool, thanks man. I didn't know you could do that.

But are you actually creating a PNG image doing that? Where is it saved? Is there a more lightweight solution that doesn't require saving a PNG file?

Gio

What Taddeus suggested above is possibly the best way to do it. You aren't creating a .png image: the string that you pass to drawToImage() is just a virtual path.

As a matter of fact, internally this doesn't even create an HTML <img> element, but a <canvas> element, that is just as big as it needs to be to contain the thing you're drawing into it (doing so uses a bit less memory and is much quicker than creating an <img>). This canvas is not added to the DOM, it's just an off-screen image effectively.

In other words, you can give your image (or rather off-screen canvas) any name you like, and it doesn't get saved anywhere to disk. However it stays in WADE's asset manager until you explicitly unload it, and you can use it to create sprites and animations.

You can also draw multiple things into the same image, calling drawToImage for several Sprites and TextSprites, using always the same image name. There are also other parameters to customize your drawing, if you have a look at the documentation.

Post a reply
Add Attachment
Submit Reply
Login to Reply