How to Make a Game Like Jetpack Joyride using LevelHelper, SpriteHelper [Cocos2D 2.X edition] – Part 2

Working With Sensors: Adding Coins

Now for the coins. Remember, we want to make the coins sensors so that the mouse can pass straight through them without bouncing off, but still allow us to detect when there is a collision.

To create the coins sensors, open the SpriteHelper document containing the “objects” sheet and select the coin sprite. Go to Physics tab and click on the “Create New Circle Shape”. Make the body type “Static” then rename the shape and check “Is Sensor”.

Save the scene when you are done.

• Is Sensor: makes the body trigger a collision, but not a collision response.
• Is Circle: makes the shape of the body circle-based.
• Can Sleep: speeds up simulation of the physics.

Now switch to LevelHelper and add some coin sprites to the scene, placing them as you see fit. Use the Clone Tool to easily clone the coin with the direction offset you prefer.

Now my level looks like this:

Add the coins to the parallax, set the x ratio to 1 and y ratio to 0.

Save the level when ready. Compile and run your project, and now you have coins!

The project with all of the work up to this point can be downloaded from here.

Adding the Player

Now that we have a good-looking level with all the basic components, let’s create the player and accompanying animations.

Open the “Animations” SpriteHelper document. Then from Finder drag all the mouse sprites and the rocket flames from the “animations/player” folder.

Now switch to the Animation tab. You’ll create all the animations you need there, exactly as you did for the laser.

Using the same technique you learned earlier, create five animations with the properties listed below.

Hint: If you forgot how to create animations, for each animation, click the “Create New Animation” button, and double click to rename it. Then select the required frames for that particular animation, set the “Units Of Time” and make sure to check the “Loop” option for those that need to loop.

1) Animation Name: mouseRun
Start At Launch: YES
Loop Forever: YES
Speed: 0.400 (default)
Repetition: 1.000 (default)
Frames: rocketmouse_1_run, rocketmouse_2_run, rocketmouse_3_run, rocketmouse_4_run

2) Animation Name: flame
Start At Launch: YES
Loop Forever: YES
Speed: 0.400 (default)
Repetition: 1.000 (default)
Frames: rocket_flame1, rocket_flame2

3) Animation Name: mouseFly
Start At Launch: YES
Loop Forever: YES
Speed: 0.400 (default)
Repetition: 1.000 (default)
Frames: rocketmouse_5_fly

4) Animation Name: mouseDie
Start At Launch: YES
Loop Forever: NO
Speed: 0.400 (default)
Repetition: 1.000 (default)
Frames: rocketmouse_7_die, rocketmouse_8_die

5) Animation Name: mouseFall
Start At Launch: YES
Loop Forever: NO
Speed: 0.400 (default)
Repetition: 1.000 (default)
Frames: rocketmouse_6_fall

Once you’re done, hit Command-S to save the scene.

Switch back to LevelHelper, you should find all of your new animations in the Animation section.

Drag the “rocketmouse_1_run” sprite onto the main screen (the one with a red border). Place it at the left edge of the screen. Then drag the “rocket_flame1” sprite and place it right under the red tank on the back of the mouse.

If you look closely, you’ll see that the flame sprite is on top of the red tank. Let’s put it behind the tank, so that it looks more like the flame is coming out of the tank. Select the flame sprite and under General Properties, set Z Order to -1.

The result should look something like this:

With the mouse sprite selected, sets its animation to “mouseRun”.

With the flame sprite selected set the animation to “flame”

If you run the level at this point using Scene Tester you will see the mouse running and the flame animating. But we have no collisions yet.

Time to make a shape for the mouse and the flame sprites! Open Animations.pshs in SpriteHelper.

With the “rocketmouse_1_run” sprite selected, go to the Physics tab and do the following:

1. Click on “Create New Circle Shape”.
2. Then select “Dynamic” as the body type.
3. Check “Fix Rotation”.
4. Double click on the fixture name and set it to “mouseFixture”.
5. Click on edit shape, and drag around the circle shape until you are satisfied with how its placed over the mouse sprite. You can also change its size using the Radius property.

Note: You use a circle shape because this is the fastest shape to simulate. You could always use multiple circle shapes to create a complex shape and this will be faster then having a complex concave shape.

“Fixed Rotation” tells Box2d to not perform any rotation simulations on this shape. Because the shape is a circle you don’t want the mouse to rotate.

With the “rocket_flame1” sprite selected go to Physics tab and do the following:

1. Click on “Create New Circle Shape”.
2. Then select “Dynamic” as the body type.
3. Double click on the fixture name and set it to “flameFixture”.
4. Make sure that “Is Sensor” is checked for the fixture.
5. After that, click on edit shape, and drag around the circle shape until you are satisfied with how its placed over the flame sprite. You can also change its size using the Radius property.

Save the scene when you’re done!

Back in LevelHelper, when you run Scene Tester again, you will see the mouse falling out of the screen.

Note: If the mouse does not fall out of the scene when you run Scene Tester, one of the things to check is that the SH Sprite is set to rocketmouse_1_run for the mouse on LevelHelper. Since the physics shape is set to the rocketmouse_1_run sprite, you need that to be the initially displayed sprite. If the right sprite is selected, you should see the shape circle in LevelHelper whith “Show Polygon Shapes” on.

The mouse falls out of the screen because it is responding to gravity. Let’s make him stay on the screen. Click the Physic Boundaries button. From the Physic Boundaries section, click Create.

You’ve now created the boundary, but you must edit it so that it’s right under the mouse in the middle of the floor, where the mouse will walk. Inside the Physic Boundaries window, click Edit.

You will now see four red handles on the corners of the physic boundary. Drag any of the bottom handles to move the boundary so that it’s under the mouse’s feet.

You should have something similar to this:

When you’re satisfied with your physic boundary, press the Editing button to stop the editing process.

Run the level in Scene Tester again and you will see the mouse now doesn’t fall out of the scene and that it collides with the dogs and cats. But alas, there is yet another problem!

This time, the flame falls off the screen. That’s because it’s a sensor and so it does not collide with any object and isn’t attached to the mouse’s body. But we can connect the flame to the mouse by creating a weld joint.

Go to the Joints section in LevelHelper, select Weld Joint from the list and click the + button.

Now let’s select the sprites we want the joint to connect.

Select the joint from the list (if not already selected), then on the Body A property, click and hold the circle icon and drag over to the mouse sprite. When the text says “rocketmouse_run_1”, release. (This is exactly the same process as connecting an outlet inside Interface Builder in Xcode.)

Now repeat the process for Body B but select the flame as the body.

Now let’s put the joint anchor point where the bodies if the mouse and flame overlap.

Select the joint in the view and drag it into position as shown below:

If you now run the level in Scene Tester, you’ll see that the flame stays attached to the mouse. w00t!

Since you added a physic boundary, you need to tell the code to load that boundary in your game. Add the following line to init in HelloWorldLayer.mm right before the [self scheduleUpdate]; line:

    [loader createPhysicBoundaries:world];

You now have almost everything you need in order to start coding the game!