Data-Binding Common Game UI – Part II

by Ognyan Malinov September. 27, 17 0 Comment
Data-binding Game UI

Coherent Kits

In the first part of our Data-Binding Common Game UI blog post, we introduced Coherent’s declarative JavaScript data-binding and gave some easy to follow examples. In this second part, we will cover key moments in creating 4 data-bound elements.

Tip: If you are new to data-binding check out the first part of the post.

The elements covered in this post will be the following.

  1. Overview of the 4 State Button element
  2. Overview of the Drop-down Menu and Scroll List element
  3. Overview of the 9 Slice element
  4. Overview of the Sprite Sheet element

4 State Button

The first component is a button with 4 states. It can be used as a general purpose element that holds the state of a setting, or it can be used as a button for buying an item, which can be locked and purchased.

JavaScript data-binding
4 State Button 2
4 State Button 3
4 State Button 4

The state button uses data-bind-class-toggle to apply classes corresponding to the state of the button’s model.The conditions check whether the state string contains “normal”, “active” or other states. Furthermore, the four checkboxes below the button and the hover-pieceuse data-bind-if, which will display all elements whose condition is true and hide the rest. The conditions for these elements are the same as the ones for the button.

The JavaScript model contains a string, which can hold the following states:

  • normal
  • normal hovered
  • active
  • active hovered
  • disabled

What is more, engine.updateWholeModel(model) only marks the model as dirty, while engine.synchronizeModels() actually repaints the UI. However, in our example, the two actions happen simultaneously. As a result, we have included a function in the model that performs both of them together.

Essentially, the state of the button is changed to the appropriate one depending on which checkbox is clicked. Furthermore, if the actual button is pressed, it toggles from active to normal and back. In order to click the button, you have to enter it with your mouse, therefore, on every mouseenter the hovered state will be added and it will be removed on mouseleave.

The second element is a drop-down menu with a list of items to choose from. It is heavily used in UIs as a multiple choice menu like a language selection one or as a menu that changes the display resolution.

Dropdown 1
JavaScript data-binding
Dropdrown 3

This component uses data-bind-for to iterate over the model’s array and multiply the menu-option div as many times as there are strings in the array. What is more, each of the texts is used as content for the data-bind-value in the menu-option tags. Together, these attributes create the menu and fill in the options. What is more, the body of the menu is displayed with the visible class, which adds display: block; to it, when the menuVisible flag is true. On occasion when the flag is false, the class is removed and the default display: none; kicks in. Lastly, the model has a variable currentChocie that is applied to the menu head and saves the current selection.

9 Slice

The third component utilizes a 9-sliced border, which preserves its proportions no matter what the size of the content is. It is used as a UI element which can prompt the user or inform them about events like picking up an item, finishing a game, etc.

9 Slice 1
9 Slice 2
9 Slice 3
9 Slice 4

When the element is initialized, an event listener is added to the OK button, which hides the element by changing the sliceState to “hidden”. What is more, the sliceOptions array holds objects that have the same properties as the ones in the model, therefore, when the slice is hidden, a new element is applied by taking a random valid index and changing the properties of the model to the properties of the object from the array with that index. Furthermore, when the model is updated, the data-bind-style-background-image-url changes the background image of the weapon to the one whose URL is in the slice.backgroundImg string. The color of the picked item text is changed to the one in slice.itemColor with the data-bind-style-color attribute. Lastly, the item name and the action that the pickup can perform are applied via the data-bind-value attribute.

Sprite Sheet

The last component uses a single background image and the background-position property to create multiple smaller images where only the biggest one is actually loaded. This approach saves memory as each element can be created multiple times by reading from the cached big image. The sprites component can be used in creating UI animations, buttons and others.

Sprite 1
JavaScript data-binding
Sprite 3

The JS model is an array with all of the classes that use background-position to change the displayed image.

The data-bind-for attribute creates as many elements as there are strings in the sprites.spriteButtons array. Furthermore, for each element, the value of iter is passed as an argument to a data-bind-switch, which will create only the div whose data-bind-switch-when value is the same as the current iterator value. Last but not least, every time that the button is clicked, the model’s array is shuffled and the UI is updated, forcing the buttons to change their position.

Your feedback is important for us! If you have any questions about how to integrate data-binding in your workflow, write a comment below, Tweet us or start a discussion in our Forum.

Social Shares

Related Articles

Leave a Comment