Capabilities Question

[KinsonDigital]

Hello!!

I am doing some research and POC stuff for something that I want to do and I came across this library.

What I am doing is building a cross-platform game engine that uses OpenTK(OpenGL) under the hood. I need to render text to the screen and was hoping this library could help me out.

Questions:

1. Does this library load up TTF or other font files for me to somehow consume so I can render the text to the screen?
2. I assume that if it does load up fonts, they are in an image format so any rendering system could render it?
3. If the library does load font files, does it give back information about the font as well such as spacing, bearing, and advancement? Refer to the image below.

NOTE: This is pulled from LearnOpenGL

Thanks!!

[tocsoft]

We don't generally expose all the font metrics as this library wasn't designed to be a general purpose font loader.

What it does do however is perform text layout and rendering via the IColorGlyphRenderer/IGlyphRenderer interfaces (if you are using the IColorGlyphRenderer you will get support for emoji etc too). By implementing an IGlyphRenderer you will receive a set of path operations usable to render the text and enough extra metadata to support glyph caching etc too (example of which can be found in our implementation over in our ImageSharp.Drawing repo https://github.com/SixLabors/ImageSharp.Drawing/blob/c29e5de8bb1ed0afd11d71cb75ede5fd4bee0644/src/ImageSharp.Drawing/Processing/Processors/Text/DrawTextProcessor%7BTPixel%7D.cs#L180).

Basically if you are interested in laying out all the glyphs yourself this libraries public API probably isn't the best fit for you and a fork/port might be better, but if you are just trying to load a ttf, and have it draw to some surface you control (and you can convert from path/vectors on your target platform) then you should be able to get this working well enough.

All that said if you are interested in something that supports fully rendering to a raw pixel data then you might want to look at ImageSharp.Drawing directly. Note ImageSharp.Drawing only has a general purpose renderer which isn't optimised for screen rendering but could be used as inspiration (improving the caching so that its longer lived than a single call for example).

[KinsonDigital]

Thanks!! Great info.

What I was hoping to do is render a set of characters (symbols, letters, numbers) in a grid pattern to a png file which would essentially be a texture atlas. I could then use this texture atlas in my game engine/framework for rendering text.

If I do use the IGlyphRenderer, could I get consistent renders that are scaled appropriately depending on the user's monitor setup?

My goal is to have an equal width vs height PNG file that has all of the characters I want rendered in a grid to that PNG file.

I see that the TextOptions and RenderOption types have DPI properties and parameters. I would assume that I need to put in the DPI that the monitor is running at for that to work to get my consistency?

So far I have this result:

Here is the code that generated this:

var fonts = new FontCollection();
var glyphs = new[] { 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z' };
var dpi = 72;

var glyphRects = new Dictionary<char, FontRectangle>();

var family = fonts.Install(_fontFilepath);
var font = family.CreateFont(22, FontStyle.Regular);

var renderOptions = new RendererOptions(font, dpi: dpi)
{
    ApplyKerning = true,
};

foreach (var glyph in glyphs)
{
    glyphRects.Add(glyph, TextMeasurer.Measure(glyph.ToString(), renderOptions));
}

var textGrfxOptions = new TextGraphicsOptions()
{
    TextOptions = new TextOptions()
    {
        ApplyKerning = true,
        TabWidth = 4,
        WrapTextWidth = 0,
        HorizontalAlignment = HorizontalAlignment.Left,
        DpiX = dpi,
        DpiY = dpi,
    },
};

var image = Image.Load($@"{_basePath}RenderSurface.png");

var firstIteration = true;
var xPos = 0f;
FontRectangle previousGlyphRect = default;

foreach (var glyphRect in glyphRects)
{
    if (firstIteration is false)
    {
        xPos += previousGlyphRect.Width;
    }

    image.Mutate(context => context.DrawText(textGrfxOptions, glyphRect.Key.ToString(), font, Color.Black, new PointF(xPos, 0)));

    firstIteration = false;
    previousGlyphRect = glyphRect.Value;
}

[KinsonDigital]

FYI

I was trying to get the SizeOfEm value from the font instance and I am getting a value of 2048. I was hoping that I could convert the EM value to pixels which would help me with figuring out the placement of the render in the texture atlas.

But no matter what codePoint value I send to the Font.GetGlyph() method, and no matter what size value I send to the FontFamily.CreateFont() method, the FontInstance values remain the same.

What is going on here?

[KinsonDigital]

Update:

So I just dug through the source code a bit and figured out that when a FontInstance is created, it pulls the header information from the font file and uses the value from the header named unitsPerEm. This means that the size of the em depends on the font file you load.

It also seems that the range is from 16 to 16384. I don't know what the meaning of units is for unitsPerEm, but I have a feeling that it is not something I can rely on for calculating pixels from EM.

Am I on the right path and thought process here?

Thanks!!