Experimental

3D User Interface

The inspiration for this project stemmed from playing Assassin’s Creed III. The main-menu and information interface for the game is an arrangement of interesting floating panels in 3D space, with fluid camera movement and “poppy” animations.

I followed a similar approach with regards to layout in my UI, with a primary menu list that reveals a secondary details layout, providing information about the selected menu item. As a theme, I went with a showcase of different types of medieval melee weapons.

Scene and Scripts

The scene is a simple setup of a two cameras (more on that later), two directional lights (a primary upper light shining downward, and secondary fill light shining upward), a menu list (left), two details panels (right), and two particle systems (background).

floating-ui-scene

The menu list is populated dynamically at start-up from prefabs in the Resources folder, and the content to display for each menu item is contained within each prefab as text data along with a GameObject link to another prefab. In this manner, with each menu item being entirely self contained, it is easy to create new entries with whatever displayable content you desire by simply linking a prefab as the object to display.

Menu Item Prefab
On the left is the project view with the lower group of prefabs are the items that are loaded at start-up to populate the menu. On the right-hand side is the inspector view of a menu item, allow the values to be displayed to be added to the prefab, and a link to an object to display with the information. The upper group of prefabs is a corresponding set of objects that are associated with the menu items.

The scripts to drive the logic are  very minimal. A UIController instance is the sole governer of what is displayed: populating the list, tracking the current selection, handling assignment for the details panels, and triggering the appropriate animations.

A UIList and UIDetails component are each responsible for the menu item list and details panels respectively.

Finally, MenuItem and MenuItemInfo components are resposible for the storing of data to display in the UI. MenuItem represents a list entry and supports animation for selection, and MenuItemInfo contains all the information that a menu item is to display.

Art Assets

Menu item selections and camera movement are all animation-driven, triggered by the controlling scripts mentioned above. The abstraction of logic/art allows for for any assets and animation to be implemented without affecting the code that drives it.

The menu items and details panels make use of the built-in Unity primitives, and in order to achieve the wooden effect I applied various wooden textures (along with generated normal-maps) to custom Materials.

World-space canvases are used to render the text on all elements. The right-hand-side detail panel was more interesting as this needed to support scrolling for large blocks of text. In order to achieve this I implemented two depth masks above and below the viewable text area and chose to render the text on a seperate layer using a dedicated camera. This allows me to shift the body of text as needed, with any text that falls outside of the viewable area being culled from renderering.

floating-ui-scene-runtime

For good effect, I added two particle systems to the background to fill the empty space and add movement.

As for the weapons, I purchased Sroadeeer’s weapon pack, PBR Medieval Weapons Pack I from the Unity Asset Store. I had actually modelled both a sword and axe, but realised that it would take more time than I had available to complete the full set of weapons.

All information about the weapons was gleened from the Medieval Middle Ages and Wikipedia.

Remarks

I am quite happy with the final result, but the colours are not quite right and the font is not as clear as it could be. The information for each weapon type is also not well structured and in many places grammatically incorrect – I should really have cleaned this up. The purpose of the experiment was to write a functional UI in 3D space however, and I feel that I have achieved the technical aspect of it.

The most interesting part of the project for me was the animation of the menu items and camera, and coming a close second was playing with the materials and lighting of elements in the scene.

Made in Unity 2017.1. Project files available on GitHub.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s