Outline Back

Sometimes things just don't work as expected, sometimes that's bad, sometimes its good, and sometimes both.
This tut goes over a relatively new BB code feature that should have made outlines on text look a bit better, but wound up.. lets just say a bit too sharp.

Using outlineback is pretty straight forward. You can set the color from the tag, and its lineThickness right after. The problem is that thickness has a problem with points. As in any character that has a sharp point, or corner gets that point exaggerated so that it looks like its got a horn or fangs.
Great if its a heavy metal font, but for everything else not so much.
I'm not sure what the actual cause is, but I assume its due to the way splines are drawn, and it just doesn't work with corners.

An example with the thickness at just two.

It is unfortunate, but its is still useful at a lower setting.
And at much higher one...

As you might have noticed the background color of text in the text object only applies to the text itself, and not to the rest of the objects box, so using the BB code background doesn't really look that great, and you cant use it to turn the object into a box.

A neat side effect of outlineback is that you can set that thickness much higher and it will in fact fill in the object box.

So not everything is a loss I guess.

Since this was a bit short for a tut I figure I should add a bit extra and explain the events that were used to make the background. Nothing really hard, but the use of a loop with hierarchies might be somewhat novel.

The events:

+ System: On start of layout

-> Audio: Play music_fx_colorful_futuristic_gaming_music.webm not looping at volume 0 dB (stereo pan 0, tag "intro")

----+ System: For each DrawingCanvas

--------+ DrawingCanvas: Pick Own children Sprite

---------> DrawingCanvas: Paste object Sprite with effects

---------> System: Wait for previous actions to complete

---------> Sprite: Destroy

---------> DrawingCanvas: Add polygon point (730, 0)

---------> DrawingCanvas: Add polygon point (450, LayoutHeight)

---------> DrawingCanvas: Add polygon point (730, LayoutHeight)

---------> DrawingCanvas: Set drawing blend mode to Destination out

---------> DrawingCanvas: Fill polygon with rgba(0, 0, 0, 100) (convex: True)

----+ (no conditions)

-----> System: Wait 1.0 seconds

-----> Text: Tween "" property X to 49 in 2 seconds (Out Circular, destroy: No, loop: No, ping pong: No, repeat count: 1)

-----> System: Wait 2 seconds

-----> Text2: Tween "" property X to 200 in 1 seconds (Default, destroy: No, loop: No, ping pong: No, repeat count: 1)

-----> System: Wait 2 seconds

-----> Text3: Tween "" property Y to 407 in 1 seconds (Out Exponential, destroy: No, loop: No, ping pong: No, repeat count: 1)

-----> Audio: Fade "intro" volume to -100 dB over 25 seconds, then stop

When using hierarchies in loops, for each loops in particular, you have to make the parent, the Drawing canvas pick its children, the sprite in this case.

Find the source here