Multiple UI "Pages"

Unity Engine
1

Here’s what I’m trying to do: Part of my game allows the end-user to generate some of their own in-game content, so they need to be able to upload images, select options, and enter quite a bit of text in various fields.

No problem with that, so was looking at the new UI, because this will help me with all the scaling and stuff.

My problem is that it is all too much for a single screen, so I need multiple UI pages - imagine like a good old wizard set of screens in a setup for a desktop environment, stepping from one to the next (not literally, necessarily, but conceptually - different screens offering different information)

What is the best way to organise this in practice in Unity? Is it using multiple canvasses, and changing the visibility of the canvas I want to be looking at (which might be a bit of a nightmare to manage in the Editor) or is there a better way?

2

Imagine a canvas like one “menu” or “screen.” I would try using multiple canvases, and animating between them as needed. It wouldn’t be nightmare in the editor since everything will have the parent/child heirarchy, and you can move the canvases around so that they’re not near each other when you’re editing them (so you don’t get confused or whatever).

I’m doing an RPG with multiple-screen/page menu, and this is how I’m tackling it. I actually keep each canvas as a prefab and destroy them when I’m not using them, and instantiate them when I need to use them. It’s really not too big of a deal at all. I’m still in the early stages, so who knows if it will be problematic later, but it seems pretty smooth for now.

3

Check the UI sample asset that Unity provide. They have a multiple layout example there in the Menu scene

4

I have all screens visible in editor at the same time side by side, and then close all but main screen with script (which i add to every UI group, not to individual UI elements):

using UnityEngine;
using System.Collections;

public class ResetPosition : MonoBehaviour {
    public bool HideOnStartup = true;
    void Start() {
        if (HideOnStartup) gameObject.SetActive(false);
        transform.localPosition = new Vector3(0, 0, transform.localPosition.z);
    }
}

I can have clear view of everything, and if i want to check their border proportions again, all i have to do is set their position to 0,0 temporarily.

And for transitions you don’t need a single line of code. You can modify GameObject.SetActive() of any object in the Button’s inspector. Have all the components groupped in hierarchy in empty game objects, just remember that all gameobjects need Rect Transform component. Unity can add it automatically if you add empty object from hierarchy.

And they are all on 1 same canvas root object.