Sprite Kit Tutorial: How to Make a Platform Game Like Super Mario Brothers – Part 1

Learn how to make a game like Super Mario!

Learn how to make a game like Super Mario!

Update 2/1/14: I have updated this tutorial for Sprite Kit to celebrate the launch of the second edition of the Platformer Game Starter Kit, which is fully updated for Sprite Kit. Enjoy!

For many of us, Super Mario Brothers was the first game that made us drop our jaws in gaming excitement.

Although video games started with Atari in many ways, the intuitive and visceral controls of Super Mario Brothers and fun level design were such a dramatic improvement that it felt like something completely new – and we couldn’t put it down for hours!

In this tutorial, you’re going to recapture the magic and create your own platform jumper game – but since the hero will be a Koala instead of a plumber, we’ll call it “Super Koalio Brothers!” ;]

Also to keep things simple instead of adding enemies we’ll just have a simple challenge — avoid the spiky floors. That way you’ll be able to focus on learning how to implement the heart of a platformer game: the physics engine.

This tutorial assumes you are already familiar with the basics of Sprite Kit development. If you are new to Sprite Kit, check out some of the other Sprite Kit tutorials on this site first.

Do you have the necessary koala-fications? Then let’s get hopping!

Getting Started

To get started, go ahead and download the starter project for this tutorial.

Once you’ve downloaded the file, unzip it, open the project in Xcode, and build and run. You should see the following appear on the screen:

That’s right – just an empty screen for now! :] You’ll be filling this out in the rest of the tutorial.

This starter project is pretty bare bones – the main point of giving it to you is so that you’d have all of the images/sounds you’ll need for the project pre-integrated. Take a look through the project and you’ll see it contains the following:

• Game Art. Inside Resources\TMX Files\tileSet.png and Resources\sprites.atlas, you’ll find the Koalio free game art pack from Ray’s wife Vicki.
• Level Map. Inside Resources\TMX Files\level1.tmx, you’ll find a level map I put together using Tiled, based on the SMB level 1-1 you know and love. You’ll learn more about this later in this tutorial.
• Gratuitous Music and Sound Effects. Inside Resources\Audio, you’ll find some fun background music and sound effects. This is a raywenderlich.com tutorial after all! :]
• An SKSceneLayer subclass. The scene that appears on startup is called GameLevelScene, which is empty as a drum right now; it’s waiting for you to come! In this tutorial, you’ll be adding some code to create a physics engine and gameplay into this class.
• An SKSpriteNode subclass. Finally, you’ll see an empty class called Player, which will contain the Koala’s logic. It’s waiting for you to make it fly away! (Sorry for all the jokes Norah!)

Once you’ve had a chance to look through the project and fully understand what’s there, keep reading and we’ll discuss some philosophy about physics engines!

The Tao of Physics Engines

A platform game revolves around its physics engine, and in this tutorial you’ll be creating your own physics engine from scratch.

There are two main reasons why you’ll be rolling your own, instead of using Sprite Kit’s built-in physics engine:

1. Fine tuning. To get the right feel for a platformer game, you need to be able to fine-tune the feel and response of the engine. In general, platformers created using pre-existing physics engines don’t feel like the Mario/Sonic/Contra games that you’re used to.
2. Simplicity. Sprite Kit’s built-in physics engine has a lot of capabilities your game engine doesn’t really need, so your homebrew engine will end up being less resource-intensive overall.

A physics engine does two important things:

Forces acting on Koalio.

Forces acting on Koalio.

1. Simulate movement. The first job of a physics engine is to simulate resistive forces like gravity, and applied forces like running, jumping, and friction.
2. Detect collisions. The second job of a physics engine is to finds and resolve collisions between the player and other objects in the level.

For example, in your Koalio game you’ll apply an upward force to the Koala to make him jump. Over time, the force of gravity will act against that initial jumping force, which will give you that nice classic parabolic jump pattern.

And as for collision detection, you’ll use that to keep the Koala from falling through the ground, and to detect when our poor Koala collides with some spikes (ouch!)

Let’s see how this will work in practice.

Physics Engineering

In the physics engine you’ll create, the Koala will have its own movement-describing variables: current velocity (speed), acceleration, and position, among others. Using these variables, every movement you apply to the Koala will follow this algorithm:

1. Is the jump or move action selected?
2. If so, apply a jump or movement force to the Koala.
3. Also apply gravity to the Koala.
4. Compute the resulting velocity for the Koala.
5. Apply this resulting velocity to the Koala and update his position.
6. Check for collision between the Koala and other objects.
7. If there’s a collision, resolve it either by moving the Koala back enough so that the collision is no longer occurring, or by causing damage to the poor Koala.

You’ll run these steps for every frame. In the game world, gravity is constantly pushing the Koala down and through the ground, but the collision resolution step will put him back on top of the ground in each frame. You can also use this feature to determine if the Koala is still touching the ground, and if not, disallow a jump action if the Koala is already in mid-jump or has just walked off a ledge.

Steps 1-5 will occur solely within the Koala’s object. All the necessary information is contained there, and it makes sense to let the Koala update its own variables.

However, when you reach the sixth step — collision detection — you need to take all of the level features into consideration, such as walls, floors, enemies, and other hazards. The collision detection step will be performed in each frame by the GameLevelScene – remember, that’s the SKScene subclass that will do a lot of the physics engine work.

If you allowed the Koala’s class to update his own position, he would move himself into a collision with a wall or ground block, and the GameLevelScene would then move him back out, repeatedly — which would make him look like he was vibrating. (Had a little too much coffee, Koalio?)

So, you’re not going to allow the Koala to update his own state. Instead, the Koala will have a new variable, desiredPosition, that he will update. The GameLevelScene will check if this desiredPosition is valid by detecting and resolving any collisions, and then the GameLevelScene will update the Koala’s position.

Got it? Let’s try it out and see what it looks like in code!