How To Make A Side-Scrolling Beat Em Up Game Like Scott Pilgrim with Cocos2D – Part 1

This is a post by iOS Tutorial Team Member Allen Tan, an iOS developer and co-founder at White Widget. You can also find him on Google+ and Twitter.

In this two-part tutorial series, you’ll learn how to make a cool Beat Em Up Game for the iPhone, using Cocos2D 2.0!

Lately, Beat Em Up games aren’t as common as they were in the glory days. In case you’re in the unfortunate position of not having played a Beat Em Up game before, check out some of these great games:

• Classic Titles: Double Dragon, Teenage Mutant Ninja Turtles, and Golden Axe. Ah, the nostalgia! :]
• Modern Titles: Castle Crashers and the game in the title of this tutorial – Scott Pilgrim vs. the World!

If you’ve seen these games, you will notice that they all involve single protagonists beating up a horde of weak foes in every way possible. Hence the term: Beat Em Up.

In this tutorial, you will learn how to make a simple Beat Em Up game for the iPhone, with stylish pixel art. In the process, you’ll learn how to keep track of animation states, hit boxes, add a d-pad, add simple enemy AI, and much more!

Note that this is an intermediate tutorial, so if you are new to Cocos2D, you should go through (at the least) the How to Make a Simple iPhone Game With Cocos2D and How to Make a Tile-Based Game with Cocos2D tutorial tutorials before proceeding.

Keep on reading to get your fists bloody and start kicking some butt!

Getting Started: ARC-Enabled Cocos2D

With iOS 5, Apple introduced ARC, or Automatic Reference Counting, which means that as a developer, you no longer have to handle the task of retaining and releasing memory. Instead, the compiler will do this for you automatically. This makes iOS development much easier, and makes your code much more stable by eliminating a lot of memory leaks that can potentially crop up.

Unfortunately, the standard Cocos2D templates do not create projects that are ARC-compliant. So to get started, you will modify a standard Cocos2D project to enable ARC.

Grab the latest version of Cocos2D 2.x (this tutorial uses stable 2.0), unarchive the package, and install the templates by entering the following command in the Terminal, from the folder that contains the extracted files:

./install-templates.sh -f -u

Start up Xcode and create a new project with the iOS\Cocos2D v2.x\Cocos2D iOS template and name it PompaDroid. Leave the Company Identifier as is, but remember to set the Device Family to iPhone. Tap Next, and then save the project to a folder of your choice.

Note: Are you wondering why you named this project PompaDroid? Well, the main character in this game has a funky haircut in the Pompadour hairstyle, and he’s about to beat up on a bunch of droids. My apologies to all the Android devs out there! ;]

The next step is to enable ARC for Cocos2D. Converting the Cocos2D framework itself to ARC will take a lot of time and unnecessary code modifications. So instead, you’re going to inform the compiler which components aren’t using ARC (in this case, the Cocos2D library code) and which components are using ARC (all of your application source).

Select your project root in the Project Navigator (the left sidebar), and select PompaDroid from the Targets section. Select the Build Phases tab and expand the Compile Sources group. Now you need to tell the compiler which Objective-C classes aren’t using ARC by entering -fno-objc-arc in the Compiler Flags column.

To do this, select all files ending with .m by holding the Shift or Command Keys while you click on the files, and then tap the Enter key. Type -fno-objc-arc in the window that pops up, then press Enter again. Do this until all .m files, excluding IntroLayer.m, have this flag.

It should look like this:

Next, go to the Build Settings tab, search for the row that says Objective-C Automatic Reference Counting (you can simply search for ARC in the search box to find the row), and set it to YES. Then, in the Summary tab, make sure that your Deployment Target is at least 5.0 or higher.

Build and run your code to see if everything is OK so far. You should get the default template’s Hello World screen:

Congratulations! Your Cocos2D project is now ARC-enabled. :]

The Game Scene

All right, now that you have the basic Hello World Template working, it’s time to create your Game Scene. The Game Scene will be responsible not only for showing you what’s happening within the game, but also for handling the game mechanics. Ray often calls this the Action Layer.

Hit Command+N and create a new file with the iOS\Cocos2D v2.x\CCNode Class template. Make it a subclass of CCScene and name it GameScene.

Next, create two more files the same as above, but this time make them subclasses of CCLayer. Name the first one GameLayer, and the second one HudLayer.

Finally, delete HelloWorldLayer.m and HelloWorldLayer.h, as you won’t be needing them anymore. Be sure to select Move to Trash when deleting the files, so that they don’t linger in your project folder.

Your project files should now look similar to this:

If you try to build your project now, you will encounter an error where IntroLayer.m cannot find HelloWorldLayer.h. To fix this, make the following changes to IntroLayer.m:

//remove this line
#import "HelloWorldLayer.h"

//add this line at the top
#import "GameScene.h"

//replace the method makeTransition:(ccTime)dt with this
-(void)makeTransition:(ccTime)dt {
	[[CCDirector sharedDirector] replaceScene:[CCTransitionFade transitionWithDuration:1.0 scene:[GameScene node] withColor:ccWHITE]];
}

The AppDelegate starts the game with IntroLayer.m, and it’s the Intro Layer’s responsibility to switch to the next scene after showing the splash image. Since HelloWorldLayer is now no longer part of the team, all you did above is put GameScene in its place.

Now switch over to GameScene.h and do the following:

//add to top of the file
#import "GameLayer.h"
#import "HudLayer.h"

//add before @end (but after @interface)
@property(nonatomic,weak)GameLayer *gameLayer;
@property(nonatomic,weak)HudLayer *hudLayer;

Quickly switch to GameScene.m and add the following inside the @implementation:

-(id)init {
    if ((self = [super init])) {
        _gameLayer = [GameLayer node];
        [self addChild:_gameLayer z:0];
        _hudLayer = [HudLayer node];
        [self addChild:_hudLayer z:1];
    }
    return self;
}

This is pretty basic stuff. You made one instance of GameLayer and one instance of HudLayer, and you added them to GameScene. Additionally, their z-value (a.k.a. z-order) dictates the order in which these two layers will be drawn on the scene, with the lower-valued z being drawn first.

As you may have guessed from the names, GameLayer will contain game elements such as the characters and the stage, while HudLayer will contain display elements such as the Directional Pad. HudLayer has to be drawn last because it has to be on top of everything.

Note: To those experienced with Objective-C, the above code might look pretty weird and may raise alarm. For one thing, you never declared instance variables, and you never synthesized properties. What gives?

In the latest version of Xcode, properties are now automatically synthesized, and they also get their own instance variable, complete with accompanying underscore before the name, all without you having to write a line of code. For more information, check out Chapter 2 in iOS 6 by Tutorials, “Modern Objective-C Syntax”.

Pretty neat, right? Just remember that if you do things this way, the instance variable stays private to that class, such that even its subclasses won’t be able to access it directly.

There are still a few exceptions to this rule, but unless you specifically get warning or error messages from Xcode, you can assume that the above method is allowed (as long as you’re using the latest Xcode).

Time to check out the results. Build and run your code, and you will see…

Nothing. What did you expect? :P