Outline on text?

(ReiKGT) #1

Is there a built in method to add a black outline to text in flashpunk? Or will I have to do some BitmapData manipulation to pull that off?

Crap I didn’t see that there was literally another thread on the same topic posted just hours before mine.

(Jonathan Stoler) #2

FlashPunk has no built-in way to do this.

So your choices are:

  • (for pixel fonts, usually) just add a border to the font itself
  • use multiple Text objects aligned in a specific way to simulate a border - this typically also really works only for pixel fonts, and it’s much better for shadows than borders
  • use BitmapData manipulation as you said - I would suggest looking into filters and using one of those
(azrafe7) #3

As @JonathanStoler said there are many ways to achieve this.

I’ll just show how to do that with punk.fx:

    ...
    
    public var text:FXText;          // FXText instance
    public var outlineFX:GlowFX;     // a GlowFX to simulate outline/border
    
    ...		
		
    text = new FXText("outlined text", FP.halfWidth, FP.halfHeight);    // create FXText in the middle of the screen
    text.centerOO();    // center origin of text graphic
    		
    outlineFX = new GlowFX(4, 0x000000, 6);    // create black outline fx
    text.effects.add(outlineFX);               // add fx to text instance
			
    FP.world.addGraphic(text);                 // add outlined text to current World

    ...

    text.text = "NOMORE outlined text";         // change text
    outlineFX.active = false;                   // disable outline fx
    //outlineFX.color = 0xff0000;               // or change outline fx properties