How to resize a UI properly

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

 

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.

 

Thanks for the reply Radagan but I mentioned I was using the Canvas Scaler in my post…

 

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

 

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.

 

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.

 

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

 

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

 

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?)

 

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.

 

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

 

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.

 

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.

 

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

 

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.

 

Hi Essential, attaching the unitypackage here from Can I resize UI elements together uniformly?
The Unity Answers site isn't letting me attach the file unless it's in a zip.

 

Thanks for that Vurawid. That example works perfect.

 

You're welcome. Glad to hear that worked out.