Sprite Font Engine

[tulamide]

sprite_font_engine.png (14.9 KiB) Viewed 27622 times

Here's a very, very early version of what I think will contribute greatly to proper GUI design. Currently you have to use a TrueType or OpenType font and can only hope that the user will have that font installed.
Most of the time you only have some labels which don't change, so you can substitute by using a bitmap of that labels. But what about changing displays, like the value of a knob or a rolling LED or something like that?

Sprite Font Engine aims to be a proper bitmapped font replacement for the system fonts. Whatever font you use with SFE, it will always be accessible (it is loaded with the dll or exe). You can rely on it.

It works by dividing each char of a font into sprites that are than arranged on a sheet. This is saved as a bitmap, and loaded into the engine. Next you provide the width and height of the cells and a list of all chars present in the font, in order of appearance.

EDIT: Each char needs at least a 1-pixel-full-transparent-border around it.

Example:
Your bitmap is structured as such
A B C D
E F G H
I J

Then the character list string must read "ABCDEFGHIJ" (fun fact: although I'm german, I just called the letters in english in my head while writing them down)

I don't have enough time to create a proper full ASCII set font. Currently the example fonts only contain the upper case letters needed to write the word "FLOWSTONE". I'm seeking for someone to create a font (A-Z, a-z, 0-9, the most used special signs, and if possible the german umlauts äÄöÖüÜ). If you are willing to help, just make sure you're not just copying/converting an existing font, but really create an original that can be bundled with SFE without license issues. Aim for a font that can be used as a general workhorse, no fancy flower letters and the like

I hope you'll test this intensively, report issues and make feature requests. But before you do so, read the following.

Current restrictions:
- Monospace only (that means, each char takes the same cell size as each other char, regardless of its actual size). Proportional fonts are already on the to-do-list.
- The scale factor currently is based on the cell size. I am thinking of changing it to absolute values, so that you can use Flowstone's grid units. For example, scale 2 would then scale the font so that the font height is exactly two grid squares high. This could be very difficult with more complex fonts, so I am not sure about it. What do you think?

Upcoming features:
- Individual char kerning
- Flexible line height adjustments
- Wrap mode
- module chaining (to have multiple displays with different text using the same sprite font sheet, to save on RAM)

I will post this and the following versions here until it is at a usable, not too buggy state. Then I'll transfer it to Flowstone GURU.

[Exo]

Thanks tulamide, very interesting!

Yes fonts can be a problem, this is a good solution. I cannot help with fonts though this is not my thing hopefully some of the other graphics guys would like to get involved

[Nubeat7]

thnx tulamide, this is great idea!

i didn't had the time to study it, but i think it would be a good idea to add a "font spritesheet maker",
something that makes a bitmap from text..

i did a fast basic sketch, but couldn't make it work properly, the problems is that the ruby modules get processing overload when changing the font (maybe i didn't use the create bitmap primitive right?)

features to add would be :
- counting cells (count chars)
- output cell size (which should be simple after you know the nr of cells)
.
.
.

sadly i'm very limited in time atm but maybe its a interesting idea to follow for you or anyone

[tulamide]

i did a fast basic sketch, but couldn't make it work properly, the problems is that the ruby modules get processing overload when changing the font (maybe i didn't use the create bitmap primitive right?)

Thanks a lot, Nubeat7! My version does not have setViewSize, but I could easily see from the code, where you are heading to. I think it can be done even without setting the viewsize, and it would be a nice tool to add to SFE. I will work on it, when SFE is in a more usable state.

To all: Don't be shy, I don't expect a masterpiece. If you think you can shuffle some pixels in paint to get a few letters, please do so. The more chars a font has the better I can test for possible issues

EDIT: Oh, and please tell me what you think about the scale issue. Can it be scaled like it is now, or would it be better to link the scale value to Flowstone's grid units (even if its more work)?

[billv]

This is really interesting tulamide...looking foward to the end result...

If you think you can shuffle some pixels in paint to get a few letters, please do so

A few weeks ago, i used the Grid module i made to try that "LCD readout that does text" idea..
Paint in a letter, save the array..Worked fine so i let it go to chase other stuff...easy to do...
Would this be helpfull at all for what your doing..?
Do you need data or bitmap's of each char..?
Just finishing my latest project ATM....the "LCD readout that does text" idea is probably next...
Would be happy to knock over some of the simple stuff and let Gurus focus on other parts...
Let me know if i can help....
If not...all good...got heaps of stuff on backburners waiting..

