Coherent UI & Unity3D input tutorial

by Hristo K February. 24, 14 2 Comments

Hey everybody! My name is Hristo and I joined the Coherent Labs team a few months ago. I would like to share with you a tutorial that I just prepared about how we can control the input received by Coherent UI and Unity 3D.

1. Purpose

The purpose of this tutorial is to show how we can disable and enable input of Coherent UI views and Unity. It also shows how you can detect input when using multiple views. There are three basic scenarios for this Input sample:

1. Only Coherent UI input is working
2. Only Unity input is working
3. Both Coherent UI and Unity input are working

2. Basic setup

2.1 3D scene

sphere
To demonstrate the input scenarios we create a simple scene in Unity. It has one camera to which all the Coherent UI views will be attached. It also has unity FPS controller used for movement  and a 3D sphere object that will be used to to test Unity mouse input. The sphere has a script called “RotateSphere”. It starts/stops rotating the ball on click using the following code:

2.2 Coherent UI views and html/css elements

coui_input

We add 4 Coherent UI views to the main camera of the scene. One will be used for all the buttons, labels and input fields that we will use for Coherent UI input testing. The other three will be used for testing of multiple views. We set the corresponding pages to each of the views in the url field in the unity inspector. The pages are prebuild using simple html5/css. You can find more info about html5/css at w3schools.com/ or use web development tools like Adobe Edge

2.3 Unity GUI

unity_buttons

We need Unity GUI buttons in order to disable/enabled Coherent UI input. To do so we create new script called “Main” and attach it to the main camera. Then we add to it a OnGUI method and two buttons so that we can disable and enable CoherentUI input. They are positioned at the bottom-right corner of the screen.

2.4 Binding 

We set up a two-way binding that will allow interaction between the scene and the views.  It will trigger events when clicking on the GUI buttons and it will update the “Input Status” window. For more information about binding you can check out the binding sample that comes along with Coherent UI.

2.5 Toggling input status

We need a method that will toggle between the three scenarios defined in the beginning of the tutorial. We first define a enum data type that contains the three scenarios.

Then we create a method that toggles between the scenarios and uses methods for enabling/disabling Coherent UI and Unity input.

 

3. Enable/disable Coherent UI input

To enabled/disable the Coherent UI input we use a simple method called ToggleCoUIInput.  It goes through each of the views in the scene and changes the ReceivesInput property to either “true” or “false”.

It also triggers event called “CoUIInputEnabled” to javascript that changes the css styles so that the Coherent UI looks greyscale when it is disabled. It also changes the text for the “Input status” window.

cou_gs

4. Enable/disable Unity input

To disable the unity input we first set the “ReceivesInput” property of the views to “true” which causes all the input events to be “used”.  The unity components that we use check if the Event is used and if it is they ignore it. You can find more information about “Event.Use” at https://docs.unity3d.com/Documentation/ScriptReference/Event.Use.html . If the unity component does not check whether the events is used we need to manually disable it. For example the Character Controller from FPS controller needs to be manually disabled when we disable unity input.

5. Enable both Coherent UI and Unity input

To enabled both Coherent UI and Unity input we create a method called “ToggleUnityInput”.  When the unity input status is changed it checks if both the unity and Coherent UI are enabled and if it’s so set to the appropriate input state.

 

6. Multiple views

The purpose of this test is to show how you can forward the mouse input to the view that the mouse is currently on when you have multiple views. When you hover over one of the views it changes it’s css so it looks brighter.

multiple views

To do this we use the following code from CoherentUISystem:

It goes through all the views and first it disables the input by setting the “ReceivesInput” property to “false”. Then if the mouse is over the view it sets only its “ReceivesInput”  property to “true”. That way only the view that the mouse is currently over receives input.

You can try the input yourself, by downloading it from Here.

I really hope you’ll find this tutorial useful. If you have any questions or comments please post them in our forum.

Social Shares

2 Comments

Leave Reply

Leave a Comment

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

Time limit is exhausted. Please reload the CAPTCHA.

  • There´s a synthax error in the first code snippet. Unclosed bracket after the last else statement.

    Reply
  • This is an extremely great suggestions especially
    to those new to blogosphere, brief and precise information…
    Thanks for sharing this one. A must read post.

    Reply