Welcome to AHA - Standard Graphical User Interface Wiki. This wiki is here to assist you to create and edit User Interface(UI) elements for the games and applications you develop for the AHA Project. Please use the Bitbucket Issues feature to communicate any difficulty or error you encounter so this package can be continuously updated to better suit the needs of all the persons involved in the project. You can also use the Issues feature to give any suggestions for improvement or request personalized icons or elements for your project. Enjoy!

--

Quick Start: Build your AHA UI in Unity

• 1. Download the UI Unity Package

• 2. Import Package in Unity

• 3. Drag UI elements prefabs in your canvas

This is all you need to start using the AHA Standard User Interface Elements in your Unity Project. Check the next topics if you need more details.

Overview

The AHA - Standard Graphical User Interface was designed with the intention to unify the visual identity of all AHA Project applications. It was compiled using but can be used in any type of application by the use of the provided elements images.

It offers you the possibility to choose amongst different elements types within the colour palette which can result in different combinations while keeping the visual consistency.

You can find here a poster with some of the elements combinations and colours including the RGB codes.

The included icons are some of the most common used in games and applications but any icon you need for your project can be designed to match the AHA visual identity. If you prefer you can also design your own icons, in the downloads page you'll find the link to the vector source file which can facilitate the design process. We kindly ask you to keep a similar style and the exact same colours. Thank you! :)

This Bitbucket repository contains the source project with all the elements included and a demo scene you can interact with. You can clone it or download it and check some examples in action.
You can preview the build version in the Unity Cloud Build - Web Player. Important notes: this preview will not work in Chrome browser, please use Firefox or Internet Explorer and change Player dimensions to 1280x720 or any other dimensions with the 16:9 aspect ratio. (This demo uses World Objects as Interface Canvas that's why is not enabled for different aspect ratios)

Downloads

Depending on your needs, you may find different types of downloads available. On the downloads page you'll find a list of different packages, just choose the one that suits you better:

• Download Repository - this corresponds to the Unity 3D project - source code and assets. choose this download option if you want to check the demo project of the UI elements. Some animations are included for your inspiration. Inside the project you'll find all the images, fonts and prefabs used in the standard UI. You'll need Unity 5.3 or higher to open this project.

• AHA-Standard-Interface-Images+Font - this is a compressed folder with all the elements images (PNG files) and also the fonts used in the Standard UI. Choose this option if you already have an interface created and you just want to change the images of your elements. If you are not using Unity for the development of your application, this is the right download for you as well.

• AHA-Standard-Interface-Elements-Poster - this is an Illustrator CC file (.AI) with all the elements in vector format. Choose this download if you want to design your own elements to keep visual consistency.

• AHA-Standard-Interface.unityPackage - this is the Unity Package which contains all the prefabs, images and fonts used in the Standard UI. Choose this option if you are starting your interface from scratch in Unity 3D since with the use of prefabs you'll instantiate easily your interface elements just by drag and drop. Check the next topic for instructions on how to do this.

Create your UI in Unity (Detailed guide)

The AHA-Standard-Interface.unityPackage will help you setting up your interface as simple as drag and drop elements on your scene canvas:

• 1 - Download the AHA Standard Interface.unityPackage from the downloads page.

• 2 - In Unity, on the top menu, choose Assets> Import Package> Custom Package.

• 3 - Browse to the Unity package you just downloaded and choose Import.

• 4 - Right-click on the Hierarchy and choose UI> Canvas.

• 5 - Inside the Assets folder you find now the AHA Standard Interface folder. Look for the folder Prefabs and choose the type of the element you want to use. You'll probably would like to start by a Panel, so just open the Panel folder and choose one colour of your preference.

• 6 - Drag the prefab in the Canvas in the Hierarchy:

• 7 - Choose any other element you want to instantiate, for example, one of the provided buttons and drag it into the Panel (in the Hierarchy). By default, elements are instantiated at the center of its parent, you just have to drag it to the position where you want it.

And that's it! Do this to any other element you need to build your interface.

Update your UI in Unity

If you have already your interface created in Unity and want to apply the Standard Graphical interface without having to create new UI elements, you can do that easily by just changing the images of your elements.

• 1 - Go to the downloads page and download the AHA-Standard-Interface-Images+Font.rar.

• 2 - Extract the folder and move it to the directory of your Unity project inside Assets folder.

• 3 - Open the scene of your project that contains the interface.

• 4 - Select the element you want to update, for example a button.

• 5 - In the inspector, look for the Source Image and browse till you find the button image you want to use.

• 6 - You may find the result will be a distorted image, to fix this just switch on the Preserve Aspect checkbox.

• 7 - Resize to match the size you want.

Note for Text elements: change the font to the one of the CordiaAU fonts provided. It is suggested to switch on the Best Fit checkbox so it resizes with the canvas. Use one of the colour codes of the AHA palette (you can check the RGB codes in the poster).