IcoMoon in Unity

I’d like to start off by saying I don’t know how this approach compares to other possible approaches to icons. For now it works and isn’t that annoying to deal with when I have to add/change icons. After watching this amazing talk recently I don’t see any reason to change my approach at this point.

Recently I spent some time cleaning up the UI in From The Ford and as part of this effort I needed some proper icons. What wasn’t proper about the old icons? Would you recognize this as a play icon?

I first started down the path of creating images for each icon that was needed. At some point while looking for icons I decided to check out the icomoon icon set. Some of them weren’t bad and I proceeded to go through a painful process of trying to convert screenshots of the icons into images. This worked but it wasn’t ideal. At this point I got to thinking.
Why can’t I just use icomoon as it was intended?
If icon fonts work on the web, shouldn’t they also work in Unity?

Icon Fonts

For those of you that aren’t familiar with icon fonts – The general idea is to create a set of font files with icons instead of regular characters. When used on the web this allows you to fairly easily change sizes, colors, and even add shadows to icons. The icons will scale well compared to traditional image tag icons. The web does seem to be moving to svg tags for icons, but that isn’t really relevant to this post.

Creating your icon font

Navigate to https://icomoon.io/app/#/select to get started with the icomoon app. The icomoon app allows you to select which icons you want in your icon font. There are a number of different icon libraries available. The licenses on them vary, so pay attention if you are planning on using them for more than just placeholders.

First select any icons that you want to include.

Click “Generate Font”, this will show you any icons that you have selected. For now click download

Extract this zip into a location inside of your Unity project.

At this point Unity won’t be very happy. The zip contains a .js file which Unity tries to treat as a UnityScript file. It may be possible to have Unity ignore this file but I didn’t spend much time looking into it. Instead copy the contents out of demo-files/demo.js and add them into the demo.html file. Next remove demo.js.

The changes to demo.html will look something like this

Using your icon font

Now you are ready to create some icon buttons. We will assume that you already have a button in your scene.

For the text element underneath your button, modify the font to be icomoon. Then copy the unicode character (the empty box shape, it should select when you click it) into the the Text value.

That’s it. From here you can modify the color and size of your icon as if it were regular text.

If you need to modify the icon of a button in code, you’ll need to use the hexadecimal value for the unicode character. In this example the play icon has a hexadecimal value of ea1c (find this value in demo.html). This means that the code to set the text to the play icon will be

iconButtonText.text = "\uea1c";

If you need to modify your icon font you can import the selection.json file from the extracted zip back into the icomoon app. The Read Me.txt file included in the zip also speaks to this.

Some thoughts

Having to paste invisible characters into the unity inspector is kind of a pain, but no more painful than some of the other annoyances I have in Unity.
If I was using this heavily in code, I’d probably abstract out the unicode hexidecimal values into some string constants. This is much easier to understand.

iconButtonText.text = Icons.PlayButton;

Otherwise I have no issues with this approach. Long term we may create our own nicer looking icons and at that point I assume they’d probably get switched to images.

Goodbye Awful UI

One of the most obvious things that has changed in the last couple weeks is that I did away with the awful UI. It served a purpose, but it was time to go.

Here is the new improved placeholder UI.

The icon set right now is not final. These are all taken from the Icomoon icon font. The harvesting icon (spoon & fork) was the only icon that kind of sort of might be mistaken for an icon that could possibly indicate harvesting.

The action menu’s are set up so they can be dynamic and support child panels. Making these menu’s support a large number of items should be as easy as allowing them to scroll when they get too large.

Here is the new action menu (the red structure indicates you aren’t allowed to build it there. The visuals for placing structures need a little love)

Along with the UI changes I did a lot of work around placing structures. Previously you were able to place structures on top of each other, resources weren’t harvested before building a structure in a location, and the indicator for where a building was going to be placed looked horrible. These things are all taken care of now. There is proper collision detection to make sure you don’t overlap structures. When you place a structure you get a decent looking indicator for where it is going, and any items in the way of your structure will be flagged for harvesting and removal. Items that are going to be harvesting or removed also now get a visual indicator.

Next up is terraforming and ensuring you can only build on level terrain! And at some point I should probably make sure the generated resources don’t overlap the starting structures….

For those of you that are curious (and so I can be reminded later of how bad it was), here is the old UI.