Having data virtualization in Unity3d UI panel - unity3d

I have a UIpanel in my application and i instantiate gameobject in it programmatically during runtime, the problem i have is i have to create more than 1000 gameobjects (sometimes up to 6000) in that panel and that takes a long time freezing the UI and trying it with Coroutines cause some lags as well.
is there any way to have a list of gameobjects and create them in UI panel during user scrolling that panel?
or can somebody suggest a better way of adding gameobjects to a panel without any lag or UI freeze?
UPDATE :
I added this to clear my goal.
i have a long list of items that i trying to put them in a list each item have a picture a some button and some texts, below there is a sample from a single item:
now i need to instantiate this complex sample in a panel and each item change itself based on a ID i pass after instantiation.
but i have a panel capacity problem and even if i cut some item when i put that many object in a panel at once scrolling in panel make it very slow and painful
also i need a scroll bar for my panel so i have to have all of my object available in the panel
hope this information helped.

When you describe it that way, its much clearer & much simpler.
Look at any mobile application: they do not put 6000 people records on a single page. Its normally paged or grouped, with a search option. So do that instead.
If you look at the facebook mobile app (a good standard) if you start scrolling to look at older posts, every few seconds it pauses for a second or two to load the next few posts. Its the same with the youtube app.
Because of this 65535 unity limit, just put in a paging limit (say 100-200 items).

Ok, I just wrote a test program which generated 1000 Text UI elements.
public class MakeLoadsOfUI : MonoBehaviour {
public GameObject prefab;
// Use this for initialization
void Start ()
{
MakeUI();
}
void MakeUI()
{
float startTime = Time.realtimeSinceStartup;
for (int i = 0; i < 1000; i++)
{
int x=i/40, y=i%40;
GameObject obj = (GameObject)Instantiate(prefab);
obj.transform.SetParent(transform); // attack to the canvas
RectTransform rt = obj.GetComponent<RectTransform>();
rt.anchoredPosition = new Vector2((x-10)*25, (y-10)*20);
obj.GetComponent<Text>().text = "UI:" + i;
}
float endTime = Time.realtimeSinceStartup;
Debug.Log("time taken:" + (endTime - startTime));
}
}
It took 0.15 seconds for 1000 elements which was quite reasonable. If you had a different result please elaborate, explaining how you did it.

Related

How do I arrange a list of buttons into rows of 4

