This tutorial will show you how to add the Coherent GT plugin into a project and create two types of UI elements – a HUD and an in-world UI view . Below are the steps to achieve this.

1. Install the Coherent GT plugin

First, you need to install the Coherent GT plugin using the installer wizard. The installer auto-detects the UE4 engine versions that are available on this computer and gives you the options to install UI kits and a sample game

Check out the video tutorial here!

2. Enable the plugin in your project

Start the Unreal Editor, and choose either an existing project or create a new one via New Project -> Blueprint -> Blank, and save it in a folder of your choice.

The first thing you have to do is to enable the Coherent GT plugin in the editor. From the main menu click Window -> Plugins, then navigate to the Coherent GT Plugin and click the checkbox `Enable`. A new pull-down menu will appear – Coherent GT.

Then create a new level and open the world settings. From the Game Mode section, click the `+` button to create a new GameMode override. Let us name it MyGameMode.

Now, from the main menu choose Edit -> Project Settings, and navigate to Maps & Mode s in the Project section, then set the Default GameMode to `MyGameMode`.

3. Add a HUD

From the Coherent GT menu, choose `Add HUD`. This will change the current GameMode’s HUD class to `GTGameHUDBP` and will initialize it. Also, it will add a hud.html page in /Content/UIResources/ directory, if not already present; then this page will be opened in your default browser.

For the HUD, we’ll add some UI resources in /Content/uiresources folder, which can be downloaded from here
As we previously mentioned, the HUD has been pre-setup for you and is ready to use, so you don’t need to do any modifications to it, except for changing the view Page URL to `coui://uiresources/HUD/MainUI.html`.

To see its content, open the `GTGameHUDBP` blueprint in the Blueprint Editor. Here’s a brief explanation of what happens:

• setting up the View – page, transparency, alpha threshold

 

• the UI input is initialized – this involves spawning and initializing a `CoherentUIGTInputActor`, and then setting “Accept mouse input” to true.

• setting up UI scripting (the two-way binding between JavaScript and Blueprints)

 

The only part covered in this tutorial, is the View setup. The UI Scripting and the input will be covered in an upcoming tutorials.

The page is set by default to `coui://uiresources/hud.html`, so the newly created page by Add HUD will be used if you do not changing it.
You can change it whenever you want to a local page, placed in the uiresources folder and use the coui:// scheme, or to a page hosted on the web and use a standard scheme such as http://.

Check out our video tutorial here!

4. Add in-world UI

Choose Coherent GT -> Add In-world UI this will add a `GTPlane` to your scene, just in front of the player. You can change its transform via the World Transform in the `Details` tab of the `GTPlane`.

Click `Edit GTPlane` from the same tab and its blueprint will open. As you can see, it has a `CoherentUIGT` component and the UIScripting already setup for this view.

Follow these steps to setup the view::

1. Get a reference to the `CoherentUIGT` component in the EventGraph of the `GTPlane` blueprint.
2. Drag a pin from the reference and create `SetURL` node and set the url to `coui://uiresources/animation-demo.html`
3. Add a `Begin play` and connect it with the url setter.
4. Now go to the editor and click `Play`.

 

Here is the final result: