Typography

Functions
void	doodle::draw_text (const std::wstring &str, double x, double y) noexcept
	Draws wide character based text to the screen. More...
void	doodle::draw_text (const std::string &str, double x, double y) noexcept
	Draws text to the screen. More...
int	doodle::create_distance_field_bitmap_font (const std::filesystem::path &fnt_filepath) noexcept
	Given a file path to a *.fnt file it will create a distance field bitmap font. More...
void	doodle::set_font (int font_id) noexcept
	Changes the font type to be used when drawing text. More...
void	doodle::set_font_size (double font_size) noexcept
	Sets the current font size. This size will be used in all subsequent calls to the draw_text() function. More...
void	doodle::set_font_fade_out_interval (double inside_distance, double outside_distance) noexcept
	Defines the distance interval to draw font characters and how to fade them out from opaque to translucent. More...
void	doodle::set_font_backdrop_fade_out_interval (double inside_distance, double outside_distance) noexcept
	Defines the distance interval to draw the backdrop of font characters and how to fade them out from opaque to translucent. More...
void	doodle::set_font_backdrop_offset (double texel_x, double texel_y) noexcept
	Repositions the backdrop of the font characters. Useful for creating a custom drop shadow effect. More...

Variables
constexpr int	doodle::DEFAULT_FONT_ID = 0
	Holds the ID value for the provided font that comes with doodle. More...

Detailed Description

• Functions for drawing text using Distance Field Text Rendering. You can generate a Distance Field Bitmap Font using the Hiero tool Here is a video that explains Distance Field Text Rendering and how to generate the font with Hiero.

Function Documentation

create_distance_field_bitmap_font()

int doodle::create_distance_field_bitmap_font ( const std::filesystem::path &  fnt_filepath )

noexcept

Given a file path to a *.fnt file it will create a distance field bitmap font.

It will parse that file to get all of the Bitmap information and create GPU texture instances of all the image files listed. It assumes that the image files are in the same folder directory as the provided *.fnt file. It will return a positive value on success and a negative value if it failed to parse the *.fnt file for whatever reason.

The default font, provided with doodle has a font ID of \(0\) and is specified by doodle::DEFAULT_FONT_ID.

The original bitmap font file definition comes from AngleCode's BMFont. However BMFont does not generate distance field bitmap fonts, so the suggested tool to use is the Hiero tool. Hiero can create distance field bitmap fonts and save it in the AngelCode file format. Here is a video that explains Distance Field Text Rendering and how to generate the font with Hiero.

Parameters

fnt_filepath

Path to a fnt file in the BMFont text file format.

Returns

ID for the created font. Use this ID to actively select and use this font.

The following example built the distance field bitmap font with the Hiero tool. Here is the Hiero Setting File configured to build with the Gaegu Font. This generated the relevant Gaegu.fnt file and it's partner Gaegu.png file.

#include <doodle/doodle.hpp>
#include <string>
using namespace doodle;
int main(void)
{
    create_window(480, 320);
    const int fontID = create_distance_field_bitmap_font("Gaegu.fnt");
    set_font(fontID);
    set_font_size(70);
    set_frame_of_reference(FrameOfReference::RightHanded_OriginBottomLeft);
    set_font_fade_out_interval(0.45, 0.55);
    set_font_backdrop_fade_out_interval(0.6, 1.0);
    constexpr double    x           = 60;
    const double        y           = Height / 2.0 - 50;
    const std::wstring helloString = LR"(안녕하세요!)";
    while (!is_window_closed())
    {
        update_window();
        clear_background(HexColor{0xFEF7F0FF});
        set_outline_color(HexColor{0x606783FF});
        set_fill_color(HexColor{0x6BCED8FF});
        draw_text(helloString, x, y);
    }
    return 0;
}

draw_text() [1/2]

void doodle::draw_text ( const std::string &  str, double  x, double  y  )

noexcept

Draws text to the screen.

A default font will be used unless a font is set with the set_font() function and a default size will be used unless a font is set with set_font_size(). Change the color of the text with the set_fill_color() function. Change the color of the backdrop with the set_outline_color() function.

Parameters

str	the text to be displayed
x	x-coordinate of text
y	y-coordinate of text

#include <doodle/doodle.hpp>
#include <string>
using namespace doodle;
int main(void)
{
    create_window(480, 320);
    set_frame_of_reference(FrameOfReference::RightHanded_OriginBottomLeft);
    constexpr double   x           = 100;
    double             y           = 0;
    constexpr double   upDistance  = 80;
    const std::string helloString = R"(Hello!)";
    while (!is_window_closed())
    {
        update_window();
        y = -20;
        clear_background(HexColor{0xD7A586ff});
        set_outline_color(255);
        set_fill_color(0);
        draw_text(helloString, x, y += upDistance);
        set_outline_color(0, 102, 153);
        set_fill_color(255);
        draw_text(helloString, x, y += upDistance);
        set_outline_color(255, 151);
        set_fill_color(0, 102, 153, 151);
        draw_text(helloString, x, y += upDistance);
    }
    return 0;
}

