Coherent GT Editor Quick Start

by Alexandra June. 17, 15 0 Comment

Coherent GT User Interface Editor Quick Start

The Coherent GT Editor is a powerful WYSIWYG User Interface editor based on HTML. Using its visual tools and code editor you can quickly create amazing looking UI for your game.

We have created the User Interface editor to enable developers make their UI faster and easier than before. The design is very intuitive and simple. A drag and drop functionality allows you to create a UI prototype in just a few hours. Jumpstart your project even if you do not have extensive knowledge of web technologies!

Here is a short guide of how to get started:

UI files

The first thing that you need to do in order to use the Coherent GT Editor is to create a CUIScene file. To create it go to the UE4‘s Content Browser, right click and from the context menu choose User interface/CUIScene.

Creating an UI scene

newFile

This generates two files – a CUIScene file and an HTML file. The CUIScene file is the file that will be edited by the Coherent GT Editor. The HTML file needs to be set to a Coherent GT view.

files

Setting the HTML file to a Coherent GT View

If you are using Blueprints, just select the Coherent GT view component in the component panel of your Blueprint and in the details panel the URL of the HTML.

setView User Interface Editor

If you are using C++, just set the HTML to the URL when creating the view.

For more information about Coherent GT views and how to use them please refer to the Coherent GT for Unreal Engine 4 Guide.

Editing the UI scene file in the Coherent GT Editor

To edit the UI scene just double click it and it will open the Coherent GT Editor

Editor workspace and panels

workspace User Interface Editor

The Scene options panel enables you to save the scene file, to select the aspect ratio (size) of the UI scene and to reset the size of the Viewport panel.

sceneOptions

UI elements can be created from the Create panel. They are divided in four main sections: Common elements, Form elements, Lists and Advanced widgets.

create

Once you click on the type of element it is automatically created in the editor viewport and you can edit its size, position and other properties in the Properties panel.

properties

Viewport panel is where all the actual UI elements in the scene are displayed. You can use drag and drop to arrange them.

viewport

All the elements in the UI scene are represented in the Hierarchy panel and you can use it to rearrange their position in the scene hierarchy by drag and drop.

hierarchy

The Files panel is used to import external files. You can import CSS files, external JavaScript libraries and event files.

filesP

The Code editor is used to edit the custom HTML/CSS/JavaScript/events files.

codeEditor

Many new features are yet to come! Stay tuned!

Social Shares

Related Articles

Leave a Comment