WonderPlanet DEVELOPER BLOG

ワンダープラネットの開発者ブログです。モバイルゲーム開発情報を発信。

CocosBuilder 基本的な機能の備忘

クラッシュフィーバーのUIやエフェクトを担当している伊藤です。


クラッシュフィーバーではUIやエフェクトを作る際、CocosBuilderを使用していますが、ウェブでtipsを探すとあまり初心者向けの記事が見当たりません…

 

そこで、CocosBuilderの基本的な機能の備忘を簡単に紹介したいと思います。

 

 

CocosBuilderのインターフェイス 

f:id:itoc:20170829192428p:plain

 

①プロジェクト内のリソースファイル一覧

.ccbファイルをダブルクリックで開くと作業ウィンドウで編集できます。

 

②作業ウィンドウ

UIの組み立てを行う作業ウィンドウです。

 

③パラメータ設定ウィンドウ

パラメータを変更することができます。
▼基本的なCCNode設定画面

f:id:itoc:20170829173258p:plain

(フォントやFXなどの設定をする場合は、別途パラメータが設定が表示されます。)

表示のチェックボックス:画像の表示非表示ができます。
位置:画像の基点を基準指定できます。

サイズ:画像オブジェクトやNodeのサイズを指定できます。

アンカーポイント:基点の位置を指定します。

 X. 0 Y. 0がデフォルト位置。

 X. 0.5 Y. 0.5にすると画像の中心が基点となります。

スケール:拡大縮小です。中心の鍵マークをオンにすると比率が固定になります。

回転:回転できます。

スキュー:画像を斜めに変形できます。

 

④タイムライン

f:id:itoc:20170829174312p:plain

追加したSpriteやNodeが表示されます。

下のレイヤーに行くほど、ビューで手前に表示されます。

タイムラインでは、追加したSpriteやNodeレイヤーにアニメーションをつけることが出来ます。

アニメーションさせたいレイヤーを選択し、タイムラインのバー(青い縦線)を、
動かしたい位置まで移動させて以下のキーを押すと、位置やスケールにアニメーションキーが追加されます。

表示:V

位置:P

スケール:S

回転:R

透明度:O

カラー:C

(もしくは、追加したいタイミングにalt+左クリックで直接キーを追加できます。)

 

⑤作業ウィンドウのズーム

f:id:itoc:20170829173139p:plain

⑭の作業ウィンドウをズームできます。「=」を押すとリセットされます。

 

⑥パネルの表示切り替え

f:id:itoc:20170829173143p:plain

⑬、⑮、⑱のウィンドウの表示、非表示を切り替えられます。

 

 ⑦Nodeの追加

f:id:itoc:20170829173146p:plain

CCNodeを追加します。

CCNodeはフォトショップでいうグループレイヤーのような使い方をしており、

例えば、アニメーションを付ける場合、複数あるレイヤーを纏めて動かしたいときなどに使います。
 
⑧レイヤーの追加

f:id:itoc:20170829173150p:plain

平面レイヤーをつくれます。

左からCCLayer、CCLayerColor、CCLayerGradient、CCScrollView。

f:id:itoc:20170829173154p:plain

 

⑨スプライトの追加

f:id:itoc:20170829173157p:plain

 画像オブジェクトの追加が出来ます。

ボタン左がCCSprite、右がCCScale9Spriteです。 

◆CCSprite:通常の画像追加。

CCSpritを追加すると、パラメータウィンドウに設定画面が表示されますので、Sprite frameで追加したい画像を選択します。
また、opacityで透明度の指定、Colorで色を付けられます。
(CocosBuilderでは画像の白い部分に色が付きます。)
▼CCSpriteの設定画面

f:id:itoc:20170829173201p:plain

Blendでは加算や減算などの合成モードを選択できます。

詳しく知りたい方は下記記事を参照下さい。

developer.wonderpla.net

 

◆CCScale9Sprite:9Sprite画像の追加。

画像を任意のサイズに引き伸ばすことができます。

CCScale9Spriteを追加すると、パラメータウィンドウに設定画面が表示されますので、Preferred sizeとInsetsの値を設定します。

▼CCScale9Spriteの設定画面

f:id:itoc:20170829173205p:plain

・Preferred size:オブジェクトの幅、高さを指定します。

・insets:オブジェクトの一部分を固定し、伸ばしたくない部分を指定します。

▼参考イメージ
設定画面では、左から150px、右から150pxを固定しており、

f:id:itoc:20170829181002p:plain
全体の横幅が540pxに伸ばす設定しています。 

f:id:itoc:20170829180926p:plain

 

⑩ラベルの追加

f:id:itoc:20170829173216p:plain
テキストの追加ができます。 
ボタン左がCCLabelTTF、右がCCLabelBMFontです。

◆CCLabelTTF:システムフォントを追加できます。

▼CCLabelTTFの設定画面

f:id:itoc:20170829173221p:plain

font file:フォントファイルの指定

Font size:文字サイズを指定
opacity:不透明度

color:文字の色
Dimensions:文字が入る領域を指定します

blemd:合成モード選択

LabelText:表示するテキストを入れます


 

◆CCScale9Sprite:ビットマップフォントを追加できます。
▼CCScale9Spriteの設定画面

f:id:itoc:20170829173225p:plain

手書き文字のビットマップフォントの文字サイズはスケールで指定します。


 ビットマップフォントの作り方は下記事にて紹介されておりますので、ご興味があればご確認下さい。

developer.wonderpla.net

⑪メニューの追加

f:id:itoc:20170829173230p:plain


⑫コントロ−ラーの追加

f:id:itoc:20170829173233p:plain

※⑪⑫に関しては殆ど使用していないため割愛致します。

 

⑬FXの追加

エフェクトを追加できます。

パラメータ設定内の Particle Textureで画像オブジェクトを指定すればエフェクトが簡単に作れます。

f:id:itoc:20170829182532p:plain

f:id:itoc:20170829182829g:plain


クラフィではParticleDesignerというツールを使用してParticleエフェクトを作成しているので殆ど使っていない機能ですが、簡単なFXであればかなりお手軽に作れます。

 

 ⑭CCBの追加

f:id:itoc:20170829173244p:plain

別のccbファイルを配置することが事ができます。

 

⑮プラグインの追加

f:id:itoc:20170829173251p:plain

CCAddSprite:スプライトの追加ができます。

CCCameraNode:カメラを配置できます

CCParticleSystemQuadForCCB:plistの追加ができます

UISpriteButton:ボタンを作ることができます。

ここはほぼ使用していないため、詳しい説明は省きますが、

カメラ位置(視点)の指定や、他のツールを使用して作成したパーティクル(.plist)を追加できます。

 

⑯表示ウィンドタブ

現在開いているccbファイルの一覧です。

 

⑰タイムラインの再生・停止

f:id:itoc:20170829183251p:plain

タイムラインのアニメーションを再生できます。

⑱タイムラインの拡大縮小

f:id:itoc:20170829183350p:plain

タイムラインの拡大縮小し、見やすい長さに調整します。


⑲タイムラインの長さの設定
下部分をクリックするとタイムラインの長さを変更出来ます。
f:id:itoc:20170829183548p:plain

クリックすると長さ指定を行うウィンドウが表示されるので、アニメーションの尺に合わせてタイムラインの長さを変更できます。

f:id:itoc:20170829183459p:plain

  

ーーーーー
この記事が、Cocosを使用する方や、これから使用する方の助けになれば幸いです。