Creating a Healthbar using the Coherent Exporter – Part 1

by Alexandra September. 07, 17 0 Comment
Creating a Healthbar

This tutorial describes how a Healthbar for an FPS HUD screen can be created using Adobe Animate and the Coherent Exporter Add-on. No previous Adobe Animate or HTML experience is necessary.

1. Create new scene

From the “File” menu choose “File/New”. From the window that opens select “Coherent Exporter GT (Custom)”.

Note: if you are targeting Hummingbird you can select “Coherent Exporter HB (Custom)”. This tutorial is applicable for both target configurations.

create new document

A new scene opens. From the properties window enter width and height of the scene (in this sample 1920px by 1080px).

size of scene

You can also set the background color of the scene from the color picker by left clicking on it.

color of scene

2. Import assets

The next step is to import the image assets. Simply drag and drop them from the folder to the scene.

import assets

3. Setup positioning

Once the images are imported you can position them by left clicking on the UI element (to select it). When selected a rectangular mask will appear around the element.

select image

Then drag and drop it to the new position.

move image

select tool

Note: Make sure that the Selection Tool is selected in the tools panel.

Tip: If there are elements that are overlapping and you would like to send a specific one to the front/back you can do this by right clicking on it and choosing “arrange/send to back/front” from the context menu.

arrange images

Tip: when moving elements, automatic guide lines will appear to help you align the elements.

guide lines

Use drag and drop to position all the elements as in the reference image.

reference image

4. Add text

To add text first select the Text tool from the Tools panel.

text tool

Then left click on the scene in the place where you want the text to appear and enter the text itself by using the keyboard.

create text

If you want to use a specific font, select if from the font dropdown menu in the “Character” menu in the “Properties panel” (in this sample we will use Tahoma)

create text

To setup the color of the text left click on the color picker in the “Character” menu in the “Properties panel”.

text size

To set the size of the text left click on the size input field again in the “Character” menu in the “Properties panel”.

You can change the position of the Text element, as any other element, by selecting it with the select tool and drag and dropping it to the new position.

all texts

Using the described methods, add 3 text elements and set their size position, color and font to match the reference image.

5. Add custom shape

Apart from text and images the UI compositions can contain custom shape created with brush, ovals, rectangle and polystar tools. In this sample, we are going to use the rectangle tool to create a horizontal bar.

Select the rectangle tool from the Tools panel:

rectangle

then simply draw a rectangle to match the reference image.

create bar

Change the fill color by selecting the element with the Select tool and left clicking the fill color menu in the properties panel.

pick color

Next, select the outline of the shape with the select tool and delete it by using the delete key on the keyboard. This way the shape will have only fill and should match the reference image.

fill bar

6. Group UI elements into a Symbol

For easier manipulation of all the UI elements, we can group them in a Symbol. To do this left click, hold and drag around all the elements to select them.

select elements

Then right click on the selection and choose “Convert to Symbol”.

convert to symbol

In the next screen enter the symbol name and click OK.

name the symbol

The symbol that holds all the elements is now created.

7. Add animation

To animate the newly created symbol, select it, right click on it and from the menu choose “Create motion tween”.

motion tween

Go to the timeline panel and move the pinhead to a starting position as indicated on the image.

animation

Then move the symbol to the left of the scene.

animation

After that move the pinhead to the later position.

animation

And then move the symbol to the right.

animation

That way you animated the position of the symbol. You can preview the animation by pressing the play button.

8. Add data-binding with Coherent Exporter

Data-binding attributes can be used to directly reference the UI from data models defined in the C++ code of the game. To add data-binding attributes, first select the symbol and enter instance name in the properties panel.

data-bind with coherent exporter

Then enter data-model info provided by your C++ developer. In this case will enter in the “bind-style-left” field {{playerDataModel.left}} in the “bind-style-right” field {{playerDataModel.right}}. That way the position of symbols would be automatically bound to a data model defined in the C++.

data-bind

9. Publish the created content as HTML

To publish the scene as HTML simply choose Save as from the Coherent Exporter panel and select file name and location in the window that opens. Then click on the Save button.

save as

Now the HTML page is ready to be integrated in a GT or Hummingbird View inside of a game engine.

More information about adding data-bind attributes with Coherent Exporter and creating a mock model in JavaScript, you can find in the second part of this tutorial here.

Social Shares

Related Articles

Leave a Comment