Project Perfect Mod Forums
:: Home :: Get Hosted :: PPM FAQ :: Forum FAQ :: Privacy Policy :: Search :: Memberlist :: Usergroups :: Register :: Profile :: Log in to check your private messages :: Log in ::


The time now is Sat Apr 13, 2024 12:29 am
All times are UTC + 0
TrueType fonts for OpenTTD!
Moderators: Global Moderators
Post new topic   Reply to topic Page 1 of 1 [1 Post] Mark the topic unread ::  View previous topic :: View next topic
Author Message
Banshee
Supreme Banshee


Also Known As: banshee_revora (Steam)
Joined: 15 Aug 2002
Location: Brazil

PostPosted: Mon Feb 19, 2024 2:43 am    Post subject:  TrueType fonts for OpenTTD!
Subject description: The old magnifying glasses might look odd in a 4K environment!
Reply with quote  Mark this post and the followings unread

Hello everyone! OpenTTD has some interesting dev blogs posted recently by their developers. The most recent one is about TrueType fonts used in the latest OpenTTD 14. For those unaware, OpenTTD is an open-source re-creation of Transport Tycoon Deluxe, a business simulation game where you control a transport company. OpenTTD extends the experience of Transport Tycoon Deluxe with bigger map sizes, customizable artificial intelligence bots, downloadable customizations, ports for several operating systems, support for many languages, etc. Here is what you need to know about the progress on OpenTTD:

Quote:
How do you update a 30-year-old pixel font to make it more suitable for today?


The pixel-art OpenTTD fonts are iconic but were designed for 640x480 CRT monitors rather than today’s 4k monsters.
Without the horizontal smoothing of CRT scanlines, modern pixel-perfect rendering and 2x or 4x upscaling of the old bitmap/sprite-based fonts make the text jagged and hard to



You probably don’t think of OpenTTD coming with fonts, but the normal, tiny, and newspaper fonts are all built into the game.
They’re not a normal font format, though. They’re one little bitmap image (called a sprite) per character.


So, how do you update an old sprite font to make it suitable for today?
The short answer is “make a real font” - a TrueType font.
The smooth splines of TrueType font characters scale with no loss of details and no pixel jaggies, while anti-aliased rendering mimics CRT scanline smoothing.


Making a font that captures the look and feel of a pixel art font is an interesting challenge.
In my misspent youth, I made some fonts from scratch, but designing a font to match the look and feel of a pixel art font is much more constrained.
In some ways, this limits creativity, but designing with constraints can be better.
Scaling up 4x gives you 16 times more pixels to play with and surprising room for expressiveness.


Design process

To keep the pixel art feel, I self-imposed some key design constraints:
Strokes and the extreme points of curves must lie exactly on a pixel grid.
Strokes must be an exact number of pixels wide.
Diagonals must have an integer rise and run (e.g., along one and up 1 pixel, along one and up 2 pixels, etc.).
It is challenging to make nice character shapes within these constraints, but I think the result successfully captures the right style.


There are three main fonts:





The newspaper/serif font was probably the easiest.
The font in the Transport Tycoon Deluxe original graphics is a modern serif/Didone-style with a large x-height, open counters, heavily stressed strokes at a vertical angle, thin slab serifs for vertical strokes, and large modern serifs for horizontal strokes.
It’s quite clear that it was originally designed as a sprite font, and making a TrueType equivalent was a relatively simple process of just drawing the characters to match the character size and style, sticking to the pixel grid.





The small font was the next easiest.
The original small font is 6 pixels tall and all caps - a very constrained space to work within! I took a geometric approach, building up a set of standard curve shapes that could be assembled to build the characters, making sure that the curves correctly filled in/left out corner pixels.
This gave a tiny font that looks very like the original at 1x size but smoothed out while feeling pixel grid-based when larger.





