From 7e802135d5066bd3f3b92c97b7689d1a24cd1e5c Mon Sep 17 00:00:00 2001 From: Hugo Locurcio Date: Tue, 7 Nov 2023 17:26:31 +0100 Subject: [PATCH] Document setting up font outline, shadow and MSDF in Using fonts Screenshots were previously committed but were unused, as I previously forgot to write these sections. --- tutorials/ui/gui_using_fonts.rst | 71 ++++++++++++++++++ .../ui/img/using_fonts_system_font_serif.webp | Bin 2754 -> 0 bytes 2 files changed, 71 insertions(+) delete mode 100644 tutorials/ui/img/using_fonts_system_font_serif.webp diff --git a/tutorials/ui/gui_using_fonts.rst b/tutorials/ui/gui_using_fonts.rst index 44d5c6acf78..814b2ebdb31 100644 --- a/tutorials/ui/gui_using_fonts.rst +++ b/tutorials/ui/gui_using_fonts.rst @@ -156,6 +156,60 @@ property that accepts a Font resource. The texture filter mode can also be set on individual nodes that inherit from CanvasItem by setting :ref:`CanvasItem.texture_filter `. +Font outlines and shadows +------------------------- + +Font outlines and shadows can be used to improve readability when the background +color isn't known in advance. For instance, this is the case for HUD elements +that are drawn over a 2D/3D scene. + +Font outlines are available in most nodes that derive from Control, in addition +to :ref:`class_Label3D`. + +To enable outline for a font on a given node, configure the theme overrides +**Font Outline Color** and **Outline Size** in the inspector. The result should +look like this: + +.. figure:: img/using_fonts_outline_example.webp + :align: center + :alt: Font outline example + + Font outline example + +.. note:: + + If using a font with MSDF rendering, its **MSDF Pixel Range** import option + be set to at least *twice* the value of the outline size for outline + rendering to look correct. Otherwise, the outline may appear to be cut off + earlier than intended. + +Support for font shadows is more limited: they are only available in +:ref:`class_Label` and :ref:`class_RichTextLabel`. Additionally, font shadows +always have a hard edge (but you can reduce their opacity to make them look more +subtle). To enable font shadows on a given node, configure the **Font Shadow +Color**, **Shadow Offset X**, and **Shadow Offset Y** theme overrides in a Label +or RichTextLabel node accordingly: + +.. figure:: img/using_fonts_shadow.webp + :align: center + :alt: Configuring font shadow in a Label node + + Configuring font shadow in a Label node + +The result should look like this: + +.. figure:: img/using_fonts_shadow_example.webp + :align: center + :alt: Font shadow example + + Font shadow example + +.. tip:: + + You can create local overrides to font display in Label nodes by creating a + :ref:`class_LabelSettings` resource that you reuse across Label nodes. This + resource takes priority over :ref:`theme properties `. + Advanced font features ---------------------- @@ -297,6 +351,23 @@ The downsides of MSDF font rendering are: `Google Fonts `__, try downloading the font from the font author's official website instead. +.. figure:: img/using_fonts_rasterized_vs_msdf_comparison.webp + :align: center + :alt: Comparison of font rasterization methods + + Comparison of font rasterization methods. + From top to bottom: rasterized without oversampling, rasterized with oversampling, MSDF + +To enable MSDF rendering for a given font, select it in the FileSystem dock, go +to the Import dock, enable **Multichannel Signed Distance Field**, then click +**Reimport**: + +.. figure:: img/using_fonts_msdf_import_options.webp + :align: center + :alt: Enabling MSDF in the font's import options + + Enabling MSDF in the font's import options + .. _doc_using_fonts_emoji: Using emoji diff --git a/tutorials/ui/img/using_fonts_system_font_serif.webp b/tutorials/ui/img/using_fonts_system_font_serif.webp deleted file mode 100644 index 4d07c3ea213a6f0d5384e3e78638483a0e0a3262..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2754 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 I`)?-#0OdbgCIA2c