Problems Rendering Lots of Text « cocos2d for iPhone

cocos2d for iPhone » Programming » cocos2d support (graphics engine)

Problems Rendering Lots of Text

(11 posts) (5 voices)

Started 2 years ago by jharkey
Latest reply from TwoHanded

Tags:

jharkey
Member

Hello everyone. I've been using cocos2d to make a classic adventure game engine like the Sierra and LucasArts games. It's going really well because cocos2d is so amazing. However, I've finally hit a snag.

I'm trying to come up with a good way of rendering a lot of text on the screen at once. So far I've been using the CCBitmapFontAtlas class for all of my text. It's really great when the strings aren't too long. However, when I try to use them to dynamically render two or three paragraphs (one long CCBitmapFontAtlas per line) at one time the lag is really noticeable. What I've tried is creating the CCBitmapFontAtlas classes ahead of time and always keep them in memory. Then I use the setString message on them when I want them to display the new text. I've narrowed it down and found that is where the lag is. I'm guessing that they were not designed to handle a really long string of text efficiently? Is there an asynchronous way of setting the string like there is an asynchronous way of loading sprites using the sprite manager?

So I've tried a few other options as well. I've used the UITextView and UIWebView. They do work, but the lag is also too much when I set the string of it and add it as a child to the openGLView.

Has anyone else made a system for displaying lots of text dynamically? I'm talking about an adventure game so I need to display a lot, almost a whole screen full at times. I have no problems making it work but the performance isn't acceptable. Anyone have any ideas?

Posted 2 years ago #
Matt Rix
Member

I actually came up with a system to do this in my game, it works kinda like this:

- break the text up into an array of single words(using componentsSeparatedByString)
- create a large RenderTexture(320x320)
- create a BitmapFontAtlas(we'll call it the wordFontAtlas)
- add the wordFontAtlas as a child of the RenderTexture
- setString the wordFontAtlas to the first word
- move the wordFontAtlas to the correct position(this is the tricky part, so you'll have to figure it out for your scenario, but it's really not that hard)
- set the wordFontAtlas's opacity to 0
- transition the wordFontAtlas in(fade in)
- when the transition finishes, draw the wordFontAtlas to the RenderTexture(so that it's now baked in)
- rinse and repeat for every word in your block of text using the same wordFontAtlas and setString

Depending on the transition speed that you use, this can build in a lot of text pretty quickly. It's sweet because you've only ever got one BitmapFontAtlas, and it's a small one. The only disadvantage is that you've got a RenderTexture, which can potentially cause performance problems, but this runs at 60 fps even on my first gen iPhone. It has the added bonus of kinda forcing the user to read the text, and gives it a bit of nice animation.

If you really want to make it better, you could actually create two brushes so that the text comes in even faster, or you could try doing it line-by-line instead of word-by-word. You can also do little tweaks like making the transition time vary depending on the length of the word, or sliding the word up a bit as well as fading it in.

Posted 2 years ago #
jharkey
Member

Thanks Matt. That's an interesting idea. I like that approach because of the animation. I might end up trying it. I've gotten fairly good at positioning text already because I'm using the CCBitmapFontAtlas classes as items in a popup menu system, so I should be ok there. Are RenderTextures known problem causers?

I would like to find a way to do the whole text at once though. Surely it can be done.

Posted 2 years ago #
Matt Rix
Member

RenderTextures aren't necessarily a problem, but they "reset the rendering pipeline", or something like that, which is why you shouldn't ever draw to them or create them during your main draw loop(a situation which my solution avoids).

There might be a way to do all the text at once, but BitmapFontAtlases should be pretty efficient. At the end of the day, every single character in your text is essentially an atlassprite, so if you've got 200 characters, you've got 200 sprites each with different texture coordinates and everything. The only thing that'd be faster than the regular BitmapFontAtlases would be a BitmapFontAtlas that handles multi-line text, which is definitely possible.

Posted 2 years ago #
jharkey
Member

Maybe I'm doing it wrong then if the BitmapFontAtlases should be efficient enough. I've found that the rendering of them is extremely fast. It's the calls to setString when I'm doing it to 10 of them with about a screen width of text each that is the problem. If I render the same text again right afterwards without calling setString again then it's super fast. Sorry if I'm not understanding, this text stuff is confusing. Here is an example of what I'm trying. messageFonts is an array with 10 CCBitmapFontAtlases that were created in the init function of the layer. This code is being called after an event and not in the main draw loop.

[[messageFonts objectAtIndex:0] setString:@"This is a test string. This is a test string. This is a test string."];
[[messageFonts objectAtIndex:0] setPosition: ccp(50 + [[messageFonts objectAtIndex:0] contentSize].width, 260)];
[[messageFonts objectAtIndex:0] setAnchorPoint:ccp(1.0f, 0.5f)];
[self addChild:[messageFonts objectAtIndex:0]];

//this is repeated for the other 9 CCBitmapFontAtlases in the array

I've looked all through the BitmapFontAtlas header and implementation file and can't find anything that suggests it supports multiline text. That would be great if it was built in. Did I just miss that or is that something you've created yourself? I've even tried to add the \n and \r escape characters to the string sent in setString: and it didn't work.

Posted 2 years ago #
riq
Key Master

yes, CCBitmaptFontAtlas could be a little slow when creating a text with several characters.
CCLabelAtlas is faster in creating the text.
But once they are created, the rendered speed should be very fast.

It should not be difficult to improve the creation time, since I've done that with CCTMXTiledMap.
Could you open an issue saying that it is somewhat slow to create bitmapfontatlas with serveral characters ? thanks.

Posted 2 years ago #
jharkey
Member

Sure Riq, I'll do that. Thanks.

Posted 2 years ago #
Matt Rix
Member

Sorry, I worded my message wrong, when I said "The only thing faster would be a BitmapFontAtlas that handles multi-line text, which is definitely possible."

I meant it should be possible to extend/modify BitmapFontAtlas to have it handle multi-line text, but I didn't mean that it's CURRENTLY possible :) My bad hah.

Posted 2 years ago #
h.hamm
Member

I encountered the problem that every time you create CCBitmapFontAtlas the system hangs about 0.03-0.1s - even if the same font was loaded before. After it is placed in the scene you could change the text without performance issues. Where does this lag come from?
cheers,
sendel

Posted 2 years ago #
riq
Key Master

CCBitmapFontAtlas update: huge performance boost when updating/creating the label.
SVN r1742

Posted 2 years ago #
TwoHanded
Member

Hello,
//---------------------------
MattRix said :
- when the transition finishes, draw the wordFontAtlas to the RenderTexture(so that it's now baked in)
//---------------------------
1- if i add this to my prog :
beginLabel = [[CCBitmapFontAtlas bitmapFontAtlasWithString:@"I Wonder How" fntFile:@"Arial.fnt"] retain];

WChar = [(CCSprite*) [beginLabel getChildByTag:2] retain];
[WChar setPosition:ccp(160, 240)];
//---------------------------

2- in my loop time :
//---------------------------
[MyRenderTexture clear:0 g:255 b:0 a:255];
[MyRenderTexture begin];
glColorMask(TRUE, TRUE, TRUE, TRUE);
[WChar visit];
glColorMask(TRUE, TRUE, TRUE, TRUE);
[MyRenderTexture end];
//---------------------------
3- my prog fails : "Assertion failure"

4-with a real sprite ( like : exemple.png) it works
anything to do to fix this ??

thank you

Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.