I am trying to display the same game object in a table form of 4 columns and 2 rows so it would look like this:
GO GO GO GO
GO GO GO GO
G0 - gameObject
My gameObject is a button that can be pressed and has a text element on it to display the name of the profile on the button.
I have a List of strings of the names that i need to display on these GO buttons in the table form but i am struggling to position them correctly.
At the moment i have gotten to the point where i can Instantiate them so they all appear on the screen when the game is running, now i just need some advice on how i can position them properly in the format mentioned above.
How do i do this?
This is my code that i used to get the names and add them to the List:
private void GetProfiles()
{
List<string> profileNamesList = new List<string>();
if (Directory.Exists(filePath))
{
string[] files = Directory.GetFiles(filePath);
profileTileTemplate.SetActive(true);
foreach (var file in files)
{
string name;
name = file;
int index = name.IndexOf(filePath + "/", System.StringComparison.OrdinalIgnoreCase);
if (index >= 0)
{
int pathIndexEnd = index + filePath.Length + 1;
int stringLength = name.Length - pathIndexEnd - 5;
name = name.Substring(pathIndexEnd, stringLength);
}
profileNamesList.Add(name);
}
}
DisplayProfiles(profileNamesList);
}
private void DisplayProfiles(List<string> names)
{
}
I have tried using a for loop with in another for loop but i just end up instantiating multiple of the same game object.
This is what i get now:
And this is what i want it to look like:
This is kind of two questions, and I just realized that Unity has a built in component that will do this automatically, so I'll leave the three answers below.
How do I arrange UI gameobjects in rows?
Since it seems like you want to do this for UI elements there's actually a very easy solution. Add an empty GameObject as a child of your Canvas and add a Vertical LayoutGroup component. Add two children to that with horizontal layoutgroups. Add four placeholder prefabs of your gameobject to each horizontal layout group. Arrange them and configure the settings to get them looking the way you want (and make note of what happens if you add fewer than four items!)
Once you have it all set up, delete the placeholders. Then you can add your gameobjects to the horizontal group using Instantiate(Object original, Transform parent) (link) to parent them to the layout group, which will keep them arranged neatly. You can keep a list of those groups and each time you add four, switch to the next parent.
A neater way that seems to fit your use case (assuming there can potentially be more than 8 profiles) is to make a Scroll View that holds horizontal layout groups, which will each be a row of entries. That way instead of tracking which parent you want to add gameobjects to, you can just instantiate a new row every time you pass four entries.
If you're sure there will only ever be eight or fewer, the easiest thing to do would just be arrange eight blank buttons in the UI however you want them to appear. Then keep a list of the eight buttons and edit the text/image on them, no instantiation or looping necessary.
How do I split up a list of gameobjects into rows?
The actual code to process the list is below. This is just an example and there are plenty of different ways to do it, but I thought this demonstrated the logic clearly without depending on what UI elements you choose. As a rules of thumb, make sure to figure out the layout elements you like in Unity first using placeholders (like scroll view etc) and then figure out the code to fill them in. In other words, instantiating and laying out UI elements at runtime is a great way to give yourself a headache so it's best to only do it when you need to.
List<string> profileNamesList = new List<string>();
public int entriesPerRow; //only public so you can edit in the inspector. Otherwise, just use the number per row in your prefab.
public GameObject profileRowPrefab;
public GameObject scrollViewLayout;
private void DisplayProfiles(List<string> names)
{
int i = 0;
while( i < names.Count ) //"while the list has more names"
{
//create a new row as a child of the scroll view content area
//and save a reference for later
GameObject go = Instantiate(profileRowPrefab, scrollViewLayout);
for(j = 0; j < entriesPerRow; j++) //"add this many names"
{
if(i < names.Count)
{
//instantiate a button, or edit one in the row prefab, etc.
//depending on how you're doing it, this is where you'd use the go variable above
YourProfileButtonCreationMethod(names[i]);
i++;
}
else
{
//we've finished the list, so we're done
//you can add empty placeholders here if they aren't in the prefab
break;
}
}
}
}
YourProfileButtonCreationMethod will depend completely on how you want to implement the UI.
I wish I had thought of this an hour ago, but I've never used it myself. Unity has a built in layout feature that will do this for you (minus the scrolling, but you may be able to nest this in a scroll view).
How do I arrange UI elements in a grid?
Instead of making your own grid with horizontal and vertical layout groups, you can use the Grid Layout Group. Then just instantiate each item in the list as a button with the grid layout as their parent (see above). Here's a short video tutorial that shows what the result looks like.

How to create blur effect to all the scene except for one object (focus on that object)?

