Search Unity

  1. Unity 2019.1 is now released.
    Dismiss Notice

How to resize a UI properly

Discussion in 'Unity UI (uGUI) & TextMesh Pro' started by Essential, Nov 17, 2014.

  1. Essential

    Essential

    Joined:
    Sep 8, 2011
    Posts:
    265
    I'm still trying to get my head around how the UI sizing works. When I resize a parent using the Rect Tool, all the children are set to 'Stretch' but end up resizing in unexpected and strange ways.

    Here's a video showing the issue: http://cl.ly/341d2b0E003a/Unity UI.m4v

    Edit: And here's a 400KB test project where you can test the effect yourself. If you resize the 'Tablet Parent' object with the Rect Tool the screen does not stay proportional to the tablet image, as expected.
    link: http://cl.ly/1b3c263J0I2v/UI Resize Test.unitypackage
     
    Last edited: Dec 3, 2014
    Slight0 likes this.
  2. _Radagan

    _Radagan

    Joined:
    May 16, 2014
    Posts:
    25
    Since Release Candidate 1, Reference Resolution has been removed and replaced by CanvasScaler.

    http://unity3d.com/unity/beta/4.6/release-notes
    • The ReferenceResolution and PhysicalResolution components have been removed. To have them be automatically converted to the new CanvasScaler component, open the project and its scenes with beta 21 as described in the upgrade guide for beta 21. Any remaining ReferenceResolution or PhysicalResolution components will appear as missing in release candidate 1 and later, and will not work. Fixing this manually can be done by adding CanvasScaler components and setting them up as desired.
     
  3. Essential

    Essential

    Joined:
    Sep 8, 2011
    Posts:
    265
    Thanks for the reply Radagan but I mentioned I was using the Canvas Scaler in my post…
     
  4. rakkarage

    rakkarage

    Joined:
    Feb 3, 2014
    Posts:
    682
    but how do you have a reference resolution too? when it does not exist anymore
    it seems like 1 & 3 are the same and 2 is impossible
     
  5. Essential

    Essential

    Joined:
    Sep 8, 2011
    Posts:
    265
    If you go to Canvas Scaler and select Scale With Screen Size you get to the Reference Resolution property. It still exists, it's just been migrated into the Canvas Scaler.
     
  6. Essential

    Essential

    Joined:
    Sep 8, 2011
    Posts:
    265
    Have I posted this in the wrong forum? Should I post it somewhere else? I'm just wondering how I can find out the answer. o_O
     
  7. rakkarage

    rakkarage

    Joined:
    Feb 3, 2014
    Posts:
    682
    maybe use something like http://www.cockos.com/licecap/ to make an animated gif showing the problem... so everyone can understand how it is not working?

    i use 'Scale With Screen Size' and it seems to work fine... idk
     
  8. mimminito

    mimminito

    Joined:
    Feb 10, 2010
    Posts:
    777
    Hi,

    I would advise you always start with your CanvasScaler setup properly before you start designing your UI. That way you want have any nasty surprises later on (unless you change the reference resolution again and your UI is not setup to anchor correctly).

    For example, we design against an iPad usually, and would like to the height to take priority. So, we setup the CanvasScaler to use a reference resolution of 1024x768, and set the Match value to 1 (height). This way we know any content we want shown height wise is going to always be visible, but we have more or less space on the width depending on which device we are running on. Make sure you anchor your content correctly as well if you are targeting mobile, so that when users are on smaller/wider devices the edges move with them.

    I believe the issue you are seeing is due to your assets being designed at size 'X' but you are targeting size 'Y' which is causing issues. We had an issue where our content was not anchored correctly when targeting iPad Retina (2048x1536) and when we switched assets to 1024x768 everything was positioned wrong. Just do a few initial tests with some core UI elements to check you are getting the results you want.

    Unfortunately, I dont think there is a definitive guide on how to design your game/app which will suit every user. Every design is different, so you have to work out what the best solution is for your problem. Hopefully this helps out somewhat.

    Adam
     
  9. Essential

    Essential

    Joined:
    Sep 8, 2011
    Posts:
    265
    Thanks for the reply Adam. That helps somewhat.

    I made a quick video showing what I'm experiencing —

    Video: http://cl.ly/341d2b0E003a/Unity UI.m4v

    – So am I right in thinking this non-proportional scaling is normal and there's nothing I can do about it? Once I've nested UI components, I can never ever resize them using the Rect tool? (Or is there a way I can fix this? Or perhaps I've misunderstood the function of the Rect tool?)
     
    Slight0 likes this.
  10. mimminito

    mimminito

    Joined:
    Feb 10, 2010
    Posts:
    777
    Hmm, thats odd behaviour, and without having access to the project im not sure if I can help much. If you could send me a project to look at, I will see if I can help you a bit more. I dont use the rect tool much to resize like you are. Usually I will use the cool dropdown anchor menu in the RectTransform inspector to manage the components.

    Feel free to PM me the project rather than post on here.
     
  11. Essential

    Essential

    Joined:
    Sep 8, 2011
    Posts:
    265
    mimminito also experienced the problem. I've created a 400KB test project if anyone has any further input to it — If you resize the 'Tablet Parent' object the screen does not stay proportional to the tablet image — But I'm now thinking it could be a bug as it's such unexpected behavior.
    Test project link: http://cl.ly/1b3c263J0I2v/UI Resize Test.unitypackage
     
    Slight0 likes this.
  12. mimminito

    mimminito

    Joined:
    Feb 10, 2010
    Posts:
    777
    Im pretty sure its not a bug. Resizing the parent does not mean the child will take its parents "size" into account. The scale is what will affect all children.
     
  13. Essential

    Essential

    Joined:
    Sep 8, 2011
    Posts:
    265
    You're right, it usually doesn't take the parents size into account. But when the child's Rect Transform is set to 'stretch', it does, it just doesn't do it quite as expected.

    I am a noob to the new UI system, but I've read all through the documentation and watched the tutorial videos and I'd think it expected behavior to resize like this when setting children to 'stretch'. I can't see a reason why it doesn't.
     
    Slight0 likes this.
  14. Essential

    Essential

    Joined:
    Sep 8, 2011
    Posts:
    265
    In regard to scaling, the Unity documentation on the Rect Transform states that we shouldn't use scaling, hence my confusion.

    Rect Transform
    For layout purposes it is generally recommended that you resize a UI element rather than scale it. This resizing will not affect font sizes, border on sliced images, and so on. Scaling can be useful for animated effect or other special effects though
     
  15. mimminito

    mimminito

    Joined:
    Feb 10, 2010
    Posts:
    777
    Indeed, so you should probably resize your child elements as well. Only if all child elements are set to "Stretch" to their parent will they resize when you resize a parent.
     
  16. Vurawid

    Vurawid

    Joined:
    Nov 17, 2014
    Posts:
    7

    Attached Files:

    Vickylance and Essential like this.
  17. Essential

    Essential

    Joined:
    Sep 8, 2011
    Posts:
    265
    Thanks for that Vurawid. That example works perfect.
     
  18. Vurawid

    Vurawid

    Joined:
    Nov 17, 2014
    Posts:
    7
    You're welcome. :) Glad to hear that worked out.
     
    Vickylance likes this.