Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

[RELEASED] EASIER UI

Discussion in 'Assets and Asset Store' started by fermmmm, May 11, 2016.

  1. fermmmm

    fermmmm

    Joined:
    Oct 18, 2013
    Posts:
    129
    EASIER UI

    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:
    https://www.assetstore.unity3d.com/#!/content/41927

    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:
     
    Last edited: Jul 2, 2016
    larku and theANMATOR2b like this.
  2. fermmmm

    fermmmm

    Joined:
    Oct 18, 2013
    Posts:
    129
    New release

    2.6 changes:

    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.
     
    Last edited: May 25, 2016
  3. fermmmm

    fermmmm

    Joined:
    Oct 18, 2013
    Posts:
    129
    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.
     
    Last edited: Jul 13, 2016
  4. antonis74

    antonis74

    Joined:
    Jul 14, 2016
    Posts:
    2
    Hi,

    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!

    Regards,
    Antonis
     
  5. fermmmm

    fermmmm

    Joined:
    Oct 18, 2013
    Posts:
    129

    Hi Antonis

    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:

    Code (CSharp):
    1. using UnityEngine;
    2.  
    3. [ExecuteInEditMode]
    4. [RequireComponent(typeof(RectTransform))]
    5. public class ScaleExample : MonoBehaviour
    6. {
    7.     public  Vector2         Scale           = Vector2.one;
    8.     private Vector2         StartingSize;
    9.     private RectTransform   Rt;
    10.  
    11.     // Use this for initialization
    12.     void Start ()
    13.     {
    14.         Rt              = GetComponent<RectTransform>();
    15.         StartingSize    = Rt.GetSize();
    16.     }
    17.  
    18.     // Update is called once per frame
    19.     void Update ()
    20.     {
    21.         Rt.SetSize(new Vector2(StartingSize.x * Scale.x, StartingSize.y * Scale.y));
    22.     }
    23. }
    Is just an limited example so you can see a way of scaling tihngs.
     
    Last edited: Jul 15, 2016
  6. antonis74

    antonis74

    Joined:
    Jul 14, 2016
    Posts:
    2
    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:
    1. Apply the scaling
    2. Adjust the size according to new scale
    3. Set scale back to 1
     
  7. fermmmm

    fermmmm

    Joined:
    Oct 18, 2013
    Posts:
    129
    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.
     
    Last edited: Jul 15, 2016
  8. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,936
    @fermmmm
    Hey, i just purchased your plugin, Great Work
     
    Last edited: Aug 5, 2016
  9. fermmmm

    fermmmm

    Joined:
    Oct 18, 2013
    Posts:
    129
    Thanks John :). Please write a review, there is a lot of people happy but only a few reviews. I need them. Thanks for your feedback! ;)
     
  10. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,936
    Reviewed 5 stars yesterday,

    Can you please help in following problem?

    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
    Code (CSharp):
    1. Position = rectTransform.GetPosition (CoordinateSystem.ScreenSpacePixels);
    2.             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
     
  11. fermmmm

    fermmmm

    Joined:
    Oct 18, 2013
    Posts:
    129
    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:

    Code (CSharp):
    1. public class CoordinateTranslation
    2. {
    3.     public static Vector3 ScreenToWord(Vector2 screenCoordinates, float distanceFromCamera, Camera customCamera = null)
    4.     {
    5.         if(customCamera == null)
    6.             customCamera = Camera.main;
    7.  
    8.         Ray ray             = customCamera.ScreenPointToRay(screenCoordinates);
    9.         return ray.origin + (ray.direction * distanceFromCamera);
    10.     }
    11.  
    12.     public static Vector2 WorldToScreen(Vector3 worldPos, Camera customCamera = null)
    13.     {
    14.         if (customCamera == null)
    15.             customCamera = Camera.main;
    16.  
    17.         return customCamera.WorldToScreenPoint(worldPos);
    18.     }
    19. }
    Usage:

    Code (CSharp):
    1. Vector2 pixelPos = UIObject.GetPosition(CoordinateSystem.ScreenSpacePixels, true);
    2. float distanceToCamera = 20;
    3. Object3D.transform.position = CoordinateTranslation.ScreenToWord(pixelPos, distanceToCamera);
    Tweek the distanceToCamera value to customize how big the 3D object looks.
     
    Last edited: Aug 10, 2016
    jGate99 likes this.
  12. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,936
    Thanks, you are amazing :)
     
  13. AGTZ92

    AGTZ92

    Joined:
    Nov 27, 2014
    Posts:
    1
    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?
     
  14. fermmmm

    fermmmm

    Joined:
    Oct 18, 2013
    Posts:
    129
    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.
     
    AGTZ92 likes this.
  15. dearamy

    dearamy

    Joined:
    Mar 17, 2015
    Posts:
    68
    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?
     
  16. fermmmm

    fermmmm

    Joined:
    Oct 18, 2013
    Posts:
    129
    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?
     
  17. dearamy

    dearamy

    Joined:
    Mar 17, 2015
    Posts:
    68

    See? I just wanna to set the pivot always on some fixed position of the screen
     
  18. fermmmm

    fermmmm

    Joined:
    Oct 18, 2013
    Posts:
    129
    Yes, try this:
    Code (CSharp):
    1. rectTransform.SetPivotPosition(new Vector2(0f, 0f), PivotCoordinateSystem.AsChildOfCanvas);
    This is the documentation I wrote about the PivotCoordinateSystem.AsChildOfCanvas enum field:
    Code (CSharp):
    1.  
    2. /*
    3. Move the pivot using the same numbers as if the pivot were the canvas pivot.
    4. This is used to match the pivot position of different objects located at different containers, specially usefull in animations.
    5. 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.
    6. */
    7.  
     
    Last edited: Jun 28, 2017
  19. dearamy

    dearamy

    Joined:
    Mar 17, 2015
    Posts:
    68
    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?
     
  20. dearamy

    dearamy

    Joined:
    Mar 17, 2015
    Posts:
    68

    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?
     
  21. fermmmm

    fermmmm

    Joined:
    Oct 18, 2013
    Posts:
    129
    The editor extension is only for learning and testing, remove it from your object, it's slow and you don't need it. To keep the pivot on the lower left corner when the screen changes size you need to call SetPivotPosition again after the screen changed size. You can call it inside the Update and that should also work fine.
     
    Last edited: Jun 29, 2017
  22. LootlabGames

    LootlabGames

    Joined:
    Nov 21, 2014
    Posts:
    340
    It is way too slow to use for a game.
    I have a simple problem.

    One canvas.
    A window(just a panel) with an icon (image) inside of it.
    A tooltip(just a panel) that I need to move to the position of the icon.
    The tooltip is a child of the canvas, the icon is a child of the window panel.

    I added "Rect Transform Extended" to both tooltip panel and icon.
    I set both to Rect control-As Child Of Canvas.

    Now it the editor I copy the position of the icon and paste it into the position of the panel.
    Then nothing happens, well at least not for 15 to 30 seconds.

    Here is a picture of the simple setup:
    https://www.dropbox.com/s/ic7zsqju2th5vyk/EasierUIProblem.JPG?dl=0
     
  23. fermmmm

    fermmmm

    Joined:
    Oct 18, 2013
    Posts:
    129

    Don't use Rect Transform Extended, is just for learning, it's very slow, this is a tool to use from code.
    But I don't understand your problem, it hangs for 30 seconds? that is not normal. Are you sure the cause of that is Rect Transform Extended? because I don't see how is that possible, first time I hear something like that.
     
    Last edited: Jul 9, 2017
  24. smitchell

    smitchell

    Joined:
    Mar 12, 2012
    Posts:
    702
    Hey man, just bought your asset so real quick question about getting a target position.

    I have a ui element that I need to move off screen, so cool "transform.SetAnchorsPositionX(0f, AnchorsCoordinateSystem.OutsideCanvas);" gets my element off screen.

    But I need to animate this position so I need to get the position without moving the element first, then tween it.

    I can create a extension to do this no problem, but before I do that I was wondering if there was already a way to do it that I just haven't noticed?

    Cheers.
     
  25. fermmmm

    fermmmm

    Joined:
    Oct 18, 2013
    Posts:
    129
    No, there is nothing made for that. If you are using something like doTween to animate you don't need to create a component, but if you are using something like the Unity animator timeline, then yes, that is the way to go.
     
  26. smitchell

    smitchell

    Joined:
    Mar 12, 2012
    Posts:
    702
    yeah i'm using a tweening engine to animate things, not the timeline. So I need to get the position before I can tween it. that's where my issue is, transform.SetAnchorsPositionX doesn't return anything, just sets its position. I need to get the position and set it myself.
     
  27. smitchell

    smitchell

    Joined:
    Mar 12, 2012
    Posts:
    702
    i've hacked together a quick solution by just creating a dummy transform, applying the offscreen positioning logic and using that position to animate my target transform. It'd just be nice if I could get the position from a API.
     
  28. Supperman

    Supperman

    Joined:
    Dec 30, 2013
    Posts:
    6
    Hi, is this some kind of bug or is there something I'm doing wrong:

    - Create Canvas

    - Create Panel (inside Canvas)

    - Create Button (inside panel)

    - Add "RectTransformExtended" component to both Panel and Button

    - Change Panels rect control coordinates to "As Child Of Canvas Normalized"

    - Change Panels "Size > Width" to 0.5

    ..Now the button is gone, and there is error message "Look rotation viewing vector is zero"???
     
  29. fermmmm

    fermmmm

    Joined:
    Oct 18, 2013
    Posts:
    129
    transform.GetAnchorsPosition().x is what you need.
     
  30. fermmmm

    fermmmm

    Joined:
    Oct 18, 2013
    Posts:
    129
    That is a Unity internal bug, reload the scene (you can save) do it again and it should work. It happens without using this tool.
     
  31. username132323232

    username132323232

    Joined:
    Dec 9, 2014
    Posts:
    477
    Hello. I would like to have a sliced image to look consistently across different screen resolutions. I'm not using the Canvas Scaler component. Currently I'm using your SetWidth() and SetHeight(), but as you can see, image borders look different depending on screen resolution (see attached images from resolutions 640x480 and 400x2500). What did I miss?

    Code (CSharp):
    1.    public RectTransform image1RT;
    2.     public RectTransform image2RT;
    3.  
    4.     public Vector2 screenSize;
    5.  
    6.     void Start ()
    7.     {
    8.         unitsPerUiPixel = UnitsPerUiPixel(Camera.main);
    9.         Vector2 screenSize = Layout.GetOrthographicCameraSize(Camera.main) / unitsPerUiPixel;
    10.  
    11.         image1RT.SetWidth(screenSize.x / 2f);
    12.         image1RT.SetHeight(screenSize.y / 5f);
    13.  
    14.         image2RT.SetWidth(screenSize.x / 4f);
    15.         image2RT.SetHeight(screenSize.y / 5f);
    16.     }
    17.  
    4000x2500.PNG 640x480.PNG
     
  32. fermmmm

    fermmmm

    Joined:
    Oct 18, 2013
    Posts:
    129
    The result in the screenshots looks fine to me according to the code you posted. If you set the size of the object to be proportional to the size if the screen like in the code you posted, it will look different on each screen (proportional), if you want the elements to be the same size in all the screens you need a totally different thing. You need the Canvas Scaler and you need to configure it in "Constant Physical Size", then you have to move and resize stuff using units and never pixels.
    If your target is a mobile device remember that the Unity IDE does not let you to realy preview the different screen sizes inside the Unity IDE because it does not have a DPI size emulation. (this feature was still on the roadmap the last time I checked). A workaround for this is to use this asset:
    https://assetstore.unity.com/packages/tools/utilities/xarm-aspect-and-resolution-master-10563
     
    Last edited: Nov 19, 2018
  33. username132323232

    username132323232

    Joined:
    Dec 9, 2014
    Posts:
    477
    Thank you for the quick reply! I'm not using Canvas Scaler in my project because it doesn't coexist well with the rest of my UI code. Long story short, I'll have to make it work without Canvas Scaler.

    Just to clarify, I'm not looking for a constant physical size.

    What I'm trying to accomplish should be pretty straightforward. For example: display a button that would take 1/10th of screen width and 1/5th of screen height. The button would have a border with thickness of 1/10 of the button height. This happens automatically if I use simple scaling for the button image, but doesn't happen with sliced images. So, one solution would be to have separate button images for each aspect ratio of the button, but that can get out of hand really quick. Any suggestions?
     
    Last edited: Nov 19, 2018
  34. FeastSC2

    FeastSC2

    Joined:
    Sep 30, 2016
    Posts:
    978
    Thanks for the asset, very cool. Been struggling with UI for some time now ;)
     
    Last edited: Jan 7, 2019
  35. vomrat

    vomrat

    Joined:
    Mar 18, 2015
    Posts:
    2
    Hello publisher,

    I bought your asset. It's very helpful. but I noticed that scripts in the asset have no namespace. I would be happy if you could add namespace for this asset.

    Sorry for my English.
    Thanks.
     
    revanaii likes this.