Week 5 DevLog Update #4 - Menus, Logo and GUI: Moodboards, Concepts & Programming...& Buttons

 

Development Log - Update #4

Week Beginning: 26/10/2020

Project Week: 5

Game Title: "Student Vs Zombies: Academytis"

This week I mainly researched menus in pixel art style and developed concept art for the game log, as discussed below.

Pixel Art Styled Menu's

Here are some examples of pixel art games that I used for reference material:

My Concepts developed from the research...

Concept Menu system #1:

This was the initial design of what I imagined the menu system in the game was going to look like. With minimal but modernised buttons in a mixture of blacks and reds, possibly a few blues and greys on window borders.

                       Main Menu                                    Options to Play, Load or Save                 

            Settings Menu (Preferred)                              Inventory GUI Menu                              

Pause Menu (left) & Map View (Right)

Pause Menu appears in lower corners of game window with game made out of focus and grey-scale. (toggled/modified in settings) 

Map View swaps to phone taking up whole screen. Game is Paused.

Concept Menu System #2

The noticeable difference in this system is I have reduced one of the functions I previously planned (The phone pause menu concept) and joined the escape menu with the inventory system.  This functionality is inspired by the system used in the game Terraria, where you can choose to let the game continue or pause just by opening the inventory. 

top to bottom: Main Menu, Level Select, In-game GUI, Pause & Inventory

Comparison of 1&2

Taking a closer look at the design details, the main menu has had a slight rework to the previous concept. The button appearance has remained the same, but their arrangement has changed with the quit button now placed alongside the settings icon and a greyed out "Continue" button has been placed under the large button labelled as:

 [  PLAY   \\ 

In the top left, a thought was to place a hidden button to take the player/user to a hidden "credits" page where they can see the source-creator of certain components as in large games with large development teams, but this is more of a "Future Feature".

Moving down the page, the level menu system has been overhauled so you can see the main game level, an  "Endless UoN Tutorial", and two greyed out locations, which when hovered over by the mouse, will either display "coming soon" or a simple level lock icon .

Logo Development

I looked at a variety of logos on pixel art games and there are various styles and different ways of using fonts and images to brand the game.

Logo Moodboard

Warped uses scifi style font as it is a game set in a futuristic space environment and the neon colours alike space lighting and emphasize this - though there are no graphic attached to the logo. All the others include graphics within the text to highlight the theme of the game - skulls flame, cityscape, gangster hands...and the font in double jump is also textured like a building.

Initial Logo Concept Art/Font (sketched out & digital)

The key idea in these tester logos was to include the title of the game and the initials S for Students and z for Zombies and try and integrate some student/campus related graphics.

These three options  were drafted up below and posted for a bit of feedback from others.

In addition, the logo and title started to feel a bit unoriginal and not catchy - they didn't inspire me.

Final progress of the week...DAMAGE PARTICLE SORTED!!!!

After struggling to get the damage particle attached to the player working, feedback from course leader suggested that I should make it longer lasting, placed at the world origin and brought forward towards the camera and finally should up the emission rate for testing...this seemed to fix the issue entirely.

Project Steps (and Programming)

Using new placeholders, this week focussed on developing the links between menu pages in the User Interface. This was practice in menus systems and programming multi-state buttons.

Main menu screen

To create the main menu, a new scene had to be created and set to default as the main scene for when the game starts up. The main menu screen setup involved play, level select and quit buttons and a logo. 

Menu buttons setup

These were setup to use 4 states, each with their own sprite - default, hover (highlighted), click (looks pressed down), disabled (greyed out and inactive). These were linked by a button manager script which allowed the game to link between scenes/menus.

Level select screen setup

To have multiple menus, we needed to create a new scene called "LevelSelect". This created a new scene with an empty area to build the new menu in.

Level select menu

This menu was setup with a large placeholder as a backdrop, along with two placeholder buttons previously used in the main menu. "Button 1" was to enter the game level while the other was used to go back to the previous screen.

Button manager for menu system

The "ButtonManager" script allowed for the player to navigate between the different scenes via the buttons used, as mentioned earlier. During the creation of the placeholder level select screen, I found that the buttons had stopped working and after a lot of testing and re-testing, I realised that a vital object called an"EventManager" was missing and with that in place, everything started working again.

Escape key function

After everything was in place, the game required a way to exit and the "Escape" script allowed the user to end the game by pressing, you guessed it, the "Escape" key.