Page MenuHomeAnticto

Mutable for Unreal Engine | Create data driven user interfaces
Updated 826 Days AgoPublic

Version 3 of 22: You are viewing an older version of this document, as it appeared on Jun 22 2020, 1:23 PM.

Overview

This article explains the steps to go from an existing customizable object to a playing character that can be modified with an interface automatically generated from the object data.
It covers the following chapters:

  • Create States: to organize the ui, and so the modification updates are as fast as possible and have the minimum impact.
  • Set UI data in the Customizable Objects: so the user sees icons and text defined in the current Customizable Object, adapted to the changes of the evolving Customizable Object without manually modifying the UI for each new object artists add.
  • Access the UI data of a Customizable Object from a Widget: so the widget is created with the relevant content at runtime.

Create States

This chapter covers the creation of Customizable Object States. As an example, sets up of one playing state to use while playing and one character edition state for clothing from on a Group Object Node.

Each state can contain any number of Group Object Nodes and/or any amount of the parameters in the Customizable Object hierarchy: Float Parameter Node, Enum Parameter Node, Color Parameter Node, Texture Parameter Node, Projector Parameter Node or a Group Projector Parameter Node. Each child object can contain its own states, functionally identical to states defined at the base object.
It's advised to split character edition states into multiple coherent states as more parameters are added to the model. Parameters usually modified together, such as facial features, would go well in their own state, separate from clothing, as it frees resources and the update will be faster. It's uncommon to be modifing the face and the clothes at the same time.
The resulting Customizable Object of this example can be found in the Village Demo in Content/HowTo/DataDrivenUI named "DataDrivenUICharacter".

Assets required

  • A Customizable Object with at least one Group Object Node in the hierarchy
The asset used in this step can be found in the Village Demo in Content/HowTo/RemoveUnseen named "RemoveUnseen" together with the assets that compose it.

Steps

  1. The first step is to create the states at the Customizable Object where they are most relevant. Add two states for the Base Object, at the node properties States array.

image.png (247×611 px, 44 KB)

In this example, the Customizable Object has been renamed "Data Driven UI Character"


  1. The second step is to create an in-game state to use in situations where there's no plan on changing properties fast. Name the first state created, and make sure the options "Don't compress Runtime Textures" and "Build Only First LOD" are off.

image.png (339×428 px, 23 KB)

In this example, the State has been named "inGame"


  1. The third step is to create a state to use in a character edition lobby, where many parameter changes are expected. Name the second state created, and make sure the options "Don't compress Runtime Textures" and "Build Only First LOD" are on.

image.png (352×444 px, 24 KB)

In this example, the State has been named "Clothing"


  1. To finish the edition state, add the parameters are important when the state is chosen. To do so, add as many properties as needed at the Runtime Parameters array, and name each one of them exactly as the property that must be included in the state. For this guide it's three parameters, as the Group Object Node of group type Toggle defines one toggle parameter for each of its objects.

image.png (426×451 px, 31 KB)

In this example, we need three parameters, named "Boots", "Trousers" and "Shirt", the Object Name property of each object included in the group. We need the names of all the objects in the group only because this group is of type Toggle, and this type of group defines an independent parameter for each of its objects, but in the example we want to use all of them under the same state.

image.png (796×1 px, 184 KB)
image.png (190×519 px, 32 KB)

When the parameter comes from a group object node of types At leat one Option or One or None, the name of the parameter that the group defines is the Group Name
image.png (235×626 px, 36 KB)
When the parameter is from a parameter node, the parameter name comes from the property Parameter Name
image.png (225×754 px, 86 KB)

Result

This is now a Customizable Object with correctly set states, ready to use under two different conditions by enabling one of its states. It is ready for a game, but contains no interface information to automatically generate one.


Set UI data


Access UI data

Last Author
ricard
Last Edited
Jun 22 2020, 1:23 PM

Event Timeline

ricard created this object with visibility "All Users".
ricard edited the content of this document. (Show Details)
ricard changed the visibility from "All Users" to "Public (No Login Required)".
ricard published a new version of this document.
gerard changed the title from Create data driven user interfaces to Create States and data driven user interfaces.Oct 7 2021, 12:59 PM
gerard edited the content of this document. (Show Details)
gerard changed the title from Create data driven user interfaces to Create States and data driven user interfaces.Oct 7 2021, 3:12 PM
gerard edited the content of this document. (Show Details)
gerard changed the title from Create data driven user interfaces to Create States and data driven user interfaces.Oct 7 2021, 3:31 PM
gerard edited the content of this document. (Show Details)
gerard changed the title from Create data driven user interfaces to Create States and data driven user interfaces.Oct 7 2021, 3:44 PM
gerard edited the content of this document. (Show Details)
gerard changed the title from Create data driven user interfaces to Create States and data driven user interfaces.Oct 7 2021, 6:45 PM
gerard edited the content of this document. (Show Details)
gerard changed the title from Create data driven user interfaces to Create States and data driven user interfaces.Oct 8 2021, 12:24 PM
gerard edited the content of this document. (Show Details)
gerard changed the title from Create data driven user interfaces to Create States and data driven user interfaces.Oct 8 2021, 1:04 PM
gerard edited the content of this document. (Show Details)
gerard changed the title from Create data driven user interfaces to Create States and data driven user interfaces.Oct 8 2021, 4:03 PM
gerard edited the content of this document. (Show Details)
gerard published a new version of this document.Oct 8 2021, 4:06 PM