Enable missing properties on CCBFiles with custom nodes in SpriteBuilder

SpriteBuilder is a great tool for building cross platform apps for iOS and Android using Cocos2D. One very useful feature of SpriteBuilder is the capability to encapsulate a node in a CCBFile, which can be reused and nested in other CCBFiles. By default, SpriteBuilder allows you to create the following types of CCBFiles: Scene, Node, Layer, Sprite, or Particles.

But what if you want a CCBFile of type CCButton or CCScrollView? You could create a Node or a Layer (a layer is simply a CCNode which allows for specifying a content size), and simply set the "Custom class" to CCButton, however there's a major drawback to this approach.

The properties panel on the right allows you to customize properties for CCNode, but not CCButton. Setting the custom class is not enough to get SpriteBuilder to display the additional properties of CCButton.

However, there's a simple solution. The CCB file is just a Plist file (Property List), and can be easily modified with a text editor, so open up your CCB file in your favorite text editor and look for the "baseClass" property.

Change the baseClass value (the part inside the <string></string> tags right below the <key>baseClass</key>) to CCButton, or any other node type supported by SpriteBuilder such as CCScrollView, CCLabelTTF, CCSlider, etc.

Save the file, go back to SpriteBuilder, and reopen the CCB file.

Viola! Now all the properties are exposed in SpriteBuilder and can be edited. You can even assign a custom class in SpriteBuilder for even more flexibility, as long as your custom class inherits from the base class.

Happy coding!