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.

Click UnityEditor.ProjectBrowser

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

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'

Click UnityEditor.SceneHierarchyWindow

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 Text

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 Slider

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 PlayerManagerDemo

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 DisplayFabSystem

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.

Conclusion

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.

Next Example: Team Selector Scrolling Panel using DisplayFab Instantiator

Comments