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
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
For the HUD, we’ll add some UI resources in
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
To see its content, open the
GTGameHUDBP blueprint in the Blueprint Editor. Here’s a brief explanation of what happens:
CoherentUIGTInputActor, and then setting “Accept mouse input” to true.
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
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
2. Drag a pin from the reference and create
SetURL node and set the url to
3. Add a
Begin play and connect it with the url setter.
4. Now go to the editor and click
Here is the final result: