How to make a platform-based game like the Super Mary Brothers-Part One (Xcode, physics engine, TMXTILEDMAP related applications)

This article can also be found here in English

Learn how to make a game like Super mario!

This is a member of the iOS tutorial group Jacob Gundersen released the tutorial, he is an independent game developer, runs the indie ambitions blog. Go and see his latest app factor samurai!

For many of us, Super Marie is often the first game to bring us into the world of passionate games.

Although the video game began with Atari (Atari), it was later extended to many platforms. But with the advent of Super Marie, its intuitive operation, a rich and interesting level design and so on are very exciting progress, so that people feel it is new, we even a few hours to continue to play it.

In this tutorial, we will regain the magic of Super Marie and make a platform jumping game of your own, as we use a koala instead of a plumber, so we call it "the Super Koala Brother."

In addition, in order to maintain simplicity, we will not join the enemy, so do not go back and forth on the ground, clearance will be easier, but also can focus on the core of the platform game-the physical engine.

This tutorial assumes that you are already familiar with the cocos2d development process. If you are new to cocos2d, please follow the other tutorials on the website first.

Are you sure you are qualified? (The original is koala-fications, sounds like qualifications, the purpose of joking) so let's start.
Preparation work Getting Started

Before you begin, please download the initial project for this tutorial.

After downloading, unzip it, open it in Xcode, compile and run it. You will see the following on the screen:

Starter Project for Super Mario tutorial

That's it, a boring empty screen. :] You will gradually fill it in later teaching.

The initial project is just a framework that integrates the desired picture/sound resources into the project. In a glance, it contains the following: The game Image contains a series of free game pictures provided by Ray's wife Vicki. level map I made a level map and you definitely know it because it's the first off of the Super Marie imitation. free music and sound effects How to say this is a raywenderlich.com tutorial ah, right:] a Cclayer sub-class . A class called Gamelevellayer that will handle the work of most physics engines for you. It is still empty, waiting for you to fill it. a subclass of Ccsprite, a class called player, that will contain the koala's logic. At the moment it waits for you to let it fly up. (Sorry to have made so many metaphors.) ）

Once you've browsed through the project and have a clear idea of what's inside, you can read on and we'll discuss some of the philosophy about the physics engine. the nature of the physics engine the Tao of Physics Engines

A platform game room based on its physics engine, in this tutorial you will create your own physics engine from scratch.

We do not use existing physics engines, such as box2d or chipmunk, and there are two main reasons to decide that you need to implement it yourself. better adaptability in order to get a better sense of the platform game, you need to adjust the engine's senses and reactions reasonably. In general, platform games made with existing physics engines will not have the kind of feeling that Mario (Mario)/sonic (Sonic Hedgehog)/contra/russian attack these games. simplicity of Box2D and Chipmunk have a lot of features that your game doesn't need, so your own engine won't contain the resources needed for these features.

A physical engine mainly does two things:

Forces acting on Koalio. The primary task of simulating a motion physics engine is to simulate forces such as gravity and run-jump forces, and the second task of friction resistance collision Detection Physics engine is to find and resolve collisions between all the objects in the level.

For example, in your koala game you will exert an upward force on it to jump. As time changes, gravity will drop it, thus creating a classic parabolic jump.

As for collision detection, you will use it to keep your koala on the ground and detect collisions with obstacles on the ground.

Let's see how this works in practice. Physical engineering Physics Engineering

In the next physics engine to be created, the variables used to describe the koala motion are: current rate (velocity), acceleration, and position. Using these variables, the motion of each step of the koala will follow the following algorithm: whether jumping or moving is selected. If so, apply a jumping or moving force to the koala. And always exert gravity on the koala. Calculates the ultimate rate of koalas. This rate is eventually applied to the koala and changes its position. Detects collisions between koalas and other objects. If there is a collision, detect what type of collision, if it is a common obstacle, then move back to koala, if it is a fatal obstacle, let koala injured.

