How to use the Menu Page System

How to use the Menu Page System

This is a How-To for the concept of Menu page System, with components explained on its architecture site here: The Menu Page System.

Please note this concept is responsible for hiding or showing different parts of a UI. It can also be used to implement actual menu pages. The switching of pages could be done by utilizing a state machine approach. In BomberUnits, the main menu has its own state machine, with each state corresponding to a menu page as introduced here.

There is a test scene to look at with this How-To: Assets/Test/MenuAnimationWithLayoutsTest.unity

How to set up menu pages.

1. Have some object, such as a UIManager to organize the logics between page transitions. It decides which menu components should switch when, using the provided callbacks. This logic is however not part of this How-To. Just be aware that you will need to register function callbacks to your buttons which can trigger page switches directly or activate some other mechanism, such as a full menu state machine.
   See:

   Todo:

   Link to Menu state machine docu needed.

2. Do the usual Layout with the Unity System:
   • Versions of Layout Group components are added to the parents of groups of objects to be layed out.
   • Think about using Layout Element components for these elements to be able to set minimum dimensions. This way eventual parent Layout groups of this element do not change too much when its content is moved out and disabled by our animations.
   • Example in the test scene: MainHLayout
3. Elements you want to animate and which are part of a Layout group need an empty and invisible container object, which is only a Rect Transform. This way the element can be panned out while still being a part of the containing layout.
   • Example in the test scene: Element3LayoutContainer
4. The elements itself, such as Element3, need the Animator and MenuElement components.
5. Give the Animator component the MenuElementTransition controller asset.
6. Assign the container object to the MenuElement's Container field if any. This is needed so the container can be disabled when the element is disabled. This will change the organization of the enclosing Layout Group, so don't give a reference to the container if you don't want it to be disabled when the element is hidden (see in the example: container setting is empty).
7. Assign groups of elements to animate together to the "Page Elements" fields of empty objects with the MenuPage component. These can represent menu pages but don't necessarily have to. You should group your logical pages under its own parent, e.g. Pages.

   Hint: The page inspector provides a toggle to show or hide the page GameObject while editing, which

   should be handy.
8. Handle your menu transitions:
   • Some convenience functions are available for pages and elements directly, so you can assign these to your button's callbacks directly, without doing an extra UI-manager-detour.
   • Or add a number of triggers to the corresponding setting for your pages in the editor. This will take a button and a command each, which will be set to the button automatically once the page is shown.

     Todo:

     Trigger concept not final, as too specific for main menu state machine!