For the pre-production phase of My Ordinary AR Life, I’ve been tasked with building a simple dialogue system and sourcing SFX for the features we’ve solidified thus far, as we prepare to put together a prototype build for early playtesting. 

My artist provided this wonderful mockup of how the UI overlay would look, as well as suggesting Donut County as a reference for the messaging visuals, and I got to work from there.

I initially thought "how hard can building a simple text display system be?" Turns out, there's a lot more behind the scenes than inputting a few components into the Unity editor. My first challenge was creating the functionality of the dialogue system. I quickly realized that there are a lot more to creating animations via script than I had initially anticipated. The last time I tried to make animations via script, I used DOTween, but I wanted to try my hand at making similar functionality on my own. I created some helper functions for UI element fading and movement and created a DialogueManager with a singleton that allows these functions, along with other components, to be accessible globally.

However, I was left scratching my head as to how to call these functions at the proper timing intervals. Would I have to guess how long each function took and use WaitForSeconds? Use a while loop? DOTween has a wonderful OnComplete callback for when its functions finish, surely there has to be something similar out there… Turns out there is! WaitUntil. Thank you, Unity. Side note, coroutines are pretty awesome.

It basically functions like WaitForSeconds, but instead of a timer, it waits until the supplied delegate (a delegate is essentially a function pointer, but in my case, I just passed in a boolean) becomes true to run. This was exactly what I needed to check when an animation finishes!

How the system works is basically once a player hits a trigger it begins a chain of events:
1. The ‘dot box’ animation starts
2. Once that finishes, the dialogue boxes are activated and moved, and the strings are passed into the newly activated dialogue box to be filled in.
3. Strings are broken down into characters, and players can click to instantly complete a dialogue box.
4. Upon dialogue completion, it loops until the array of strings are all displayed.

Now you may notice that, aside from my beautiful MS Paint drawings, the box spacing is a bit off.Anchoring and scaling the UI elements based on screen size was something I needed to get. It started becoming inconsistent depending on the aspect ratio my screen was playing at; in the editor, it gets really funky with how the movement functions calculate the amount of space to move.
Turns out, UI elements don’t like it when you try to change their transform.position. Unity technically accepts the code but… definitely not advised. Changing my canvas to scale with the screen size, using the ‘expand’ screen match mode, and altering my UI movement code to use RectTransform.anchoredPosition instead of transform.position and voila! 

Pretty preliminary setup, but it works! The hard part is going to be finding a way to add additional polish/flourish to this system, but it’s a good start. Onto the rest of the UI.