Wee Free Studio
  • Home
  • Games
    • Powargrid
    • Key, Shovel, Treasure
  • Blog
  • Asset Store
    • Bug Reporter
    • Guided Missiles
  • Press
  • Contact

Using icon fonts for game UI

12/27/2018

0 Comments

 
On my to do list there is a bunch of bullet points guiding me towards something that resembles a game, even if it is not even a sliver of what we hope to end up with.
However, if I had a middle name it'd be "Side Tracked" so first I went off implementing fog of war (more on that later) and then I decided I could no longer bear to look at the mish mash of placeholder icons I was using in the UI.
In web development, it is common to use icon fonts: a collection of small images packed into a font file, wihch you can easily put onto a page just by entering the correct character. Font characters are scalable vector graphics, so they render beautifully at any scale. The biggest downside is you only get a single color, but that happens to be fine for the minimal look I'm going for.
Picture
Example icon font (icofont.com)
I realized that would work just as well inside the Unity game engine, especially now that TextMeshPro comes free with Unity.
For now, I've decided to go with the font from icofont.com for the open source license, the good looks and the great selection of icons (seriously check it out). Their website makes it easy to find suitable icons, and then it's a matter of either copy/pasting the character (when entering text in the editor) or copying the Unicode code point (when entering text from code).
And there we go: I still need to apply different colors to each icon, but it's looking a lot sleeker already! Of course, I wanted the "toggle" arrow to actually swap from left to right, so that meant a little dive into animation, but luckily that only took an hour in the end. Now, it's back up to the previous level of side tracking: launching probes to scout out hyperspace!
Picture
2018-12-27-icon-font.jpg
File Size: 305 kb
File Type: jpg
Download File

0 Comments



Leave a Reply.

    Author

    We're Michiel and Willem. This blog is about our adventures in game development.

    Check out our turn-based strategy game, Powargrid:

    Buy Powargrid Now

    Archives

    December 2018
    April 2018
    March 2018
    January 2018
    December 2017
    November 2017
    October 2017
    September 2017
    August 2017
    July 2017
    June 2017

    Categories

    All

    RSS Feed

© Wee Free Studio | Steam | Twitter | Facebook | RSS feed | Press | Contact