GUI – Menu Design

GUI. Usually enunciated as ‘gooey’ and stands for Graphical User Interface. But enough of the technical talk, let’s get down to business!

The week’s tasks were to begin creating parts of the GUI for our game project. There was recently a group play-testing event and for this event we had basically implemented place holders for our menu for the player to actually be able to play, restart and quit the game. They looked terrible, but hey, that’s what place holders are for right? But, they needed updating to spice up the aesthetics of the game.

16933624_1759387047432659_627348892_n
The Place holder.

As lead graphics I made the decision to design a menu that contributed to the game play and to increase immersion into our 16th century world of fire and witches.To the drawing board! Or drawing pad in a literal sense but….

Sketches. I love sketching out ideas with pen and paper before moving onto digital art. So I began playing around with flames, torches and lanterns instead of letters but felt they became far too gimmicky. So i scrapped that. The next idea was to create a ‘plaque’ for each button whilst creating animations for each button when hovered over or clicked. A metal block, a Piece of parchment or a wooden block made it through the design process. Our power-ups are more than likely going to be parchment so that got axed, the metal block didn’t really fit our aesthetics so I decided that the wooden blocks would be perfect.

Placing wooden blocks onto a screen was a little too boring though. I came up with an idea to have separate boards for separate buttons that would then be linked in some way, like a hanging sign or something. Chains seemed a little to fancy for the era so I decided to go with rope instead. So here we have the standard menu sprite.

Menu Blank.png
Standard Menu without any animations.

Playing with the idea as fire for letters, I created a simple lettering design for each button. In turn, when hovered over by the player these letters will come to life with the illusion of being burnt or on fire. To create a stronger sense of the lettering coming to life I also added some rim light to the rope that has been cast by the lettering.

opening-menu
For some reason frame 2 is bugged when I upload into WordPress… But you get the idea 🙂

Next up is to possibly create an animation for when the player is clicking on each button. It’s not fully decided yet but the possible choice is to have the button ‘burn up’ into charcoal but there have been no final decisions made.

Once again, thanks for reading and keep posted for next week’s antics.

 

About Benjamin Lockwood

2016 Graphics