draw_text() [2/2]

void doodle::draw_text ( const std::wstring &  str, double  x, double  y  )

noexcept

Draws wide character based text to the screen.

Using wide characters allows us to draw characters not just for the English language but for other languages like Korean too.

A default font will be used unless a font is set with the set_font() function and a default size will be used unless a font is set with set_font_size(). Change the color of the text with the set_fill_color() function. Change the color of the backdrop with the set_outline_color() function.

Parameters

str	the text to be displayed
x	x-coordinate of text
y	y-coordinate of text

The following example built the distance field bitmap font with the Hiero tool. Here is the Hiero Setting File configured to build with the Gaegu Font. This generated the relevant Gaegu.fnt file and it's partner Gaegu.png file.

#include <doodle/doodle.hpp>
#include <string>
using namespace doodle;
int main(void)
{
    create_window(480, 320);
    const int fontID = create_distance_field_bitmap_font("Gaegu.fnt");
    set_font(fontID);
    set_font_size(48);
    set_frame_of_reference(FrameOfReference::RightHanded_OriginBottomLeft);
    set_font_fade_out_interval(0.45, 0.55);
    set_font_backdrop_fade_out_interval(0.6, 1.0);
    constexpr double    x = 100;
    double              y{};
    constexpr double    upDistance  = 80;
    const std::wstring helloString = LR"(안녕하세요!)";
    while (!is_window_closed())
    {
        update_window();
        y = -20;
        clear_background(HexColor{0xD7A586ff});
        set_outline_color(255);
        set_fill_color(0);
        draw_text(helloString, x, y += upDistance);
        set_outline_color(0, 102, 153);
        set_fill_color(255);
        draw_text(helloString, x, y += upDistance);
        set_outline_color(255, 151);
        set_fill_color(0, 102, 153, 151);
        draw_text(helloString, x, y += upDistance);
    }
    return 0;
}

set_font()

void doodle::set_font ( int  font_id )

noexcept

Changes the font type to be used when drawing text.

The default font provided with doodle is defined by doodle::DEFAULT_FONT_ID.

Parameters

font_id

ID of a font that was previsouly created with create_distance_field_bitmap_font().

The following example built the distance field bitmap font with the Hiero tool. Here is the Hiero Setting File configured to build with the Gaegu Font. This generated the relevant Gaegu.fnt file and it's partner Gaegu.png file.

#include <doodle/doodle.hpp>
using namespace doodle;
int main(void)
{
    create_window(480, 320);
    const int GaeguFontID = create_distance_field_bitmap_font("Gaegu.fnt");
 
    set_font_size(54);
    set_frame_of_reference(FrameOfReference::RightHanded_OriginBottomLeft);
 
    constexpr double x = 100;
    while (!is_window_closed())
    {
        update_window();
        clear_background(HexColor{0xFEF7F0FF});
        double y = Height / 2.0;
 
        set_font(GaeguFontID);
        set_outline_color(HexColor{0x313846ff});
        set_fill_color(HexColor{0x6BCED8FF});
        set_font_fade_out_interval(0.45, 0.55);
        set_font_backdrop_fade_out_interval(0.6, 1.0);
        draw_text(LR"(안녕하세요!)", x, y);
 
        y -= 70;
        set_font(DEFAULT_FONT_ID);
        set_outline_color(HexColor{0x606783FF});
        set_fill_color(HexColor{0x6BCED8FF});
        set_font_fade_out_interval(0.48, 0.55);
        set_font_backdrop_fade_out_interval(0.55, 0.9);
        draw_text("\tHello!", x, y);
    }
    return 0;
}

set_font_backdrop_fade_out_interval()

void doodle::set_font_backdrop_fade_out_interval ( double  inside_distance, double  outside_distance  )

noexcept

Defines the distance interval to draw the backdrop of font characters and how to fade them out from opaque to translucent.

The inside_distance defines the distance that is considered completely inside a font character. The outside_distance defines the distance that is considered completely outside a font character. The distance value that are in between theses two values will be smoothed out. It is the same logic as set_font_fade_out_interval(), however this will draw the character based off of the outline color and will be behind the fill colored part.

The distance is measured in a normalized space, so must be between [0,1]. Values outside of this will be clamped. If the given outside_distance is less than the inside_distance it will be replaced to match the inside_distance.

In this example the inside_distance is 0.5 and the outside_distance is 0.6. Anything inside 0.5 is considered completely inside the letter and will be colored opaquely. Anything outside 0.6 is considered completely outside and will be colored transparently.

Parameters

inside_distance	The normalized distance the defines what is completely inside a character font for the backdrop. Clamped to [0,1].
outside_distance	The normalized distance the defines what is completely outside a character font for the backdrop. Clamped to [0,1].

