Echoes of Somewhere

All throughout the project, I have been slightly tweaking the UI from time to time. Now that I have a better understanding of the functionality of the UI, a more polished look and feel begun to creep into my mind.

My first attempt at AI inspired UI design in January 2023

As this project is about using AI to generate assets, I used midjourney as art inspiration, AI inspired UI design. I did the first UI explorations early this year. But I never did anything more than just some random generations. This did not amount to anything usable in the game. I also did not feel it was a substantial enough task to write about back then.

First I had a go with Midjourney, which was at version 3 then. Again using the simplest of prompts “point and click game user interface –ar 3:2“:

The AI inspired UI design pages Mdjourney generated did not make any sense.This was totally fine, as these were for reference and inspiration only.

These designs were very skeuomorphic, like game UI’s often times are. I was not totally opposed to that at the time. But as I kept working on the game my feel of the UI look drifted further and further away from this style.

The new AI inspired UI design iteration

Now, after 7 months, I have been spending a lot of time on the UI and on the game UX. I begun to understand what the UI of the game needs, what elements it contains.

The UI of this game is extremely simple. It has a top bar that has the inventory. A pause menu button. A bottom bar that has the detailed item / hotspot examine information and the dialogue options. In addition to this, we naturally have the main menu and the in-game pause menu with save, load & settings dialogues.

I will not be focusing on the main menu and in-game menu designs yet. These will be covered later.

The PDA

Naturally there also is the PDA system with todo’s and messages and other in-game UIs. These UIs are in their own unique styles as they are non related in-world systems. The PDA UI is already fully functional. But I am thinking of making it more fancy, while keeping the retro aesthetic. This means added detail in the graphics and a lot of animations. for things appearing and disappearing and mouse-overs.

The PDA image is upscaled with some fancy AI upscaling tech (not yet announced). It needs to be extremely detailed to withstand such a close up view. Only a fraction of the image is used now. I will add some animations to the UI later to make more of the device visible.

The prompting

For the UI, I figured it would be best to do all the art by hand. But I would instead use AI as a replacement for google image search. This is what AI is amazing for. Just type in the type of UI you would like to have and it will produce an unlimited amount of reference to get inspired by!

This time I used the latest available version of Midjourney, V 5.2. True to my style, I did not waste much time engineering a prompt.

I also tried some prompts with more descriptive texts. But for the image I chose as the current master reference the prompt was simply my first “futuristic clean ui for game –ar 16:9“.

It is a part of the fun in this project to keep the prompts extremely simple. To let the AI do its thing. I understand that it also makes this a less of an usable experience as it might give an unrealistic idea of AI tools in use, as I am not aiming for a style I have myself designed in preproduction, but I see what the AI has to offer, and choose the one I like the most. This is unrealistic in many productions, where you must hit a certain aesthetic, but then again, you should use real people to make those projects in the first place.

Naturally once the AI hits an aesthetic I like, I need to do more prompt work and custom training to match the style in the later stages.

For the master game UI of Echoes, the aesthetic was this. A very clean design that accidentally used the colors from this website, which might have played a role in me liking it.

Transferring the style to vectors in photoshop

Now that I had reference, it was time to translate the style into usable elements for the game.

As it is very apparent from the images, none of them match the current UI at all, but this is not an issue.

I started by creating backgrounds for the inventory items. This was not planned, it was just a quick way to get started. I created a plain version for the background, a hover version of it and an also a version for the in game cause button, moving away from the low poly aesthetic that would now be reserved for hotspot icons and mouse cursors.

I did not use any pixels of the AI generated images, nor did I try to copy its style. The AI image was used as reference only, drawing inspiration from its patterns and shapes before starting to work on a certain UI element. I tried to match the general aesthetic and feel that I liked, modifying it however I felt like when creating my version of the UI.

Every element (except for line breaks) were created with the with the vector tools, relying heavily on layer styles and masks to hit a look I liked. I wanted everything to be as procedural and editable as possible, so I could easily resize and edit the shapes when the layout matured in my mind.

UI elements in engine

Hovering over the inventory item reveals the item’s icon and description in the hotspot description UI. This also is fully custom code I wrote. It hooks into Adventure Creator inventory item data so it is a very neat solution.

Every time I do a custom solution like this, I make it non-destructive, so that I can update to the lates version of adventure creator without my own stuff breaking. And each time I do a custom solution like this I run into the weirdest issues and have to make unbelievable hacks in order for my things to work as I want them to. (I am not a programmer – I am a game designer).

A similar looking panel is used on hotspot hover to display a descriptive text of every intractable object in the game. This panel also relies heavily on completely custom solutions.

I will keep iterating the UI as I go along. Also, the Ui setup, graphically, is very simple.I only have a handful of images and prefabs that make the whole look. This means that making major edits to the look and feel of the UI is extremely quick and easy.

Custom code

For the dialogue selection, I had to write a bit of custom code. Adventure creator has this handy feature of coloring the already used lines with a different shade, but it only works when the UI buttons are set to tint effect. I however, wanted to use spite swap as well. So I created a custom component for changing the button BG image as well

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class AdditionalButtonHover : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler, IPointerDownHandler, IPointerUpHandler
{
    [SerializeField] private Sprite _normal;
    [SerializeField] private Sprite _hover;
    [SerializeField] private Sprite _clicked;
    [SerializeField] private Image _button;

    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        
    }

    public void OnPointerEnter(PointerEventData data)
    {
        _button.sprite = _hover;
    }

    public void OnPointerExit(PointerEventData data)
    {
        _button.sprite = _normal;
    }

    public void OnPointerDown(PointerEventData data)
    {
        _button.sprite = _clicked;
    }

    public void OnPointerUp(PointerEventData data)
    {
        _button.sprite = _normal;
    }
}

Here is a short clip of the new AI inspired UI design in action.

I am a 100% sure that the Ui will change, maybe even dramatically, as I continue work on the project. But this is perfectly fine. Every aspect of the game is always under review and polish!