Touch Code Magazine

Probably you have (as I many times did) wondered wouldn’t it have been great if there was a tool pretty much like Interface Builder but for building scenes in cocos2d. I’ve even seen several people in the cocos2d forums start such projects, but I’ve never seen any of them come to life (it might be my mistake, if so – do post some links in the comments)

Last month however I ran into the web site of LevelHelper (ok … I clicked on a banner) and things look like there is now a way to design your levels in cocos2d!

I’m gonna quickly run trough the basics for you, because oh boy this program can do so much.

Creating a sprite sheet

Well actually LevelHelper can’t create spritesheets for you. You need to buy its companion app – SpriteHelper (there’s also SpriteHelperFree, but you definitely want the paid version – both SpriteHelper and LevelHelper come with a total price tag of 25 euros /33 US dollars, so get the full package).

In SpriteHelper you can import your images into a spritesheet, have the app do your sprites layout, and (!) you can also define the physics shapes of your sprites. That’s really handy, because you’ve got all the frames of your game objects in one place and you can start drawing paths around them to define the physics shapes. I like it very much:

And the interface at the bottom of the screen shows you additional info + gives you the chance to edit the sprite properties AND define the sprite shapes:

Designing a game level

So, once you prepare your spritesheet in SpriteHelper you can open LevelHelper and start designing your level. From the File menu there’s an option called: Import SpriteHelper scene … and you can import your spritesheet and use the sprites inside to design your level.

Let’s have a look at what you can do!

First of course you can set what is the target of the level design – iPad portrait or iPhone landscape and so on, so the UI can show the respective screen size for your level design.

Then you can lay some sprites down the screen. It’s as easy as grabbing them from the list in the right and dropping them whenever you want to appear on the iPhone screen. Now that’s a game changer for designing cocos2d games, eh?

You can then drag around the sprites and change their properties. Right click on the sprite gives you quick access to some basic options like:

And the whole bottom part of the application is taken by the panel with options you can set further. As I said I have to just quickly run trough the program, but I want to highlight few of these options that really made me wow.

Physics for free: just set your desired values in the boxes and you get physics on your body (or actually your sprite’s body)

Next thing is defining run paths – you can define a bezier path by drawing on the screen with your mouse and set a particular sprite to move on this run path. Very easy to do …

You can change many properties of the physics world, the sprites, you can create frame animations and set sprites to run those animations – pretty much all things you need pre- designed in a level.

Now … when you have some setup you hit the “Test scene” button and a separate app starts and runs your scene in cocos2d. (The test scene app you download for free additionally) Anyhow after the initial setup the feature to test scenes right away is just the deal closer.

Now after so many praises comes time for a little bit of critique. Test scene by default runs scaled down to an incredibly small size. This is so that people who are testing scrollers and others such that have content bigger than the screen would see all their content, but … it is very annoying to scale up every time you test the scene. On top you can do that only by scrolling the mouse wheel. So, my wish is in the next update to see 1) scale persistence (eg. once I set the scale the app to remember my setting) 2) keyboard shortcuts for changing the scale

Anyhow, now that you have a running level scene, you’d like to code your game logic don’t you?

Switching to XCode and testing your game in simulator

Very easy – choose from the menu File the option called: Generate code

As you can see there’s plenty of export options. I’ll do just the cocos2D + Box2d.

Export the spritesheets and the level file – in my case it’s LevelHScene.plhs and SpriteLayout-hd.png, SpriteLayout.png

When you create your box2d cocos2d project just add the following code in your scene:

//in your scene header file
#import "LevelHelperLoader.h"
 
//inside your header file as a class ivar
LevelHelperLoader* lh;
 
//inside your init method
//just after defining your world
lh = [[LevelHelperLoader alloc] initWithContentOfFile:@"LevelHScene"];
if([lh hasWorldBoundaries])
{
   [lh createWorldBoundaries:world];
}
[lh addObjectsToWorld:world cocos2dLayer:self];

This is the code to load your level (don’t forget to import the spritesheets and the level file inside your XCode project of course) All done!

If you set some path movement to your sprites you need to add 1 line of code also to your tick method:

[lh update:dt];

There you go – you hit Run and see all your sprites set on the scene, moving, animating, falling down, interacting with each other.

One more thing left to talk about – how can you interact with all those objects you imported trough the LevelHelper file?

Luckily in LevelHelper you can assign to sprites in the scene a unique ID, so if you click your sprite and look for the box field saying “Unique Name” you can set whatever name to the sprite and then access this object from Objective-C like that (I gave my sprite the name “chicken”)

        CCSprite* myChicken = [lh spriteWithUniqueName:@"chicken"];
        myChicken.opacity = 90;

My opinion

LevelHelper / SpriteHelper tandem is a game changer – I personally have been waiting for a scene design tool for some time and I’m quite impressed with the ease of use of the application and the results you can get pretty fast.

My personal wishes for the next update:

• more keyboard shortcuts – power users do need shortcuts!
• copy/paste on selected objects
• possibility to import images directly in LevelHelper – I want to import my level background, but don’t want it inside a spritesheet
• easier way to scale the scene in design mode and testing mode + scale persistence
• wouldn’t it be cool to have the possibility to set the class of the objects you lay down on the screen inside LevelHelper? I’d love to have the option to set sprites I import as Menu items – this way LevelHelper can become a great tool for designing cut-scenes and menus!
• it would be great if the application feels a bit more Mac

So if I got you interested in the software the link to the web site is : http://www.levelhelper.org

All in all I say this is a great tool to give a try to for a minimal price, and if you are designing 100s of levels for an Angry Birds type of game you’ll save tons of time.

  ·