Introduction to CocosBuilder
This is a blog post by iOS Tutorial Team member Ali Hafizji, an iOS and Android developer working at Tavisca Solutions. CocosBuilder is a free Interface Builder-like tool for Cocos2D that allows you to quickly and easily layout the sprites, layers, and scenes for your game. CocosBuilder is ideal for quickly laying out menus and […] By Ali Hafizji.
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Contents
Introduction to CocosBuilder
45 mins
It’s Not Over Until It’s Game Over
Did you think you were done? Not quite. :]
If you play the game until the cat loses all its lives, you'll notice that the game crashes. That's because there's a Game Over scene that CCBReader is supposed to load that it can't find. That might be because you didn't create it yet. :p
This scene will have two buttons:
- Main Menu: This will return the user to the Main Menu.
- Replay: This will allow the user to play the game again.
Switch to CocosBuilder and create a new file named GameOver. Add the above two buttons as CCControlButtons. Make sure to set their tags to 1 and 2. Also set their selector as buttonPressed: and the Target to Document root.
Finally, set the Custom class for the root layer to GameOverLayer, save your changes, and publish the file.
Switch back to Xcode and add the CCBI file to the project. Then, create a new Cocos2D class under the Layers group and name it GameOverLayer, making sure it extends the CCLayer class.
Add the following import statements to GameOverLayer.m:
#import "CCControlButton.h"
#import "CCBReader.h"
Also add these define statements:
#define MAIN_MENU_BUTTON_TAG 1
#define PLAY_AGAIN_BUTTON_TAG 2
Now add the button tap handler:
-(void)buttonPressed:(id)sender {
CCControlButton *button = (CCControlButton*) sender;
switch (button.tag) {
case MAIN_MENU_BUTTON_TAG:
[[CCDirector sharedDirector] replaceScene:[CCTransitionFlipY transitionWithDuration:1.0 scene:[CCBReader sceneWithNodeGraphFromFile:@"MainMenuScene.ccbi"]]];
break;
case PLAY_AGAIN_BUTTON_TAG:
[[CCDirector sharedDirector] replaceScene:[CCTransitionFadeUp transitionWithDuration:1.0 scene:[CCBReader sceneWithNodeGraphFromFile:@"GameScene.ccbi"]]];
break;
}
}
Build and run the game. At this point, you should have a fully functional game.
Now wasn't that so much easier than guesswork and hard-coding for each of the scenes? :]
Troubleshooting CocosBuilder
CocosBuilder is a great tool for setting up scenes quickly and efficiently. However, it isn't very good at communicating when something is wrong with a scene. So, in order to save you some frustration (and of course, the pulling out of your hair in handfuls), I've put together a checklist to go through, in case the scene doesn't work properly or you run in to unexpected crashes.
- Check that you saved your CocosBuilder changes before publishing. This is important. CocosBuilder does not appear to warn you if you have unsaved changes when you hit Publish. So make it a habit to always save your changes before you publish a scene.
- If you drag and drop your CCBI files to your Xcode project, always ensure that your target is selected. Normally, once you check the proper target via the "Add to targets" setting, it seems to stick. But not for CCBI files. So, always verify that the CCBI files are added to the target, especially if you have a crash when a scene is supposed to be loaded.
- Check the console output for helpful messages. While CocosBuilder might not tell you what went wrong, the console output might show a message that helps you figure out what went wrong. If it says "File not found: GameOver.ccbi", then that means that the GameOver.ccbi file has either not been added to the project, is not part of the current build target, or there's a mistake in the file name.
- Verify that you’ve spelled things correctly. When you set up things like variables, custom classes, and selectors for events, what you specify in the CocosBuilder file has to match what's in your CCLayer subclass.
If you watch out for the above as you work, you’ll save yourself headaches and, when a problem does arise, you’ll hopefully be able to pounce on it like a frisky cat on a mouse.
Where To Go From Here?
Here is all of the source code for the final project.
You should now be ready to create games on your own using CocosBuilder. I hope this tutorial saves you a lot of time in your game development life!
Please visit the forums to share your thoughts and questions about this tutorial and CocosBuilder!
This is a blog post by iOS Tutorial Team member Ali Hafizji, an iOS and Android developer working at Tavisca Solutions.