Echoes of Somewhere

Creating the UI for an adventure game is a fun little bite sized challenge I enjoy doing. The UI for Echoes of Somewhere is finally finding its groove.

I had always thought I would be using some fancy AI graphics for the UI. I even did some prompting for an adventure game UI and I was somewhat happy with the results. But as I was working on the game and added the first UI elements on the screen, I actually veered away from that idea. The UI is now fully man-made.

Cursors / Icons

The game’s cursors are in low polygon style and created in modo. The style is removed from the cyberpunk theme of the game on purpose, as they are meant to work on every episode of the game. These episodes may take place in any setting from any possible era.

I modelled the icons in Modo. I kept them very simple and clean. I would not be using much colors with them. Just one green accent in some rare cases.

The render style for the icons is simple as well. Just one key-light with a bounce plane for some fill light. These low poly icons are very easy to create and I think look pretty good In-game.

At first, I had these icons in use as cursor graphics. The mouse would change to the relevant action icon when hovering on top of a hotspot in the game. This meant that each hotspot only had one action. It was something along the lines of “look at”, “use”, “open”, “talk to”, “go-to”

For the hotspots I used a simple small inverted pyramid.

You can see the first version of the UI from the older game captures before this post.

There was nothing wrong with this user interface. It was passable. I have been creating different adventure game prototypes for a over a decade and they all have a different iteration of the point and click interface and I do like all of them. But this current one was not perfect in my opinion. I did not like the way the hotspots were marked on the screen with the green triangles. They were not doing it for me.

Then a horror adventure game called Stasis Bone Totem was released! In this game simply hovering on top of a hotspot prompted this examine text to view. I a pretty sure they were not the first to do it, but I loved this mechanic.

This was a very elegant solution for displaying examine text information on the screen without having to create alt actions for each hotspot that had an interaction other than look at! It would also make it fun to have multiple points of interest in the screen the player could hover over and read information about the world and about the internal dialogue the player is going trough in his head.

Bone Totem also was using different hotspot visualisations for things you could use, things you could also examine and screen exit points. I liked it. It made the screen easier to read but did not make the gameplay feel too simple.

I was going to take all the things I loved about their UI and put them in Echoes of Somewhere.

I started by adding a component for each hotspot that includes the examine text. Then I wrote an add-on for Adventure Creator that displays this text in an UI element every time the mouse is over a hotspot.

using UnityEngine;
using System.Collections;
using AC;

public class HotspotHighlighter : MonoBehaviour
{
    private string Descriptiontext = "decription";
    private string DescriptionActiveItem = "active item description";
    private bool itemMode = false;

    // Start is called before the first frame update
    void Start()
    {
        EventManager.OnInventorySelect += itemHover;
        EventManager.OnInventoryDeselect += itemDrop;
    }

    //Select item from the inventory
    void itemHover(InvItem invItem)
    {
        Debug.Log("Mouse over: " + invItem);
        itemMode = true;
        DescriptionActiveItem = invItem.GetProperty(0).TextValue;
        Descriptiontext = DescriptionActiveItem;

        MenuGraphic hotspotIcon = PlayerMenus.GetElementWithName("Hotspot", "Icon") as MenuGraphic;
        hotspotIcon.graphic = KickStarter.cursorManager.GetCursorIconFromID(0);

        MenuLabel examineLabel = PlayerMenus.GetElementWithName("Hotspot", "ExamineLabel") as MenuLabel;
        examineLabel.label = Descriptiontext;
    }

    //Deselect the active inventory item
    void itemDrop(InvItem invItem)
    {
        Debug.Log(invItem + " deselected");
        itemMode = false;
    }

