White Shining Rock Logo
White Shining Rock Logo

UI Redo: Part 3

October 25, 2021 | Dukus | 7 Comments

Character Sets

When I was first developing Banished, I was forward looking enough to support multiple languages, but the game only shipped with English text. To support a different language, (which many mods ended up doing) not only were translations required, but a file had to be created to define what characters the game uses. This is because font images contain all the characters and are pre-built to avoid rendering each character from its vector representation.

English is easy. Just enter all the keys on the keyboard, and add few special ones, like the copyright symbol.

CharacterSet resource 
{ 
  String _characters = " 
    `!@#$%^&*()_+-={}|[]\:;'<>?,./©
    01234567890
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqustuvwxyz";
}

This results in a texture that has all the characters baked onto it. All text rendering would use it.

This works fine, until there's a symbolic language, or any language that has thousands of characters. Maintaining the character set for the game is painful. You have to know every character used. Plus there's the possibility for some waste. In english, Uppercase X, Braces, and the Greater Than symbol are probably never used in the game, but the set was prepared to handle any text.

So I changed character sets to automatically generate the needed characters from text used in game. This seems obvious, but since I wasn't handling translations myself, I didn't run into it. So this way, creation of the character set is easy, and if I know what text will use which fonts, this can result in nice small images. For example, the loading screen would probably use a large font and only says 'Loading...' so only those characters are needed.

So now I can generate a language specific image that gets loaded that only contains characters that are needed for each font.

CharacterSet resource
{
    String _characters = "";
    StringTable _stringTables
    [
        UI/Strings/Loading.rsc"
    ]
}

The english version looks like this:


In Spanish 'Loading...' is 'Cargando...' so the localized texture changes to this:

Since I'm soon going to only be supporting newer graphics APIs I can also now support array textures, which makes fonts with thousands of symbols easier to support - rather than trying to fit them in a single image.

That's pretty much it for internal changes to the user interface that the game player never notices. Next time, I'll be talking about how I made the UI look nicer.

Leave a Reply

7 comments on “UI Redo: Part 3”

  1. I'm taking the uptick in blog posts to be a sign that development is progressing pretty well. I love each of them, even small ones like this. Hopefully we'll soon be learning about the new game itself? The graphics we've seen are already quite the tease.

  2. Interesting. How would such system work if the player can freely type into some input field? Aren’t you then back to having to specifying all allowed characters? And even this seems unpractical for languages like Chinese where there is tens of thousands of possible characters.

  3. I love Banish and played for ages - sadly my game became corrupted due to Mods. I can't find where to download the latest version of Banished or any of the Mods. I know this is off topic, but it was the email I received that got me to this point where I could leave a comment.

  4. I watched your blog leading up to the release of banished for ages. It was always exciting and interesting to read through. When the game finally came out it lived up to the hype, and was supersatisfying to play. Seeing your blog post frequency increase feels like the last year before banished released, and that's really exciting again. And. We're all looking forward to your next big game, best of best of luck. Hope it's a big a success as the first!

More Posts

UI Redo: Part 2

October 19, 2021
1 2 3 47
Back to devlog
Back to devlog
© Copyright 2021 Shining Rock Software
Website Design & Branding by Carrboro Creative
menu-circlecross-circle linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram