Native text rendering preview

General
1

I spent the last couple of days implementing proper text rendering. I’m not sure how fast it is yet.

Here’s some examples:

###Example 1###


fontSize(100)

font("Georgia")
text("Hello World!", WIDTH/2, HEIGHT/2 + 200)

font("Baskerville-Bold")
text("Hello World!", WIDTH/2, HEIGHT/2)

font("Helvetica")
text("Hello World!", WIDTH/2, HEIGHT/2 - 200)

Font rendering 1

###Example 2###


fill(160,0,0)
noStroke()
ellipse(WIDTH/2,HEIGHT/2,400)

font("Georgia")
fontSize(24)
textWrapWidth(500)
textAlign(LEFT)

rotate(5)

text("(really long string)", WIDTH/2, HEIGHT/2)

Font rendering 1

It supports the full range of iOS fonts (http://iosfonts.com/) and all characters. I’m hoping this rendering method won’t be too slow for dynamic text.

2

I likey! Now, when do we get it?

3

Some info on the rendering method:

I chose to use built in iOS text drawing to render into a texture, that texture is then rendered in OpenGL.

What this means is for every new piece of text (changed string, changed font size, wrapping, etc) Codea will need to render a new texture. I have a caching system for text that doesn’t change, but something that increments constantly (like a high score) will need to generate a new texture every frame. This shouldn’t add too much overhead if the dynamic text is fairly small (the new setContext function does the same thing).

The benefits of this method is access to all fonts, international character support, support for huge font sizes, wrapping and so on.

4

You get it after 1.2.7. Apple is still reviewing that one, we will probably be ready to submit as soon as they approve it.

5

Also - my plan is to have text colour be determined by the current fill colour. Would you prefer this? Or would you rather have tint control the text colour?

6

Zapfinotastic!

7

Tint would be my vote.

8

Nice,

And i’d vote for stroke to control the color.

Actually scratch that, if fontSize will be a separate function (as opposed to controled by scale or strokeWidth) then i’d vote for fontColor()

9

I’m still keen on fill because that opens up the possibility for outlined fonts using stroke() in the future (if possible).

10

Looks beautiful. As you say, the method of rendering to a texture presents potential performance issues, but I think the idea of using the built in iOS font rendering is the right approach.

11

I am a connisouir of fonts, and my expert opinion is "Mmmmm pretty. "

Someone doing something that updates frequently where speed becomes a problem could simply render digits (for a score, say) to images and use those.

I like tint being meta - the use case in my brain is “player takes damage so screen tints red then fades to normal”, and that’s eliminated if we use it for text color. (hmm, I coul do a screen sized red image and vary the alpha… Would be similar effect)

You’re adding font() and text() And textWrapWidth() and textAlign() - add textColor(). Or, if a proliferation of methods bug you, make textProperties() and let us pass pairs or a table.

And give us a way to do it non-filled (outline) if it’s easy.

Or ship it this way! This is more than “enough” for most definitions of “enough”.

Dingbats!

12

Apple Color Emoji is like a whole new sprite library

13

Hee hee - that’s what I was thinking by “dingbats!”.

But… I don’t see emojii on the font page, and I get the idea we’re talking monochrome here…

14

@Ipda41001 - I didn’t even consider that!

Font Rendering Emoji

What it looks like in the editor:

Font Rendering Emoji

15

Dang Simeon, you fast.

You did an example and posted a screen shot in the time it took me to misspell “emoji”. (I had too many "i"s)

16

And I’m boggling in seeing them in the editor!

17

Come on Apple and approve the next version so we can get to these goodies!

18

Now… THIS IS AWESOME! It’s MUCH better than what I expected. You have access to ALL iOS fonts (including EMOJI!), ALL possible size, ALL possible international character. For me, this is more important than the drawing speed. If one really need the speed, s/he can use other techniques. Thank you, @simeon. :slight_smile:

About the coloring, I prefer using fillfor the text body color and strokefor the text border color. So, we could draw outline text. I can’t wait for the next update! :smiley:

19

Could you please post the screenshot of international fonts such as Russian or Arabic, @simeon? :slight_smile:

20

I vote for separate text coloUr.

(and thanks for rendering my font stuff obsolete!)