Unity - How to Make a Level Select Like Super Mario World

One of the most iconic things about Super Mario World, the greatest platformer ever made, was the world map and I want to do something similar in our next game. So, I created a small project in Unity to help me get started and in this post I'm going to take you through it and explain how it all works. It's easier than you might think.

Project Contents

This project contains 4 sprites and 4 script files.

The sprites:

• Map: This is just a flat background image.
• Character: This is a basic image to represent the character moving around the map.
• Level Pin: A pin to indicate where the levels are.
• Waypoint Pin: This is for showing visually where a junction or corner is.

The scripts:

• CameraFollow.cs: This is a simple script to get the camera to follow a target.
• Character.cs: This controls the character movement between waypoints.
• MapManager.cs: This is a basic controller for the scene.
• Pin.cs: This contains code to chain multiple pins together and tell the Character which available directions there are when sitting at a waypoint.

I've also included the Affinity Designer file for the sprites in case you want to make edits. Don't know what Affinity is? It's a great vector art tool, you should check it out.

Basic Setup

The way this system works is by moving a character sprite between waypoints. Each waypoint can link to up to 4 other waypoints and can be a junction, a level, or a corner. Depending on how each waypoint is set up the character will either stop or keep moving (you want the character to stop at junctions and levels but not on corners). When the character stops on a waypoint that contains text for a scene that is passed back to the Map Manager.

Individual Components

I built each component as bare bones as possible, this will make it easier for you to extend it into what you need.

Map Manager

The Map Manager is very basic, it initialises the Character then sits waiting for player directional input. When an input event happens it passes the desired direction from it to the Character.

As an example of a callback it will also update the GUI level text when the Character stops on a level.

Camera Follow

On each frame this script sets the camera's x and y coordinates to a target's x and y.

Pin

These are the individual items in the waypoint system. Each one has 4 variables for attaching them to other pins. When another pin is attached it will draw a line Gizmo for visualisation.

When the Character reaches a pin is set to be automatic it will try get the first attached Pin that is not the one it came from. For this reason automatic Pins should only have 2 attached Pins. They're meant for corners.

Thats pretty much it, all a Pin needs to do is provide links to its neighbours for the Character.

Character

The Character is what moves around the map. A target Pin can be set and it will move towards that Pin at a constant rate. When it reaches the target Pin it will check to see if it's an automatic one.

If the Pin is automatic it will ask it for the next Pin to keep moving. In this way, if you want to, you can set up a chain of automatic pins to move the character along a complex route.

If the Character reaches a non automatic Pin it will stop and wait for user input before resuming. It will also let the Map Manager know that its waiting.

Roundup

And that's it in a nuts hell. Something like this is really easy to extend.

For example if you wanted to transition into a smaller map like when Mario enters a cave in SMW you could create a Pin type for that and tell the Map Manager to fade to a new map either in a different scene or in another location in the same scene.

If you want to lock some levels you could add a locked boolean to the pin script and check for that when trying to move towards it.

I'll be using a version of this on our next game and I hope its a help to you too. If you have any thoughts or questions you can hit me up on Twitter.

Lastly, here's an example of us using this in our next game: