Research Log #11 – Creating a Useable UI Published on February 22, 2019 by Caverntwo.

Hey there! This week we worked on getting a Camera Controller done and also redesigned our entire User Interface.

We need a new UI

So, something that we hid from the public so far was our User Interface. For the old tech-demo, we made a temporary and very simple UI to test out our internal systems. It was pretty ugly and annoying to use… to say the least.

The old and ugly UI showing a building and selection menu.
The mockup of the tech demo UI. In reality, it was even more hideous!

The new User Interface

So, we took the time this week to design a new UI which can carry us for a while and hopefully at least until beta. This will also most likely be the UI in the public alpha demo in April (with a few features missing).

One of the hardest things was to come up with a UI which makes selecting and moving microbes quick. In the old demo, it required the mouse to select the cell, move to the right, enter the values into text boxes, select the move action, and select the target. Very tedious, but enough to test out the core concept of the game!

Now, microbes, actions, and even the build menu are context-aware and will feature a search bar. The number of microbes can be selected by just hovering and scrolling with the mouse wheel.

We also had to consider the design and thus the visible space. The old UI nearly took 30% of the screen in the end. The new one is much more compact, but features more information than before!

The new UI with many different elements distributed on the corners of the screen.
Our vision for the new UI. (Note that the game view is still from our old tech demo.)

In the image above, you can see a mockup for the new UI. The top-left contains global information about your colony. In the top-right we put the chat and notification area. In the bottom-left we have the control buttons, like actions, diplomacy, research, and build. Finally, the bottom-right features a minimap and information for the hovered and selected entity.

Additionally, you can see two context-aware popups. The Build Blueprint popup is the building menu. It lists all cells and their information. The Select Microbes popup enables the player to select a certain amount of microbes.

Both of these feature a search bar for quickly finding the right thing. Additionally, they only appear when and where needed. For example, you’ll be able to press Space when you selected an entity, which will automatically open the actions popup at the location of your mouse. This will reduce the amount of unnecessary mouse movement for common player actions.

The "Select Action" popup window with a search bar and categories.
Close-up of the Action Popup. A search bar assists finding the desired action in no-time!

Choice of the Framework

Currently, we evaluate how to implement the UI. We’re not the biggest fans of the default Unity UI Framework and are looking for alternatives. We also consider to write our own stack in the future. But more on that in the upcoming weeks!

Camera Controller

We also used the time to (re-)write a good camera controller. We already had one, but with, let’s say, limited functionality and unusable behaviors.

During the planning phase, we realized that basic high-school math isn’t all for nothing! As we work with positions, distances and rotations, Vectors are your only friend!

Focus Point and Zoom

To ease everything regarding rotations, we place a focus point F in a focus distance f in front of the camera. When we zoom, the focus distance changes while the focus point remains, thus moving the camera backwards!

We calculate f with the help of an exponential function from the raw scrolling input:

//The maximum distance between the camera and the focus point.
float MaxZoom = 100;
//The minimum distance between the camera and the focus point.
float MinZoom = 5;

//The current zoom level between 0 and 1. 
//Incremented and decremented with the mouse wheel.
public void ZoomLevelToPosition(float zoomLevel)
{
	Mathf.Pow(MaxZoom - MinZoom + 1, zoomLevel) + MinZoom - 1;
}

Because of that, you zoom more when you’re far away from F, and less the lower it gets!

Zooming in and out. See how the speed decreases the closer you go.

Rotation

Every rotation of the camera goes around the focus point F.
Therefore, the camera moves while the point remains. This movement can be represented with a circle around F (with the radius f).

Rotating around the focus point.

It’s easier to calculate and to imagine if we split the rotation into two 2D parts, namely rotating in x,z space (rotating around) and rotating in (local) z,y space (tilting) (Unity coordinates). Here you can see our whiteboard sketch for tilting:

A whiteboard-sketch showing how our tilting algorithm works.

When we tilt the camera, its position changes along the (local) z and y-axis. At the same time, we’re adjusting the angle α to center the focus point F in the middle of the screen.

Tilting the camera around the focus point.

Movement

Movement is by far the easiest part of all! The only thing that changes is the position of the focus point F.

The only thing we need to make sure here is to keep the F and the camera a certain offset above the terrain (we’re using Raycasts for this), to avoid clipping into it.

Moving over a slope. We prevent that the camera or the focus point go into the Terrain!

Last, but not least, we’re using the SmoothDamp function to smoothen out all movement a little bit, which makes the game feel alive!

Next Steps

Next week, we have to write a business plan, which is a requirement for the funding we receive. Let’s see how long it takes!

See ya next week!