[tulamide]

Would this be helpfull at all for what your doing..?
Do you need data or bitmap's of each char..?

YES! If you could do a little font this way, that would be awesome! I don't care if a font is aliased.

The optimal I would get from you is one bitmap that contains all the chars, arranged on an even grid, so that each char fits within a grid cell and all grid cells have the same size. Here's the png from one of the fonts in SFE:

font_33_27.png (7.22 KiB) Viewed 27516 times

Note, that the chars are drawn on a 100% transparent background and that they all are surrounded by a 1-pixel transparent border per cell.

That's the absolute minimum requirement. It might be better to do a 2-pixel transparent border, because stretching/shrinking graphics in Ruby involves an interpolation algorithm that seems to use a 9x9 matrix even on the edges, which can result in colors from the next cell being calculated for the current one, e.g. you see small lines in between chars.

The size of each cell here is 33x27 pixel. But you would select a cell size suitable for your font (a size that fits your widest and highest chars + the transparent border). Also, I only arranged in one line (8x1 cells), but you can arrange as you see fit, just fill each line completely before starting the next one. Here examples of right and wrong arrangements.

Correct:
A B C D E F G H I J K L M N O P Q (17x1 cells)

A B C D E F G H I
K L M N O P Q (9x2 cells)

A B C
C E F
G H I
J K L
M N O
P Q (3x6 cells)

Wrong:
A B C D E F G
H I J K L M N O P Q

A B C
D E F G
H I J K L
M N O P Q

You may order the chars as you like. "AGBWED" is just as good as "ABDEGW". Just create a text file that contains the order (just the order, not the arrangement) of the chars, together with the cell size, e.g.
24x32
ABCDEFG

You can send the png and txt via pm (or pm me for my email address, if you prefer). If you don't see why the font shouldn't be spreaded around the net, you can also just post it here, of course.

Any more questions? I'd be happy to answer them
Thank you!

[billv]

Thanks for explaining it all for me tulamide.
My first thought was using Knobman might be good .. maybe create whole strip in one go..

[RJHollins]

KnobMan.

hmm ... that might be the ticket, as I think you can call on any system font and place as a text graphic ?!?

I'm not absolutely sure ... be he seems reasonable

[billv]

KnobMan.
hmm ... that might be the ticket,

The knobman range dosn't accept letters...only numbers it seems....(unless I'm getting it wrong..)
Fusion 2.5 (MMF2)has a brilliant pixel editor, and export stitched bitmap either horizontal or vertical...
Gave it a quick rough test with 3 letters....seems ok..
@tulamide..
Do you mind if I avoid PM?. Don't mind when it's a "commercial project", but otherwise prefer to
work from here (No upload for fsm's and pics via PM... )
here's my quick test bitmap done in Fusion 2.5.
Does it meet minimum requirement..?
Can I proceed..?
(PS: remember is "quick rough test"...I'm a pixel "out" here and there on the draw..
fsm.removed

[tulamide]

KnobMan.
hmm ... that might be the ticket,

The knobman range dosn't accept letters...only numbers it seems....(unless I'm getting it wrong..)
Fusion 2.5 (MMF2)has a brilliant pixel editor, and export stitched bitmap either horizontal or vertical...
Gave it a quick rough test with 3 letters....seems ok..
@tulamide..
Do you mind if I avoid PM?. Don't mind when it's a "commercial project", but otherwise prefer to
work from here (No upload for fsm's and pics via PM... )
here's my quick test bitmap done in Fusion 2.5.
Does it meet minimum requirement..?
Can I proceed..?
(PS: remember is "quick rough test"...I'm a pixel "out" here and there on the draw..

The attachment font-bitmap_test_v1.fsm is no longer available

Why should I mind avoiding pm? It was just to protect your work, for me it doesn't change anything if you post it here (like I already said)
And no, SFE is no commercial project, it will be free, because I would love to see some new GUIs that look really good. And currently among us I often see Arial being used - that's so boring, and also doesn't always fit the rest of the GUI theme.

The bitmap does meet the requirements. The properties were not correct, though. Maybe it was on purpose, but the cell size was set to 100x100, while the real size was 32x32 (yes, I was pixel counting to make sure xD ). I made a few corrections, so that you could keep on working with this fsm, given you don't change the size anymore. Else you'd need to reset the cell size in the properties to fit the size used in the bitmap again.