前回は、flipsnapについてご紹介しました。
今回は、Cocos Studioをご紹介します。
Cocos Studioとは、cocos2d-xのためのGUI開発ツールです。
画像素材のドラックアンドドロップによるSpriteを配置や、タイムラインでのコマアニメーション作成等、非常にスピーディーな開発を行うことが出来ます。
本記事で、Cocos Studioを紹介するにあたり使用した環境は以下の通りです。
Mac ：10.9.5
Cocos Studio：v2.3.0.1
cocos2d-x ：v3.6
今回から数回にわけて、Cocos Studioの使用方法についてご紹介致します。
1回目である今回は、Cocos StudioのインストールとSprite部品の配置です。
Cocos Studioは、cocos2d-x公式サイトからダウンロードすることが出来ます。
ダウンロードしたファイルを実行し、ガイドの通り進めてインストールを完了します。
何も変更することなくインストールを完了すると、アプリケーション直下にCocosディレクトリが新規に作成されます。
Cocos.appを起動すると以下の画面が表示するので、New Projectを選択します。
「Cocos Project」を選択しNextボタンで次へ進みます。
Project Pathでプロジェクトディレクトリを配置するパスを設定します。
今回はC++の開発を行うため、Project Languageでは、真ん中のC++にチェックをつけて下さい。
※C++がグレーアウトになっている場合は、一度詳細画面を閉じ、左メニューからCocos Storeを開いて「Cocos Framework V3.6」をインストールする必要が有ります
上記全てを設定した後、Finishedボタンを選択すると、Cocos Studioが起動します。
画面上部にあるツールバーの左側のプルダウンから画面サイズを選択することが出来ます。
今回はデフォルト設定の960*640を使用するので、変更はしていません。
画面左部の下側に表示しているのが、現在編集中のプロジェクトのディレクトリツリーです。
MainScene.csdというファイルがあると思いますが、このcsdという拡張子は、Cocos Studio特有の物であり、Scene/Layer/Nodeは全てcsd形式のファイルで管理されます。
csdの中身は単純なxml形式のファイルで、自身に追加されている他Nodeや自身のアンカーポイント・座標といったデータを持ち、csd1つ1つが個々のオブジェクトといったイメージとなります。
画面真ん中には、csdオブジェクトへのSpriteの配置やレイアウトの調整を行うための作業スペースが有ります。
右側には選択中の子Nodeプロパティ設定用の窓もあり、「アンカーポイント・座標・コンテンツサイズ・スケール率」といった、cocos2d-xのコーディング時に使用頻度の高いものが全て用意されているため
大まかな部品配置を作業スペースで行い、詳細な値の調整をプロパティ窓で設定するとレイアウト作成を非常にスムーズに行うことが出来ます。
画面下部にはタイムラインエディターも用意されています。
本記事の説明では使用しませんが、コマアニメーションの作成や単純なアクション設定を、非常に簡単に作成することが出来ます。
全体的な画面の説明が終わったところで、実際にSprite部品を配置してみましょう。
適当に用意した画像をCocos Studioプロジェクトのディレクトリツリーにドラックアンドドロップし、素材をプロジェクトに追加します。
ディレクトリツリー内にドロップした画像が表示されていれば、素材追加は終了です。
あとは、追加した素材をMainScene.csdに配置します。
今度は、ディレクトリツリーから追加した素材を作業スペースへドラックアンドドロップします。
MainScene.csdオブジェクトにsample.pngのSpriteを配置することが出来ました。
コーディングで同じことをする場合、createしてsetPositionで座標を設定して最後にaddChildで追加しなければなりませんが、Cocos Studioでは2回のドラックアンドドロップで出来てしまいます。
これだけでレイアウト作成の時間を大幅に短縮することが出来るので、興味が有る方は是非活用してみて下さい。
以上で、第1回目のCocos Studio紹介は終了です。
次回は、Cocos Studiodで作成したオブジェクトをcocos2d-xプロジェクトで使用する方法をご紹介します。
弊社では全国各地の請負い（ご自宅）で作業協力頂ける、フリーランスエンジニアの方を常時探しております。
ご興味ある方は、お気軽にお問い合わせ下さい。