Menu Layout, Colors, and Sound Integration

For the final release of the game, I worked with the team to design the in game menus and UI. The UI is controlled both by GUI and code. The main menu is the only menu created using canvas and button elements. The other menus utilize coding. The coding offered a large challenge with less control over smaller details, such as shadow, but worked better to meet certain demands of our code. To tackle the challenges presented by the code, I worked along side Lauren and Lance to complete any adjustments. I also worked with Lauren to integrate sound with button clicks.

Main Menu

In Game

In Game- Tutorial

Cut Scene

Level Menu

Updating in-game UI

Updating the UI

Main Menu Updates

I updated the font in the main menu to be Nightmare AOE. I also adjusted the animations for each button. When the user scrolls over the buttons, they grow larger and shift to blue if they are orange buttons for game play choices, The quite button shifts to a brighter red, and the grey only enlarges.

The main menu was adjusted with Unity by hand dragging the various elements.

Pause Menu Adjustments

The pause menus are only editable by code. So far, I have adjusted the font and basic colors of the buttons. When inactive, they are orange, when scrolled over they are blue. There is an odd transparency currently appearing at times when the game runs. This error does not always occur.

Rough UI Kit

UI Kit Mock

Font: http://www.dafont.com/nightmare.font

The menu assets and UI style should be fun and quirky. The chosen font is a uneven, cute, and fun, but still readable. Some of the elements may be mocked to match the monsters in the game. As in, using one of the creatures for the slider bar.

Mocking Up The UI

Learning Unity UI

Learning to Create UI in Unity

I began with some basic introduction videos to unity, to get a feel for the program. I then began following a tutorial to set-up a few basic buttons. These flicker when clicked. I learned the basics of customizing the preset UI assets already embedded into Unity.

Simplifying Screen Flow

Updated Screen Flow

UI Kit Research

Free UI Kits and References

There are a few free UI kits that might be a good starting point for our game. I looked on behance to discover a few different brain storming points.

https://www.behance.net/gallery/10482323/Basiliq-Freehand-UI-Kit

https://www.behance.net/gallery/22402201/Free-Combination-UI-kit

http://fribly.com/2013/05/25/human-after-all-ui-kit/

https://www.behance.net/gallery/UIUX-Flat-Design-Kit-Neon-Theme-FREE-PSD/8686783

Interface References

Binary Biters Contract 

(Revision: 3 March 2015) 

For the project I intend to: 

• Design and tailor the UI/UX layout and create a UI Kit, matching visual art style 
• Coordinate with the UI/UX developer to implement designs and problem solve constraints 
• Help to create/design audio assets to create a coherent and pleasant experience 
• Facilitate weekly group meetings and coordination with our mentor, Gracie. 
• Keep the group motivated and productive 

Major Mile Stones: 

• 2/5/15 (Initial Working Prototype) 
• 2/26/15-Fully functional rough UI/UX 
• 3/24/15- A more formal Screen flow, rough UI-Kit, Screen asset production 
• 4/9/15- Sound Library Research, more asset production
• 4/30/15- Finished sound and interface implementation 
• 5/7/15 (Final Deliverable) 

These objectives will alter based on development and team needs. 

I will flex as necessary to push production forward.

The First Milestone

Screen Flow Development Process

     For the first mile stone, I worked to complete a rough screen flow, using google drawings, and prototype, using moqups, for the Binary Biters.

     I began with looking at a few references including the Angry Birds web and mobile game, Tiny Wings, and 'Dillo Hills.

    For screen flow process, I read up on a few articles and looked at previous examples including: 

• http://www.slideshare.net/unthank/game-design-2-menu-flow2011 
• http://www.paladinstudios.com/2012/04/23/the-8-step-guide-to-interface-design-for-iphone-games/
• https://www.digipen.edu/fileadmin/website_data/gallery/game_websites/Eviction/FlowChart.htm

     To better visualize the game as a whole, I first created a basic moqup: 

• https://moqups.com/bladeligerruler@tamu.edu/MENjvwhE

     I then moved into creating a more efficient/usable screen flow that matched the programming team a bit better.

     I problem solved further to better match the programming team's expectations and created the above google drawing.

     Editable Link:

https://docs.google.com/drawings/d/1QDyPKOu5dqHMCdZzgZ0n-aP54dPwvqkd2TTCO6HJMKI/edit?usp=sharing

      The next stage will be to present this to the team as a whole and work out flow errors or kinks. We will also form a solid plan for amount of cutscenes and how the cutscenes will be integrated.

Wireframing

Screen Flow Wire frame

I have started wireframing Binary Biters. I began using the web app moqups. It works fairly simply, is free, and allows for quick sharing.

https://moqups.com/bladeligerruler@tamu.edu/MENjvwhE

Next, I am going to problem solve navigation between save states, game play, and cut-scenes.

Contract

Binary Biters Contract 

For the project I intend to: 

• Design and tailor the UI/UX layout and create a UI Kit, with the aim being to match visual art style 
• Coordinate with the UI/UX developer to match direction, style, and understand implementation limitations 
• Help to create/design audio assets, working to match the game's feel to create a coherent experience. 
• Facilitate weekly group meetings and coordination with our mentor, Gracie. 
• Keep the group motivated and productive 

Major Mile Stones:

• 2/5/15 (Initial Working Prototype) 
• 2/26/15-Fully functional rough UI/UX 
• 3/24/15-A more polished UI and finalized UI Kit 
• 4/9/15- Sound research 
• 4/30/15- Fully finished sound implemenation 
• 5/7/15 (Final Deliverable) 

These objectives will alter based on development and team needs.

I will flex as necessary to push production forward.