Panel and layout groups in Unity - Mini Project: Build & Apply

Panel and Layout Groups in Unity

📖 Scenario: You are creating a simple user interface in Unity for a game menu. You want to organize buttons neatly inside a panel using layout groups so they automatically arrange themselves.

🎯 Goal: Build a Unity UI panel with a vertical layout group that holds three buttons arranged vertically with equal spacing.

📋 What You'll Learn

Create a GameObject called menuPanel with a RectTransform.

Add a VerticalLayoutGroup component to menuPanel.

Create three child GameObjects called button1, button2, and button3 with RectTransforms.

Add a Button component to each button GameObject.

Set the spacing property of the VerticalLayoutGroup to 10.

💡 Why This Matters

🌍 Real World

Game menus and UI panels in Unity games often use layout groups to keep buttons and elements organized automatically.

💼 Career

Understanding Unity UI layout groups is essential for game developers and UI designers to build clean, responsive interfaces.

1

Create the menu panel GameObject

Create a GameObject called menuPanel and add a RectTransform component to it.

Unity

// Create menuPanel GameObject with RectTransform
// Your code here

Need a hint?

Use new GameObject("menuPanel") to create the panel and AddComponent<RectTransform>() to add the RectTransform.

2

Add a VerticalLayoutGroup to the panel

Add a VerticalLayoutGroup component to the menuPanel GameObject.

Unity

GameObject menuPanel = new GameObject("menuPanel");
menuPanel.AddComponent();
// Add VerticalLayoutGroup component to menuPanel
// Your code here

Need a hint?

Use AddComponent<VerticalLayoutGroup>() on menuPanel.

3

Create three buttons as children of the panel

Create three GameObjects called button1, button2, and button3. Add a RectTransform and a Button component to each. Set their parent to menuPanel.

Unity

GameObject menuPanel = new GameObject("menuPanel");
menuPanel.AddComponent();
menuPanel.AddComponent();
// Create button1, button2, button3 with RectTransform and Button components
// Set their parent to menuPanel
// Your code here

Need a hint?

Create each button GameObject, add RectTransform and Button components, then set their parent to menuPanel.transform with SetParent.

4

Set spacing in the VerticalLayoutGroup and print confirmation

Set the spacing property of the VerticalLayoutGroup component on menuPanel to 10. Then print "Layout setup complete".

Unity

GameObject menuPanel = new GameObject("menuPanel");
menuPanel.AddComponent();
menuPanel.AddComponent();

GameObject button1 = new GameObject("button1");
button1.AddComponent();
button1.AddComponent();
button1.transform.SetParent(menuPanel.transform, false);

GameObject button2 = new GameObject("button2");
button2.AddComponent();
button2.AddComponent();
button2.transform.SetParent(menuPanel.transform, false);

GameObject button3 = new GameObject("button3");
button3.AddComponent();
button3.AddComponent();
button3.transform.SetParent(menuPanel.transform, false);

// Set spacing of VerticalLayoutGroup to 10
// Print "Layout setup complete"
// Your code here

Need a hint?

Get the VerticalLayoutGroup component from menuPanel and set its spacing to 10. Use Debug.Log to print the message.