#9 Making The UI Great
Updated: Jul 6, 2021
This week I have focused mostly on Art, trying to get my game to look the best it can. I have also done some major UI updates and made the game feel a lot more complete.
I started the week by creating the art for the in-game UI. I decided to go with the same art style as the characters since it gave the game more cohesion. I started by drawing the slider background and replacing the current slider images with this one.
In order to make the slider function, I first added the same sprite I used for the slider background and changed the colour to a dark grey. Next, I had to change the image type from simple to filled and make it fill from the left to right. After doing all this, the sliders now have a lot more of a notepad style to them which fits the game a lot better than before.
Now, I wanted to change the dialogue box in the game. This meant I had to draw the dialogue box and create a new say dialogue that the game would use. Despite this sounding difficult, it was relatively straight forward. All I had to do was change the background image to the sprite I had drawn, and resize it to fill the screen.
When the player is given a choice, they are currently presented with a menu that is a very different style to the rest of the game. In order to ratify this, I decided to make a new menu UI. This was also relatively straight forward as I created a new menu dialogue, before adding a drawn rectangle sprite. For this I also had to adjust the text boxes as they wouldn’t fit in the new buttons, but as soon as I had done 1, I only had to copy and paste the values into the rest of them.
After this I wanted to add some player feedback into the UI, and I did this by creating 3 versions of the buttons. There’s the default button, highlighted button, and the clicked button. In order to save time, I decided to just change the colour and size of the same image slightly in order to create the highlighted and clicked variants. This works well as it tells the player that the game has registered their choice.
At this point the only thing left for the in-game UI was the background images. At this stage I still don’t know what style to make the background so, I decided to start work on the main menu since it was still the menu package, I had imported many months ago.
To begin with I had to decide on a title for my game since I wanted the title to be displayed on the main menu of my game. After talking to some friends, I decided upon the name “Don’t Let The Darkness Live”. This is a play on words as live has two meanings. There’s the streaming version of live where the player is live-streaming and the life version where the character is living.
Next, I needed images of the buttons. This time I decided to make 3 different versions of each button as it was more important to be responsive when the player first loads the game. I decided to show this by having a line appear under the text when highlighted and a box around the text when selected. This gives a clear indicator to the player that they have pushed the button. For the main menu I needed 4 buttons; play, quit, settings and return. This meant that I needed to make 12 images for the buttons alone.
While the changing sprites when the player interacted with the buttons gave the player feedback, I decided that I wanted to add audio to the UI. This would mean that when the player hovers or clicks a button there would be audio feedback as well as visual making the menu feel snappy and satisfying for the player experience.
In order to achieve this, I created 2 audio sources and turned off play on awake. I then recorded the sound of me dropping a heavy stack of paper and cut the sound, so it was really short. I did this twice with a different amount of paper giving me two similar but distinct sounds to use for the buttons. I put one sound in one of the audio sources and another in the other. I then added an event trigger to every button and set it so that on pointer enter it plays one sound and on pointer click it plays another sound.
Before now, I had a panel called help which was meant to give the player instructions on how to play the game but due to this being a visual novel I decided to change the panel to settings. I could only think of 1 setting that would be applicable to the game however which was audio. Therefore, I decided to split up the audio options into 3, music volume, sound volume and mute. In order to change the volume, I created a slider that on value change would change the audio.
For the Sound volume slider, I changed the volume of the hover and click sound effects as well as the sound of the text in the dialogue. For the music volume I changed the volume of the music that would be almost constantly playing in the background. For now, I have downloaded a royalty free song from youtube that I could use as a placeholder while I wait for Archie to make custom music for my game.
Next, I wanted to make a mute toggle. In order to do this, I made a toggle and set it so that on value changed it would mute every audio source in the game. This worked perfectly and all I had to do next was draw a box. I also drew a mark so that once the player clicked the mute toggle they knew if it was active because of the mark in the box. After this, the settings UI was complete.
After adding in the sound effects and the settings panel, I got my friend to test the UI. At the time, I had all 4 characters displayed at the bottom of the screen, but he suggested that they should be animated. This gave me an idea to make the characters jump when the player hovers over certain buttons. This gives the player a 3rd form of feedback letting them know that the game is responding to their actions.
I began by animating all the characters, making them jump up when the animation plays. This was relatively simple using unity’s inbuilt animator. Next, I had to set all the animation so that they wouldn’t loop, otherwise the characters would be constantly jumping up and down. Then it was as simple as telling the animation to play when the player hovers over the button. This was done the same way as the audio playing using the event trigger system on the buttons. I assigned each character to a button and them all to the play button, meaning that when the player hits play, they all jump.
After doing this I wondered if there was a way, I could allow the player to name their own character. From the beginning I wanted this to be a feature as their creation is what was going to come alive at the end. To begin with I created a new UI element that became active when the player pressed the play button in the main menu. I did this through fungus by having a block that when the play button is pressed. It sets the new menu active and the previous one inactive.
I then created an input field on the new UI that allowed the player to type whatever they wanted and added the text “Insert Name Here” that would explain the purpose of this box. I also added a play button and return button that would either play the game or send the player back to the previous menu. The back button worked by using fungus which set the new UI inactive and the main menu active. The play button would trigger the first dialogue flowchart.
In order to save the player’s name, I added a command on the first block that is triggered by the player clicking the play button which gets the text from the input field and saves it to a string called “PlayerName”. After a few minutes of researching, I found that I could say {$PlayerName} in some dialogue and it would display the name the player had given the main character. I then went through all of my dialogue and replaced all the time one of the characters mentions the players name with {$PlayerName}.
Next, I wanted to change the players name on the dialogue box, since it allowed the player to know who was talking. I tried replacing the name text on the player character script with “{$PlayerName}” and it functioned exactly as I hoped. This meant that whatever the player input as the character’s name would appear as the character in the game. The final test for this command was in the UI. In one of the ending scenarios, the main character changes the game name to their world, and I wanted to see if I could change the text to say {$PlayerName}’s world. It worked perfectly.
This week I think I have done a lot of progress on my game and it is now almost finished. I am happy with where I am, and I hope that next week I can get the backgrounds in the game and do a bunch of playtesting to find bugs and balance the game properly. Now that the art is in the game properly, I feel a lot happier about the game as a whole.