I want to create a blur effect similar to the picture below:
the picture is taken from this site:
https://forum.unity.com/threads/how-to-blur-specific-layers-only.555520/
I tried the post-processing profile and played around with the depth of field in the post-processing volume but it blurs all the scene.
I came across a YouTube Video that explains how to implement similar results to what I am looking for but things have changed drastically in the settings. For example, at 1:57 (minute and 57 seconds) he clicks on Add Additional Camera Data which I am struggling to find in the latest versions of LWRP.
I am using Unity version 2019.2.9f1
How can I achieve the result in the picture above? (Blurring all the scene except for one object)
Your guidance will be appreciated.
NOTE: My project is in VR using SteamVR and VRTK
Though your question is a bit broad I took some time to show you how it can be done.
First of all you will need to import the Post Processing package via the PackageManager
Window &rightarrow; PackageManager
Make sure to be in the All Packages view, search for post, find the Post Processing package and hit Install
Now first of all go to the Layer settings (Layers &rightarrow; Edit Layers)
and add two additional Layers: e.g. PostProcessing and Focused
Now to the cameras. Afaik it makes no difference whether you are in VR or not, usually you have one MainCamera that is moved along with your headset. If there should be two of them in your project setup just repeat the same steps for the second camera.
Make sure the MainCamera doesn't render the two added Layers &rightarrow; remove them from the Culling Mask
Add a new Camera FocusCamera as child to the existing MainCamera. This way it is automatically moved along with the main Camera.
RightClick on MainCamera &rightarrow Camera
It should have all the settings equal to the MainCamera except:
Clear Flags : Don't Clear
If you set it to Depth Only the focused object will always be rendered on top of everything, even if it is actually behind other objects in 3D space. You decide which effect you want here ;)
CullingMask : only Focused
Depth : Anything higher than the MainCamera so this camera is rendered on top of it
Make sure to remove the AudioListener component.
Finally add a new PostProcessingVolume to the scene. I would add it as child to the FocusCamera! Why? - Because this way it is automatically disabled together with the FocusCamera!
RightClick on FocusCamera &rightarrow; 3D Object &rightarrow; Post Processing Volume
Set its Layer to the added PostProcessing
enable Is Global so the distance to the volume doesn't matter and add a new profile by hitting new &rightarrow; Unity &rightarrow; Depth of field
In your case you want to overwrite the Focus Distance so check the box on the left and set a value close to the camera like e.g. 0.5
Until now nothing has really changed in your scene.
Now go to the MainCamera and, a component PostProcessingLayer and set the Layer to our added layer PostProcessing
Now everything should be blurred in your scene!
Almost ready to go! Now Disable the FocusCamera and add this script to it
using UnityEngine;
public class FocusSwitcher : MonoBehaviour
{
public string FocusedLayer = "Focused";
private GameObject currentlyFocused;
private int previousLayer;
public void SetFocused(GameObject obj)
{
// enables this camera and the postProcessingVolume which is the child
gameObject.SetActive(true);
// if something else was focused before reset it
if (currentlyFocused) currentlyFocused.layer = previousLayer;
// store and focus the new object
currentlyFocused = obj;
if (currentlyFocused)
{
previousLayer = currentlyFocused.layer;
currentlyFocused.layer = LayerMask.NameToLayer(FocusedLayer);
}
else
{
// if no object is focused disable the FocusCamera
// and PostProcessingVolume for not wasting rendering resources
gameObject.SetActive(false);
}
}
// On disable make sure to reset the current object
private void OnDisable()
{
if (currentlyFocused) currentlyFocused.layer =previousLayer;
currentlyFocused = null;
}
}
This will allow you to focus a certain GameObject on runtime by changing its layer to the Focused layer we added, the only one that is rendered by the FocusCamera. So this object will be rendered on top of the image without any blur effect!
For demonstration I just added this simple script to every cube object in order to enable focus on mouse enter and disable it on mouse exit:
using UnityEngine;
public class FocusMe : MonoBehaviour
{
[SerializeField] private FocusSwitcher focus;
private void OnMouseEnter()
{
focus.SetFocused(gameObject);
}
private void OnMouseExit()
{
// reset the focus
// in the future you should maybe check first
// if this object is actually the focused one currently
focus.SetFocused(null);
}
}
And here is what it looks like
as said I don't know exactly what your VR setup looks like. If you have to MainCameras simply add two child cameras to them. You still will need only one PostProcessingVolume and only one FocusSwitcher so you would probably move them to another object and handle the camera disabling etc differently but I hope the idea gets clear enough.
Use a separate camera for objects you don't want to blur and set a higher depth value.
Set the ClearFlags to depth only and in the CullingMask select the layer of that one object(or more objects). Obviously you would require to have a different layer for unblurred objects.

How can I detect Window.ClientSizeChanged end?

I'm currently working on a desktop game that can be played in both fullscreen, as well as windowed mode. When the game is windowed, I want to ensure that the window always maintains a certain aspect ratio, while still allowing the user to resize the window.
To describe the flow: after the user resizes the window, the width and height will adjust to snap to a pre-defined aspect ratio. An example of this is the game Stardew Valley. When you try to resize the window to a small enough size, after letting go of the mouse button, the window resizes (grows) to a pre-defined minimum size.
The approach I want to take is to detect when the user is finished resizing the window, and then set the window size manually. But I'm not sure how to detect that end "event."
This is rather easy to make:
Make sure that your windows size can be changed, by writing Window.AllowUserResizing = true;
Subscribe to the ClientSizeChanged event of the Window Property in Game. Window.ClientSizeChanged += Window_ClientSizeChanged;
In your event-method (in my case Window_ClientSizeChanged), check for the windowsize by using the Window.ClientBounds Property.
Set the new values of the Window, if needed. Unsubscribe during resize so your own resize does not create a StackOverflowException (because ApplyChanges() fires this event again) and resubscribe after calling ApplyChanges().
private void Window_ClientSizeChanged(object sender, System.EventArgs e)
{
Window.ClientSizeChanged -= Window_ClientSizeChanged;
graphics.PreferredBackBufferWidth = Window.ClientBounds.Width < 100 ? 100 : Window.ClientBounds.Width;
graphics.PreferredBackBufferHeight = Window.ClientBounds.Height < 100 ? 100 : Window.ClientBounds.Height;
graphics.ApplyChanges();
Window.ClientSizeChanged += Window_ClientSizeChanged;
}
And that's it. The event is now fired whenever the window recieves a resize (either by you, by the user or upon creation).
Stardew Valley was written in XNA and does mostly the same (it updates settings and recalculates lightmaps), but the main idea is the same.

Show/ hide Unity 3D elements