#include <cmath>
#include <doodle/doodle.hpp>
using namespace doodle;
int main(void)
{
    create_window(480, 320);
    const auto oscillate = [](double t) { return (std::sin(t) * 0.5 + 0.5); };
    set_font_fade_out_interval(0.5, 0.6);
    while (!is_window_closed())
    {
        update_window();
        clear_background(220);
        // cycle between 0.4-0.7 for inside distance
        const double inside_distance = 0.4 + 0.3 * oscillate(ElapsedTime);
        // oscillate within the remaining distance
        const double completely_outside_distance = inside_distance +
                                       (1 - inside_distance) * oscillate(ElapsedTime * 2);
        set_font_backdrop_fade_out_interval(inside_distance, completely_outside_distance);
        draw_text("doodle", -Width / 4.0, -Height / 8.0);
    }
    return 0;
}

set_font_backdrop_offset()

void doodle::set_font_backdrop_offset ( double  texel_x, double  texel_y  )

noexcept

Repositions the backdrop of the font characters. Useful for creating a custom drop shadow effect.

The distance to offset the backdrop is measured in texels relative to the image defining the Bitmap Font. The texel coordinate system is left handed where the origin is the very top left and positive y goes down.

Parameters

texel_x	How far to horizontally offset the backdrop character in texels
texel_y	How far to vertically offset the backdrop character in texels

#include <cmath>
#include <doodle/doodle.hpp>
using namespace doodle;
int main(void)
{
    create_window(480, 320);
    const auto oscillate = [](double t) { return (std::sin(t) * 0.5 + 0.5); };
 
    while (!is_window_closed())
    {
        update_window();
        clear_background(220);
        const double texels_length = 1.0 + 2.0 * oscillate(ElapsedTime * 2.0);
        set_font_backdrop_offset(std::sin(ElapsedTime * 4) * texels_length, std::cos(ElapsedTime * 4) *
                                                                                         texels_length);
        draw_text("doodle", -Width / 4.0, -Height / 8.0);
    }
    return 0;
}

set_font_fade_out_interval()

void doodle::set_font_fade_out_interval ( double  inside_distance, double  outside_distance  )

noexcept

Defines the distance interval to draw font characters and how to fade them out from opaque to translucent.

The inside_distance defines the distance that is considered completely inside a font character. The outside_distance defines the distance that is considered completely outside a font character. The distance value that are in between theses two values will be smoothed out.

The distance is measured in a normalized space, so must be between [0,1]. Values outside of this will be clamped. If the given outside_distance is less than the inside_distance it will be replaced to match the inside_distance.

In this example the inside_distance is 0.5 and the outside_distance is 0.6. Anything inside 0.5 is considered completely inside the letter and will be colored opaquely. Anything outside 0.6 is considered completely outside and will be colored transparently.

Parameters

inside_distance	The normalized distance the defines what is completely inside a character font. Clamped to [0,1].
outside_distance	The normalized distance the defines what is completely outside a character font. Clamped to [0,1].

#include <cmath>
#include <doodle/doodle.hpp>
using namespace doodle;
int main(void)
{
    create_window(480, 320);
    no_outline();
    const auto oscillate = [](double t) { return (std::sin(t) * 0.5 + 0.5); };
    while (!is_window_closed())
    {
        update_window();
        clear_background(0);
 
        double inside_distance             = oscillate(ElapsedTime) * 0.7;
        double completely_outside_distance = 1.0;
        set_font_fade_out_interval(inside_distance, completely_outside_distance);
        draw_text("doodle", -Width / 4.0, 3.0 * Height / 16.0);
 
        inside_distance             = 0.5;
        completely_outside_distance = inside_distance + 0.5 * oscillate(ElapsedTime * 2);
        set_font_fade_out_interval(inside_distance, completely_outside_distance);
        draw_text("doodle", -Width / 4.0, -Height / 8.0);
 
 
        inside_distance             = oscillate(ElapsedTime);
        completely_outside_distance = inside_distance + (1 - inside_distance) * oscillate(ElapsedTime * 2);
        set_font_fade_out_interval(inside_distance, completely_outside_distance);
        draw_text("doodle", -Width / 4.0, -3.0 * Height / 8.0);
    }
    return 0;
}

set_font_size()

void doodle::set_font_size ( double  font_size )

noexcept

Sets the current font size. This size will be used in all subsequent calls to the draw_text() function.

Parameters

font_size

the desired font size

#include <cmath>
#include <doodle/doodle.hpp>
using namespace doodle;
int main(void)
{
    create_window(480, 320);
    while (!is_window_closed())
    {
        update_window();
        clear_background(220);
        set_font_size(12.0 + 68.0 * (std::sin(ElapsedTime) * 0.5 + 0.5));
        draw_text("doodle", -Width / 4.0, -Height / 8.0);
    }
    return 0;
}

Variable Documentation

DEFAULT_FONT_ID

constexpr int doodle::DEFAULT_FONT_ID = 0

constexpr

Holds the ID value for the provided font that comes with doodle.

See also

set_font()

Definition at line 1257 of file drawing.hpp.