Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom fonts? #10

Open
8-BIT-DEV opened this issue Dec 15, 2020 · 14 comments
Open

Custom fonts? #10

8-BIT-DEV opened this issue Dec 15, 2020 · 14 comments

Comments

@8-BIT-DEV
Copy link

is or will there be any way to use custom fonts?

@vallentin
Copy link
Owner

vallentin commented Dec 15, 2020

Assuming the user would handle loading image data. Then it would definitely be possible to implement custom fonts in the form of bitmap fonts. The default (only) font, is actually a bitmap font baked into the header.

@8-BIT-DEV
Copy link
Author

how would i go about creating one of these bitmap fonts?

@8-BIT-DEV
Copy link
Author

Assuming the user would handle loading image data. Then it would definitely be possible to implement custom fonts in the form of bitmap fonts. The default (only) font, is actually a bitmap font baked into the header.

instead could you point me to where the font is baked in to the header?

@vallentin
Copy link
Owner

The baked in font data, is packed into _gltFontGlyphRects which stores the rectangle information of each glyph, and _gltFontGlyphData which stores the pixels of each font in relation to the rectangle bounds. By packed I mean it quite literally, as bit packing is used minimize the amount of data. For instance, the pixels are only 2-bit, i.e. 00 is transparent, 01 is white, 10 is black.

You can see all the logic for unpacking the data, along with creating the font in the subsequent _gltCreateText2DFontTexture() function. However, if we were to introduce a new function, e.g. gltCreateFont(image_data, glyph_rects), then the logic needed to implement that function is essentially already found in _gltCreateText2DFontTexture() if you ignore all the unpacking.

If you're able to and want to give a go at implementing it, then I'd happily mentor.

how would i go about creating one of these bitmap fonts?

Essentially, you'd be able to just draw a font in any image editing application. However, you wouldn't be able to load it (easily), until that functionality is implemented of course.

Then when you have the image data, you'd essentially need to define a list of glyphs (_GLTglyph). Which include the char it represents, the bounds on the image, the bounds translated into UVs and a boolean drawable representing if it's a drawable glyph, i.e. a TAB is a valid glyph, but in the baked font it draws nothing of course.

glText/gltext.h

Lines 173 to 183 in 8200fa7

typedef struct _GLTglyph {
char c;
GLint x, y;
GLint w, h;
GLfloat u1, v1;
GLfloat u2, v2;
GLboolean drawable;
} _GLTglyph;

@8-BIT-DEV
Copy link
Author

The baked in font data, is packed into _gltFontGlyphRects which stores the rectangle information of each glyph, and _gltFontGlyphData which stores the pixels of each font in relation to the rectangle bounds. By packed I mean it quite literally, as bit packing is used minimize the amount of data. For instance, the pixels are only 2-bit, i.e. 00 is transparent, 01 is white, 10 is black.

You can see all the logic for unpacking the data, along with creating the font in the subsequent _gltCreateText2DFontTexture() function. However, if we were to introduce a new function, e.g. gltCreateFont(image_data, glyph_rects), then the logic needed to implement that function is essentially already found in _gltCreateText2DFontTexture() if you ignore all the unpacking.

If you're able to and want to give a go at implementing it, then I'd happily mentor.

how would i go about creating one of these bitmap fonts?

Essentially, you'd be able to just draw a font in any image editing application. However, you wouldn't be able to load it (easily), until that functionality is implemented of course.

Then when you have the image data, you'd essentially need to define a list of glyphs (_GLTglyph). Which include the char it represents, the bounds on the image, the bounds translated into UVs and a boolean drawable representing if it's a drawable glyph, i.e. a TAB is a valid glyph, but in the baked font it draws nothing of course.

glText/gltext.h

Lines 173 to 183 in 8200fa7

typedef struct _GLTglyph {
char c;
GLint x, y;
GLint w, h;
GLfloat u1, v1;
GLfloat u2, v2;
GLboolean drawable;
} _GLTglyph;

as one more question in the struct _GLTglyph does x and y represent pixels offset or some other form of offset? same with w and h

@vallentin
Copy link
Owner

as one more question in the struct _GLTglyph does x and y represent pixels offset or some other form of offset? same with w and h

Yes, the x and y is the pixel position in the image data, and the w(idth) and h(eight) is the size in pixels.

So knowing the glyph rect and the image size, then calculating UVs, is of course as follows:

u1 = x / imageWidth
v1 = y / imageHeight

u2 = u1 + (w / imageWidth)
v2 = v1 + (h / imageHeight)

@8-BIT-DEV
Copy link
Author

the only hard part seems to be loading the image data isn't it

@8-BIT-DEV
Copy link
Author

btw how could I say convert a TTF to a bitmap one?

@vallentin
Copy link
Owner

the only hard part seems to be loading the image data isn't it

If we take _gltCreateText2DFontTexture() as a reference again. Then the new e.g. gltCreateFont() function would start at line 1161, as that and forward is essentially the logic it needs. As gltCreateFont() would need to receive image_data and glyphs and thus all the previous logic can be extracted immediately from those.

how could I say convert a TTF to a bitmap one?

There's many tools for that, if you just search "TTF to bitmap font". I've previously heard about Bitmap Font Generator, but I don't recall if I've used it.

@8-BIT-DEV
Copy link
Author

8-BIT-DEV commented Dec 15, 2020

will this work on Linux?
Edit: the ttf to bitmap

@vallentin
Copy link
Owner

vallentin commented Dec 15, 2020

Hmm, doesn't seem so, or at least not in a straight forward manner. I just looked here on GitHub, and I found fontbm, which mentions Linux. But once again, I haven't used it, I literally just found it.

@8-BIT-DEV
Copy link
Author

I'll have to look into that later

@vallentin
Copy link
Owner

I fixed the "fontbm" link.

@warmwaffles
Copy link

Would definitely be cool to be able to specify multiple baked fonts.

Something like

gltUseFont(text, blob, blob_size, blob_glyph_count)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants