# View individual UI Rect boxes when multiple UI elements are selected?

I have 2D UI layout with multiple text boxes over the canvas, I need to easily be able to see where the Rect boxes for each are positioned, so that I can see where the safe areas are for placing buttons etc.

Selecting each individual item shows its own individual Rect box, but selecting multiple items just shows one big box around all of them.

Is there a way of selecting multiple items and see each individual Rect box? It's extremely time consuming having to go and check each one individually.

There's no setting for this in Unity, however, a custom script can do something like this. Here's a complete script I wrote, you'll just need to add it to any object in the scene. It will run in edit mode and draw red lines around each element and its descendants (assuming they have a RectTransform).

Everything selected:

A child element selected:

using UnityEditor;
using UnityEngine;

[ExecuteInEditMode]
class UISelector : MonoBehaviour {
void OnDrawGizmos() {
if (Selection.activeTransform != null) {
if (Selection.activeTransform.GetComponent<RectTransform>() != null) {
DrawChildRects(Selection.activeTransform.GetComponent<RectTransform>());
}
}
}

void DrawChildRects(RectTransform transform) {
DrawRect(transform);
foreach (RectTransform rect in transform) {
DrawChildRects(rect);
DrawRect(rect);
}
}

void DrawRect(RectTransform rect) {
Vector3[] points = new Vector3[] {
new Vector3(rect.rect.min.x + rect.position.x,
rect.rect.min.y + rect.position.y),
new Vector3(rect.rect.min.x + rect.position.x,
rect.rect.min.y + rect.position.y + rect.rect.height),
new Vector3(rect.rect.min.x + rect.position.x,
rect.rect.min.y + rect.position.y + rect.rect.height),
new Vector3(rect.rect.max.x + rect.position.x,
rect.rect.max.y + rect.position.y),
new Vector3(rect.rect.max.x + rect.position.x,
rect.rect.max.y + rect.position.y),
new Vector3(rect.rect.max.x + rect.position.x,
rect.rect.max.y + rect.position.y - rect.rect.height),
new Vector3(rect.rect.max.x + rect.position.x,
rect.rect.max.y + rect.position.y - rect.rect.height),
new Vector3(rect.rect.min.x + rect.position.x,
rect.rect.min.y + rect.position.y),
};
Handles.color = Color.red;
Handles.DrawLines(points);
}
}

• I only did basic testing, if you find it doesn't work for a certain situation, let me know what it is and I'll try to fix it. – MichaelHouse Aug 1 '17 at 22:19
• Thanks very much for the script, it does work but if applying to a canvas that has been scaled, the red box does not match the size of the text's rect transform box. I have a canvas that is set up for zooming in and out and the canvas itself has a scale of X - 0.585 Y 0.- 585 Z - 1, this results in the red box being around twice the size of the Rect box. Creating a new canvas with a scale of 1,1,1 correctly displays the box. – NIMBLE JIM Aug 9 '17 at 13:48
• Scaling canvas is typically a bad practice, since you can set the size anywhere that's needed. However this script can be modified to account for that, I'll see about doing that later today. – MichaelHouse Aug 9 '17 at 14:14
• It is I know, however I have multiple uses of the canvas throughout the project, so the setup is so embedded it would be a huge job to change them all at this point. That's a job for a later day! An update to the script to account for this would be great, thanks. – NIMBLE JIM Aug 9 '17 at 14:53
• I get the following errors in the log when I try to make a build - "Assets/UISelector.cs(1,7): error CS0246: The type or namespace name `UnityEditor' could not be found. Are you missing a using directive or an assembly reference?" "Error building Player because scripts had compiler errors" The game runs fine when playing in the editor. – NIMBLE JIM Aug 9 '17 at 15:58