Nature's Little Mistake

Nature's Little Mistake is a game that I helped made for a University project. My contribution to the projects are as the game and UI designer, along with being a programmer.

Project Description

• Project Type : University project

• Duration : 19 June 2023 - Present

• Engine : Unity

• Language : C#

• Roles : Game Designer, UI Designer, Programmer

• Other Apps : Figma, Procreate, Photoshop, Illustrator, Excel

My Contributions

Ideating Items & Game Balance

I ideate and created the items that the player played in game with the help of other team members. When designing what items the player can use, i used both a top-down and bottom-up approach, some items are made with fulfilling a specific niche, like a shotgun or sniper, while other are created with a theme in-mind first, such as the antlers.

For balancing the game, I used Microsoft Excel to track all the stats and other values, how they interact with each other and what does what and by how much.

Originally we wanted the players to have more items, and all of them could attack at the same time with a press off a single button. The project lead asked me to figure out a way to do a scaling progression and make it so that the damage from a single item run is just as viable as a multi weapon run. I made this graph using some equations to test what kind of variables we can play with. At the end, for simplicity sake, we reduce the amount of items from 7 down to 6, but only one weapon can shoot at a time.

After we got to showcase our game on the Student Expo in SXSW, we got a lot of feedback. The most prominent one being to simplify and streamline the gameplay. We reduce the amount of items down to just 3 and removing melee items, amongst other things. Currently we are not doing scaling due to time constraints, but we are panning to add that after finishing our studies.

UI Programming

I wrote all UI related code, from the HUD, popups, the direction indicators, level indicators, and others.

Inventory Interface Script:

public void UpdateStats(Item _hoverItem)
    {
        itemName.text = _hoverItem.itemName;
        itemIcon.sprite = _hoverItem.icon;

        if(_hoverItem.segment == Item.Segment.Legs)
        {
            itemType = ItemType.Movement;
            Debug.Log("isLegs");
            anim.Play("Pause_Movement");

            //Data Value
            speedValue.text = _hoverItem.movementSpeed.ToString();
            damageValue.text = "";
            critValue.text = "";

            //Ability & Descriptions
            cdIndicator.SetActive(true);
            abilityDescription.text = _hoverItem.abilityDescription.ToString();
            abilityName.text = _hoverItem.abilityName.ToString();
            cooldownAbility.text = _hoverItem.cooldownAbility.ToString();
        }
        else
        {
            itemType = ItemType.Attack;
            Debug.Log("isNotLegs");
            anim.Play("Pause_Attack");

            //Data Value
            damageValue.text = _hoverItem.dmg.ToString();
            critValue.text = _hoverItem.critChance.ToString();
            speedValue.text = "";

            //Ability & Descriptions
            cdIndicator.SetActive(false);
            abilityDescription.text = _hoverItem.abilityDescription.ToString();
            abilityName.text = _hoverItem.abilityName.ToString();
            cooldownAbility.text = "";
        }

    }

Directional Fire-rate Indicator Script:

public void SetLeftAttack(float firerate)
    {
        leftHasFired = true;
        leftFireCurrent = 0;
        leftFireTotal = firerate;
    }

public IEnumerator ProcessLeftFire()
    {
        leftFireFilling = true;

        while (leftFireCurrent < leftFireTotal)
        {
            leftMouseDis.SetActive(true);
            leftFireCurrent += Time.deltaTime; // Increment by Time.deltaTime for a linear 
            leftFirerate.fillAmount = leftFireCurrent / leftFireTotal;
            yield return null;
        }

        leftMouseDis.SetActive(false);
        leftHasFired = false; // Set to false only when it reaches the total

        leftFireFilling = false;

    }

Designing & Creating UI Assets

In addition to writing and implementing the UIs, I was also responsible to design both the layout and look of the UI elements, along with creating them.

When designing the UI for the game, the project director asked me to design the UI to fit with the overall aesthetic of the game, where he wanted a more organic and goopy looking UI elements. I sketched a few iterations on how the UI would look.

After a general look and feel was decided, I switched over to Figma to prototype an interactable UI to get a rough player experience interacting with them. Doing this allow me to quickly iterate on designs based on the feedback of the project leads.

After the leads are satisfied with the design, I began the process of designing the look of the UI elements. I was also responsible of creating them myself, along with any animations that the UI elements will need. I also implement and program them into the game.

We manage to put our game into SXSW. After the event, we had many quality feedback, and we decided to change a few things about the game. This means a UI redesign is needed to fit the new gameplay changes.

Item Popups

One key UI elements that is important for this game is the item popups. It's job is to quickly inform to the player whether to swap or ignore an item at a glance. To help me design this, I used Figma to create some interactable mockups, focusing on what information to relay to the player and the layout for those information.

We decided on this layout, as at the time, we deemed it to look the best and does a decent job at giving information. The look however, does not fit the game, and the art director asked me to designing more inline with the aesthetic of the game, so I did.

Once the new design is implemented, we ran into some problems. Some visuals, some implementation, some game mechanic related. Visually, amongst the chaos of the gameplay and other game visuals, the UI got lost and there were too much information details that a player would usually just ignore it completely.

Another problem was, that the popup would appear when the player hover their mouse on top of the dropped item, causing confusion, as many playtesters can be observed clicking on the item when the popup showed up, while mechanically, the player can only pick them up while pressing E. While in the topic of picking up items, the action of pressing E was causing a problem where they could re-equip their dropped item immediately after dropping, which was frustrating to the player.

After we decided to change the concept of the game, there was an opportunity for me to fix all of these problems, along with redesigning or refitting some of the UI elements to be more inline with the new direction.

The new design of the popup is simplified. With the new game direction, we simplify the stats of the items, which means that there were less information that needed to be presented to the player. I decided only to show the damage and critical chance to the player, along with a quick indicator of a red, white, or blue circle, to quickly inform the player if that stat is better than the one they are currently equipping.

I also changed how the item is being equipped, from pressing E to holding E, making the action of equipping more deliberate and preventing the auto reequip bug. I also hide the comparison popup of the item the player is currently equipping, only showing if they hold Shift.

Directional Fire-rate Indicator

When watching playtesters, one thing I notice is that they kept getting frustrated when they click the fire button and nothing happens due to the fire-rate of the item, even though the animations already match the fire-rate.

I wanted to give the player more feedback, so I used one of the UI elements from the game, which is the directional indicator that shows where the player is aiming with their mouse or which direction Missy is facing, and modified it a little bit. The original design has an extra purpose that is not needed any longer, it used to indicate how long a melee attack can go, since we removed melee, it was due to a redesign anyways.

The new design has two bars, to fit the new gameplay where you could shoot two weapons at the same time. How fast the bar fills gives the player a visual feedback on how fast the fire-rate of the item is to the player.

Various Art Assets

See the art assets I made for this project here!