Example 2: Team Selection Panel Example using DisplayFab's Instantiator Module: Part 1/4

This example introduces you to the DisplayFab System's Instantiator Module.

We will be creating a Team Selection Panel Example in Unity3D without coding, using the DisplayFab Instantiator Module.

Starter Package (Requires Unity 5)

To follow through the tutorial, you may download the Tutorial 2 Starter package and open 'Tutorial2-Starter' scene to get started.
Download Tutorial 2 Starter Package

Download Tutorial 2 - Starter Package and import into an empty Unity Project. Then, locate Tutorial 2 Folder and browse to Scene folder

Double click on the Scene Folder

Open the Tutorial 2- Starter scene

Here, you will see the starter scene with the UI elements all setup. We also have a TeamsDBManager GameObject, which is an instance of the TeamsDBManager Prefab.

The TeamsDBManager gameObject has a TeamsDBManager component. This script contains a List of Team Data.A TeamData item of the list contains three properties....teamName is of a string type.

teamStrength is of an Integer type.

teamLogo is a Sprite type, containing the texture for the team logo. 

Now let's take a look at the TeamSelectionPanel GameObject.This Panel is a scrollable rectangle where we plan to instantiate all team entries form the TeamDBManager.

The TeamSelectionPanelContent gameObject shall be the parent of all instantiated entries.

Let's get started on adding DisplayFab component on the TeamItem prefab. The TeamItem prefab is located under Tutorial 2's 'Prefabs' folder. Click 'Select' to locate it....

The prefab is selected in the Project Hierarchy below. Any changes we'll make to the TeamItem prefab's instance in the hierarchy in the following steps will be applied to this prefab.

Click on the TeamItem prefab's instance in the hierarchy.

Turn on the GameObject to view it in the Scene.

There are 4 child gameObjects under the TeamItem Prefab.

The Text_TeamName will be displaying the Team Name.

The Image_Logo will be displaying the team's logo.

Similarly, we plan to use Slider_Strength to display the strength in a slider.

Finally, Text_StrengthPercentage will be used to display the team strength in numbers (eventually with a percentage symbol as a suffix).

Now let's get started by adding DisplayFab Component.Click Add Component

Click DisplayFab

Click DisplayFab System

Adding TargetsClick Targets icon to switch to the Targets Tab

Setting DisplayFabSystem as a Prefab TypeWe will check 'Use as Prefab?' to mark this component as a Prefab type. We need to do this as we are adding this Component on a Prefab instance (and we will ultimately apply the changes to the Prefab)

What does 'Use as Prefab' do?When 'Use as Prefab' is checked, your targets and sources can only be either the child of the current Prefab, or another Prefab.

Check 'Use as Prefab?' to mark this component as a Prefab type.

Adding Targets in BatchClick the selected button (two + symbols in the icon) to start adding multiple targets at once. This is a new feature in version  1.0.1. (In Example 1, we added Targets individually by using the '+ Target' button)

Click on each child GameObject of this prefab that we would like to add as a Target.Click Text_TeamName

Click Image_Logo

Click Slider_Strength

Click Text_StrengthPercentage

Finally, click Process Batch.This will add all the selected targets and automatically attempt to add the commonly-detected components and associated properties.

Adding SourcesClick the highlighted icon to switch to the Sources tab 

Click +Sources buttonThis will add a Source entry

Drag and drop the TeamsDBManager from the Prefabs folder onto the Source GameObject field.

Click the red drop-down field to select a component

Click TeamsDBManager

Click '+Add' button to add an empty fpm Entry.(fpm = Field/Property/Method)

Picking a FPMClick +Pick to open the FPM Picker

Click 'Check' button to select the teamData[] field. teamData[] is a List of TeamInfo class items.

Click "+" button to add fields of a TeamInfo class.

Click the highlighted button to add teamName field

Click the highlighted button to add teamStrength field

Click the highlighted button to add teamLogo field

Click anywhere else outside the Popup window to close the FPM picker

Click "+3 Inside" button to reveal the child fpm Entries

Selecting the Array Iterator IndexClick the red highlighted area to open the Array Selector Popup

Array Selector PropertiesExpose Value: Allows you to change the index value of the array/list from any other gameObject in the scene.We use this to increment the Array's index and get data for a range.

Other Array Selector PropertiesClamp Value: Will clamp the array's index to the specified behaviours.  

Other Array Selector PropertiesClamp Value Options: -Stay Within Range: Index will be restrained between 0 and end of range.   -Wrap-around: Wraps around the extreme ends of the array.   -Ping-Pong: Value will oscillate between 0 and end of array.

Other Array Selector PropertiesArray Index Quick Selector: Lets you explicitly define an index. 

Check 'Expose Value' to expose this array index.

Click Save to save the all the settings

Array index is now 'Exposed'.See how the Array's index changes to yellow background and [Exposed] comes up in place of the earlier'[Not Selected]' in red background

Click Target Icon

Enabling Easy Link ModeClick Pin IconThis pins the Targets panel and shows the Sources panel below it for easy linking.Note: The Pin icon has replaced the earlier 'Easy Link Mode' check box.

Linking Targets to SourcesClick Not Linked Icon besides the first target entry

Click Link icon besides the teamName in Sources.This links the Text_TeamName to display data from an array item's teamName field

Repeating the same process, we Click Not Linked Icon besides Image_Logo target entry

Click Link icon under the teamLogo in Sources PanelThis links the Image_Logo to teamLogo. 

Repeating the same process yet another time, Click Not Linked Icon besides Slider_Strength target entry

Click Link icon under the teamStrength in Sources PanelThis links the Slider_Strength to teamStrength. 

Finally, Click Not Linked Icon besides Text_StrengthPercentage target entry

Click Link icon under the teamStrength in Sources PanelThis links the Text_StrengthPercentage to teamStrength. Note: This demonstrates that we can link more than target to the Sources.

As soon as you link a 2nd target to the Source, see how the label changes to 'Multiple links'. 

Click Easy Link Button (Pin Icon) to turn off the Easy Link Mode

Click Link-up Icon to switch to the Link-up Tab

Click Apply to apply changes to the Prefab

Turn off the current GameObject.

That concludes Part 1 of the example.In the next part, we proceed to add the DisplayFab Instantiator Component to TeamSelectionPanel.


This concludes the first example that introduces you how to get started with DisplayFab's Instantiator Feature. Stay tuned for more examples.

Previous Example: Basic Player Info Panel Example 2 Part 2: Setting up Instantiator