Devlog #3 - Using Unity UI to build a world

Not Story Based

Sunsear: Avian Combat is first and foremost a game, and it's story is very much secondary. However, even a secondary element needs time and attention in order to have a proper well-rounded experience. With that being the case, I began deciding how the world of Sunsear would operate,  who its central characters would be, and how that would be displayed to the player.

Enter the Cube

The glorious data cube would solve many of my problems of getting sweet lore to the player. These operate just like normal pickups (weapon upgrades, health, shields, and mega lasers).  

When the player acquires a data cube, a new entry will show up in the Data Menu.

A Menu for Data?

This is arranged into two sections: the top section which handles transmissions and conversations, and the bottom section which defines many of the enemies, items, and places in the world of Sunsear.  I felt that this level of separation would make for easier navigation, and will also guide the player towards the items that pertain to the story as opposed to just background trivia. 

When the player starts the game, there will be nothing to click on in the data menu. Gradually, items will start to appear and the player can look at the menu to see story items they haven't seen yet.

Fun with ScrollRects

This is the first time I really got to dig into Unity's ScrollRect functionality. If I were being honest, I wouldn't call it the best experience. Accurate, up-to-date docs for this are hard to find, and there were multiple instances where the content wouldn't scroll at all, and I had to search YouTube and the Unity forums to find out why. The big takeaways are that: 

  • the GameObjects that host your UI components must be arranged in a certain way on the hierarchy. 
  • If you need an expanding ScrollRect (like for example, if you're simulating a chat log), you will have to use some clever coding in order to get it to work. You must use a coroutine, yield until the end of the frame,  and then use rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, rectTranform.rect.height + <additional space>). Followed by setting verticalNormalizedPosition to 0 on the scrollRect, and then calling LayoutBuilder.ForceRebuildLayoutImmediate(scrollRect's transform) to force the UI to update.

Here that the code to that looks like:

IEnumerator ScrollToBottom()
    yield return new WaitForEndOfFrame();
    if (maximumHeight > 0) {
    scrollRect.verticalNormalizedPosition = 0f;  
    LayoutRebuilder.ForceRebuildLayoutImmediate( (RectTransform)scrollRect.transform );    

And here's the final result (pending icon artwork):

What's next?

It might make sense at this point to add a read/unread flag to easier viewing. That's one of many features I'm currently hashing out right now.  The data menu isn't finalized yet, so there is time to add in some cool quality-of-life enhancements. 

Stay tuned for more updates!

Leave a comment

Log in with to leave a comment.