Simple Q about Spritefont

I come to know that text objects are a performance KILLER, especially in mobile, so I'm reworking on my project, switching text to Spritefont, and I want to optimize it.

Does the size of 'font strip' effect the mobile performance? I don't know anything about the Spritefont's rendering method but if it does, I could rip off the part of the strip which I don't use.

Yes, if the SpriteFont object uses a large image it will take up a proportionate amount of memory. Put only the characters you need in the font image, and alter the "Character Set" field accordingly.

Showing the same text object over and over again on the same page doesn't cost more memory than showing it in a single place on the layout though right? Just checking.

cow_trix thanks! Is there any tool that makes font strip with only characters which I chosen? Ripping off would be quite an annoying task I think.

Agni Hmm . No. I heard that text object goes through complicated ways to be rendered and it has to be redrawn eash time the text changes. So it would be fine if u don't change that text.

Little explanation about how the spritefont plugin works:

First when the plugin gets loaded, it creates a list of all the clipping coordinates for all the characters.

Then on the first draw, or each time the text changes or each time the object's width changes, the plugin will calculate the word wrapping (splits the text in lines according to wrapping method, size of the object, etc)

Then it will draw each letter the same way a sprite is drawn (taking care of horizontal and vertical alignement for you):

- in canvas2D mode, using the context.drawImage() function

- in webGL mode by building quads that c2 uses to pass to the default rendering shader along with the texture.

What you have to keep in mind is that each time the text needs to be drawn on the canvas, whether it's webGL or canvas2D, each letter will have to be redrawn.

It means, that will happen each time your text moves, each time the text is modified and, I think, each time any object gets on top or underneath your text.

So if you have a constantly scrolling game (like bit trip runner), your spritefont text will be redrawn each tick.

Drawing a lot of characters one by one can end up being quite expensive in canvas2D. In WebGL you can just think that one character costs 2 triangles (think 3D rendering) so you'll probably have 200 triangles for a 100 character text. Which should be ok in most devices... I think.

Also, any characters not in your character set will be drawn as a nothing, it will just offset the next character's drawing, creating a space.

So basically, i'm saying that spaces should more or less cost nothing (unless you put a space in your character set... which you shouldn't do (:

Yann

Why does each letter need to be redrawn one at a time ? Wouldn't it be better to buffer the resulting bitmap and paste that in the canvas instead of pasting one letter at a time ?

Magistross: that's what Ash asked in the spec. But here is what I think:

if you use an off-DOM canvas (what you call buffering which is rather caching I think), you will have to use an extra bit of memory for that, and then you still have to draw the resulting big image.

So the question is: what is faster? drawing many little small images, or a big one?

I don't have the answer to that, that's probably a good test to run on jsperf (maybe if I have time and motivation when I'm back home...)

Also how much place the big off-DOM canvas will take in memory can be a big problem.

And all that is really hypothetically intersting for canvas2D. In webGL, drawing textured polygons should be pretty super fast and way more interesting than rendering a big fat texture that would sit in your memory.

So yeah, the simple answer is that it's a trade off between memory and cpu use. Here Ash prefered lowering memory use.