x

Search in
Sort by:

Question Status:

Search help

  • Simple searches use one or more words. Separate the words with spaces (cat dog) to search cat,dog or both. Separate the words with plus signs (cat +dog) to search for items that may contain cat but must contain dog.
  • You can further refine your search on the search results page, where you can search by keywords, author, topic. These can be combined with each other. Examples
    • cat dog --matches anything with cat,dog or both
    • cat +dog --searches for cat +dog where dog is a mandatory term
    • cat -dog -- searches for cat excluding any result containing dog
    • [cats] —will restrict your search to results with topic named "cats"
    • [cats] [dogs] —will restrict your search to results with both topics, "cats", and "dogs"

How can I make a font with an outline?

In Tappy Chicken the font used is white with a black outline. How can I go about making that look?

Product Version: Not Selected
Tags:
more ▼

asked Aug 23 '14 at 04:33 PM in Rendering

avatar image

wolfadex
16 2 4 6

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

8 answers: sort voted first

You could try doing the outline on the existing font by using the distance field. I go over a similar technique in this thread:

https://answers.unrealengine.com/questions/215460/can-ue4-produce-text-effects.html

basically you would do something like "distance" where A is the font alpha, B is your outline center location. Then multiply by a parameter for thickness and clamp. Then use that as a lerp alpha to control the color of your outline.

In terms of the other issue, I setting it to generate distance field alpha may be what is stomping the values with the distance field info.

more ▼

answered May 19 '15 at 10:36 PM

avatar image

RyanB STAFF
2.1k 56 24 118

avatar image Roccinio May 21 '15 at 11:27 AM

If you could post an example for the outline here i would be forever grateful . I managed to replicate the "text effects" material but i only want an outline so my text does not look "flat". I tried to follow your advice here, but for the love of me i am having a hard time figuring out anything by my own regarding materials that is. :)

avatar image RyanB STAFF May 21 '15 at 04:43 PM

here's a basic version using spheremask:

alt text

just hook up vertex color instead of green and you can set outline color on the text actor.

font_outline.jpg (121.5 kB)
avatar image RaymondLC92 May 08 '16 at 09:22 AM

How do you apply this Material to the font?

avatar image RyanB STAFF May 09 '16 at 02:56 PM

By applying it as the material to a text render component. This is only for text render components, it won't work inside of umg as far as I know.

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

To add an outline to your custom font:

  1. Import your desired font (see here for importing).

  2. In the font editor, select the page(s) of font you want to modify.

  3. Click 'Export' and choose a destination for the exported file (the file will export as a .tga).

  4. Open and modify the .tga in your editor of choice (I use Gimp).

  5. After making all of your modifications, in the UE4 font editor click 'Update' and select your just modified .tga.

more ▼

answered Aug 23 '14 at 09:38 PM

avatar image

wolfadex
16 2 4 6

avatar image HailstoneRyan Apr 09 '15 at 10:41 PM

I must be doing something wrong. This leads to all white TGA files :/

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

Anyone found a solution to this yet? I too get white TGA files.

more ▼

answered May 19 '15 at 07:00 PM

avatar image

Roccinio
576 52 56 77

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

In TGA file look at alpha chanel, there is image of font.

more ▼

answered May 18 '16 at 10:17 AM

avatar image

neptunq
1 1

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

I did a drop shadow effect by drawing the same text in black first at a 1 pixel offset. Works pretty well.

more ▼

answered Nov 14 '17 at 06:41 PM

avatar image

Shmoopy1701
26 1 5 4

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

figured out a solution for the white TGA files

more ▼

answered Feb 28 '19 at 10:06 PM

avatar image

Major Mints
1 1 2 6

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

solution to white TGA files:

alt text

more ▼

answered Feb 28 '19 at 10:07 PM

avatar image

Major Mints
1 1 2 6

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

Cheap and easy hack: big font, little font.

more ▼

answered Mar 01 '19 at 12:21 AM

avatar image

Doctor_Kannon
196 4 3 11

(comments are locked)
10|2000 characters needed characters left
Viewable by all users
Your answer
toggle preview:

Up to 5 attachments (including images) can be used with a maximum of 5.2 MB each and 5.2 MB total.

Follow this question

Once you sign in you will be able to subscribe for any updates here

Answers to this question