This asset solves most size and position problems, so you can focus on your game and not in the UI math. Adds extension methods to RectTransform and a component called “Rect Transform Extended”.
Does not block any RectTransform feature, only adds stuff.
See the video for a detailed explanation:
With this tool you can do the following:
Set and get position and size of an object using values relative to the parent (and not relative to the anchors).This is like a “disable anchors” feature. This is usefull to know and set the real size and position of UI elements.
Coordinate conversion between the object anchors and the canvas. Usefull in animations to move an object like if it was a child of the canvas when is not. Or to visually match objects located at different containers.
Use values from 0 to 1 to move the object exatcly out of it’s container or out of the screen when setting 0 or 1 (see the video). Useful to animate an object out of the screen without thinking about math, anchors, position, size or containers
Coordinate conversion to / from screen space coordinates (pixels) to UI coordinates. Usefull for mouse/touch interaction that changes UI objects or to visually match UI objects with 3D objects.
More values and coordinate convertions…
Change and get anchors position and size using a Vector2 for position and another Vector2 for size. (An alternative to AnchorsMin and AnchorsMax) Specially usefull for animating anchors with tween libraries. For example, to only change position of anchors you can animate a single position value, otherwise for doing the same you have to animate both AnchorMin and AnchorMax values in 2 different tweens.
Asset link:
Feel free to make a request or ask questions. I’ll be answering.
Usage:
Easier UI comes with the “Rect Transform Extended” component. Also when you import the asset new methods are added to RectTransform. Everything is doccumented in the readme and an example scene is included. A very clean source code is also included.
More screenshots:
Feedback:
For questions or suggestions use this forum thread so your question can help others, for other kind of feedback my email is:
Added: Anchors can be resized from the center if center pivot is checked.
Fix: Messages in play mode.
Fix: Prevented any potential division by zero bug.
Fix: Message when the object was never activated.
2.5 changes:
Added: Out of container and out of screen position.
Bugfix: Fixed a wrong behaviour when the object is in a specific container configuration.
New version 3.0!
Warning: This is a big update, remove previous version before updating. The changes you have to make in existing code are only syntax changes.
If you need help porting your code to the new syntax let me know.
Changes:
Added: Option in the tool menu to center the rect and center the anchors.
Added: Option to move the anchors and not the object.
Fixed: UI Anchors to corners menu button was not working perfect if there was an AspectRatioFitter component.
Changed: The syntax of all the extension methods has changed to be more clean and easy to use.
Changed: Cleaner interface in the Rect Transform Extended component, mirrors the same logic of the new API syntax.
I have the following situation with which I need some help:
I have a panel which can be dragged with the mouse inside another panel. I
am using the Rect Transform Extended (version 3.1) to calculate positions and sizes. After
the drag operation ends (inside an OnEndDrag event), I check whether the
dragged panel rectangle (=size) is outside the parent panel rectangle.
Everything works perfect until I add scaling functionality. After I change
the dragged panel localscale with the mouse wheel (either zoom in or zoom
out), the panel rectangle is no longer calculated properly (actually it
stays the same!). Obviously, I am missing something.
I tried to transform positions and sizes by the localscale factor with no
luck. Any help will be greatly appreciated!
Scaling “breaks” the Rect Transform also “breaks” Easier UI since is based on Rect Transform. With “breaks” I mean that when you change the scale value of a UI element the apparience changes but all the numbers in the Rect Transform remains the same, this means it breaks the relation between what you see and the numbers, so everything you try to do looks wrong. You should keep the scale at (1,1,1) for all your UI elements.
The only usage of the scale value in the UI is for animation, scaling stuff temporarely during the animation.
I don’t know why you need to scale your element, if you give me more information or screenshots I can help you better.
A way to make a scaling functionality using Easier UI is just by multipling the width and height. This example component adds a scale value to your UI element without breaking the other values:
using UnityEngine;
[ExecuteInEditMode]
[RequireComponent(typeof(RectTransform))]
public class ScaleExample : MonoBehaviour
{
public Vector2 Scale = Vector2.one;
private Vector2 StartingSize;
private RectTransform Rt;
// Use this for initialization
void Start ()
{
Rt = GetComponent<RectTransform>();
StartingSize = Rt.GetSize();
}
// Update is called once per frame
void Update ()
{
Rt.SetSize(new Vector2(StartingSize.x * Scale.x, StartingSize.y * Scale.y));
}
}
Is just an limited example so you can see a way of scaling tihngs.
Thanks!
To summarize the logic of the solution:
If you want to use scaling with the rect transform extended (super) properties you should follow these steps:
Yes.
I recommend to use the Unity scale value only if you are going to make an animation and then you set it back to 1.
The scaling solution I posted doesn’t use the Unity scale value, just changes the width and height of the element with a multiplier called Scale to simulate the Unity scale value, but it’s not the same so you can use that as much as you want with no issues.
If you want your object to have the same size of another object just set the same width and height. If you want to do that with the position do the same but using the Canvas coordinate system. That coordinate system matches the positions of all the objects located at any container.
I have a Canvas UI with a Side Menu and Header, like a mobile app. Remaining part of the app is rectransform and i want to show a 3d object in that area.
So what i did is took its x,y and width height
Position = rectTransform.GetPosition (CoordinateSystem.ScreenSpacePixels);
Size = rectTransform.GetSize (CoordinateSystem.ScreenSpacePixels);
Now question is, how do i convert that information and assing to a 3d plane which has only “Transform” component?
Thanks John.
You converted UI coordinates to pixels that is the first step, then you need to move the 3D object to that pixel position, so you need to convert pixels to 3D pos.
My tool is “UI only” so can’t help you with 3D stuff. But it’s not difficult to convert pixels to 3D coordinates, the following code does what you want:
public class CoordinateTranslation
{
public static Vector3 ScreenToWord(Vector2 screenCoordinates, float distanceFromCamera, Camera customCamera = null)
{
if(customCamera == null)
customCamera = Camera.main;
Ray ray = customCamera.ScreenPointToRay(screenCoordinates);
return ray.origin + (ray.direction * distanceFromCamera);
}
public static Vector2 WorldToScreen(Vector3 worldPos, Camera customCamera = null)
{
if (customCamera == null)
customCamera = Camera.main;
return customCamera.WorldToScreenPoint(worldPos);
}
}
Hi! I just purchased your plugin, it seems great! I am an absolute noob at Unity, my question is the following.
I’m creating 4 buttons programatically and I want to make them align vertically, I have been using Screen.width and I don’t think that’s working for me, I want them to be right in the middle of my panel. How can I do that?
You must divide the parent width by 2 and that is the X position of your elements. Use “Size Ignoring Anchors” when getting the parent size and use the pivot centered. I can’t tell you more than that with the information you provided.
Hi! Really interested in this asset, however, I just have one specific question.
I kinda need to translate the RectTransform’s Pivot to a fixed position in screen no matter what the aspect or the resolution changes. Like you fixed the pivot to the left of the screen, so you can rotate the whole RectTransform like a door. So is this asset can do this translate?
I don’t fully understand what do you want.
Do you want to move the pivot (the blue circle you see at the center of the game object transform by default)?
or you want to move the object using this blue circle as the position point of the object?
This is the documentation I wrote about the PivotCoordinateSystem.AsChildOfCanvas enum field:
/*
Move the pivot using the same numbers as if the pivot were the canvas pivot.
This is used to match the pivot position of different objects located at different containers, specially usefull in animations.
The position range goes from 0 to 1 like the usual for pivots. (0,0) places the pivot at the lower left corner of the canvas and (1,1) at the top right corner of the canvas.
*/
Just got the asset, it really does the job!
However, it doesn’t fix relative to the screen like the anchors do when the resolution changes.
Do I need to set something else?
Here, I got the RectTransfomrExtended component on my RectTransform and the method SetPivot to set it to the left down corner, but when I change the aspect or the resolution of the screen the pivot moved.
I mean do I need to call it in Update() or the extension method itself can do some magic callback on the screen change which I just don’t use it right?
