Creating a mobile MOBA UI using the Coherent Editor

In this tutorial we'll shown you how you can recreate the MOBA UI sample html using the Coherent Editor.

1. Setting up the layout

The first step is to setup the aspect ratio of the target device. For this sample we'll set the viewport size to 1280px by 720px.

Later on we'll set viewport units to the UI elements so that the UI displays properly on any device that has this aspect ratio.

2. Importing image assets

The next step is to import the image assets to be used.

To add an image we simply click on the responsive image icon in the Create panel and from the browse menu choose the image file.

Then we set its width, height, top and left properties in the geometry tab to vh. This will ensure that all UI elements as scaled depending on the viewport size.

The added image can be positioned and resized using drag and drop in the Editor's viewport.

We repeat the procedure for the rest of the image files.

3. Adding text

The next step is to add the text elements.

To create the text elements we click on the text tool and then in the viewport to place the text.

To change the actual text content we go to the "Text" field under the text properties panel. In the same tab we also need to specify the size again using vh units and the color.

We repeat the same process for all the text elements.

4. Grouping elements

To make the animation of multiple elements easier we can group them in div elements.

To do this we can create a div element from the Create panel and set is background color to transparent (notice the 0 opacity value set in the opacity bar at the bottom left.

Then we can add all the UI elements that we want to group as children to the newly created div element. We can do this by drag and drop in the hierarchy panel.

5. Animating elements

Once we have all the UI elements of the scene created, positioned and grouped we can start animating them.

First we'll animate the Dragon group of elements. With the pinhead of the animation panel set to zero we position the dragon container to the left of the viewport.

Then we add a keyframe for the left in the geometry tab of the properties panel.

Then we move the pinhead to the position that we want the animation to end. In this case at 400ms. Then we move the dragon group inside the viewport.

Then we add a keyframe for the new value of the left property.

So that the animation has more natural look and feel we can add easing. To do this we simply need to select the desired easing option from the animations options menu.

The animation is now complete. We can preview it by pressing the play button of the timeline. Using the same procedure we add animations to the rest of the UI elements.

This concludes this tutorial. For more infromation please refer to the core Coherent Editor documentation.