Version: 1.2.0 | Documentation Last Updated: July 11, 2016|
Thank you for purchasing this product. If you have any questions that are beyond the scope of this documentation, please feel free to contact us.
DisplayFab is a Unity3D Extension by Techooka Labs that lets you display data from Unity Components, PlayerPrefs, Singletons, Game Managers and other scripts and display it on
UI elements without writing a single line of code.
Eliminate the need to create scripts (and writing code) to display data on your UI elements. By using DisplayFab, you can speed up your UI design process by up to 400%. You can display data on your UI elements in as few as three point-and-click steps: Choose your target UIs, choose your source data and link-up the target UI to your source data. That's as simple as it gets!
Or you can reverse the process and save or update the data from your Unity UI elements. You just have to reverse the targets and the sources and you're done!
DisplayFab Instantiator : Do you have an array or a list of data that you want to be populated into a list of UI elements? Just add DisplayFab to your list item prefab and you can use DisplayFab Instantiator to automatically pull data from an array or a list between the range you specify and DisplayFab will automatically populate the UI elements with the data, all without writing a single line of code!
Auto-converters: DisplayFab will automatically convert the most common recognizable types to display the appropriate information on your Unity UIs without requiring you to manually convert the types by scripting . For example, you can display an integer or a float on a Text UI element, without modifying or writing any code for it.
On-the-fly Data Formatting: Using the built-in converters, you can format the data to suit your display needs. For example, you can format a number to display with a prefix (such as a '$' symbol), a suffix, or both a prefix and a suffix, using the available built-in converters
Extending the auto-converters: You can extend the converters by writing your own converters - as simple or as complex as you wish.
Extending the Unity Event System callback events using DisplayFab's advanced callback scripts: While the Unity UI Event system callback events (onClick, onSliderValueChanged etc) only let you invoke Methods and Functions, DisplayFab extends the system to allow you to directly modify Properties, Fields (and Static Properties and Static Fields), in addition to the Methods.
Supports Static Classes, PlayerPrefs, Singletons : Apart from Components and MonoBehaviours in a GameObject (and from a Prefab), you can fetch data from Singletons, PlayerPrefs and Static Classes.
Supports Run-time GameObjects : If a GameObject doesn't exist in edit time, you can let DisplayFab pull reference of a gameObject by name, at runtime.
Some Editor Features include:
Quick Peek : Lets you peek into the data for a selected source in Edit mode for quick debugging
Event Link-up Groups : Lets you group a bunch of link-ups into a group for convenient execution of more than one source-target event links. You can then execute a group using the Unique Group ID or a Unique Group Name.
Supports existing Unity Event callbacks: You can execute DisplayFab Event links using Unity's built-in event callbacks from Buttons, sliders, text fields and more. (The alternative is to use DisplayFab's Event callback scripts for more customized control as explained above)
Downloading and Installing DisplayFab
Purchase and download DisplayFab from Unity Asset Store or Techooka's website
Once downloaded, you will have to import the package just like any other extension.
Once you import, Unity will take sometime to compile the scripts.
If you face problems while installing DisplayFab, please post your problem at the discussion area.
You can update DisplayFab either through the Unity Asset Store (if purchased via Asset Store), or directly via Techooka's website if you downloaded directly from Techooka.
Always make a backup of your project before upgrading to the latest version!
How to add a DisplayFabSystem Component to a UI Panel
Press the Add Component button located on the Inspector of any game object. The most usual objects on which you'd add DisplayFab are, for instance, a root game object of a UI Panel.
The DisplayFab Component
This is how an empty DisplayFabSystem Component looks after you add it to a GameObject
DisplayFabSystem Component Basics
Each DisplayFabSystem Component has three Tab Views.
We will briefly describe each Tab View below:
Event Link-up Tab
This is how the Event Link-up tab looks like. At the beginning, no events are connected. However, as you link the Source Data to the Target Displays, this tab view will get populated.
The + Target button adds a Target entry to the Targets Tab view.
Easy Link Mode lets you display the Target and Source Tab in the same view to let you link multiple Sources and Targets easily
The + Source button adds a Source entry to the Source Tab View.
Using DisplayFabSystem: Step-by-step Walk-through
We will learn how to put DisplayFab to use by walking through an introductory tutorial.
In this example, we will use a PlayerManager script and pull some of the information from the PlayerManager Script and display it on a UI Panel.
Tutorial 1 Starter Package
For your convenience, here's the Tutorial 1 Starter package. This includes the starter scene along with the PlayerManagerDemo.cs script. You may import this into your project and skip directly to Step 3 (Adding DisplayFab to the UI Panel) by skipping Step 1 & Step 2.
Tutorial Step 1: Setting Up the Scene
Let's create a new scene and add a new GameObject (name it as PlayerManager ).
Add the PlayerManager.cs Monobehaviour script on to PlayerManager GameObject
Tutorial Step 2: Design the UI Panel
We are going to display the Player Name (Text Field), player health (Slider), player high score (Text Field) from the PlayerManager. Let's setup a UI Panel with these three fields. Let's rename the game objects as: Text_PlayerName, Slider_Health, Text_HighScore respectively. Once setup, your Hierachy should look something like this:
Step 3: Add DisplayFab component to the UI Panel
Add the DisplayFab System component to the root of the UI Panel. Follow the instructions in the previous section, if you need help.
Step 4: Setting Up the Targets
Switch to the Targets tab under the DisplayFab System
Click on +Target button to add a new target entry
Drag and drop the Text_PlayerName Game Object from the Hierarchy into the 'red' slot that says 'None'.
Once you drag and drop the Game Object, the GameObject field turns green. You will now notice a 'red' drop-down next to it. You can select the component from the drop-down list. In this case, it is the 'Text' component that we need to select.
Click the button to add an empty field/property/method entry. This is called a FPM entry
Click the Pick button to select a field/property/method. A popup will appear. Choose text under the property list by clicking on the @ button
Skipping Steps 3-6: The Auto-detect Alternative
Clicking on the Auto detect button ( icon) lets the DisplayFab System automatically choose the most commonly used Component and property pair.
A new FPM entry will now appear. The 'S' icon to the left of 'text' indicates this is a string
Now Repeat Steps 2-8 to add the Targets for Slider_Health and Text_HighScore. This time, you can use the Auto-Detect to automatically add the fpm Entries. Once you are done, the result will be like this:
Step 5: Setting Up the Sources
Switch to the 'Sources' tab to start adding the Sources. The steps outlined below are almost similar to the way we added Targets in Step 4.
Click on the +Sources button to add a mew source entry.
Drag and drop the PlayerManager Game Object from the hierarchy to the red slot.
Select PlayerManagerDemo from the drop-down.
Click to add a fpm Entry.
Click +Pick button to pick the source data property.
Click @ besides playerName and repeat the above steps for , playerHealth and playerHighScore
After completing the above step, The final result will look like this:
Step 6: Linking the Targets to the Sources
You will link the targets to the sources in this step.
Switch to the tab
Under the Text_Player GameObject, locate the 'Text' fpm Entry. Click on the 'Link Icon X'. This will switch the view to the Sources Tab.
Click on the 'Link' button besides the playerName to complete the link.
If you switch to the Event Link-up tab, you will notice that a new event link entry has appeared.
Congratulations! You have added your first event link!
You can continue linking the rest by following the above steps. However, there's an easier way to setup multiple links without switching the tabs frequently.
Switch back to the tab
Turn on the 'Easy Link Mode'
Now the Targets view and the Sources view are displayed in a single window.
Click on the link button and link the rest of the two targets to their corresponding sources.
When you now switch to the 'event link-up' tab, the final result is as follows
Step 7: Executing the Events
Let's say we want to execute those event links upon clicking the 'Get Data' button. Here's how we can do it in 3 different ways:
Using Unity Event onClick
Click on the 'Get Data' button.
Add '+' Entry and setup the events like below:
Using DisplayFab Event Group
Alternatively, you can invoke an event by using a group. Here's how you'd setup a group:
Once the above component is added, you'd switch to the 'Get Data' button, and invoke the DisplayFabEventGroup.ExecuteGroup function.
Using DisplayFab's Unity OnClick Event
You'll have to add the DisplayFab DSFOnButtonClicked component first and drag and drop the reference to the DisplayFabSystem component.
You now have three options by which you can execute something when the button is clicked.
Event Link: Lets you pick an event link to execute from the DisplayFabSystem
Event Group: Lets you pick a event group to execute from the DisplayFabEventGroup (if there's one on the gameObject)
Direct Source: Lets you directly modify some information, or to call a method
Tutorial 1 Walkthrough : DisplayFab Basics
This is an interactive walkthrough of the tutorial covered in the above section.
The first step is to open the project
Click green highlight
Click ExecuteEventList ()
That's it. You're done.
DisplayFab Instantiator: Overview
DisplayFab Instantiator allows you to quickly populate data into a list, from an array or a list.
You can use it, for instance, to populate a scrollable panel with a list of data elements, to display high score tables, to populate a drop-down lists and more.
How to use a DisplayFab Instantiator
To use a DisplayFab Instantiator, you will first need to setup the display target and sources for one template item, that will be used as a guideline to populate more items.
You will add the DisplayFabSystem component on a template item. You will specify an array as a source on the DisplayFabSystem component,
and expose the array's accessor/indexer as an 'Exposed Variable'.
DisplayFab Instantiator Parameters
Selected DisplayFab Prefab/Template
This is a prefab item or a template that contains a DisplayFabSystem component with all link-ups setup. It could also be a non-prefab template.
Selected Parent Container
This is the GameObject under which the instantiated items will be populated.
Selected Iterator EV (Exposed Variable)
Click 'Pick' button to select or change the Iterator Exposed Variable. If you exposed an array/list's indexer/iterator in the template item, it will be available to pick up here. The Instantiator will loop basically iterate through that particular array between the ranges specified below.
Start Range Index
This is the start range index from which you want to pull the data from. If you want to start pulling data from the 0th index, then enter 0.
End Range Index
If you want to explicitly specify an end index, specify here. Or see below
Get End Range from DisplayFab
If you want to loop all the way to the end of the array, check this option. The end range index will automatically be chosen from the array.
By default, the instantiator populates the entire range all at once. If you want to instead populate each array index after some delay, check this and specify the delay time (in seconds)
Retain DisplayFab Component Once Done?
With effect from v1.2.0, this option is true by default.
By default, the DisplayFab component on the populated/instantiated item is destroyed once the item is populated,as you don't require the DisplayFab Component after population(in most cases). Choosing this option will retain the DisplayFab Component. You will need to retain the DisplayFab component for instance, if you wish to share the index with another target (using DisplayFabShareInteger Component)
Instantiate At Start?
If checked, the Instantiator will instantiate/populate the above ranges right at Start of the scene. If this is not checked, you will have to manually call the Instantiator to start the instantiation process (either by SendMessage("Instantiate"), or by calling the DisplayFabInstantiator.Instantiate() function by code)
Use Delay Start?
use this to delay the instantiation by X seconds at start. The instantiator will execute at start but only after the specified delay (in seconds).
Retain Instantiator Once Done?
With effect from v1.1.3, this option is true by default
By default, the DisplayFabInstantiator component is destroyed once the the job is done. population(in most cases). Choosing this option will retain the DisplayFabInstantiator Component. This should be done, for instance, if you want to repeatedly populate something.
Share Instantiated Index?
Shares the instantiated index value by setting the DisplayFabShareInteger's 'value' field to the instantiated index value. Note: Your prefab or template item should have a DisplayFabShareInteger component on it. Otherwise, it will throw 'Null reference exception' error. (Update: Version 1.0.9 automatically adds DisplayFabShareInteger component if not already added.)
(v1.2.0+) Share Some Value (Integer Only) from DisplayFab on Instantiated Entry?
Share any value from the prefab item/template's DisplayFab sources by setting the DisplayFabShareInteger's 'value' field to the your desired value from the DisplayFab sources.
This option is most useful when you inadverdently forget to enable visibility of your template item and/or forget to turn off your template item (or do not want to turn off the template item).
By enabling this option, the Instantiator will automatically turn on the instantiated entries (even if the template item was turned off) and if there's a reference template item visible in the parent container, it will turn that off too. Note: This option does not currently work for prefabs as a template.
(v1.2.0+) Clear all instantiated entries in container upon next call?
Selecting this option will clear all instantiated entries within the parent container when you call DisplayFabInstantiator.Instantiate() function. Typical usage: When you want to use the same UI list to display different data. If this option is not selected and still Instantiator is called repeatedly, then the parent container will retain the old instantiated entries while instantiating new ones.
DisplayFab's Exposed Variable Executor basically lets you increment or decrement an 'Exposed Variable' on a DisplayFabSystem component.
You'd normally use an Exposed Variable to pull data from a particular index of an array/list when you click a button (could be a navigating button to change a page, for instance). By using Exposed Variables, you can create panels that display data from different indices of an array.
How to Add DisplayFab Exposed Variable Executor
You will find the DisplayFabExposedVariableExecutor under DisplayFab-> Modules.
To use the EV Executor, you'll also need a DisplayFabSystem component setup with the link-ups, and an array indexer/accessor/iterator marked as 'Exposed Variable'.
DisplayFab EV Executor Parameters
Selected DisplayFab Comp.
This is a GameObject that contains a DisplayFabSystem component with all link-ups setup. Once specified, you can change the component, by clicking 'Change'. However, you will have to re-pick any 'ExposedVariable' reference you may have picked earlier.
Pick Exposed Variable
Click this to select or pick an Exposed Variable from the above referenced DisplayFabSystem component. In most use cases, this ExposedVariable is an array's indexer.
Selected EV Modifier
You can either select Increment OR DECREMENT. Increment will increase the ExposedVariable by +1 and Decrement will decrease the ExposedVariable by -1. What happens when you reach 0 or end of an array? The ExposedVariable's settings define what happens when you reach the extents. It could either be limited to 'Stay within Range', or be 'Wrapped-Around'.To learn more about these, refer to the Array Selector Popup Options.
DisplayFab Event Executors
Publish Status: Pending
Version 1.2.0: Major Update
Instantiator can now expose any INTEGER value from a DisplayFab Source. Previously, you were only allowed to expose the index of the instantiated entry only.
Added support for Instantiator to clear up previously instantiated entries.
Added 'Force-enable instantiated entry visibility'. This will let you keep the 'template' disabled and keep the actual instantiated entries enabled.
DisplayFab Event Executor
Enabled support for 0-argument functions from displayfab event executors
Added support for Displayfab event executors of other arguments. Now you can pass arguments of types/basetypes of 'UnityEngine.Object', 'Component', MonoBehaviour, GameObject, Prefab, Texture.
Added double, char and Quaternion. Previously, only primitive types (int, floatenum, bool, string, Vector2,Vector3, Color,Texture2D were supported)
Function arguments can now be retrieved from another source value within the same DisplayFab. (Tutorial 5 uses this technique.)
Added a button to enable 'Debug Logs' in Unity's console window. Warning: This must be used for sending logs to the Developer for troubleshooting purposes only. Keeping this option ON will drastically slow down the performance.
Changing event executor while in runtime, duplicates the event execution list. Therefore, making changes to the event execution list is disabled while running the game.
New (Runtime): Event executors can now have a Direct Source mode's target GameObject retrieved at Runtime by Tag
New (Example): Added Tutorial Example 4 to demonstrate how to trigger data binding on one panel from another panel. When you click on a button on one panel (which itself was instantiated using DisplayFab Instantiator), you should be able to show specific information on that array's index. See example 4 for more info.
New (Runtime): Event executors now have a 'Delay' feature associated with any execution that you want to run at 'Start'. You can set a delay. You have to click on the small 'down-arrow' button next to Start() checkbox under the executors to access the delay options.
Fixed: (Changed) Static fields, properties or methods (F.P.M.s) will now only be accessible from 'Static type' GameObject selection. Earlier, the system let you add static FPMs from any MonoBehaviour Component. To avoid any confusion, DisplayFabSystem will no longer let you select static FPMs from a MonoBehaviour Component. You can select any static field, property or method from static or non-static classes. Click the small 'down-arrow' to the left of the GameObject fields in the DisplayFabSystem to access GameObject Selector options.
New (Editor):Experimental DisplayFab Console Window added to display logs, warnings and errors that originate from DisplayFab-related components. You can access it from Window -> DisplayFab Console.
New (Runtime): Added OnEndEdit Event executor for InputField
New (Runtime): (Experimental) - added 2 new Event Executors for non-event triggers - DSFOnStart and DSFOnEnable. You can now execute events at Start() & OnEnable().
Fixed: (Editor) 'Auto-Check for updates' feature would freeze Unity Editor for 1-2 minutes while it checks for updates. This feature has been disabled. Instead, you can check manually by clicking on the DisplayFab icon in the DisplayFabSystem component.
Fixed: (Editor) Event Executors: Changes made in runtime don't show up, forcing you to make changes in edit mode and switch back to play mode to see the changes. That has been fixed now, for rapid testing & debugging.
Fixed: (Editor) Event Executors: Assembly reload/Script compilation during runtime would lead Event executors to stop working. That has been fixed. 'The referenced script on this behaviour is missing' warning will still show up due to Script reload during runtime, but that is a harmless warning.
Fixed: (Runtime) DisplayFabSystem: Singleton, Static classes and PlayerPrefs used as a target won't get executed due to a typo. That's been fixed now. It had no impact on source types though.
Fixed: (Runtime) DisplayFabInstantiator's 'Share integer' option will throw a 'Null reference exception' error if a DisplayFabShareInteger component is not explicitly added to the template item. That has been fixed now - Instantiator will automatically add the component if not found, and set the value to the added component's value property.
New Example: Added an example on how to use a data source from a Singleton Manager - i) inherited from a Generic Singleton MonoBehaviour class ii) a simple Singleton MonoBehaviour class.
Fixed: Source Type won't get registered properly when using 'Data Source' from a DisplayFab, in the Event Executors.
New Feature:: Data Sharing Feature (Experimental). Allows you to share data between an instantiated prefab item and other components.
i. Instantiator has a new property to expose the instantiated prefab's index using a DispFabShareInteger Component.
ii. DispFabShareInteger is the first Data Share Add-on Component added to DisplayFab to start with.
Multiple Bug Fixes.
Fixed a bug where the Exposed Variable Executor won't automatically add the 'Event Executor' on a button.
Fixed a Null error message that pops up with the 'Apply Changes' feature when DisplayFabSystem component is added to a prefab.
Fixed a critical bug that occurs when you click 'Pick This' button to try pick an EV from the Instantiator and ExposedVariable Executor Modules.
Fixed: A Bug in Calling Exposed Variable in DisplayFabSystem
EventExecutors:: DisplayFab EventExecutors moved to DLL version for extended support.
EventExecutors:: Older EventExecutors left as it is for backward compatibility but marked as obsolete.
EventExecutors: Fixed a bug in 'Direct Source' option throwing error
EventExecutors: Fixed 'delete button' not showing up when 'not selected' event type is active.
Before reporting an issue
Please try the following before reporting an issue:
Always use the latest version of your extension! Make sure you are using the latest version of DisplayFab by updating it via AssetStore
Do basic troubleshooting Have you checked whether your method, property or field is still valid? Did you add or remove arguments from a method?
IMPORTANT! For fast troubleshooting, please send us detailed information about the issue you're experiencing. Also send us a screenshot of the issue you are facing and/or copy/paste the log from the Console whenever it's possible.