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).
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.
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.
UIDetails component are each responsible for the menu item list and details panels respectively.
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.
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.
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.
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.