What you need to know?

Here’s the list of things that you need to know before reading further:

What is Grid Level Selector?

Grid level selector is a level selector that arranges level icons in grids.

You can find a demo of Grid Level Selector here.

Initialization

In order to create grid layout, initialize new scene as described in this tutorial. Please be sure to select Grid as Screen Layout.

If you have your scene already initialized with a Mad Level Root, please select Tools → Mad Level Manager → Create Grid Layout from the main menu.

Right after the initialization, the grid should be filled with example sprites.

Setup

New object called Grid Layout should appear (Normally it can be found in the Hierarchy: Mad Level Manager / Camera 2D / Panel / Grid Layout). Make sure that this new object is selected and take a look at its inspector:

As you can see it’s quite big. For the purpose of organization it’s split to several sections. Let’s start from the top.

The top & rebuilding

At the top you can see the Setup Method. Grid layout can be configured using two setup methods:

Setup method: Generate

All icons will be generated from the template or prefab. This is the simplest and the most common setup method. Even if you want to use Manual setup method in some point of time, you should start with this one to generate start positions for your icons.

Pros:
  • Very easy to maintain.
Cons:
  • You cannot (shouldn’t) modify icon instances in any way.

Setup method: Manual

New icons are generated from the template or prefab, but the existing ones are not modified by the script. This allows you to customize individual icon instances as you wish.

Please do not modify Page objects. These are managed by grid script, and are transformed based on device resolution that Mad Level Manager runs on.
Pros:
  • You’re allowed to modify icon instances.
Cons:
  • More difficult to maintain.

Fundaments section

Here you can set most basic properties of the grid layout.

  • Configuration – This is the Level Configuration that should be used to build this grid. All levels of type Level will be represented as an icon in the given order.
  • Icon Template – Prefab or scene object of icon that should be instanced for each level.
    • Scale – Scale of icon instances.
    • Offset – The offset for each icon instance.
  • Prev/Next Page Sprite – Prefab or scene object of slide graphics (touching them will switch to the next or previous page).
    • Scale – Scale of these graphics.
    • Offset – The offset of these graphics.
You can create new MadSprite object from the main menu: Tools → Mad Level Manager → Create UI → Sprite.

Dimensions section

  • Pixels Width/Height – Grid page size in pixels.
  • Grid Rows/Columns – Number of rows and columns.
  • Page Offset Auto – When enabled, page distance will be calculated from the screen resolution (x = Screen.width).
  • Pixels Offset – Manual distance between pages.
Used unit are pixels, but how it is interpreted depends of how you setup your Mad Level Root objects. You can read more about it here.

Mechanics section

Here you can setup how grid script will behave.

  • Look At Last Level – When level select screen is visited just after playing any Level, it will go to the page where this level is held. You can also do it from the Layout API.
  • Handle Mobile ‘Back’ – Sets the behavior for back button on mobiles (e.g. Android). The options are:
    • Load Previous Level – Will load previous level from the Level Configuration from the current one. For instance if you will set Main Menu level right before Level Select level, pressing the back button will load the Main Menu.
    • Load Specified Level – Will load level of specified name (a new level name entry will appear).
  • Two Step Activation – Allows icons to be activated in 2-step manner. Usable if you want icon to pop-up when pressed the first time, and load a level when pressed the second time. Pressing elsewhere on the screen will cancel the activation process.
    • Disabled – Pressing or clicking on the icon first time will load the level immediately.
    • Only On Mobiles – On mobiles pressing the icon first time will invoke the focus event, second time will load the level.
    • Always – 2-step activation enabled on all devices.
More information about events and how to animate icons can be found here.

On Activate and On Deactivate subsections

These one are used only when 2-step activation is enabled. On Activate actions are invoked when icon is activated, On Deactivate actions are invoked when user touches the second time something else than the activated icon.

  • Play Audio – Plays audio clip.
  • Send Message – Send message using GameObject.SendMessage method. The receiver prototype looks like this:
void OnIconActivate(MadLevelIcon icon) {
    // action code here
}

Debug section

This is the last section with only one Hide Managed option. Normally Grid Layout script will hide from you objects, that you shouldn’t touch. If you disable this option you can take a look how generated scene is built.