Unity3D – compositing multiple Coherent UI Views (tutorial)

by Stoyan Nikolov March. 28, 13 0 Comment

In this tutorial we’ll show how to compose multiple Coherent UI views simultaneously on the main player camera.

Some example scenarios when you would like to achieve such an effect are:

1) Having both the HUD and a browser simultaneously active on the player screen – both camera-aligned
2) In a strategy game all the unit’s portraits could be in one view (using the on-demand view feature for perfect gameplay synchronization) and all other HUD details (unit construction, menus, etc.) in another view
3) If you want to keep some sort of logic separate between views – for instance having the HUD and the menus in different views

These are only a handful of use cases, I’m sure many more can be invented. Keep in mind that most of the the time you could use just one view and separate the content with divs or iframes. For all the cases when this is not possible – here is a quick tutorial.

As it turns out achieving the composition is super easy in Unity3D and requires no code at all.

We’ll use as a base the “MenuAndHud” sample available in the Coherent UI package.
In essence we’ll render the two views on two render textures and then compose them on the Main camera via “GUI Textures”.

1) Create an empty project
2) Import the Coherent UI package
3) Run Assets->Coherent UI->Install Coherent UI
4) Now navigate and open the scene we’ll modify –

Assets/CoherentUI/Samples/Scenes/Sample03_MenuAndHUD/Game/game.scene

5) First remove the Coherent UI View component that is currently on one of the faces of the cube

Unity3D - compositing multiple Coherent UI Views (tutorial)

6) Remove the  Coherent UI View component from the “Main Camera” (under “First Person Controller”)
7) Add a Camera Game Object and set it’s position to (0, 0, 100) or any other position where it won’t be able to ‘see’ any of the scene or just use the culling mask of the camera

Unity3D - compositing multiple Coherent UI Views (tutorial)

8) Add a Coherent UI View component to this new camera

Unity3D - compositing multiple Coherent UI Views (tutorial)

9) IMPORTANT: Remove the ‘GUI layer’ component from the newly created camera.
10) Create a Render texture to hold our rendered view

Unity3D - compositing multiple Coherent UI Views (tutorial)

11) Rename the texture to ‘browser’ and set it to 1024×512 pixels

Unity3D - compositing multiple Coherent UI Views (tutorial)

12) Set the ‘browser’ texture as Render target for the new camera
13) Repeat steps 6-11 – create again a new camera, remove the GUI Layer component, create a new render texture but this time name it ‘hudTex’. Set the Coherent UI View component on the second camera to be 1024×570 pixels and set it’s ‘Page’ to ‘coui://UIResources/MenuAndHUD/hud/hud.html’. Make sure the view has also “Is Transparent” and “Support Click Through” set to true.

Unity3D - compositing multiple Coherent UI Views (tutorial)

14) Create a “GUI Texture” Game Object

Unity3D - compositing multiple Coherent UI Views (tutorial)

15) Rename it to ‘HudGui’, set it’s texture to our ‘hudTex’, it’s position to (-512, -256) and it’s size to 1024×570

Unity3D - compositing multiple Coherent UI Views (tutorial)

16) Create another “GUI Texture” Game Object
17) Rename it to Browser, set it’s texture to our ‘browser’, it’s position to (-512, -256) and it’s size to 1024×512. Note that the result will also be tinted by the GUI Texture ‘Color’ property. This could be used to achieve some neat effects.

Unity3D - compositing multiple Coherent UI Views (tutorial)

18) Play!

Unity3D - compositing multiple Coherent UI Views (tutorial)

That’s it! With this technique you can compose as many views as you like anywhere on the screen. Try Coherent UI now!

 

Follow Stoyan on Twitter: @stoyannk

Tags:
Social Shares

Related Articles

Leave a Comment

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload the CAPTCHA.