Example 1: Basic Player Info Example
This example introduces you to the DisplayFab System by creating a simple Player Info Panel.
A written tutorial can be found in the documentation section.
Starter Package (Requires Unity 5)
To follow through the tutorial, you may download the Tutorial 1 Starter package and open 'Tutorial1-Starter' scene to get started.
Download Tutorial 1 Starter Package
This tutorial introduces you to DisplayFab System.To get started with this tutorial, download the Tutorial 1 -Player Info Panel Starter Unity Package and import it into an empty Unity Project.
Double Click Tutorial1Starter scene.This file is located under DisplayFab Demo/Tutorial 1- Player Info Panel/Scene
Under the Canvas, there's the PlayerInfoPanel Game Object.This GameObject has our three target UI elements on which we'd like to display data.
The PlayerManager GameObject contains the PlayerManagerDemo script.We will use these three properties of the PlayerManagerDemo script as our data source.
The PlayerManagerDemo script itself is a very basic script with three public properties:-playerName is a string-playerHealth is a float (intended value is between 0 and 100)-playerHighScore is an int
Let's get started.Click PlayerInfoPanel.
Click Add Component
Click DisplayFab System
The DisplayFab SystemThe DisplayFab System has three tabs: Link-Ups, Targets and Sources.The Link-Ups panel shows all links between Targets (such as UI Displays) and Sources (such as Data).
The DisplayFab SystemBesides the three tab icons, there's an additional option: Use as Prefab.You will learn more about it in Tutorial 2.
Click the highlighted icon to switch to the Targets panel.
Targets PanelThere are three buttons in the Targets Panel.The first two buttons will be explained in Tutorial 2.We are going to use the third button, "+ Target" to get started with adding the Target UI Elements.
Click + TargetsThis adds an empty target entry.Each Target or a Source Entry is associated with a unique ID, called the tsUID. Therefore, sometimes in the documentation, these entries are also referred as 'ts Entry'. ts Stands for 'target source'
To add the UI Elements, we need to drag and drop the UI gameObjects from the Hierarchy to the highlighted area.
To begin with, Drag and Drop Text_PlayerName.If the Target is valid, the Object field under the tsEntry will turn green.
Click on the red highlighted area to select a component.
Click + Add buttonClicking on "+ Add" button adds an empty entry, referred in the documentation as a "fpm Entry". fpm stands for a field/property/method.
Click + PickThat opens up a FPM Picker Popup
Click the green highlighted button next to the 'text' property.
Repeat the same process to add Slider_Health gameObject as a Target Click + Target button
Drag and drop the Slider_Health to the selected area.
Click the red highlighted area
Click + Add
Click + Pick
Click the green highlighted button to add the value property
Finally, we'll add the Text_HighScore gameObject as a Target. Click + Target
A new tsEntry is added.
Drag and drop the Text_HighScore to the selected area.
Auto-Detect Feature:Instead of selecting the component and picking a property, we'll use the little green button to automatically detect the component and the property. It detects the most common UI components and associated properties.
Click Auto-Detect Button
Notice that the Text component and the associated 'text' property has been added automatically. (The text fpm Entry is not visible here as it is minimized)
Switch to the Sources tab.Click Sources Button
Click + Source
Drag & Drop PlayerManager to the highlighted area
Click the red highlighted area to select a component from PlayerManager GameObject
Click + Add
Click + Pick
We need to add all three properties under PlayerManagerDemo as sources.Click green highlighted button to pick playerName
Click + Add to add another fpm Entry
Click + Pick to start adding the second property
Click green highlighted button to pick playerHealth
Click + Add one last time
Click + Pick
Click green highlighted button to pick playerHighScore
Linking them upNow that we have added all three sources, we need to link the Targets to the Sources.Click Targets Button to switch to the Targets Panel
Each property under Targets has a link button. Click the highlighted 'Not-linked' icon buttonOnce you click it, the view will switch over to the Sources Panel to complete the link process.
Click highlighted button to complete the first link.
Once the link has been successfully established, notice that the link icon has changed to green.
Link Icon TipIf there's only one field/property/method (fpm) listed under a tsEntry and if that tsEntry is minimized, the link icon will show up directly on the tsEntry line. This reduces clutter.
Try it now. Click the green highlighted button to minimize the Slider_Health
Note that the link button appears directly on tsEntry.
Click the highlighted 'Not-linked' icon button
Click link button besides playerHealth to complete the link-up
Finally, we'll link-up the Text_HighScore to playerHighScore. Click the highlighted 'Not-linked' icon button
Click link button besides playerHighScore to complete the link-up.
Click Link-up Button
The Link-ups PanelThree link-ups appear in this panel.
The Link-ups PanelEach link-up entry is associated with a unique Link-Up UID.
The Link-ups PanelConverter Icon: Each link-up entry also has a converter icon displayed. If the target and source types are same, then a green tick is displayed, as in this case.
The Link-ups PanelConverter Icon: When the target and source types don't match, as in this case, a converter is required. DisplayFab has an 'auto-converter' feature that automatically converts the most common types. (Yellow tick with letter 'A' icon)
Executing Link-ups ListNow we will execute the link-ups list to display data on our UI targets when we click 'Get Data' button.Click Button
Click + to add a new OnClick event
Click No Function
Click ExecuteLinkUpList()This function will execute ALL ENTRIES in the Link-Up list.In this example, we have 3 link-ups that will get executed.
Test it.Click Play Button to enter game mode.
Click Get Data button in the Game View
The data has been successfully loaded onto our desired UI elements.
That's it. You're done.In the upcoming tutorial, you will learn how to use the DisplayFab's Group System to group link-ups and execute by groups. The Group System also lets you execute the link-ups at Start.
This concludes the first example that introduces you how to get started with DisplayFab. In the next example, we'll walk through an example to create a scrolling display that lets you instantiate an array of information.