3. Working with ccb files
This section assumes that you already have set up your CocosBuilder project. It will give you some tips on how to work with ccb-files.
When creating a new ccb-file you define which type of the root node it uses. The root node cannot be deleted and you cannot change the type of the root node (unless you create a new file). There are some properties, e.g. the position, of the root node that you cannot change. These properties will be grayed out in the property inspector.
To add new nodes to a file, click the icons in the toolbar. Each icon corresponds to a cocos2d class. CocosBuilder has support for many of cocos2d's standard node types and a few extensions (such as CCControlButton and CCScale9Sprite). By default the node is added as a sibling to the selected node or, if no node is selected, as a child to the root node. By holding down the shift key when adding an object it will instead be added as a child to the selected node.
You can also add images by dragging them from the left hand project view onto the canvas area or the timeline. Images that you drag will automatically become CCSprite nodes. If you drop an image onto a CCMenu it will become a CCMenuItemImage.
When a node in your ccb-file is selected its properties will show up in the right hand inspector. Change the properties by editing the values. To get a description of each property, please refer to the cocos2d api documentation.
The properties that affect positioning of the node can be edited visually in the canvas area. To move a node simply select it and drag it around, to change scaling drag the handles and to rotate drag the handles while holding down the option key. To edit the anchor point of a node, grab it and drag it.
Unlike other properties the zOrder is not set in the properties inspector in CocosBuilder. Instead the zOrder is determined by the ordering of objects in the hierarchy view. All objects you add to a ccb-file will show up in the hierarchy view, to simply drag and drop them to the position that you require.
When loaded into your app the zOrder of your nodes will be numbered from 0 to (N-1), where N is the number of children the parent node has. If you need to insert objects programmatically at a specific zOrder, the recommended way is to use a CCNode as a placeholder which you either replace or add your children to directly in your code.
Guides and sticky notes have no effect when loaded into your app, but can make it easier to align objects or save comments to other developers or designers in the ccb-file.
To create a new guide, drag it out from the bottom or left side ruler. To move it, hold down the command key while dragging it. You can remove a guide by dragging it out of the visible area.
Sticky notes are created by choosing Add Sticky Note from the View menu. Edit or remove the sticky note by double clicking it.