Full outline rather than shadow on FlxText

[FlixelCommunityBot]

Issue by msilver101 from 2012-10-27T22:57:55Z
Originally opened as AdamAtomic#234

---

I know how to implement this as well and would be happy to post code if you'd like. I find it quite helpful. It would be very easy to make a Boolean property for FlxText, something like fullOutlineShadow, that when set to true makes the whole text outlined rather than just the lower right.

I just add these lines to FlxText at line 287:

if(_shadow > 0)
{
    _textField.setTextFormat(new TextFormat(formatAdjusted.font,formatAdjusted.size,_shadow,null,null,null,null,null,formatAdjusted.align));                
    _matrix.translate(1, 1);
    _pixels.draw(_textField, _matrix, _colorTransform);
    _matrix.translate(0, -1);
    _pixels.draw(_textField, _matrix, _colorTransform);
    _matrix.translate(0, -1);
    _pixels.draw(_textField, _matrix, _colorTransform);
    _matrix.translate( -1, 0);
    _pixels.draw(_textField, _matrix, _colorTransform);
    _matrix.translate(-1, 0);
    _pixels.draw(_textField, _matrix, _colorTransform);
    _matrix.translate(0, 1);
    _pixels.draw(_textField, _matrix, _colorTransform);
    _matrix.translate(0, 1);
    _pixels.draw(_textField, _matrix, _colorTransform);
    _matrix.translate(1, 0);
    _pixels.draw(_textField, _matrix, _colorTransform);

    _matrix.translate(0,-1);
    _textField.setTextFormat(new TextFormat(formatAdjusted.font,formatAdjusted.size,formatAdjusted.color,null,null,null,null,null,formatAdjusted.align));
}

[Gama11]

Just tried this out, seems pretty awesome! :D Been having a similar thought earlier actually.

It looks good, but there's one problem with it: Line thickness isn't variable, and the bigger the text size is, the smaller are the outlines in comparison (Could of course also have a public variable so you can change the thickness yourself). That's why lineThickness should depend on size:

//Render a single pixel shadow beneath the text
if(_shadow > 0)
{
    var lineThickness:Number = size / 16;
    _textField.setTextFormat(new     TextFormat(formatAdjusted.font,formatAdjusted.size,_shadow,null,null,null,null,null,formatAdjusted.align));                
    _matrix.translate(lineThickness, lineThickness);
    _pixels.draw(_textField, _matrix, _colorTransform);
    _matrix.translate(0, -lineThickness);
    _pixels.draw(_textField, _matrix, _colorTransform);
    _matrix.translate(0, -lineThickness);
    _pixels.draw(_textField, _matrix, _colorTransform);
    _matrix.translate( -lineThickness, 0);
    _pixels.draw(_textField, _matrix, _colorTransform);
    _matrix.translate(-lineThickness, 0);
    _pixels.draw(_textField, _matrix, _colorTransform);
    _matrix.translate(0, lineThickness);
    _pixels.draw(_textField, _matrix, _colorTransform);
    _matrix.translate(0, lineThickness);
    _pixels.draw(_textField, _matrix, _colorTransform);
    _matrix.translate(lineThickness, 0);
    _pixels.draw(_textField, _matrix, _colorTransform);

    _matrix.translate(0,-lineThickness);
    _textField.setTextFormat(new TextFormat(formatAdjusted.font,formatAdjusted.size,formatAdjusted.color,null,null,null,null,null,formatAdjusted.align));
}

Another thing, I wouldn't really use a variable likefullOutlineShadow, but something like this:

public static const NONE:int = 0;
public static const SHADOW:int = 1;
public static const OUTLINE:int = 2;

public var borderStyle:int = NONE;

Seems more readable to me, also allows to easily add more border styles in the future. Might need to add a paramter for borderStyle to setFormat or create a new function setBorder which takes the parameters borderColor and borderStyle.

Also, what's with that FlixelCommunityBot account?

[moly]

This seems incredibly inefficient, it's drawing the textfield 8 times. I haven't tested this yet but at least 4 of those draws should be unnecessary.

[Gama11]

This seems incredibly inefficient, it's drawing the textfield 8 times. I haven't tested this yet but at least 4 of those draws should be unnecessary.

Hm... I imagine that with 4 textfields only, you'll run into the problem that the edges are left out. Created an image to demonstrate this with GIMP:

That's why 4 more textfields are needed to fill those:

Edit: However, spreading the 4 copied texts out diagonally in the first place should work and make the second step obsolete.

[moly]

You can definitely do it in four.

if(_shadow > 0)
{
    _textField.setTextFormat(new TextFormat(formatAdjusted.font,formatAdjusted.size,_shadow,null,null,null,null,null,formatAdjusted.align));                
    _matrix.translate( 1, 1);
    _pixels.draw(_textField, _matrix, _colorTransform);
    _matrix.translate(-2, 0);
    _pixels.draw(_textField, _matrix, _colorTransform);
    _matrix.translate( 0,-2);
    _pixels.draw(_textField, _matrix, _colorTransform);
    _matrix.translate( 2, 0);
    _pixels.draw(_textField, _matrix, _colorTransform);
    _matrix.translate(-1, 1);
    _textField.setTextFormat(new TextFormat(formatAdjusted.font,formatAdjusted.size,formatAdjusted.color,null,null,null,null,null,formatAdjusted.align));
}

I tried getting it down to one using _matrix.scale() but couldn't get it to work properly.

[IQAndreas]

I haven't tested this myself, but I believe the same "outline" effect can be applied more efficiently (and more accurately, if you take a look at how poorly the outline works on the "X" character) to fonts with a glow filter.

• http://www.ghostwire.com/blog/archives/as3-drawing-outline-on-text-glyphs/
• http://www.flashandmath.com/howtos/outlinedtext/index.html

The edges may not be as crisp, but perhaps the blur properties can be tweaked to make it crisper.

[Dovyski]

That's a great feature! 👍

The method @IQAndreas suggested seems the easiest one, but I imagine it is slower then drawing the textfield 4 times. To manage all those borders (shadow, outline, etc), the borderStyle property that @Gama11 suggested is a nice approach.

[michaelplzno]

Just as a heads up, the 4 diagonal version works only in the case that you don't have a one pixel font. Perhaps it could be an extra option in the font style, but I wouldn't recommend it b/c its a bit confusing. Here is an example image of just diagonals on a one pixel font upscaled by two:

Also I've found the method to work quite well in practice. It makes the Nokia default font quite readable on almost all backgrounds and the performance has been fine.