    // Update is called once per frame
    void Update()
    {
        //Mouseuover for inventory items
        if (KickStarter.runtimeInventory.hoverItem != null)
        {
            Debug.Log("hovering on inv item: " + KickStarter.runtimeInventory.hoverItem);
            if (itemMode == false)
            {
                MenuGraphic hotspotIcon = PlayerMenus.GetElementWithName("Hotspot", "Icon") as MenuGraphic;
                hotspotIcon.graphic = KickStarter.cursorManager.GetCursorIconFromID(5);
            }

            MenuLabel examineLabel = PlayerMenus.GetElementWithName("Hotspot", "ExamineLabel") as MenuLabel;
            Descriptiontext = KickStarter.runtimeInventory.hoverItem.GetProperty(0).TextValue;
            examineLabel.label = Descriptiontext;
        }
        //Mouseuover for hotspots
        else if (KickStarter.playerInteraction.GetActiveHotspot() != null)
        {
            Debug.Log("Mouse is over the hotspot: " + KickStarter.playerInteraction.GetActiveHotspot().name);

            MenuLabel examineLabel = PlayerMenus.GetElementWithName("Hotspot", "ExamineLabel") as MenuLabel;

            //change the hotspot UI icon if no item is selected
            if (itemMode == false)
            {
                Hotspot _hotspot = KickStarter.playerInteraction.GetActiveHotspot();
                MenuGraphic hotspotIcon = PlayerMenus.GetElementWithName("Hotspot", "Icon") as MenuGraphic;

                int _iconID = _hotspot.GetFirstUseIcon();
                hotspotIcon.graphic = KickStarter.cursorManager.GetCursorIconFromID(_iconID);
            }

            //Display description text if one is given
            if (KickStarter.playerInteraction.GetActiveHotspot().gameObject.TryGetComponent<ExamineText>(out var examineText))
            {
                Descriptiontext = examineText.Description;
                examineLabel.label = Descriptiontext;
            }
            //If no text is given, do not display any text
            else
            {
                examineLabel.label = "";
            }
        }
        //If holding on an item, change the text to the item description when exiting the hotspot.
        else if (itemMode == true)
        {
            MenuLabel examineLabel = PlayerMenus.GetElementWithName("Hotspot", "ExamineLabel") as MenuLabel;
            examineLabel.label = DescriptionActiveItem;
        }
    }
}

Once I had this descriptive text appearing at the bottom, I figured I might as well put everything down there. The verb, the hotspot name, and the interaction icon. This would clean up the game screen considerably! After this was done, I decided to try to replace the triangular hotspot icon with the interaction icon associated with each hotspot. So that by glancing at the screen you would already know what the interaction will be.

When there is no interaction, a magnifying glass would be displayed instead.

Now that the interaction icons were shown as hotspot markers, I was able to keep the cursor visible at all times. I did however add an “active” variant of the cursor for showing when you are hovering on something interactive to help a little, even though the appearance of the description box is already a big hint!

Previously I did not have any markers to indicate exit points in the scenes, but I now added one as inspired by Bone Totem. These markers help you see the scene exit points a lot more clearly and take the guesswork out of it.

The new iteration of the Ui is pretty minimalistic and clean. I am somewhat pleased with it. But already I am thinking of transitioning from Adventure Creator UI to Unity UI and with that I will need to redo parts of the functionality, like hiding and showing the panels and once I program them by hand I am sure going to add functionality to them that I have not yet thought of…

Things I also changed:
-Walk to indicator. I animated this small jumping triangle that shows where the character is about to walk to.
-Inventory visibility. I changed the inventory from being buried under a toggle button, to being visible at all times. It makes the player think of the inventory items and their combinations with on screen hotspots more easily.

The tooling

The tool I am using mainly to create this game is an add-on to Unity called Adventure Creator.

I have been using this tool for about 10 years for personal projects and prototypes because it contains so much functionality I need and it is very easy to build on top of. I have never had a bad experience with it. I am extremely pleased at how versatile it is for customising the way the players can interact with your game.

It also provides save and loading functionality, a pretty good scripting and events system, inventory management, quest logging and even crafting. It can also easily be used for any other type of game than point and clci adventure games as a great starting point