Experiencing Difficulties with Nested Layout Groups; How to Display Children without Overlaping,etc?

For our undergraduate thesis in Computer Engineering, our team decided to combine eye tracking technology (Tobii), usually reserved for gaming, with an educational platform dedicated to study and monitor students’ reading habits and concentration, based on certain data processing models. This project has a main UI, that manages basic student and teacher activities (non-reading related) and data, working in tandem with a Unity application, that handles the reading phase during an exercise. Fortunately, both modules of the project communicate and exchange data. Additionally, our eye tracking sensor registers all needed data for processing.

Nevertheless, we are experiencing difficulties with the presentation of the reading material, given our inexperience with Unity. We are currently trying to implement a simple text visualizer via horizontal layout groups (template code here) nested in a single vertical layout parent (page), in which each word is treated as GameObjects.

First, we load the content of the text dynamically creating and adding GameObjects word by word into a horizontal layout. This method takes into account the word length to limit the size of each row and achieve a consistent format (preferably justified). But these words seem to overlap in certain areas, regardless of padding or the use of blank spaces.


Source code:

Code (CSharp):

1. public void AddItemToGrid()
2.     {
3.  
4.  
5.         GameObject currentRow = firstrow;
6.  
7.         ArrayList data = new ArrayList();
8.  
9.         data = pages[currentpage];
10.  
11.         print(data.Count);
12.         xcounter = 0;
13.         ycounter = 0;
14.  
15.             while (xcounter < data.Count && ycounter < pageend)
16.             {
17.                 if (currentRowLength < maxRowlength)
18.                 {
19.                     currentRowLength += data[xcounter].ToString().Length;
20.                     GameObject newText = Instantiate(word);
21.                     TextMesh temp = newText.GetComponent(typeof(TextMesh)) as TextMesh;
22.                     BoxCollider boxCollider = newText.GetComponent(typeof(BoxCollider)) as BoxCollider;
23.                 if (data[xcounter].ToString().Length < 5)
24.                     temp.text = "__" + data[xcounter].ToString() + "_";
25.                 else
26.                 {
27.                     temp.text = data[xcounter].ToString();
28.                 }
29.                     temp.characterSize = 25;
30.                     //print(temp.text);
31.                     newText.AddComponent<BoxCollider>();
32.                     newText.name = temp.text;
33.                     //newText.text = string.Format("Item {0}", counter.ToString());
34.                     newText.transform.parent = currentRow.transform;
35.                 currentRow.name = "row # " + ycounter;
36.             }
37.                 else
38.                 {
39.                     currentRowLength = 0;
40.                     var newrow = Instantiate(row) as GameObject;
41.                     ycounter++;
42.                     //newText.text = string.Format("Item {0}", counter.ToString());
43.                     currentRow = newrow;
44.                     currentRow.transform.parent = page.transform;
45.                 currentRow.name = "row # "+ycounter;
46.                 }
47.                 xcounter++;
48.             }
49.     }
50.  

Additionally, we plan on dividing large text into many “pages” by clearing the current content and replacing it with the next set of words. Unfortunately, objects of the first set do not get destroyed and are combined with the new ones, disrupting the entire layout.


Source code:

Code (CSharp):

1. public void clearpage(int direction)
2.     {
3.         print("direction" + direction);
4.         GameObject parentObj = GameObject.Find("Page");
5.         int childs = parentObj.transform.childCount;
6.         print("page has " + childs + "childs");
7.         foreach (Transform childTransform in parentObj.transform)
8.         {
9.             print(""+childTransform.name);
10.             if (childTransform.name == "row # 0")
11.             {
12.                 print("first row");
13.                 foreach (Transform childTransform2 in childTransform.transform)
14.                 {
15.                     print("" + childTransform2.name);
16.                     childTransform2.parent = null;
17.                     Destroy(childTransform2.gameObject);
18.                 }
19.             }
20.             else
21.             {
22.                 Destroy(childTransform.gameObject);
23.             }
24.             //}
25.         }
26.     }

NOTE: We attached files of the images due to faulty img links

 

Welcome to the hell that is the Unity layout system.

There's still a fair amount of black arts involved in using the layouts to get what you want (for example, I still have to look up exactly how to have a panel auto-size itself around a child input field), and it's still poorly documented in places.

On top of that, they don't always seem to resize whenever they're supposed to (i.e. when changing a text label content). Try throwing in a Canvas.ForceUpdateCanvases() to try to force all layouts to be recalculated after the data changes.

You could allegedly use LayoutRebuilder.ForceRebuildLayoutImmediate to be more specific, but I've never been able to get that to work well.

 

Thank you, BlackPete. We will try to experiment with those two methods.

 

Never tried to use textmesh in a canvas. Did you ever try using UI -> Text?
I admit that the layout system can be tough at times, but I'd say it's also pretty good.

 

Thank you for answering, but the eyetracking sensor requires that words are considered individual 3D TextMesh to achieve accurate data reading. It also hepls with collision management.

 

Ah, I see. I would have liked to have helped more, but I couldn't even get text mesh to appear visible when I tried lol.

Just a quick question before I wish you good luck -- Which mechanics require that it's a 3d object, as compared to a UI->Text object?

 

Any reason you are trying to use an entire UI Layout system, rather than just a single gameobject with a TextMeshPro component?

 

Sorry for answering so late. We have already tried using other UI components, however, the SDK library that allows us to work with the eye tracker only seems to accept 3D objects like TextMesh. Thanks for the wishes!

 

Thank you for your suggestion. We do think that our entire layout might be overkill. We will try to work with the objects as is.

 

UPDATE: we have decided to forego the grid scale and decide to work with the individual word objects, manipulating their positions on the canvas. Our text may not be in the justified format, but it is perfectly ledgible with no overlap. Thank you for the support and advise. we much appreciate your help. THanks a million from desperate college students.

Lesson of the day: Grids are not always the best options. Live and Learn.