I hope this message finds you well. My name is Nicola, and I am a Software Engineer and Frontend Specialist working on an exciting new game called Eternal Dragons (https://app.eternaldragons.com/). This auto battler game has a strong focus on community engagement and e-sports.
Currently, we are planning to integrate our website features, such as https://app.eternaldragons.com/league, into our mobile game. As our core user base primarily uses mobile devices, we are seeking the best solution to handle the challenges of creating and managing large user interfaces. Specifically, we are looking for efficient approaches to address the following requirements:
Handling huge lists, preferably with pagination or lazy loading functionality.
Implementing captivating animations.
Incorporating tooltips effectively.
Managing inventories seamlessly.
Building user-friendly forms.
These UI elements are typically found in web applications, and we want to ensure a smooth transition for our players.
To explore potential solutions, I have experimented with various approaches, including UIToolkit in Unity 2021.3.x. While UIToolkit seems promising within the Unity ecosystem, I still have a few concerns:
Performance issues encountered when rendering a large ListView (e.g., 1000 complex rows) with pooling. I suspect this might be due to inline styles or potential oversights on my part.
Considering our extensive use of data binding, the following statement raises further doubts: “The data binding feature set is currently limited and not very easy to use. We are hard at work on a generic data binding workflow for both Editor and Runtime UI. This system is built on top of the Unity.Properties system, which is being promoted to core Unity. Once the core of this workflow is in place, we are going to review the current SerializedProperty-only binding system and improve how it will be supported alongside the more generic one.”
Considering these factors, I would greatly appreciate your insights and advice on whether UIToolkit is a suitable choice to meet our needs. Given our requirements for large UIs with extensive data binding, I am particularly interested in your thoughts and experiences.
Thank you in advance for your time and expertise. Your valuable input will undoubtedly help us make an informed decision and create a compelling user experience.
For large lists there are issues with the scroller indeed, using PgDown and PgUp results in a much better user experience. When using the scroller, it clears the display before it was finished to show up so you get a completely blank list or some partial output. However I have not worked too much on it, but you can look at this thread if not done already:
Thanks dlorre for your reply! Yes I was reading that yesterday, indeed I’ve implemented a simple but efficient pool system that improved performances a lot, but we are still far away from what we want to achieve.
Also I was trying with a simple version of a complex list, so I’m scared that whenever I start adding complex things to rows (like tooltips on hover, animations, images and so on) things will start getting complicated.
For example, with a really simple list of 100 elements, with 6 columns, all composed by labels and just a complex element, FPS drops from 400 to 60 when scrolling, which is fine but I’m on a gaming PC.
I’m really worried that on low-end mobile devices these performances will be lower.
I completely agree with you that probably a different approach is needed for large tables, but if I’m having issues with lists probably I will have issues with other complex elements that I cannot change on the usability aspect.
Amazing performances you are showing here, in my example I have 100 rows, and I have a pool of 30 elements, as you can notice in the video, FPS drops down to 6 sometimes, the data is fake and it’s loaded at scene startup tho:
Tbh, I didn’t went to deep on profiling performances so there might be something wrong made by me.
I didn’t went to deep as this table will became like the following image (or bigger), and if I’m getting these performances with just 100 rows I’m scared that every improvement I’ll make will stop into a wall at some point.
So as you can see I will add a lot of complex UI elements, and might change in the future.
Did you used something in particular in order to achieve your result rather than Pooling?
This is what Unity does with their example Dragon Crashers.
From there you don’t have to even bother making a ListView to get the same thing as below, just make ten rows of VisualElements and update them on the fly. Maybe match height would be more appropriate in this case though.
As for me no I use regular make and bind code:
protected override VisualElement makeItem()
{
var itemRoot = itemTemplate.Instantiate();
return itemRoot.Q<VisualElement>("game-item");
}
protected override void bindItem(VisualElement item, int index)
{
var game = GameController.Instance.GameBase.Games[index];
item.userData = game;
item.name = "container";
var variant = item.Q<Label>("variant");
variant.text = game.variant.DisplayName;
var whiteLabel = item.Q<Label>("white");
whiteLabel.text = game.Tags["White"];
var blackLabel = item.Q<Label>("black");
blackLabel.text = game.Tags["Black"];
var resultLabel = item.Q<Label>("result");
resultLabel.text = game.Tags["Result"];
var siteLabel = item.Q<Label>("site");
siteLabel.text = game.Tags["Site"];
var eventLabel = item.Q<Label>("event");
eventLabel.text = game.Tags["Event"];
var dateLabel = item.Q<Label>("date");
dateLabel.text = game.Tags["Date"];
var roundLabel = item.Q<Label>("round");
roundLabel.text = game.Tags["Round"];
item.RegisterCallback<ClickEvent>(selectGame);
}
I’m on 2023.2 alpha though, it might make a difference.
Thanks dlorre! I will definitively give it a try, we have some limitations due to engine version as we cannot upgrade it and change the entire game structure nowadays, we are on unity 2021.3.
But I will create an empty project and follow the Dragon Crasher course to see if I can get some improvements!
If I have a large amount of data to display, such as 100 columns and 10,000 rows, can I use the MultiColumnListView component? I tried it and found that there seemed to be some problems with the scrolling, which was not fast enough.And it’s very laggy when scrolling
You’re going to need create your own caching and model controller system for this kind of thing. Pre-cache enough for the current scroll speed and caching time at that scrolling speed, refresh, etc. Only iOS and MacOS have this kind of thing builtin such that it actually works with this kind of data size and table size.
it shouldn’t be a problem if you’re using ListView properly. We have like thousands of thousands of inventory handled by a single ListView with no issues so far.
Anything based on virtual collections is a must for such massive task, which what ListView is all about
IMPORTANT : Pay attention on how you’re doing unbind, it’s very crucial point on ListViews which the docs never mentioned how important to clear all binds/callbacks related to the virtual elements on a ListView
