Has anyone created a Font pack for UE4 that features black outlines around each character that they’re willing to share?
Not sure what you’re attempting to do, but this can be done within UMG and the shadow offset.
Shadow offset isn’t quite the same as font outlining. Freetype does support outlining of glyphs, but we haven’t integrated that feature yet in Slate. Fonts with outlines baked into them require using bitmap fonts, which are not supported in Slate, but are supported in Canvas, the older immediate mode AHUD system.
This is ridiculously easy to do using the font material since our fonts are already encoded as distance fields. See this answerhub reply where I show how to make font scanlines in a few steps:
https://answers.unrealengine.com/questions/215460/can-ue4-produce-text-effects.html
Making outlines is just as easy. Try using the “spheremask node”, putting font texture in A, and B would be your outline position. Radius would be outline thickness and hardness would be how hard/soft it would be.
You will have to offset the alpha slightly to fatten the font. I would probably try adding half of the outline thickness as a starting point.
That only applies if you are using the Text Component, and using UFonts. That wont work in UMG/Slate.
Ah sorry I thought you could spawn regular text components in UMG. Doh!
Hey guys, just curious if there’s any news on Slate font outline support? I’m thinking I can probably hack around it by manually redrawing text multiple times with different offsets… like the drop shadow except in a radial pattern. It’d probably require 8 redraws of the text (one for each compass point + inbetweens) to look half decent though, so not the greatest for performance. Some kind of shader approach would be awesome… I did spot ESlateDrawEffect in RenderingCommon.h, but I’m wise enough to know that this would be a road to hell without some guidance from someone at Epic, hahaha. 
We’re working on it, but don’t know when it will be done, it’s a lot of work to do right. The proper way to implement it is to have freetype render it with an outline into a separate font atlas, and change a bunch of stuff in the UFont asset editor to permit creating new font styles that include outline and the outline distance as properties that can be set. I’d probably just stick with shadows until we’ve got support for it.
Cool thanks for the update Nick, looking forward to seeing it in action.
In the meantime, I’ve got a diabolical plan to hijack Slate’s shadow offset 2D vector and pack some extra data in there for the outline thickness, then I’ll unpack it and do my cheap and nasty fake outline alongside the drop shadow in the bowels of the Slate rendering code. I’ll post the code for anyone else looking for a quick workaround.
Okay, I got Slate font outlines working in 4.8 with one engine C++ file change. I wanted to hack this in with as minimal changes to the engine code as possible, so it all lives inside Engine\Source\Runtime\Slate\Private\Framework\Text\SlateTextRun.cpp. This isn’t the “right” way to do outlines as Nick mentions above, and it’s certainly not efficient if you start doing very thick outlines, but it will get the job done if you’re after a quick fix. Here’s what it looks like in action with an outline and drop shadow:
And a more extreme example, showing some ugliness on the outline corners:
Some notes:
- The basic idea is to draw the outline similar to the way we draw the drop shadow (a copy of the text drawn underneath the main text with an offset), except we draw multiple “shadows” in a circular pattern around the text to fake the outline. Note that this means you’re potentially redrawing text quite a lot depending on the outline parameters you choose, so be weary of performance.
- I’ve hijacked Slate’s ShadowOffset vector to carry some extra data for the outline: Outline thickness, and outline directions. These values are packed in by multiplying them by 1000, relying on the fact nobody wants shadow offsets greater than 500 Slate units. You can change this multiplier to be higher if necessary.
- Outline thickness defines how thick the outline should be in Slate units. eg. 3 would mean 3 pixels thick assuming no DPI scaling.
- Outline directions is the number of directions in a circle (think of a compass) we should redraw the outline text. eg. 8 would mean redraw the text 8 times in compass directions N, NE, E, SE, S, SW, W, NW.
- I’m currently just using the shadow color and opacity for the outline color and opacity. You could hardcode it to something else if you wanted (eg. black) or do some more crazy hijacking of the ShadowColorAndOpacity color to pack 2 colors in there, but I’ll leave that as a reader exercise.
For the example picture above I used the following code in my Slate style definitions. The SetShadowOffset parameter takes secret parameters (multiply them by magic number 1000) and can be thought of as a shadow offset of (7, 10), an outline thickness of 3 and 8 outline directions
Style.Set("SpaceDustRacers.MenuHeaderTextStyle", FTextBlockStyle()
.SetFont(OTF_FONT("Fonts/Molot", 115))
.SetColorAndOpacity(FLinearColor::White)
**.SetShadowOffset(FIntPoint(7 + 3000, 10 + 8000))**
);
The SlateTextRun.cpp code changes are here (against UE4.8 baseline): Unreal Engine 4.8 Slate font outline hack - SlateTextRun.cpp - Pastebin.com
For clarity’s sake, I’ve added a macro (yes I am aware of the irony) to my game-side Style definitions:
#define SHADOW_OFFSET_AND_OUTLINE(ShadowOffsetX, ShadowOffsetY, OutlineThickness, OutlineDirections) FIntPoint((ShadowOffsetX) + ((OutlineThickness) * 1000), (ShadowOffsetY) + ((OutlineDirections) * 1000))
Style.Set("SpaceDustRacing.MenuHeaderTextStyle", FTextBlockStyle()
.SetFont(OTF_FONT("Fonts/Molot", 115))
.SetColorAndOpacity(FLinearColor::White)
.SetShadowOffset(SHADOW_OFFSET_AND_OUTLINE(0, 10, 3, 8))
);
Enjoy.
Was looking up how to do outlines in UMG, found no good way to do so. So I made my own workaround!
How it looks:
Basically:
- 9 text blocks
- 1 of them is the normal white text
- other 8 are the same text except they have black color and offsets
outline_top_left | outline_top | outline_top_right
-----------------------------------------------------------------------------
outline_left | text | outline_right
-----------------------------------------------------------------------------
outline_bottom_left | outline_bottom | outline_bottom_right
List of offsets (also the order in UMG, text needs to be at the bottom of the list otherwise it won’t show):
- outline_top_left
- x: -1, y: -1
- outline_top
- x: 0, y: -1
- outline_top_right
- x: 1, y: -1
- outline_left
- x: -1, y: 0
- outline_right
- x: 1, y: 0
- outline_bottom_left
- x: -1, y: 1
- outline_bottom
- x: 0, y: 1
- outline_bottom_right
- x: 1, y: 1
- text
- x: 0, y: 0
I offset the text blocks using the “Render Transform -> Transform -> Translation X & Y settings”
Works with any font size. If you want wider outline, just increase the offsets.
4.14 supports outlines, with materials and pretty round corners