In the last tutorial we used SpaceManager framework to design the levels of our game. This resulted in excessive code and maintenance nightmares. In this article we will demonstrate how to use LevelHelper and SpriteHelper which will ease the process of level creation for physics enabled games.

Downloading LevelHelper and SpriteHelper:

LevelHelper and SpriteHelper are both available on Mac App Store (Not iPhone App Store) for a very low price. The download link is given below:

LevelHelper
SpriteHelper

Both LevelHeper and SpriteHelper are developed by Vladu Bogdan who also provides excellent support for these tools.

Creating the SpriteHelper File:

The first step is to create the SpriteHelper file. The SpriteHelper is used to package all the images together into a single file. The packaged images are then fed to LevelHelper where the users can use those images to construct a level. Open SpriteHelper application and then click on "Import Image" under File menu. Add all the images you would like to add and then click the Pack Sprites button. The screenshot below shows the images packed together:


You might want to use a better cloud image!

Now save the file using the Command + S. This will prompt you for the name of the file. We are calling it "ns_sprites". You do not need to add an extensions. When you save the file you will notice that the SpriteHelper has generated three files:

ns_sprites.pshs: The SpriteHelper project file
ns_sprites.png: A png which contains all the packaged images. This png should be used by pre-iPhone 4 devices.
ns_sprites-hd.png: A png specially for iPhone 4 due to retina display.

At this stage we are ready to import our images to LevelHelper.

Creating the Level Using LevelHelper:

Open LevelHelper and set the Game Screen Size to 480X320 for landscape mode. The screenshot below shows how to set the Game Screen Size:



Next, click on the File Menu and select Import SpriteHelper Scene. Browse and select the SpriteHelper scene you created in the last section. As soon as you add the SpriteHelper scene the LevelHelper will display images on the right hand side pane as shown below:



Now you can easily drag and drop the images into the LevelHelper designer pane and create your level. The same level designed without LevelHelper would have taken a lot of effort and lines of code. The screenshot below shows a level which is created using LevelHelper:  

 

The above level took us literally less than 30 seconds to construct. You can even test your level from right inside the LevelHelper. Click the "Test Level" button on the top right. Make sure you have the latest "Level Tester" installed. You can download the latest "Level Tester" here. After downloading the Level Tester you need to configure LevelHelper to use Level Tester. Click on LevelHelper option and then "Settings". Browse to the Level Tester tool and thats it. The screenshot below shows the level running inside the Level Tester tool:



Level Tester is used to only test the appearance of the level and the physical behavior of the items. You cannot use Level Tester to test your game logic. Next task is to save the LevelHelper file and generate the code which will be used by our application. Press Command + S to save the file and name it "level_001". To generate the the code click on "File" option and select "Generate Code". From the option select "Cocos2d with SpaceManager" and save the files on your hard disk. LevelHelper will create two files namely LevelHelperLoader.h and LevelHelperLoader.m. The implementation file is responsible for interacting with the level and extracting different sprites out of the level. Import LevelHelperLoader.h, LevelHelperLoader.m, ns_sprites.png and level_001.plhs files to your Space Manager project.





Running Level from your SpaceManager Project:

Now, you are ready to load the level from within your Space Manager project. Import the LevelHelperLoader.h file and add a field of type LevelHelperLoader as shown in the implementation below:



In the implementation file of your game implement the following code to load the level.



The screenshot below shows level in action:



One thing to notice is that the squirrel in the game is not holding an acorn. We purposely did not add the acorn from the LevelHelper tool because LevelHelper packages all the sprites together as a CCSpriteBatchNode which increases performances but at the same time it does not allow the sprites to have children of their own. We plan to add smoke effects to our acorn which is only possible if the acorn is not part of the CCSpriteBatchNode.

The implementation below adds the acorn to the game.



The screenshot is shown below:



Squirrels Shooting Acorns:

What does a squirrel do when it gets hold of an acorn? It throws it at cats and dogs. The acorn which the squirrel is holding is currently static mass which means the forces of gravity does not apply on it. In order to throw the acorn in a projectile motion we need to change the static mass to dynamic.



The applyImpulse method makes applies the shotgun type action on the acorn which makes it shoot in a projectile motion. The screenshot below shows the effect:



Currently, we do not have any collision detection between the acorn and the vicious cats and dogs. Initialize the collision detection inside the init method as shown in the implementation below:



The reason we did not add the collision type for the acorn inside the init method is because we are going to remove the shape in the ccTouchesBegin event. Inside the ccTouchesBegin even we apply the collision type to the acorn as shown below:



When the acorn and the cat collides the "handleCollisionBetweenAcornAndCat" is triggered. The implementation for handleCollisionBetweenAcornAndCat is shown below:



When the collision between acorn and the cat happens we remove the cat from the layer and replaces it with a "poof" image. The screenshot below shows the effect:



LevelHelper and Paths:

LevelHelper also allow us to create paths which can be following by a sprite. The great thing about this is that everything is done using LevelHelper and there is no code necessary. Open LevelHelper and select Bezier Shape tool as shown in the screenshot below:



Make sure to indicate that the Bezier Shape is a path by checking the Is Path option as shown below:



Click on "New" button and draw a path on the LevelHelper designer. When you are done click on "Finish" and a new path will be added to your level. Now add the "cloud" sprite to the level. Select the cloud sprite and then click on the path and select BezierShape path as shown below:






Now, save the level as level_001 and import the level_001.plhs file to your project. For the cloud to perform continuous animation you will need to implement the tick function as shown below:



The tick method is triggered from inside the init method as a selector to the schedule as shown below:



The screenshot below shows the cloud hovering:



Smoked Barbecue Acorn:

Since, the acorn is not part of the CCSpriteBatchNode we can add CCSprite child objects to it. In our case we have added CCParticleSmoke to the acorn as shown in the code below:



The screenshot is shown below:



Conclusion:

In this article we learned how to develop Nutty Squirrel game using LevelHelper and SpriteHelper. LevelHelper eases the development of levels for an iPhone game and encourages the developer to focus on level design instead of manually creating levels through code.

[Download Sample]