1
\$\begingroup\$

I am trying to create scene that has multiple panels, but only one is visible. When user clicks on appropriate button a transition is happening: camera moves to the right revealing panel on the right or it moves down revealing panel that is down.

enter image description here

My first attempt was to have some C# script/controller that will change position of all three panels at the same time using Vector.lerp, however, problem that I see is multiple resolution. If I have resolution other than 480x800, panels overlap and I can't make transitions right (for example, to move right I move all three panels on the x-axis by -480).

How would I do this?

\$\endgroup\$
  • \$\begingroup\$ Please keep in mind that asking for tutorials is offtopic. \$\endgroup\$ – Gnemlock Jan 21 '17 at 21:45
  • \$\begingroup\$ Did you use RectTransform.anchoredPosition? \$\endgroup\$ – Candid Moon _Max_ Jan 21 '17 at 22:40
  • \$\begingroup\$ You might try putting the panels in place and then translating the x coordinate of the camera as needed \$\endgroup\$ – Mir Jan 22 '17 at 6:28
1
\$\begingroup\$

The way I would approach it would be to set up a canvas to 'Scale with Screen Size' using Unitys Canvas Scaler, set the reference resolution to the size of your primary target device, and then add 3 Panel as children of the canvas. Use the anchors in the Rect-Tranform section of the Inspector to set each Panel to stretch the full height and width of the Canvas. Position the starting panel inside the canvas, and the other panels to the right and below the canvas as you illustrated in the picture provided above.

Whenever the end users screen size is larger or smaller than your target display, the 'Scale with Screen Size' option will scale the canvas up or down appropriately, along with all of it's child UI objects (the panels being the primary point of interest in your case). Basically the panels will always be the full size of the screen regardless of the end users screen resolution. You might want to take a look through Unity's guide on Designing for Multiple Resolutions for more details.

In regards to moving the panels I would be inclined to use an Animator Controller to create the screen transitions, you can read through the documentation on this approach here, but there's also a tutorial here with a demo displayed in web player, you're mainly interested in the sliding settings menu which is in part 2, but look through part 1 first to get the necessary background. You could also achieve this by adjusting the panels position with a Lerp in a script which sounds like what you've attempted, but I think the using an Animation Controller would be a simpler approach.

Based on the description of your problem and the picture provided I think you only really need to move two panels at a time, the active one and the one you wish to transition to, but that's a design choice for you to make.

There's a Live Training video series from Unity that takes an in depth look at their UI system, which might be worth taking a look at too.

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ Thank you for such detailed explanation! I will look trough links you wrote and will try something soon. \$\endgroup\$ – clzola Jan 22 '17 at 11:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.