This week we established a palette for our UI design, brought in a custom font, a custom UI background sprite and build a prefab to use when we find a gem that contained an animation.

Hexadecimal

Before we talk palettes, it’s good idea to introduce a new counting system called hexadecimal. The counting system we usually use is called decimal and it has ten digits, from 0 to 9. Hexadecimal is similar, but it has 16 digits. Counting in hexadecimal looks like this:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, ....

So 10 (say one-zero, not ten!) written in hexadecimal is 16 in decimal.

The main reason we use hexadecimal when working with computers is that it aligns neatly with the way information is stored inside the computer itself. A byte or 8-bit value can always be written with two hexadecimal digits, a 16-bit value with four hexadecimal digits and so on.

Palette

There are combinations of colours that are inherently more pleasing to our eyes and there are rules that allow them to be calculated. There are lots of websites that will calculate a colour palette for you. We chose https://coolors.co/.

You can see that the colour are represented by six hexadecimal digits. This is three bytes (0-255 in decimal, 0-FF in hexadecimal) representing the red, green and blue components of the colour. It’s a tidy way to represent it and easy to share and reuse.

This is the palette I chose for our game:

It’s intended to be bright and cheerful and include some colours with a high contrast with each other.

In Unity we can add these colours to a custom palette, so we can recall them quickly any time we want. At the bottom of any colour-picker dialog you can find the option to create a “Swatch Library”

We can then add the current colour to the library by selecting the last button under “Swatches”.

Custom Font

We wanted a nice font for our game. The right choice really helps set a mode. I choose a font called Brady Bunch Remastered that’s free for non-commercial use. I found it here https://www.dafont.com/brady-bunch.font

In Unity we saved this file to a new folder called Fonts. We then needed to set it up so that Text Mesh Pro could use it. Under the Window | TextMeshPro we used the Font Asset Creator to build a “font atlas” from the BradBunR.ttf font file.

Custom UI Background

The standard UI background in Unity is very plain and boring. I created an image to give our UI elements more character.

We imported this into Unity to our Sprites folder. We then needed to set a few things to allow Unity to use it in a UI. In the Inspector we changed the “Texture Type” to “Sprite (2D and UI)” and “Mesh Type” to “Full Rect”. We then hit the “Apply” button near the bottom of the Inspector to apply these changes.

Unity allows you to set borders on our sprites so that when they’re scaled, the corners don’t change, but the pieces in between stretch instead. This preserves the appearance when the sprite is used as the background to differently sized elements. To specify this we need to first add the 2D Sprite package to Unity and then use the “Sprite Editor” button in the Inspector to open it. We specified 36 for all borders. The hand-drawn blue arrows show how the different regions will stretch when used:

Prefab for when we Find a Gem

We developed a prefab to use when we find a gem. It’s intended to be spawned inside a child of the main camera that places it just in front of the player.

The prefab contains a Canvas. Canvases usually overlay the game screen, but they can be worldspace canvases, that actually exist as objects inside the scene. As Canvases are always huge, we needed to specify a very small scale to bring it down to something that makes sense.

We create a script GemFoundMessage.cs and attach it to the root of our prefab. It’s used to take information about gem was found and use that to update text on the Canvas and to spawn in a copy of the gem (which we can animate).

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using TMPro;

public class GemFoundMessage : MonoBehaviour
{
    public TMP_Text Text;
    public Transform GemHolder;

    public void SetGemDefinition(GemDefinition gd)
    {
        string message = string.Format("You found a {0} spirit gem!",
                                       gd.name);
        Text.text = message;

        Instantiate(gd.Prefab,
                    Vector3.zero,
                    gd.Prefab.transform.rotation,
                    GemHolder);
    }
}

Animation

To animate in Unity, we first open the Animation window from the Window | Animation menu. It works well if docked at the bottom of the screen where the Console usually is.

We then select the object that we want to animate, and press the Create button in the Animation window.

This makes an Animation Clip and Animator Controller in our project and attaches an Animator component to our GameObject.

With our object selected, we press the “Add Property” (1) button to select the properties we want to animate, we then click in the timeline (2) to select the time at which we want to specify the property value and finally we edit the property value at that time (3).

Code Download

The code for this week’s project is on our GitHub, as always.