How enact you change a 30-12 months inclined pixel font to fabricate it more beautiful for at present time?
The pixel-art OpenTTD fonts are iconic, but had been designed for 640×480 CRT displays reasonably than at present time’s 4k monsters.
Without the horizontal smoothing of CRT scanlines, smartly-liked pixel-most entertaining rendering and 2x or 4x upscaling of the inclined bitmap/sprite-primarily primarily based fonts makes the text jagged and onerous to study.
You presumably don’t imagine OpenTTD coming with fonts, but the well-liked, dinky and newspaper fonts are all constructed into the game.
They’re now now not a popular font format although, they’re one dinky bitmap characterize (known as a sprite) per character.
So how enact you change an inclined sprite font to fabricate it beautiful for at present time?
The short resolution is “fabricate an accurate font” – a TrueType font.
The soft splines of TrueType font characters scale with out a loss of significant aspects and no pixel jaggies, while anti-aliased rendering mimics CRT scanline smoothing.
Making a font which captures the witness and feel of a pixel art font is an appealing enviornment.
In my misspent formative years I made some fonts from scratch, but designing a font to compare the witness and feel of a pixel art font is critical more constrained.
In some suggestions this limits creativity, but designing with constraints would possibly per chance be better.
Scaling up 4x presents you 16 cases more pixels to play with, and frightful room for expressiveness.
Create process
To protect the pixel art feel, I self-imposed some key fabricate constraints:
Strokes and the intense aspects of curves must lie exactly on a pixel grid.
Strokes ought to be an accurate collection of pixels broad.
Diagonals must occupy an integer rise and jog (eg. alongside 1 and up 1 pixel, alongside 1 and up 2 pixels, etc.).
It is far difficult to fabricate nice character shapes within these constraints, but I deem the dwell consequence successfully captures the appropriate trend.
There are three indispensable fonts:
The newspaper/serif font used to be primarily the most entertaining.
The font within the Transport Tycoon Deluxe usual graphics is a latest serif/Didone-trend with colossal x-high, commence counters, heavy stressed out strokes at a vertical angle, thin slab serifs for vertical strokes and colossal smartly-liked serifs for horizontal strokes.
It’s reasonably sure that it used to be within the starting build designed as a sprite font, and making a TrueType equal used to be a rather easy process of appropriate drawing the characters to compare the character dimension and class, sticking to the pixel grid.
The dinky font used to be the subsequent very top.
The distinctive dinky font is 6 pixels gigantic and all caps – a extremely constrained arrangement to work within! I took a geometrical attain, elevate a arrangement of now not recent curve shapes that will additionally very effectively be assembled to fabricate the characters, making sure that the curves precisely crammed in/now now not famed nook pixels.
This gave a dinky font which appears to be very cope with the usual at 1x dimension, but smoothed out while feeling pixel grid-primarily primarily based when greater.
The medium sans-serif font used to be the hardest.
It’s iconic, viewed far and broad, and wishes to be very readable.
The distinctive graphics provide reasonably a particular sans-serif fearless sprite font, but I mandatory to scale it up and add detail.
To gain inspiration I worn a CRT cloak cloak simulator (thanks ShaderGlass!) and even regarded for photos of Transport Tycoon or OpenTTD on CRTs – both very informative for picking character shape.
The horizontal and vertical strokes had been normally easy to imitate, but the diagonals and curves had been critical more difficult.
I went by a heavily iterative process; drawing a persona on the pixel grid, checking how it rasterised at 1x dimension with out a anti-aliasing, checking where it differed from the usual font, revising accurate curve shapes, sub-pixel positioning of the ends of strokes etc., and repeating.
The dwell consequence is now now not your smartly-liked sans-serif, and has entertaining quirks cope with the very vertical aspects of “o” and the square caps on “v and “w”.
The challenges
The last nice enviornment used to be becoming all the pieces within the very slim line high.
The OpenTTD GUI has a extremely dense text layout, within the starting build designed to compare many informative dwelling windows into a dinky cloak cloak.
There’s fully no arrangement between traces: the bottom of a “y” touches the pause of a “T” on the street below.
This attain characters with diacritics (accents, etc.) require a explicit short letter shape, which the diacritic is then positioned on.
This used to be onerous for the serif, very onerous for the sans-serif, and intensely onerous for the dinky font!
I needed to cheat with the dinky font, it’s a 7-pixel gigantic font pretending to be 6 pixels gigantic, but largely works.
The alternatives!
Having spent the time to fabricate these fonts it unfolded a unfold of choices for enhancements.
OpenTTD has a extremely worldwide player imperfect, with many gamers the use of languages which use the Cyrillic or Greek alphabets.
Having made the Latin alphabet, it used to be (rather) easy to fabricate Cyrillic and Greek alphabets, with stout character coverage of the total OpenTTD translations.
It used to be additionally (rather) easy to fabricate a monospaced font primarily primarily based on the sans-serif font, for the in-game Readmes, Changelogs, etc.
Taking a study to the lengthy jog, these fonts are total for all European languages, but it permits easy future construction.
Having devoted fonts makes it much less difficult to toughen more languages – we can guarantee a font is readily accessible with the mandatory characters.
There’s additionally the chance to add more currency symbols.
For now, the fonts appropriate toughen European scripts, but there would possibly per chance be the chance of future toughen for varied alphabetic and abjad scripts.
I’m skittish CJK scripts are presumably beyond my potential although!
In closing
Total, I’m very overjoyed with the dwell consequence and I am hoping you cope with the fonts too.
They’re included with OpenTTD in version 14.0 – appropriate be sure they’re enabled in Sport Solutions > Graphics, then toggle new vs. inclined fonts with the “Employ inclined sprite font” button.
The font will witness ultimate can occupy to you arrangement the interface scaling to a spherical number, exactly 1x, 2x etc.
They advance constructed into OpenTTD, but can occupy to you primarily cope with the fonts then you positively can download and set up them to make use of for your local note processor too.
Produce your subsequent faculty/work tale OpenTTD-themed!
Spend a duplicate from the Github OpenTTD-TTF releases.
Extra about OpenTTD 14
This submit is share of the sequence of dev diaries about nice new aspects coming in OpenTTD 14.
Subsequent week, we’ll search how pathfinding has been improved for one amongst the transport kinds.
And, oh buoy, is it a pleasant enchancment!
