Coherent Editor Quick Start

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

Starting the Editor

UE4 version

If you are using the UE4 version of the Editor you can start it by selecting it from the Coherent GT/SG menu in the UE4 Editor *(note that the GT/SG plugin must be installed first). *

Unity 3D version

If you are using the Unity version of the Editor you can start it by selecting it from the Coherent GT/SG/Hummingbird menu in the Unity 3D Editor (note that the GT/SG/Hummingbird plugin package must be imported first).

Lumberyard version

If you are using the Lumberyard version of the Editor you can start it by selecting it from the Coherent GT/SG/Hummingbird menu in Lumberyard *(note that the GT/SG/Hummingbird plugin must be installed first). *

Standalone version

If you are using the Standalone version of the Editor on Windows you can start if from the CoherentEditor.exe in the Editor folder (which is located in the main folder of the Coherent GT package). If you are using the Standalone version of the Editor on Mac OS you can start it from the CoherentEditor.app located in the Editor dmg file (which is located in the main folder of the Coherent GT/SG/Hummingbird package).

Editor workspace and panels

The Editor's main panels:

  1. Create panel
  2. Main menu
  3. Tools panel
  4. Viewport
  5. Scene properties panel
  6. Hierachy panel
  7. Properties panel
  8. Animations panel
  9. Assets Library

The Tools panel enables you to create, open and save HTML scene files, to undo and redo actions and to reset the zoom level of the Viewport panel.

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

Once you select the type of element, you can create it by drag and drop in in the Editor's Viewport panel. The Viewport panel is where all the actual UI elements in the scene are displayed. You can use drag and drop to arrange and resize them. If you double click on an element you can rotate it.

You can also edit the element's size and position as well as other properties in the Properties panel.

In the Properties panel you can also create event handlers for different events such as click, mouseenter, scroll, etc. You can also setup data-binding attributes.

In the Animations panel you can use a visual timeline to create animations.

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. You can also use it to change the visibility of the element in the viewport or to lock the element so that it cannot be moved or selected.

The Assets library holds all the assets in your scene - images, videos, widgets, CSS and JS files. To import a file click on the "+" icon and choose the file from the pick asset window that pops up.

The Scene properties panel panel allows you to select the aspect ratio (size) of the scene and create event handlers for its events.

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

Setting the HTML file to a Coherent View

To see the actual HTML UI that you created in the Coherent Editor in your game or application you need to set it to a Coherent View.

Please refer to the relevant documentation for the used HTML rendered in our documentation for more information about Coherent Views.

This concludes the Quick start section. For more information about each of the panels and tools please refer to the relevant sections.