1. Code
  2. iOS SDK

Build a Monster Smashing Game with Cocos2D: Movement & Animations


This tutorial will teach you how to use the Cocos2D iOS framework in order to create simple yet advanced 2D games aimed at all iOS devices. It's designed for both novice and advanced users. Along the way, you'll learn about the Cocos2D core concepts, touch interaction, menus and transitions, actions, particles, and collisions. Read on!

This tutorial is the second entry in the three-part Monster Smashing series. Make sure you've completed the previous section before beginning.

Organization of the Series:

In today's tutorial we'll program the game board for Monster Smashing. This part focuses on several things, including the MonsterRun class, movements, animations, touches, and so on. We'll explain everything in the tutorial below.

1. Monsters

Monsters are the main objects of the game. Each monster has a few unique attributes like sprites, movement, velocity, and kill action. To represent an object we can use a specific class, so we've created a Monster class to represent a monster.

Usually, in Objective-C, we create a new NSObject subclass. In this case, we need to use the CCNode class, which is a class that includes the Foundation.h and the cocos2d.h headers. To create a new class in Xcode, choose File -> New -> New File.... In the left-hand table of the panel that appears, select Cocos2D from the iOS section. Select CCNode class from the upper panel and hit next. We'll name the class "Monster".

Figure 1: CCNode Class
Illustration of the Template Chooser (Xcode).

Now we need to declare the instance variables. In Monster.h, add five instance variables:

  • NSString *monsterSprite
  • NSString *splashSprite
  • int movement
  • float minVelocity
  • float maxVelocity
  • int killMethod

Now, as with every oriented object language, we need to implement the setters and getters. In objective-C, properties are a convenient alternative to writing out accessors for instance variables. It saves a lot of typing and it makes your class files easier to read. Add the above-mentioned properties on the .h file.

2. Initializing the Gameboard

Before continuing, you'll need to initialize several things. we can add a background to our game just like we did in the first section of the tutorial. We can use the same one in the menu scene. If you don't remember how to do that, you can use the following code on the -(id) init method (MonsterRun.m).

Now we need to initialize some "monsters". Before you start adding monsters, we need to create a NSMutableArray in order to store them. Once again, the images for the monster sprites are available in the resources folder.

We'd also like to thank Rodrigo Bellão for providing us with the images for the monsters.

In MonsterRun.m add two NSMutableArray objects: _monsters and _monstersOnScreen. Then, in the init method, we must initialize those arrays in order to use them. The following snippet can help us achieve that.

These arrays should be used to store all the monsters for a given level.

3. Adding Monsters to the Screen

Now that we have some monsters on memory, the next step is to put them on screen. To do that, we just need a few lines.

First we need to create a scheduler to invoke a method to a specific action which, in this case, is the monster location and movement. Right next to the monster's allocation, we can create the scheduler as the next line presents.

The selector indicates the method that will be called addMonster. At the moment, we don't have that method, but it will be created soon. The scheduler can also receive a time interval that represents the time when a specific sprite is updated.

The addMonster method is the one responsible for the monster movement. Since we've added three different monsters, we will also create three different movement patterns. The addMonster method is depicted below.