Each frame performs the above steps. In this game, the effect of gravity is to continue to push down the koala, all the way through the ground, but the ground collision treatment will bounce it back to the ground. You can also use this method to detect if the koala is in contact with the ground, and if not, then the koala cannot jump because it is jumping or just coming down from the protruding platform.

Step 1-5 will completely target the Koala object. All the necessary information is included here, and the koala itself is allowed to update its own variables.

However, when you reach the sixth step, which is collision detection, you need to consider everything in the levels, such as walls, ground, enemies and other dangerous objects. Collision detection Each frame is executed in Gamelevellayer, remembering that this class will take on a lot of physics engine work.

If you allow the Koala class to update its own coordinates, then when it moves to a collision wall or ground, Gamelevellayer will pull him back so that it will fall into circulation and the koala will appear to tremble back and forth. (Koala, do you drink a little more coffee?) ）

So, you will not let koala update its coordinates, instead, koala will save a new variable, desiredposition, and koala to update it in real time. Gamelevellayer will determine whether desiredposition is justified by collision detection, and Gamelevellayer will then be responsible for updating the koala's coordinates.

Do you understand. Let's try it and see what the code should look like. load Tmxtiledmap Loading the Tmxtiledmap

I'll assume you're already familiar with how to use tile map. If you are unfamiliar, please follow this tutorial to learn some basics.

Let's take a look at what's in the level. Launch your tiled map editor (download If you don't have one installed), open the level1.tmxin the project directory and you'll see the following:

In the sidebar, you'll see three different layers: hazards: This layer contains what koalas needs to avoid. Walls: This layer contains things that koalas cannot cross, mostly on the ground. background: This layer is just for decoration, such as clouds and mountains.

Encode it now. Open gamelevellayer.mand add the following before #import @implementation:

@interface Gamelevellayer () { cctmxtiledmap *map; } @end

This step adds a tile map private variable to the class.

Next you need to load this map in the init section. Add the following code to the init method:

Cclayercolor *bluesky = [[Cclayercolor alloc] INITWITHCOLOR:CCC4 (+, +, 255)]; [Self Addchild:bluesky]; map = [[Cctmxtiledmap alloc] initwithtmxfile:@ "LEVEL1.TMX"]; [Self addchild:map];

First, add a color background, here is a blue sky. The other two lines of code are to load the tile map (a Cctmxtiledmap object) into the layer.

Then, in gamelevellayer.m , import the Player.h:

#import "Player.h"

Also in gamelevellayer.m, add the following member variables to the @interface section:

Player * player;

Then add the koala to the level, adding the following code to init:

Player = [[Player alloc] initwithfile:@ "Koalio_stand.png"]; Player.position = CCP (+); [Map Addchild:player z:15];

The code loads the sprite object representing the koala, attaching a coordinate to it, and adding it to the map.

You may not understand why you should not add the Koala object directly to the layer. The reason for this is that the Koala object needs to interact with the objects in the TMX layers, so the Koala object should be a child of the map. The Koala object should be placed on top, so you set its z-order to 15. Also, when you scroll through your tile map, the koala will move along with the tile map.

OK, let's try it. Compile and run you will see the following:

It looks like a game, but the koala doesn't obey gravity, it's time to use the physics engine to get it back to the ground, and remember to say goodbye to it:] the impact of gravity on koalas the Gravity of Koalio ' s situation

To complete a physical simulation, you can write a complex set of logic that exerts different forces depending on the state of the koala, but it can quickly become complicated and not really physical. In the real world, gravity pulls objects in the direction of the Earth, so you need to apply a constant force of gravity to the koalas at every frame.

Other forces are not simply turned on and off. In the real world, a force is used to create an impulse on an object, and the impulse continues to move the object until there are other forces that change the current impulse.

For example, a vertical force such as jumping does not cause gravity to fail, but the resulting impulse overcomes gravity, gradually slows the ascent, and eventually brings the physics back to the ground. Similarly, a moving object is affected by friction and eventually stops.

This is how you create the physical engine model. You don't constantly detect whether koalas are on the ground and apply gravity from time to time, and gravity is always there. Play God Playing