I hope I am posting in the correct section. I know that it is possible to write a custom code in Unity so I have the following questions:
Imagine a house model in Unity. Would it be possible to have a code which helps to hide/unhide certain objects? For example, letter "W" would hide/unhide all windows, letter "C" would hide/unhide all columns etc.
If it would be possible to develop a code for that, what would be the workflow? How would Unity know what is window and what is door?
Taking one step further.. Would it be possible to have a code that unhides the next step of the project. For example, the first step would be building foundations. Would it be possible to have a code that would unhide the next step, say, 1st floor floor element, with a klick of a keyboard key? And then with the same key unhide the next step which might be 1st floor walls. And would it be possible with another key go backwards?
If such code would be possible, what do you think would be the workflow? How would Unity know which element is in which step?
Yes just have a class with an array of objects to show/hide and another property for what button will do it. Then just have a method that will hide/unhide each object in that class. In the update method of a behavior just check the input and call the method of the class based on what button was pressed.
Would it be possible to have a code which helps to hide/unhide?
Yes, you can do that by calling GameObject.SetActive() function
door.SetActive(true); // door is a game object;
How would Unity know what is window and what is door?
You can give the window/door a name, then access the game object by name
var door = GameObject.Find("MyDoor") as GameObject;
Would it be possible to have a code that would show the next step, say, 1st floor floor element, with a klick of a keyboard key?
Yes, you can do that with code snippet below:
int step = 1;
void Update() {
if (Input.GetKeyDown("space")){
print("space key was pressed");
step++;
}
if(step == 1) {
// do sth
}
else if(step == 2) {
// do sth
}
}
Given the above snippet, your last answer can be easily deduced.
I see 2 ways of doing what you asked.
1st way
GameObject[] walls;
walls = GameObject.FindGameObjectsWithTag("Wall");
foreach (GameObject wall in walls)
{
wall.setActive(true);
}
What you will have to do, besides the code, is to assign to those object a correct tag (like "Wall" "Window" "WatheverYouWillNeed"). So you can easily find all objects by giving them some kind of order (with tags).
Best practice tip
You may want to create a static class "Tags", and set public constants string inside the class, with all tag names.
public static class Tags
{
public static const WINDOW_TAG = "Window";
// ... more tags
}
2nd way
If what you want to set is only "visibility", you may want to modify only camera tag rendering. It doesn't even require any cycle at all. When you want to view windows, you just tell your camera to render the tag "Window".
// Turns on Windows Layer on mask using an OR operation
private void Show()
{
camera.cullingMask |= 1 << LayerMask.NameToLayer("Window");
}
// Turn off the bit using an AND operation with the complement of the shifted int:
private void Hide()
{
camera.cullingMask &= ~(1 << LayerMask.NameToLayer("Window"));
}
It may look odd the second option, but keep in mind that the cullingMask is composed of bits, and every bit is a Layer defined by your tags. The "Everything" culling mask is 111111. If you want to see only Window, for example, and window is the last element, your culling mask would look something like 0000001
Hope it helped! :)

Pager starts to change pages back and forth when clicking page links fast

I have a Pager extended from AbstractPager in which every time on range or row count changed I recreate NavLinks contained in it so pager looks like this:
1 2 3 … N-1 N N+1 … M-2 M-1 M
My algorithm works fine but when I start clicking on links fast (like really furiously) by the time one RangeChange event is performing (CellTable to which my pager is attached shows spin trying to fetch data on given page) there's already another ones coming to the EventBus. It results in changing current page back and forth in an infinite loop.
I tried to make paging links enabled only when current page is competely fetched by using Scheduler.get().scheduleDeferred and .scheduleFinally but with no luck.
My temporary solution is to enable paging links after 500 ms by using Scheduler.get().scheduleFixedDelay(), but I want to know how to get the exact moment of data on the current page being fully fetched.
Thanks.
If you have the same problem you need to hang LoadingChangeEvent.Handler on your CellTable, check if data is fully loaded and inform pager about it so pager can activate it's NavLinks:
pager.setDisplay(cellTable);
cellTable.addLoadingStateChangeHandler(new LoadingStateChangeEvent.Handler() {
#Override
public void onLoadingStateChanged(LoadingStateChangeEvent event) {
if (event.getLoadingState() == LoadingStateChangeEvent.LoadingState.LOADED) {
pager.activateNavLinks();
};
}
});
There's no way to do it internally in your pager since setDisplay() accepts HasRows and addLoadingStateChangeHandler() is in AbstractHasData (AbstractHasData implements HasData, HasData implements HasRows).