Skip to end of metadata
Go to start of metadata

What is a UI Element?

After we have managed to compile our GFx file properly we will need to make sure we expose the UI Element to Flow Graph in order for us to connect gameplay functionality to the button presses. This is done so by either navigating to an existing path in the Libs folder or creating your own folder to house your UIElements. Keep in mind you can actually combine groups of elements into categories as shown by the first name in the XML below. By default the GameSDK ships with a HUD and Menu UI Element file that encapsulates all menu functionality into one file. This is beneficial in more advanced scenarios where you are exposing both functions and events for advanced setups.

Registering Our UI Element

  1. Create an XML named uiQuickStart.xml and place it in the path <engine root>\Game\Libs\UI\UIElements\>.

  2. Below you can see an example of the most basic XML that must be drafted in order to be seen in Flow Graph. By default, several attributes are included in the settings. The two most important sections to keep in mind beyond the file declaration are the layer attribute, and the constraints that allow you to define how content is exposed.

    Layers by default define in which order the elements are drawn in case you have multiple Flash files running simultaneously and need to sort them logically. Regarding constraints they allow for you to dynamically position an object to correspond to the middle of the vertical, horizontal, or both axis. It is important to note that you can also change these attributes later within a Flow Graph node and that the values set within this file are simply a starting reference for you to work with.

    <!-- Category name, of your own choosing -->
    <UIElements name="uiQuickStart">
    	<!-- Object name, again, of your own choosing -->
    	<UIElement name="uiQuickStart" render_lockless="1">
    		<!-- Point it to the correct files and give it some default settings -->
    		<GFx file="uiQuickStart.gfx" layer="0">
    				<Align mode="dynamic" valign="center" halign="center" scale="0" max="0"/>
  3. Once saved, you can restart the Editor and open Flow Graph to navigate to the UI Displaynode at this path <root>. To expose the UI element we will need to connect a Game:Start node to the UI Display node and then add our UI Element to the properties to show on Game:Start


Step 1

Step 3-1

Step 3-2


  • No labels