Example 2: Team Selection Panel Example using DisplayFab's Instantiator Module : Part 2/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
This is the second part of the four-part series tutorial.In this part, we introduce you to the DisplayFab Instantiator module.
Click TeamSelectionPanel
Click Add Component
Click DisplayFab
Click Modules
Click DSF Instantiator
Setting up DisplayFab InstantiatorStep 1. Selecting the Prefab Item to instantiate:Drag & drop TeamItem to the Displayfab PrefabItem field
Setting up DisplayFab InstantiatorStep 2. Selecting the Parent Container: This will hold all the instantiated itemsDrag & Drop TeamSelectionPanelContent to the ParentContainer field
Setting up DisplayFab InstantiatorStep 3. Select Array Iterator Exposed Variable (EV):Click Pick button
There's only one Exposed Variable in this case. Click Pick This
Instantiator OptionsStart Range Index: The start index from which the Instantiator will pull data.End Range Index: The end range index until which the Instantiator will pull data.
Instantiator OptionsGet End Range from DisplayFab: Check this to get the end range from the Exposed Variable's list. This will normally be the Array or the list's Count.
Instantiator OptionsUse Delay: Check this to introduce a delay, in seconds, between each entry's instantiation.
Instantiator OptionsRetain Component Once Done: If this is NOT checked, then the DisplayFab component on the prefab instance will be removed AFTER the child item is instantiated. Check this to retain DisplayFab component for other purposes.
Instantiator OptionsInstantiate at Start: This will Execute the Instantiator in Start() function.
Type in 0 under Start Range Index and Click anywhere
Type in 6 under End Range Index and Click anywhere
Check Instantiate at Start
Other Instantiator OptionsDelay at start: You may specify the amount of delay, after which the Instantiator will get executed. Retain Instantiator Once Done: Check this if you wish to retain Instantiator after execution is finished.
Click Play button to test the Instantiator and DisplayFab System.
We now see the first 7 indices from the TeamsDBManager's teamData list instantiated into 7 TeamItem prefab instances
Click Play Button to exit the Game Mode
Changing DisplayFab Instantiator to Display Entire Array ListEarlier, we instantiated a range of 0 to 6 indices into TeamItem instances.Now, let's instantiate the entire range of the teamData list.
Check 'Get End Range from DisplayFab'
Now, when you enter the Game Mode, you will see that all 12 indices of the teamData array is displayed in the Game Window.
That's it. You're done!In the next part, we will use 'Converters' to display the Team Names to UpperCase and to display a '%' symbol in the strength.
Click TeamItem
Turn on the GameObject.Under the DisplayFabSystem Component, make sure you are in the Link-Ups panel (Click the Link-Up icon to switch to the Link-ups Panel)
Click Converter icon to open the Converter Popup window
Click DSFStringExtensions to browse and select our desired Converter
Click ToUpperCase() to select this converter.This converter will convert the source teamName string to UpperCase characters.
Click Apply to apply changes to the Prefab
Turn off GameObject
Click Play Button to enter the Game Mode
Note that the Team Names are now in Uppercase letters.
Exit Game Mode.
That's it. You're done!Continue to the next tutorial to see how to use 'multiple' converters to convert an integer into a string and then append a suffix to the string.
Conclusion
This concludes the first example that introduces you how to get started with DisplayFab's Instantiator Feature. Stay tuned for more examples.