Text optimization issues and soutions

C2 community in general and Ashley

I'm writing this post because I feel the need to find a way to speed text display in C2... not just for games but for other aspects C2 is fully capable of. I came across an issue with text, which is very well documented in C2, dislaying text takes a huge toll on performance(especially on mobile). However some times we need to do just that and I'm looking for possible solutions that may be integrated. I'm just doing my research to find a head and tail to this issue and I came across several articles proposing alternative solutions. I do realize most of these are just people experimenting and finding work-arounds.

I'm certain since Ashley is fully versed in all the aspects of C2 he probably has either red most of this or at least considered some. Just in case I'm wrong I'll post the links more as a resource of information more than anything. I am one to think that the community is more than capable of compiling useful tidbits of information and getting it back to the developers so together we can get the product from its current awesomeness to higher levels of power... I hope at least some of this information is useful.

Some links:

6 Performance tips for Canvas

Canvas performance analisis

Performance optimization

Horribly large ammunt of resullts from google searching about the canvas text performance issue

This said C2 is more than adequate in displaying small amounts of text... which are non/issue for most apps/games and in local desktop browsers. The point to this is to see a possible alternative for mobile or less than capable small format computers or other uses in which you need to display larger amounts of text which take much more out of the performance bucket than intended.

If anyone has another link, solution or comment please feel free to add to this post. Happy hunting and gaming people

Displaying text is not slow - it is only that changing large text objects in WebGL mode is slow. If you never change the text, or it's a very small object, it will likely be perfectly fast. Also, Sprite Font should be perfectly fast too even if large and regularly changed, since it renders differently. I wouldn't recommend turning off WebGL because of this since that will reduce performance in other ways; if you must have large, constantly-changing text objects then switch to a sprite font.

As far as I can see the links you provided discuss canvas2d which is not applicable to WebGL mode, or cover techniques we already implement such as caching (which is why non-changing text is still fast).

Since WebGL cannot directly draw text, in this mode text is rendered to an off-screen canvas2d then uploaded to a WebGL texture. This texture upload is slow on some browsers/systems. It happens in the native side of the browser or the hardware (since the texture upload bandwidth is sometimes pretty low), so there isn't much we can do in Construct 2 to fix it.

Spritefont is extremely slow on mobile (cocoonJS) when you load it with even 200+ words...

damjancd - even if it is not changing? What about real browsers?

It constantly drains 30 FPS on 200 spritefont, 50 on 500 word sprite font and so on.

this is strictly CocoonJS, and not on load, but at all times. I can report this as a bug if it might be a bug. And if it is, its going to save me about 2 weeks of work

Real browsers it works perfectly, no real noticeable drain on FPS....

Let's say I want to use a custom TTF font in my game, which is installed on my PC.

If I run the game on iPAD, will this be exported with the HTML code, and show right on the iPad, or will it show in Topaz font?

Or do i need to use a sprite font to have custom fonts?

I repeat.

Don't use Text objects for games.

SpriteFont was designed specifically for the purpose of cross platform and speed optimization consistency. I know the ease of convience to use TextObject is tempting. But it's inconsistent. Fonts vary from platforms, font metrics are different, fonts may be missing. As Ashley points out constantly banging out a TextBox update is not good for system performance in WebGL.

I really feel that "Don't use Text Object in games" should be pinned. However TextObjects are 100% fine for app orientated uses.

Also games don't use TextObjects they use SpriteFonts or special game text renderers.

jayderyu I'd love to use spritefonts, but bigger texts using spritefont have terrible performance on Ejecta and CocoonJS unfortunately.

damjancd

Can you share a stripped sample capx and info on your testing device?

— Here is the bug report I wrote

And directly here is a sample download/file.php?id=4012 (i didn't make it but it's correct)

I'm using an ipad Mini via CocoonJS and Ejecta.