We are going to build a ListView that displays the number of GameObjects with a "LocalGame" tag and the names of the corresponding GameObjects. When we click on the item in the list view we will be taken to the JoinGameScreen.
Just to be upfront, the approach we take to build this ListView is overkill for the number of GameObjects we will be counting. ListViews are good when all you want to do is bind data to visible items currently in the view and there are hundreds of items. As we scroll through the list, data will bind and appear and then unbind as we scroll past it. Again, this is overkill for just a few items, but we at Moetsi personally could not find any other resources published online explaining how to do this from scratch, so that just leaves us to do it!!!
We will create a new uxml file named "ListItem" that we will add and remove in the ListView. Next, we will make a new script named "LocalGamesFinder" that will power this new ListView. The reason it is called LocalGamesFinder is because we will be using it to find LAN games in the next Multiplayer section.
There are 3 spells you must cast to conjure ListView:
itemsSource (declares the data source of the items)
makeItem (creates the list item visual element from our uxml)
bindItem (attach the data from our itemsSource to our item)
When you update the data in itemsSource you can call Refresh() to update the list.
We do this differently in the next Multiplayer section, where we'll be listening for game broadcasts, and as new ones are found, we update our list.
In this page we will look for GameObjects in our scene and refresh our itemsSource 1x per second. This is not an optimal approach because it refreshes even when no items have changed, but it is fine to simply demonstrate the purposes of ListView.
Building our ListView
Creating ListItem uxml
Since we've already explained how to create and style uxmls using UI Builder on the previous page ("Styling a View"), we're going to just jump straight to the code here.
Create a new uxml file named ListItem (right-click in the UI folder, select Create, then UI Toolkit, and select UI Document)
public void LoadJoinScreenForSelectedServer(GameObject localGame)
m_GameName = this.Q<Label>("game-name");
m_GameIp = this.Q<Label>("game-ip");
m_GameName.text = localGame.name;
m_GameIp.text = localGame.name;
🔑MAJOR KEY ALERT🔑
The next few steps we take with LocalGamesFinder will show you a good approach for making scripts that interact with active UI. The general steps to follow are:
Make a public UI Document variable in your script
Drag your UI SourceAsset into that field in the Inspector from the scene's Hierarchy
Call .rootVisualElement on that variable
You can now query your entire Visual Element tree
Select LocalGamesDiscovery so LocalGamesFinder is visible in the Inspector
Drag the TitleScreenUI GameObject from the Hierarchy onto the "Title UI Document" field under Local Games Finder in Inspector
Drag ListItem from the Assets/UI folder in the Project folder to the "Local Game List Item Asset" field
Setting the public variables on LocalGamesFinder
We query for "game-name" and "game-ip" labels
We then set the text value of those labels to the name of our GameObjects
Delete the Debug.Log in "EnableJoinScreen()" in TitleScreenManager cVE
Updating JoinGameScreen cVE and
Now let's create an empty GameObject called LocalGame
Add a "LocalGame" tag to the LocalGame GameObject
To do this, you need to click the dropdown next to "Tag" in the Inspector when LocalGame is selected and choose the last option "Add Tag..." and click the + under Tags and type "LocalGame" to make a new tag
Copy and paste to make 10 copies
Let's hit play
Scroll up and down the list to see all our "LocalGames"
Copy and paste and make more GameObjects and see the ListView include those items
Click on Join button on one of the ListItems and check out the JoinGameScreen
Return back and click on another ListItem to see new data load
Creating LocalGame tagged GameObjects and seeing our ListView work
Place the LocalGamesFinder script in Assets/Multiplayer Setup
No gif here, we believe in you 💪
We now have our working ListView that dynamically updates and can pass data when an item is clicked
We created ListItem uxml and added its classes to TitleScreenUI USS
We created LocalGamesDiscovery
We created LocalGamesFinder
We updated JoinGameScreen cVE
We updated TitleScreenManager cVE (barely)
We created a new tag and GameObjects to replicate finding new local games