In this tutorial, Coherent Labs, creator of user interface tool Coherent UI, explains how its software can be used to develop holographic menus in your game, as seen Ubisoft's The Division.
You can download the assets for this tutorial here.
Vist the Coherent Labs website for more details on the tool. Be sure to visit the 3ds Max page and Unreal Engine 4 site for further details on those tools as well. More Coherent UI tutorials are available here.
Recently we had a poll in our forum about which game’s UI you would like to see recreated and the upcoming game The Division by Ubisoft was voted number one. In this tutorial we’ll show you how you can create 3D hologram menu similar to the watch in The Division.
On the picture below you can see the finished menu. In part 1 of the tutorial we’ll have a look at the setup of the level in UE4 and we’ll create the needed 3D objects in 3ds Max. In part 2 we’ll create the HTML UI itself using Adobe Edge and the Coherent Labs animation framework.
1. The “anatomy” of the project
The finished project consists of three 3D meshes and two Coherent UI views. The first mesh is a gengon that we’ll use to map the menu on. There is square mesh for the UI above the watch and a mesh for the watch itself. The two Coherent UI views are mapped on the gengon and the square meshes.
2. Model the 3d objects in 3ds max
We’ll use Autodesk’s 3ds Max to model the needed 3D shapes but actually the models are quite simple so if you don’t have 3ds Max you can use free alternatives like Blender.
2.1 Gengon
First we’ll create the gengon that will be used for the menu. To do this we’ll use the gengon tool (located under create/geometry/extended primitives) and it’s properties we’ll setup the size and number of sides.
2.2 Square
Then we’ll create the square mesh using the plane tool (located under create/geometry/standard primitives) and set the length and width to the same value.
2.3 Watch
Then we’ll create the mesh for the watch. We’ll skip the details about it’s modelling as this is out of scope for this tutorial but you can download it from here along with the other meshes.
Once the meshes are ready we’ll just export them as FBX files using the file/export menu.
3. Setup the level in UE4
For this tutorial we’ll use Unreal engine 4 however, using roughly the same steps you can achieve this functionality in other engines such as Unity 3D.
3.1 Setup the Coherent Labs FPS sample game
We’ll use the Coherent Labs FPS sample game as a base for our Unreal project. First we’ll remove all the objects but the floor as we don’t really need them.
3.2 Import the mesh files
Then we’ll import the FBX files for the meshes by dragging them to the Content browser window.
3.3 Create the material and add the Coherent UI component
The next step is to create the material and add the Coherent UI component to the meshes of the gengon and the square.
To create the material, right click in the content browser and choose new material. Edit it, add a Texture Object, convert this into a Texture Sample, convert it into a Parameter, rename it to “UITexture”, and connect it to the Material’s “Base Color”. Also make sure that the opacity of the texture is connected to the opacity of the material. Create an instance of the material.
Once the material is ready we need to add the Coherent UI component. To do this, right click on the gengon in the content browser and choose “Create blueprint using”. In components panel add the Coherent UI component and set the mesh to use the newly created material instance. Using the same methods we create a blueprint for the square mesh as well.
3.4 Add the blueprints and the watch to the level map
Now that we have the blueprints ready we drag and drop them from the content browser to the level map along with the watch mesh.
Then using the move and scale tools of the UE4 editor we’ll position the meshes and we have our level setup!
Part 2
In part two of the 3D hologram menu tutorial we’ll create the HTML content for the menu using Adobe Edge Animate and the Coherent Labs Animation Framework.
On the image above you can see the finished menu. In part 1 of the tutorial we mapped the Coherent UI views on 3D meshes and now we just need to create the HTML content for the UI.
1. The watch
First we will create the HTML content for the Coherent UI view on the watch.
1.1 Create the project and import image assets
We create a new Edge project and setup the width and height of the stage to the same size to make it square.
Then we import the image assets by dragging and dropping them in the scene (the image assets are available here along with the rest of the tutorial’s files). Then using the select tool we resize each of the elements.
1.2 Position the elements
We use the built in guidelines(purple lines) of Edge Animate to center them vertically and horizontally. Make sure to check the snap to guides option (view/snap to guides).
1.3 Create symbols and animate them
Then we convert each of the images to a symbol (by right clicking on the image and selecting convert to symbol). By doing this we have a separate timeline for each of the images. In this way can have them rotating at different speeds independent of each other.
So, one by one we select the newly created symbols and we animate their rotation by placing the appropriate keyframes and transitions on the timeline. For more information about the Adobe Edge timeline and keyframes check this tutorial – http://ift.tt/1GiHtVY in our blogpost.
In order to make the animation loop at the end of each one add a trigger with the following code:
When this trigger is reached it will cause the animation to restart from the beginning.
Lastly, we use the ellipse tool to create a few additional circular shapes.
And the HTML content for the watch is complete. Now we’ll move on to the menu.
2. The menu
2.1 Create the project and import image assets
Again we create a new Adobe Edge project and we import all the image files.
2.2 Position the elements
Using the selection tool we select, clone, position and rotate them to achieve the desired design.
Then using the Rectangle tool we add background
And we use the Text tool to add text.
2.3 Create symbols and animate them
Now our menu item looks complete and we convert it to a symbol and start animating it.
First, we create an initial animation to be played when the UI is first loaded. We animate the position, opacity and size of the elements again by placing the appropriate keyframes and transitions on the timeline. The goal is to make the corner images move towards the text and back.
Then, we create an animation to be played when the user hovers the mouse pointer over the menu element. This means, however, that we need to have multiple animations for the same symbol on the same timeline.
To achieve this we first add a trigger at the end of the initial animation with the following code which causes it to stop:
|
1
|
this.stop();
|
Then we choose a later time on the timeline and we create there our hover animation.
Again we animate the position, color, opacity and size of the elements by placing the appropriate keyframes and transitions on the timeline. The goal is to make all the blue elements red when the user moves the mouse over the menu item.
To make it work we just use the mouse enter action of the symbol and make it play from the starting moment of the hover animation.
An the same way we create action for mouse leave to play from the beginning of the timeline so that the item will be restored when the mouse leaves it. Now our menu item symbol is complete and animated.
We duplicate it in order to create the rest of the menu labels and the menu is now complete.
2.4 Add additional interactivity with the Coherent Labs Animation Framework and GSAP
To enhance the functionality of the menu we create animation which moves the menu items on mouse scroll.
To achieve this we use the Coherent Labs Animation Framework which is based on GSAP.
First we add the JavaScript libraries
Then we add the following simple script that will listen for mouse wheel events:
The script first checks if the scroll was moved up or down,
Then it moves the first and the last menu item to bottom and top accordingly using jQuery’s prepend and append functions.
Lastly, it animates the whole stage using GSAP’s TweenMax:
Now our HTML is complete.
The only thing that remains is to set the URL’s of the Coherent UI components to the previously created HTML.
And here’s the finished menu:
You can view a sample video of the holographic UI in action here.
Read the full article here by Develop Feed
No comments:
Post a Comment