The medium sans-serif font was the hardest.
It’s iconic, visible everywhere, and needs to be very readable.
The original graphics provide quite a distinctive sans-serif bold sprite font, but I needed to scale it up and add detail.
To get inspiration, I used a CRT screen simulator (thanks ShaderGlass!) and even looked for photos of Transport Tycoon or OpenTTD on CRTs - both very informative for choosing character shapes.
The horizontal and vertical strokes were generally easy to imitate, but the diagonals and curves were much harder.
I went through a heavily iterative process: drawing a character on the pixel grid, checking how it rasterized at 1x size with no anti-aliasing, checking where it differed from the original font, revising exact curve shapes, sub-pixel positioning of the ends of strokes, etc., and repeating.
The end result is not your typical sans-serif and has interesting quirks like the very vertical sides of “o” and the square caps on “v and “w”.


The challenges




The last big challenge was fitting everything in the very narrow line height.
The OpenTTD GUI has a very dense text layout, originally designed to fit many informative windows into a tiny screen.
There’s absolutely no space between lines: the bottom of a “y” touches the top of a “T” on the line below.
This means characters with diacritics (accents, etc.) require a special short letter shape, which the diacritic is then placed on.
This was hard for the serif, very hard for the sans-serif, and extremely hard for the small font!
I had to cheat with the small font. It’s a 7-pixel tall font pretending to be 6 pixels tall, but it mostly works.


The opportunities!




Having spent the time to make these fonts, it opened up a range of options for improvements.
OpenTTD has a very international player base, with many players using languages that use the Cyrillic or Greek alphabets.
Having made the Latin alphabet, it was (relatively) easy to make Cyrillic and Greek alphabets, with full character coverage of all the OpenTTD translations.
It was also (relatively) easy to make a monospaced font based on the sans-serif font for the in-game Readmes, Changelogs, etc.


Looking to the future, these fonts are complete for all European languages, but they enable easy future development.
Having dedicated fonts makes it easier to support more languages - we can guarantee a font is available with the necessary characters.
There’s also the possibility to add more currency symbols.
For now, the fonts just support European scripts, but there is the possibility of future support for other alphabetic and abjad scripts.
I’m afraid CJK scripts are probably beyond my ability, though!


In closing

Overall, I’m very happy with the result, and I hope you like the fonts too.
They’re included with OpenTTD in version 14.0 - just make sure they’re enabled in Game Options > Graphics, then toggle new vs. old fonts with the “Use traditional sprite font” button.
The font will look best if you set the interface scaling to a round number, exactly 1x, 2x, etc.





They come built into OpenTTD, but if you really like the fonts, then you can download and install them to use in your local word processor too.
Make your next school/work report OpenTTD-themed!
Grab a copy from the Github OpenTTD-TTF releases.


More about OpenTTD 14

This post is part of the series of dev diaries about big new features coming in OpenTTD 14.
Next week, we’ll see how pathfinding has been improved for one of the transport types.
And, oh buoy, is it a big improvement!


For further information about OpenTTD, visit its Official Website, and Forums. And this is all we can offer for today regarding OpenTTD!


Key Words: #News #OpenTTD 

_________________


Mods, Mods Support, Public Researchs, Map Archives, Tutorials, A Friendly Community and much more. Check it out now!

Back to top
View user's profile Send private message Visit poster's website Skype Account
Display posts from previous:   
Post new topic   Reply to topic Page 1 of 1 [1 Post] Mark the topic unread ::  View previous topic :: View next topic
 
Share on TwitterShare on FacebookShare on Google+Share on DiggShare on RedditShare on PInterestShare on Del.icio.usShare on Stumble Upon
Quick Reply
Username:


If you are visually impaired or cannot otherwise answer the challenges below please contact the Administrator for help.


Write only two of the following words separated by a sharp: Brotherhood, unity, peace! 

 
You cannot post new topics in this forum
You can reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You can download files in this forum


Powered by phpBB © phpBB Group

[ Time: 0.1671s ][ Queries: 11 (0.0077s) ][ Debug on ]