Devlog - User Interface / Polish

Devlog – User Interface / Polish

There has been a simple straight forward user interface added to Triple Slime in order for it to feel more like an actual game rather than  a single scene that you have to refresh in the browser in order to play it again. Buttons have been added to traverse the different scenes. On the title screen (Figure 1) you should see a "new game" button which takes you to the game select screen, an "about game" button which displays a brief description of what is happening in the development of the game at the moment (Figure 2) and an "Exit Game" button that has been disabled at this point in time. The game select screen has buttons that will take you to different game modes depending on the one that you choose, (only one game mode is available at the moment but there are plans to implement more) and a back to main menu button (Figure 3).

Figure 1. Title screen

Figure 2. About game screen

Figure 3. Game Mode Screen 

Once in the game, the only interface the player sees is the counter that keeps track of the players moves and score in the top right corner (Figure 4).

Figure 4. In game scene

After the player satisfies the game over criteria (i.e. 100 moves in the 100 move challenge) it will ask the user to input their name if they have beaten their previous high score (Figure 5), or if they haven’t it will take them to the high score screen which displays the current highest score along with a return to menu button or a play again button (Figure 6).

Figure 5. New high score screen

Figure 6. High score screen

The scripts used to switch scenes and for the high score screens were taken from content provided by the university.  

Feedback

Based on feedback received, some people found the writing difficult to read in some circumstances or on certain backgrounds. In order to prevent this, I added a boarder to the text in a contrasting colour to the original text so that it should stand out regardless of what background it was on. This had can be seen in the images presented previously (Figure 2) and a before image below (Figure 7). 

Figure 7. About game screen before text boarders were added