Popup System

Design Challenge

This devlog contributes to the design challenge: "Improve the sustainability and expandability of an existing game so future developers can add and edit the game more easily in the future."

Context

SugarVita makes use of a lot of informational popups. Most of these popups, I had already changed to be generic in the Refactor Code devlog however, now I want to provide the player with better feedback on the UI of the game. Especially when in the menus. To achieve this with the current system, I would've had to create individual popup prefabs for every single possible message I want to show the player. This should have been already done by the people who initially worked on this project but let's do it now!

How to create a functional and reusable popup system where the developer can just set the values and the popup will show?

Methods

Field - Problem Analysis

To implement a popup with the current system would require me to add a new popup prefab, create a specific component with the logic and connect it with the existing UI Manager which makes use of hard-coded strings to refer to specific popups and panels. To show a quick popup where the user is only required to tap "Ok", would require way more effort than it should. Because popups are such a fundamental part of a game and because it would save a lot of time in the long run, I decided to create a modular popup system which is easy on the developers. 

Library - Available Product Analysis

When I first had this project in mind, I immediately remembered a video I've seen a while ago about the UI system in Unity and how to modularly set it up. The goal of this project would be to be able to request a popup with custom header, text and buttons. 

Workshop - Prototyping

The goal was to make it as easy as possible on the developer side. I also wanted to make it as flexible as possible. I started working in a new Unity project. Here I developed the first iteration. 

The first iteration was based on the ideal scenario. The size of the content would be determined by the size of the popup. this made it fit for every aspect ratio possible. It supports a header, content and footer. The header can contain an icon and title. The footer supports multiple buttons with each their own colour, text and action. The content can display text, one image and custom data (RectTransform) which can be used to for example create an array of buttons. The popup would show parts depending on if the data was provided. It also supports custom colours with a custom colour palette. 

After some iterations, I felt really comfortable with the prototype I made. However, when it was time to port it over to SugarVita, I doubted the style would fit in. It didn't... The way of calling the method was also too complicated. Luckily the code was very modular so I was able to recycle a lot. The next iteration was completely made with SugarVita in mind. The goal for this iteration was to reduce the amount of config needed and fit the popups into the style of the game.

As most things already in SugarVita are already set up, I had to make use of the UI system they had in place to be able to consistently show UI. The game also made use of an event dispatcher which had to be integrated. I reduced the scope a bit to create 3 different types of panels. The message, information and custom data popup. 

1. The message popup has 2 buttons: "Yes" and "No". It is used to confirm things and supports a header and text. 
2. The information popup has only one button: "Ok". It is used to inform the player about a specific action. The "Ok" button just makes the popup close. It also supports a header and text.
3. The custom data popup supports custom data and needs a RectTransform set to stretch. It can be used to get some input from the player or show an image. It also supports a header.

Calling these popups has also been simplified. 

Result & Validation

The result is a system where a simple call can create a simple popup with all information needed. This is a modular system so it is easily expandable with other types of popups. 

*Edit:

Nearing the end of my internship, I have used this system to create new popups for login, sign-up and several informational popups. This confirms the system is expandable enough and is still reliable. 

Next step

With these improvements on the popup system, I can now add some extra feedback for the player when for example a request has failed or set requirements haven't been met.

Sources

Making a Modal Window in Unity. (2021, 30 juli). [Video]. YouTube. https://www.youtube.com/watch?v=SzQABx2YTJA