LoginSignup
4
4

More than 5 years have passed since last update.

CocosStudioを使おう

Posted at

CocosStudioの説明をしていきます。

CocosStudioとは

CocosStudioはcocosの公式が提供している無料の画面構成ツールです。
UI配置やアニメーションの作成など色々なことを簡単に行うことができます。
ここで説明するCocosStudioはVer2.06となります。

主な機能

  • スプライトシートの作成
  • アニメーション作成
  • レイアウト構成
  • シーンの作成

スプライトシートの作成

スプライトシートは、テクスチャーのAtlas化を行う機能です。
私はTexturePackerを購入済みなので特に使うことはありませんが
Atlas化ツールをもっていない方は、こちらの機能を使ってAtlas化を行うことができます。

アニメーション作成

  • 文字が横から入ってくる
  • ボタンがフェードインしてくる
  • パーティクルエフェクトを作成する
  • パラパラアニメーションを作成する

などの個別のアニメーションを作るのに使用します。

レイアウト構成

各UIの配置に使用します。
作成したスプライトシートを使うこともできます。
上記で作成したアニメーションも配置できますが
あくまで配置のみで動作をさせることはできません。

シーンの作成

シーンの構成を行います。
上記で作成したレイアウトやアニメーションを配置し
エミュレートして確認することができます。

使用可能なコンポーネント

  • Button(ボタン入力)
  • CheckBox(チェックボックス)
  • スプライト(画像表示)
  • イメージ(スプライトにタッチイベントとScale9Gridを追加したもの)
  • BitmapLabel(ビットマップフォントを使用した文字列表示)
  • プログレスバー(ローディングなどに使う)
  • スライドバー(オプションのサウンド音量設定などに使う)
  • Label(TTFファイルなどを使用した文字列表示)
  • TextField(ユーザーの文字列入力)
  • Particle(パーティクルエフェクト)
  • TileMap(ドラクエのマップのようなタイルを敷き詰めてマップを構成)
  • Audio(サウンドを鳴らす)
  • Node

使用可能なコンテナ

  • Panel
  • ScrollView
  • Listview
  • PageView

Scale9Gridについて

実は今回この言葉を初めて見たので調べたのですが画像を9分割して、拡大縮小を行う機能ですね。
メッセージウインドウやポップアップなど
可変長文字列を表示するための枠を作るのによく使われると思います。
言葉自体は知りませんでしたが、ゲームでこの機能を作ったことはあります。

最後に

CocosStudioは一つのプロジェクト内に複数のシーン、レイアウト
アニメーション、スプライトシートを登録することができます。
今後は各コンポーネントやコンテナの使い方と実際のゲームでの使用方法を記事にしていく予定です。
それではまた次回!!!

4
4
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4