Welcome to my next work update for my work on 310Games’ The Krilling! This week I spent my time polishing the remaining UI implementation for the approaching release of our game to steam!
First, I added the font and adjusted the size and spacing of the text on the scenario menu. Instead of having the text off to the side and hard to read, here is what it looks like (also, new art was put in by Meg!):
More art is coming for the close menu button, but it is looking much cleaner!
Additionally, I helped meg implement new emojis and a different bar shape for the HUD in game, and here is an example of what it looks like empty and partially full for the anger emotion:
The emojis and the bar fill color are all filled in programmatically, in a switch statement I wrote many weeks ago with the express purpose of filling in this information! Planning ahead works! There was some issue when I used new Color here instead of new Color32. Color takes rgb values from 0 to 1, and Color32 is the normal 0 to 255, with an alpha value at the end. The swap was quick and easy though. Here is that switch statement now, utilizing serialized fields for the emoji sprites and hard coded color values that can always be changed later:
With these changes (and other art implemented by Meg), the UI is starting to look much more put together and consistent which helps the game feel that much more ready for release!
Next, I did a quick change to our pause menu. The new one looks like this (Meg implemented this):
We wanted the 3 buttons on the bottom to change color when hovered. Unity has a built-in function for this for images on buttons, but the text needs to be coded separately. Luckily, they do have the event handlers for on pointer enter and exit, so I can just make a tiny script that will change the colors of the text and it works like a charm! Here’s the code and an example of what it would look like (since I cannot take a screenshot and hover my mouse):
As if hovering Quit to Home
Next, I was having a lot of issues with displaying the scenarios on the new scenario menu and having them all display correctly. The lines on the new menu made me need to really make sure everything lined up well and I ended up doing a lot of weird stuff with line spacing and layout group settings. However, while working to do this for our tutorial scene (as it has different scenarios), I realized that the layout groups were lining things up in the “middle left” instead of “top left”. When I fixed this it made a lot of things easier. So, I applied that to the prefab and resized some things so everything would work a lot easier!
My last minor change this week is making the scenario text on the menu get a strikethrough effect when the scenario has been done. Although small visually, this did require a bit of a redesign of one of the specific functionalities of the menu chunks. Currently, the menu chunks store all of the ingredient and scenario requirements in lists and append more whenever a new scenario is displayed. However, this does not allow for the chunks to go through and specifically strikethrough only a certain scenario’s requirements/ingredients upon completion. There is no great way of storing the kind of information I would need to track to make that work with a list, however, Unity has dictionaries. So, after making sure all of the scenarios had meaningful titles (a piece of information that was previously going to be displayed but now serves my organizational purpose), I decided I could just make a dictionary indexed by scenario titles that contained at each index a list of all of the textmeshpro objects belonging to a scenario!
After a quick refresher on how dictionaries work (and some debugging), I added this code when the textmeshpro objects get instantiated so I can access the objects later:
This all functions now, but I still need to get the chunks to strike through these text objects when the scenarios are completed. We have a gameEvent for scenario completion, so I know that the method I write will subscribe to that event (subscribe in OnEnable, unsubscribe in OnDisable), but how do I make it work? I tried this:
And, technically, it didn’t fail:
But, this is certainly not the effect we are going for.
After revisiting the documentation quickly and checking the successful formatting we had done elsewhere in the game, I landed on this formatting:
Which gave me the result we were looking for!
