What's this?

This's UIPageController framework, use for Unity3D. It helps us to fast prototype, arrange UI windows/pages in the game, already take care of common tasks such as Animation transition between pages, Block raycast ..etc. Click the image below to watch the sample video on Youtu:

Prequitesites

• Unity 2019.2
• Add "USE_LOG" to the "Scripting define symbols". Cause I'm using my custom Log.cs (Assets/Standard Assets), and in Editor, we need this USE_LOG flag to let all log messages visible in the Console window

I made the simple MenuUI scene without any line of code, just plug custom components, configs the animation, the element order .. sort of simple Editor steps.

Some definition

Page

A container, hold all sub-elements such as Header, button, background images ..etc. When a page shows up, it may be a simple popup or a more complicated page which a lot of buttons, images, each of them have a transition (fade, moving). We can define those transition in a page like this

Element

Each of them has a transition (fade, moving, rotate ...), and we want those configurations are easy to tweak huh?

Transition between pages

There're some requirements that we always have to solve when working with UI in the game:

• When a popup, a page shows up, it often has some animations such as moving or fade, not just simple placeholder. The transition must follow easing functions https://easings.net/

• User's input only allows on the last showup popup/window, we have to disable raycast on other windows/popups

• Etc..

The UIPageController already take cares most of these common problems.

Workflow

Create UIPageController object

I often create one "parent" canvas for each scene, and each page is an sub-canvas. Attach the UIPageController component to the root canvas object, or an object at the same child-level to other canvas. The Controller component will cache reference to all UIPage and do some init tasks.

Create Page and Element

It's time to layout-ing your UI objects (panel, buttons, background ..). Each page should have an Canvas component.

Add UIElement to each element in a page, config there animation. There're 4 types of animation: Move (in X/Y coordination), Fade (alpha changing). You can tweak the animation type, moving distance, duration. The Show animation is used when the page pop out, and the Hide animation ... you can guess what it is right?

Back to the Page component, you can config the order for Element

Control transition between pages

Press the Play button at MainMenu page, the mainMenu page goes out and the the LevelSelect page come in. How? Browse to the PlayButton object and read it's OnClick function. It's simple call to the function "UI_CloseSelfAndOpenPage" of the MainMenu's UIpage component then pass the reference to the LevelSelect page

Currently, there're 5 options to control the transition between pages

They're easy to understand huh?. Okay, that's almost everything you need to know, play around with the Sample scene in "_Sample/_Scene" folder to know more about this framework.

And ..

I'm not sure this framework can fit or solve all UI issues in your projects, It just works fine for me and solves almost of my UI problems, hope it helps you too.