TL;DR
In this sprint I was focusing mainly on the UI system, the Dialogue system and the Internationalisation system. Specifically:
- Learning the Unity GraphView
- Refactoring the UI system
- Creating custom UIToolkit elements to support multilingual elements
- Creating a Dialogue System
- Creating a first character selection
Unity UI GraphView
Whilst looking into tutorials of Unity UI and Dialogue systems, I came across some interesting tutorials on how to use the Unity GraphView to create branching Dialogue trees. I first came across this tutorial series on YouTube (by Indie Wafflus; code on GitHub). I went through the tutorial and saw some potential of adjusting it to be based more on ScriptableObjects and customising it to be used for my Screen system as well. However, after a while of trying to implement this, I thought it was too complicated for my use now and I abandoned this sideproject. However, depending on how the pilot of the game is received, I might come back to this and implement a GraphView visualisation of my own systems that I have built.
Refactoring the UI System
With the game growing, I decided to refactor the UI System to make it easier to add screens. Now, when the scene loads, the screens all register themselves to the ScreenManager. When a screen registers itself, it also iterates through all of its VisualElements and adds these to cached object dictionaries for easy access later. In addition, I refactored and seperated out the notification system, making it easier to add and adjust. The NotificationManager script allows me to set the LocalisedStringTable, telling it where to get translations from. In addition, the notifications now allow for notifications that are only shown a specific time and then disappear, notifications with specific types that will automagically change text colour accordingly and setting a specific VisualElement ID to show the notification (in case I want to show a notification in a specific area of the screen) or if no VisualElement ID is set, to display the notification on the bottom of the screen as an overlay.
I also thought it was time for a visual overhaul so I created some USS stylesheets that felt more game-like. All subject to change of course, but I feel this has more of a fantasy mobile game vibe.
Creating custom UI elements
I was wondering if it would be possible to add custom fields to the UIToolkit UIBuilder and stumbled upon this manual page. I thought it would be great to set a few things in the UIToolkit, specifically:
- The string ID on text elements to localise a string
- The LocalisedStringTable ID which holds the string
- If a button opens another screen
- If the button closes a popup
Finding further inspiration in this forum post I wrote a few custom elements that I needed. Now I can set basic screen logic (e.g. open a specific screen, open a URL, show previous screen etc.) all from the builder. If I needed lets say a button to have additional logic, I of course also implemented that additional logic can be attached to any button. When registering a screen and it’s elements, all additional logic and UIBuilder logic is combined in a final callback that is run on button click.
Creating a Dialogue System
Using my custom VisualElements, I also created a dialogue system element which allows me to create any sort of branching dialogue right from the UI builder. Now, to test this dialogue system, I thought why not make the sign up process a bit more entertaining than the usual form asking for name and age and so on to a more dialogue style sign up. If a user logs in and has not set their information, the user-information dialogue screen appears.
This user-information dialogue uses my custom dialogue elements to create a branching dialogue (mostly) from the UIBuilder, making the creation of dialogues quite easy.
Seeing that this dialogue is meant to replace the more traditional user information collection forms, I also needed ways in which I could collect user inputs. So I created more custom UI elements than just buttons and hooked them up to Google FireStore. Now, when players enter information, it gets uploaded to the server and the dialogue only continues if the upload was successful. If there is an error, the dialogue system shows the notification in a custom location.
Character Selection
A final thing I worked on is a very simple character selection. This is more a cool thing to show but doesnt do anything yet. Looks more and more like a game…
