Simple Q about Spritefont

Get help using Construct 2

Post » Sun Jul 14, 2013 3:20 pm

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.
B
23
S
8
G
1
Posts: 172
Reputation: 2,780

Post » Sun Jul 14, 2013 3:55 pm

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.cow_trix2013-07-14 15:56:12
B
55
S
12
G
8
Posts: 339
Reputation: 9,334

Post » Sun Jul 14, 2013 4:51 pm

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.
B
9
S
2
Posts: 58
Reputation: 1,416

Post » Sun Jul 14, 2013 10:18 pm


@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.
B
23
S
8
G
1
Posts: 172
Reputation: 2,780

Post » Mon Jul 15, 2013 12:04 am

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 (:
B
63
S
22
G
14
Posts: 1,482
Reputation: 16,432

Post » Mon Jul 15, 2013 9:31 pm

@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 ?
B
58
S
23
G
22
Posts: 890
Reputation: 16,790

Post » Tue Jul 16, 2013 12:21 pm

@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.
B
63
S
22
G
14
Posts: 1,482
Reputation: 16,432


Return to How do I....?

Who is online

Users browsing this forum: Mallets, R0J0hound, Ryan Kocourek and 11 guests