The Menu Page System

The UI Menu Page System

The menu page system is a custom grouping and animation system for UI Menu content. It currently features bringing individual elements in and out of view, as well as grouping these elements into pages.

The System

Have a look at the test scene: Assets/Test/MenuAnimationWithLayoutsTest.unity

The basis of the system is using an animation state for each UI::MenuElement. Each can be in a state of 'shown' or 'hidden' to one of the four sides of the screen.
Each "animation" only consists of one frame: the new position the object shall have. The actual visible animation of an element sliding out or in is done by the smooth transition between those 1-frame-animations.

Each item to be animated thus need the component 'Animator', as well as the script MenuElement.

These "elements" can be grouped to form a logical "page", by listing these elements on an empty object featuring the UI::MenuPage component. They do not have to be children of the page, but only be listed there! This allows the same elements to be on multiple pages, so when you switch a page, only the subset of removed or added elements needs to change.

Note: The pages should be children of a 'Pages' parent.

Elements and Pages provide functions to hide or show them. Have a look at their documentation for details.

Switching between pages

Should you not want to implement a callback for your UI management for every possible transition and do not set callbacks to buttons directly, you can set up Triggers on a per-page basis. The UI::Trigger instances can be set for page objects in the editor, taking a button and a command. Upon showing of a page, the trigger will register a callback to the button, issuing the command.

This is not finished yet, as the trigger searches for a main menu state machine. This has to be made more versatile to use triggers in any situation. Proposal: re-route over a "UIManager" object.

Todo:

Triggers are not final.

Coping with Layouts

Layouts, together with anchors, are very useful in calculating the correct sizing and positioning for all objects automatically. But Layouts also prevent objects from moving, i.e. being animated with a shift, as they are in control of the element's position instead of the animator (coordinates are greyed out).

As a solution, we need to layout an invisible parent of the object-to-be-animated and shift the actual element relative to its parent. The parent inherits the size of its child and is managed by the layout.

So, to get both worlds, set the the content you want to animate as child of an empty RectTransform object. This container will get layed out by its respective parent having a layout component. The actual MenuElement in its shown state is set to be in relative position (0,0) and is thus the same as its container. This relative position can be modified by the Animator to move off-screen, while the container actually stays in place as set by the layout.

Have a look at the example scene for this. Here the 'Layout containers' for the elements are set, but not referenced in the 'Container' setting of the MenuElement. This is why the layout stays the same, even if elements are panned out and deactivated. If instead the container is set to the script, also the element would be added/removed from the layout upon activation/deactivation, changing the space available for all elements and resizing/shifting them automatically.

More info

Have a look at the corresponding How-To for using the system: How to use the Menu Page System