Text Outlines?

Solar2D Advanced Graphics
#1

I have found nothing in the API or in the forums that suggest that Corona supports the display of a text outline (or stroke).

Currently, if I want a 5 pixel outline, I am literally using a loop to create a text display object for every single pixel (5 pixel border means 5x5=25 text display objects) and then I’m using display.capture to convert it into a single object, while removing the 25 text objects that were made. This works, but it’s a little bit slow.

Is there anything I’m missing? Is there another way to create a nice text outline?

#2

you’ll likely get two schools of thought:

new school:  render to snapshot, apply a filter like “bloom” (or a custom blur with strong threshold on post-kernel value)

old school: just find a true outline font u like and use as is, or any font in fe illustrator stroked pre-render to bitmap font

#3

The problem with trying to stroke a font is that Corona renders the text to an image texture. What you get back is a colored rectangle (based on :setFillColor() with a mask on top of it. The mask is white where the letters show through and black where we want it to be transparent to the background. Any stroke or glow will be applied to the box, not the shape in the box.

Rob

#4

Have you looked in the code exchange?

https://code.coronalabs.com/code/outlined-text-snapshots

#5

I originally made my own “stroke text” (duplicate the text 8 times with a different fillcolor and adjust those texts by the stroke-width in 8 directions for a grand total of 9 duplicate newTexts) to get the effect and have since switched to the stroketext module. However, there is an issue with flickering when rendering to snapshot that some people encounter (it’s been mentioned various times) and not yet been addressed, so YMMV.

#6

Another option would be to use bitmap fonts.

https://forums.coronalabs.com/topic/52906-bitmap-font-for-corona-sdk-with-dynamic-font-selection/

#7

you’ll likely get two schools of thought:

new school:  render to snapshot, apply a filter like “bloom” (or a custom blur with strong threshold on post-kernel value)

old school: just find a true outline font u like and use as is, or any font in fe illustrator stroked pre-render to bitmap font

#8

The problem with trying to stroke a font is that Corona renders the text to an image texture. What you get back is a colored rectangle (based on :setFillColor() with a mask on top of it. The mask is white where the letters show through and black where we want it to be transparent to the background. Any stroke or glow will be applied to the box, not the shape in the box.

Rob

#9

Have you looked in the code exchange?

https://code.coronalabs.com/code/outlined-text-snapshots

#10

I originally made my own “stroke text” (duplicate the text 8 times with a different fillcolor and adjust those texts by the stroke-width in 8 directions for a grand total of 9 duplicate newTexts) to get the effect and have since switched to the stroketext module. However, there is an issue with flickering when rendering to snapshot that some people encounter (it’s been mentioned various times) and not yet been addressed, so YMMV.

#11

Another option would be to use bitmap fonts.

https://forums.coronalabs.com/topic/52906-bitmap-font-for-corona-sdk-with-dynamic-font-selection/