What you need to know

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

What is Free Level Selector?

Free Layout (or Free Level Selector) is a layout that allows you to build level selection screen where you can freely distribute your level icons and drag them on the whole area. It can be used to create maps with level icons on it just like in games such as Candy Crush or Jelly Splash.

You can see the demo here.

Initialization

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

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

Setup

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

As you can see it’s split into two sections.

Fundaments section

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

  • Configuration – This is the Level Configuration that should be used to build this map. 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.
  • Background Texture – A texture used for background.

Mechanics section

Here you can setup how free script will behave.

  • Look At Last Level – When level select screen is visited just after playing any Level, it will center to the icon of that level. 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 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 an icon to pop-up when pressed the first time, and loads a level when pressed the second time. Pressing elsewhere on the screen cancels 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.

Example Usage

Now let’s allow the icon to put prefab icon2Prefab from Mad Level Manager/Examples/Prefabs to Icon Template field. Your Scene and Game views should be now displaying something like this:

Each time when you add new levels to your current level configurations, new icons will appear on the free layout. They will cascade near to 0,0 point of your scene so you can easily find and move them to desired place.

Next let’s add the background. Locate the background texture in Mad Level Manager/Examples/Textures/Example2/free_bg.png and move it to Background Texture field:

Now your Game and Scene views should both look like this:

You can see that the background on the scene is little too small. To test out the dragging ability let’s make it a lot bigger than it is now. To do so just select the background in the Scene view and resize it just as you would resize any other Unity object. For me the optimal x, y scale is 1.6, 2.2.

Positioning

Let’s now place our icons to the right places. You can select icons just by clicking on them, but there’s high risk that you would select sprites that lie underneath. Easier and safer way to select the icon is to use the Hierarchy view:

Move your icons anywhere you like. My configuration looks like this:

Drag Area

There’s one more thing to setup before your level select screen start working. Have you noticed the red rectangle in the screenshots above? This is the drag area and it needs to be setup too. Please select the Draggable object from the Hierarchy:

And look at the Inspector view. You should see the configuration of drag area and the start position:

Now try to change the Free Drag Area and see how your scene view is updated. Try to find out which values will closely match bounds of your background. Hint: setup x and y first to set the rectangle in the lower-left corner.

Testing it

Now you can hit the Play button and if you did everything right you should now be able to drag through the map, select levels and complete them. You can reset your progress any time using the Profile Tool.