You may have noticed that there are comments within the code. The comments will guide us (both programmers and readers) to implement and learn each instruction. In this tutorial, the monsters are chosen randomly (however, in part three we'll show how use pList to put the monsters on the screen).

The first line of our code does exactly that. We get the total number of monsters on our array and then we randomly choose which one we will put onscreen next. After the monster is selected, we define some properties such as movement, velocity, range over the XX axis and its tag.

We defined three Blocks that define specific properties.

  • Block 1 determines where on screen we will span the monsters. Note that the monster will only spawn in a visible area of screen. For that, we get the range of the XX axis and then randomly place the monster.
  • Block 2 determines the speed of the monster. Note that each monster's type will have the minimum and maximum speed defined. The speed of the monster is the duration in seconds that the monster will pass through the screen. This duration will be between the minDuration and the maxDuration defined on the monster object on the init method
  • Block 3 creates the monster slightly off-screen along the right edge and along a random position along the XX axis, calculated above
  • Block 4 creates the actions for the straight movement. Two actions are created, the movement itself CCMoveTo * actionMove and one that is called when the sprite leaves the screen (CCCallBlockN * actionMoveDone). To create an action with straight movement, we use the CCMoveTo object, which receives the duration of the action and the final position. We also use the CCCallBlockN. This particular object will detect when a monster gets off the screen. Using the CCCallBlockN is advantageous because Cocos2D already has some mechanisms in place to detect if a particular resource leaves the screen.

We have defined two movements: straight and zig-zag. The straight one can be analyzed in Block 4, mentioned above. The zig-zag uses the bezier path to create the zig-zag effect and will be depicted below.

4. The Zig-Zag (Snake) Movement

To make the zig-zag movement we use the CCBezier. This class allow us to create an action that will move the target with a cubic bezier curve to a destination point.

The created curves will always move 100 pixels to the left or right, and at the same time the object will move 200 pixels below. The for loop will create the path of the monster. Since the screen, which is the normal iPad resolution, has 1024 pixels in the vertical position, we need to run the loop six times (200px * 6 = 1200px). The condition inside the for loop will determine if the iteration is odd or pair. When the number is odd, the monster move to the left. If the number is pair, the monster moves to the right.

Now each condition will calculate the controlPoint1 and controlPoint2, which are used to control and guide the curve on screen. The endPosition, as the name suggests, is the final position that each monster will end up in after each curve. We concatenate all these actions into an array and create a sequence from it. Just as we did with the straight movement, we'll run the action and add the monster to the array.

It's now time to build and run the project. Your game should look similar to the image below.

Figure 2: Monster on Screen
Illustration of the game with several monsters.

5. Touch Interaction

A game with monsters that cannot be killed is not a game, right?

It's time to add some interaction between the screen and the user. We'll follow the same philosophy we used above, code and explanation.

Cocos2D provides us with several mechanisms for touch interaction. For now, we'll only focus on one touch. For that, we need to add a specific method called ccTouchesBegan. The method receives an event and will act accordingly to that event. Obviously, the event is a touch event. The snippet is presented below.

The first line of this method is the allocation of an auxiliary array monstersToDelete that defines what monsters will be deleted at each action.

The next step is to know the touch interaction location. With that location, we'll loop all the sprites on the screen and test to see if the touch location is inside an invisible box that contains a monster. We'll use f (CGRectContainsPoint(monster.boundingBox, touchLocation)). If it is true, we'll add the monsters to the auxiliary array. Plus, we'll add two splash animations when a monster is killed. The first one is a simple splash, while the second is a particle. We'll discuss that in part three. To create the splash, we verify the monster type and then we add that monster to a splash pool. CCFadeOut will create a fade effect on the splash image, and the CCCallFuncN will call another method to remove the Monster sprite.

Now we just need one little thing. In the CCCallFuncN *remove, the call method removeSprite needs to be created and the objective is to remove that sprite. Add that method using the following code.

Finally, when the loop is over, the touch interaction is tested against all objects in the scene we have in another loop, for (CCSprite *monster in monstersToDelete). It will iterate over monstersToDelete and remove the object.

It's now time to build and run the project. We should see some monsters popping up onscreen. Now we can start killing them! You will notice that the red monsters don't have any splash when they die. This will be covered in the next part. The final image in this part is the following.

Figure 1: Monster on Screen with splash animation
Illustration of the game with several monsters with splash animation.

6. Conclusion

At this point you should be able to understand and perform the following tasks:

  • Add sprites to the screen.
  • Define sprite properties.
  • Define custom classes.
  • Initialize the game board.
  • Define custom movements and actions.
  • Know how to use touch interaction.

In the next tutorial we'll learn about sound and game mechanics!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.