NGUI dynamic table contents

If you’re looking to have dynamic tables in your UI and you’re using NGUI for Unity3d, here’s how I’ve been able to do it:

In this example I have a table that contains a data driven list of available levels for a level select screen.

Create a UITable within your panel, and set the columns/padding/etc. Create a prefab to represent one of the items in your UI, and set it to a member variable of your UI script.

public GameObject AvailableLevelPrefab;

In the code that populates the table, create a reference to the table GameObject, loop over the items that you want to include in the table, and instantiate a prefab for each level.

//table game object
var levelsPanel = GameObject.Find("LevelsTable");
foreach(var level in levelsForPlanet){
 var levelUIFragment = Instantiate(AvailableLevelPrefab, levelsPanel.transform.position, levelsPanel.transform.rotation) as GameObject;

//change the level name according to how you want the table items sorted.
 levelUIFragment.name = level.SceneName;

//parent the table item to the table game object
 levelUIFragment.transform.parent = levelsPanel.transform;
 //parenting the item will change its scale. Change it back to whatever it was before
 levelUIFragment.transform.localScale = Vector3.one;
//once the table item exists, you can alter the UI elements so that they match the item. 
//in this case, I'm changing the property of a button so that when clicked, it will bring the player to the correct level
var buttonGameObject = levelUIFragment.transform.Find("Button");
 var button = buttonGameObject.GetComponent<SelectLevelButton>();
 button.PlanetName = level.SceneName;
 }

//once everything is instantiated, call the reposition method in the levels panel
 levelsPanel.GetComponent<UITable>().Reposition();

I’ve used this method a few times, and it seems to work pretty well. Anyone out there have any other methods for creating data-driven UI?

Edit: Cody just commented with an easier way to add the item to the table. Most everything stays the same, but instead of instantiating the prefab, parenting, and changing the scale, NGUI has a helper method that does all of that for you. This is how it would look:

var levelUIFragment = NGUITools.AddChild(levelsPanel, AvailableLevelPrefab);

Thanks for the tip Cody!

Share and Enjoy:
  • Reddit
  • del.icio.us
  • Google Bookmarks
  • Twitter
  • StumbleUpon
  • Facebook
  • Yahoo! Buzz
  • Digg

2 thoughts on “NGUI dynamic table contents”

  1. Thanks for the share! Looks interesting… I am doing UI stuff around and this example is very handy. Do you know of other tuts like this on dynamic NGUI stuff?

    So far all that I’ve found is more or less the same… Basic stuff, like do checkbox, buttons, scrollbar and the like, but not actual implementation examples with actual functionality. I’m looking more for things like being able to authenticate a user and stuff like this, more practical stuff, not just randomly bits that are not usually that helpful because they tend not to show the actual mechanics behind NGUI’s ‘interface beauty’ if you know what I mean…

    This example is just a great example of the type of documentation I’m looking for, actual integration on a project with actual functionality.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>