いちおくまんえん

最近はcocos2d-xでゲームアプリ「いちおくまんえん」の制作がメインです。 あとアニメも少々・・

CocosBuilderとは

CocosBuilderはcocos2dやcocos2d-xの画面やアニメーションなどをGUIで作成できるツールです。

 

使い方はFlashBuilderに似てい。。るそうです。

FlashBuilder使ったことない私には分かりません(゚A゚;)

 

なのでFlashBuilderバリバリ使ってたよーって方ならサクサク作れちゃうのかな。たぶん。

 

cocos2d用に作られたものらしいのでcocos2dで用いられている専門用語が大量に出てきます。

英語が分かる人ならある程度想像つくのかも知れませんが、私は中学生くらいまではある程度ついていけてたような気がする!程度の能力なので単語の意味を理解してません('A`)

 

でも使えてます。困ったらグーグル先生。英語ページは即翻訳!これでなんとかなります。

頑張りましょう(´・ω・`)

 

画面的にはこんな感じです。バージョンは現時点での最新の3.0-alpha5です。

f:id:ichiokumanyen:20130813234127p:plain

 

ポチポチと部品を配置していって下の方に表示されているバーのタイムラインで

キーフレームを設定してその時の状態を指定してあげるというような使い方になります。

 

状態にはVisible(表示・非表示)、Position(位置)、Scale(大きさ倍率)、Rotation(回転角度)、Skew(傾斜変形)、SpriteFrame(画像変更)、Opacity(不透明度)、Color(色)などがあります。

 

上の方に表示されている基本的な部品を一部紹介します。

 

・CCNode ・・・ ノード

 結び目、こぶ、中心点、植物の節。。

 基礎にあたるものと考えるといいかも。画面に表示するものは大体これが元になってます。

 座標だけ決めたいとかそういう時に使うといいのかも知れない。

・CCLayer ・・・ レイヤー

 画像処理してる人ならわかると思いますが透明のシートのようなもの。

 レイヤーをいっぱい重ねていくのかと思いきや1枚しか使わないことが多いです。

 そしてその一枚を一番の親としてプログラムと連結させて使います。

・CCSprite ・・・ スプライト

 画像 レイヤーにのっけていきます。

 スプライトと言ったら下の画像しか思い浮かばなかったんですがググってみると

 妖精とかが普通の意味で「背景と独立に動く図形」という意味もあるそう。←まさにコレ

f:id:ichiokumanyen:20130813225342p:plain

 

・CCLabelTTF ・・・ TTFラベル

 .ttfファイル(フォント)を使って文字を描画するもの。

 特にデザインの凝った文字画像を使わない普通の文章表示ならコレを使う。

・CCLabelBMFont ・・・ ビットマップフォントラベル

 1文字ずつ画像にしたものを使用して文字を描画するもの。

 デザインの凝った文字を表示させたいとか英数記号しか必要ない時はこっち。

 CCLabelTTFは処理が遅いのでこっちを使えるならこっちを使うことをお勧めします。

・CCMenu ・・・ メニュー

 ボタンの管理に使います。これを親として子にボタンを配置していきます。

・CCMenuItemImage ・・・ メニューの画像の項目 いわゆるボタン

 プログラムと連結する部分になるので結構重要な部品になります。

 Selectorという要素が設定出来るのでそこに指定した文字のプログラムが

 押した時に走るようになります。

 

だいたいこれだけ使えれば何とかなると思います。

 

3日しか触ってない私が言うんだから間違いない∑(゚Д゚)

 

画面で確認しながら色々出来るので作るだけなら特にむずかしいことはない。。。はず。。。

問題は作った後のファイルをどうプログラムに連結するかってとこだと思います。

 

ほぼ触ってた3日のほとんどは、プログラムとの連結に費やしてたので(´・ω・`)

 

というわけでCocosBuilderの簡単な説明はこれで終わりです。

 

もっと詳しい使い方が知りたいという方はこちらのチュートリアルが参考になると思います。

http://www.raywenderlich.com/ja/32449/cocosbuilder%E5%85%A5%E9%96%80

 

cocos2d向けの記事なのでプログラム部分がObjective-Cになってますが、CocosBuilderの使い方は大体理解できるかなと思います。

 

CocosBuilder とcocos2d-xとの連結方法についてはまた次の記事にて紹介したいと思います。