Coherent UI developed by Coherent Labs is a fully featured GUI system for any Unity (or .NET) game that utilizes the power of HTML, CSS, and Javascript. Use any bleeding edge HTML5, CSS3 features that run on WebKit and any JavaScript libraries you need. It is literally as easy as making a web page on Chrome. It also utilizes the WebKit debugger (just like Chrome) so it is easy find the root cause of any problem.

The video explains the whole process but this blog post contains some nice references (see video description for timestamps).

Play video

Notes:

• Only works with Unity Pro
  • This is because Coherent UI is a Plugin which means it is written in native code (C, C++, Objective-C, etc). Plugins are only supported by Unity Pro. See this documentation. Also note that Plugins do not work in the web player.
• There is a evaluation/developer version that they can send you. Same but has a watermark

Setting it up:

1. Import the Coherent Package by going to Assets -> Import Package -> Custom Package.
2. Install Coherent by going to Assets -> Coherent UI -> Install Coherent UI (not necessary in newer versions)
3. Set the folder where all your UI files will reside: Edit -> Project Settings -> Cohere UI -> Select UI Folder
4. Drag a CoherentUIView Script onto your Camera (Standard Assets -> Scripts -> CoherentUI -> CoherentUIView)
5. On the CoherentUIView, enable Is Transparent so that we can see the game.
6. Also enable Enable Binding Attribute so we can talk between JavaScript and Unity. In Coherent 1.6+, this is now called Enable [CoherentMethodAttribute] under the Scripting section on the CoherentUIView.
7. To clarify, use Automatic binding (this is if you are looking at the docs)
8. In newer versions of Coherent (at least 1.6 and up) you need to add couiView.ReceivesInput = true; in code to have input forwarded on desktop.
9. Make a C# Hud script and also drag it onto the camera. You can use the code below as your base:

   using UnityEngine;
   using System.Collections;
   using Coherent.UI.Binding;
   
   public class HUD : MonoBehaviour {
     private CoherentUIView m_View;
   
     void Start () {
       m_View = GetComponent<CoherentUIView>();
     }
   }

Calling a (GUI) JavaScript function with (Unity) C#:

In Unity (C#):

m_View.View.TriggerEvent("jsEventExample", arg1, arg2, arg3);

Part of your GUI JavaScript (JS):

function BoundFunctionInJavaScript() {
  console.log(arguments[0] + arguments[1] + arguments[2]);
}

$(document).ready(function () {
  // Bind event “jsEventExample” to a js function
  engine.on('jsEventExample', BoundFunctionInJavaScript, this);
});

Calling a (Unity) C# function in (GUI) JavaScript:

In Unity (C#):

[Coherent.UI.CoherentMethod("FunctionInUnity")]
public string FunctionInUnity(float arg1, float arg2, float arg3)
{
	// Returns sum of arguments supplied
	return arg1 + arg2 + arg3;
}

Part of your GUI JavaScript (JS):

// Calls a function in Unity called “functionInUnity” with 3 arguments
// Get return data via arguments[0]
engine.call('FunctionInUnity', arg1, arg2, arg3).then(function () {
  console.log(arguments[0]);
});