クラッシュフィーバーのUIやエフェクトを担当している伊藤です。
クラッシュフィーバーではUIやエフェクトを作る際、CocosBuilderを使用していますが、ウェブでtipsを探すとあまり初心者向けの記事が見当たりません…
そこで、CocosBuilderの基本的な機能の備忘を簡単に紹介したいと思います。
CocosBuilderのインターフェイス
①プロジェクト内のリソースファイル一覧
.ccbファイルをダブルクリックで開くと作業ウィンドウで編集できます。
②作業ウィンドウ
UIの組み立てを行う作業ウィンドウです。
③パラメータ設定ウィンドウ
パラメータを変更することができます。
▼基本的なCCNode設定画面
（フォントやFXなどの設定をする場合は、別途パラメータが設定が表示されます。）
表示のチェックボックス：画像の表示非表示ができます。
位置：画像の基点を基準指定できます。
サイズ：画像オブジェクトやNodeのサイズを指定できます。
アンカーポイント：基点の位置を指定します。
X. 0 Y. 0がデフォルト位置。
X. 0.5 Y. 0.5にすると画像の中心が基点となります。
スケール：拡大縮小です。中心の鍵マークをオンにすると比率が固定になります。
回転：回転できます。
スキュー：画像を斜めに変形できます。
④タイムライン
追加したSpriteやNodeが表示されます。
下のレイヤーに行くほど、ビューで手前に表示されます。
タイムラインでは、追加したSpriteやNodeレイヤーにアニメーションをつけることが出来ます。
アニメーションさせたいレイヤーを選択し、タイムラインのバー(青い縦線)を、
動かしたい位置まで移動させて以下のキーを押すと、位置やスケールにアニメーションキーが追加されます。
表示：V
位置：P
スケール：S
回転：R
透明度：O
カラー：C
（もしくは、追加したいタイミングにalt＋左クリックで直接キーを追加できます。）
⑤作業ウィンドウのズーム
⑭の作業ウィンドウをズームできます。「＝」を押すとリセットされます。
⑥パネルの表示切り替え
⑬、⑮、⑱のウィンドウの表示、非表示を切り替えられます。
⑦Nodeの追加
CCNodeを追加します。
CCNodeはフォトショップでいうグループレイヤーのような使い方をしており、
例えば、アニメーションを付ける場合、複数あるレイヤーを纏めて動かしたいときなどに使います。
⑧レイヤーの追加
平面レイヤーをつくれます。
左からCCLayer、CCLayerColor、CCLayerGradient、CCScrollView。
⑨スプライトの追加
画像オブジェクトの追加が出来ます。
ボタン左がCCSprite、右がCCScale9Spriteです。
◆CCSprite：通常の画像追加。
CCSpritを追加すると、パラメータウィンドウに設定画面が表示されますので、Sprite frameで追加したい画像を選択します。
また、opacityで透明度の指定、Colorで色を付けられます。
（CocosBuilderでは画像の白い部分に色が付きます。）
▼CCSpriteの設定画面
Blendでは加算や減算などの合成モードを選択できます。
詳しく知りたい方は下記記事を参照下さい。