Cocos Studio 2によるアニメーションの作成 その１：Cocos2d-x v3.7（JavaScript）

　今回は『Cocos Studio 2』でアニメーションを作成する方法です。

　『Cocos』にはノード（シーン、レイヤー、スプライト等）に、移動・回転・拡大縮小・変形・色や透明度を変化などの効果を加える事が出来る『Actionクラス』が用意されています。これらの効果を組み合わせることで、様々なアニメーションを作成することが出来ます。『Actionクラス』のコードの書き方については『アクションの設定：Cocos2d-x v3.7（JavaScript） - モーリーのメモ』で取り扱っていますので、こちらもご参照下さい。

　他にもまだこのブログでは取り扱ってはいませんが、『Cocos』には複数の画像をパラパラ漫画のように切り替えてアニメーションを作成する『Animationクラス』も用意されています。

　各クラスの中身を知ることで、どういったことが出来るのか把握したり、柔軟な実装方法を得ることが出来るのですが、せっかく『Cocos Studio 2』というビジュアルツールがあるので、『Cocos Studio 2』でアニメーションを作成する方法を調べました。『Cocos Studio 2』はデフォルトの画面構成で『Animation』ウインドウが表示されていて、気になりますし。

　アプリとして実行するためには、『Cocos Studio2』でアニメーションを作成し、『Cocos Code IDE』でコードを書いて、タッチ等のイベントと合わせて組み立てる必要があります。今回は、『Cocos Studio2』でアニメーションを作成するところまでを書きます。『Cocos Code IDE』での作業は、次回のブログに書くことにします。

目次

Cocos Studio 2によるアニメーションの作成

基本的な作成方法について

　『Cocos Studio 2』では、各ノードに、フレーム単位で動きや変化を設定することでアニメーションを作成します。

　全てのフレームに動きを設定するわけではなく、あるノード対して、0フレーム目に『X:100, Y:100』の位置、30フレーム目に『X:200, Y:200』の位置、と設定すると0〜30フレームの間の動きを自動で補間してくれます。

　この場合の『0フレーム目』と『30フレーム目』を『キーフレーム』と呼びます。

　『Animationウインドウ』で『キーフレーム』を設定し、『Propertiesウインドウ』でプロパティを設定するというのが基本的な作成方法になります。

フレームレート

　フレームレートは１秒間に切り替えるフレームの数です。『Animationウインドウ』の下記の部分で設定します。

　『Animationウインドウ』は、横にフレームの目盛りが振ってありますが、時間の経過は設定したフレームレートとフレーム数から把握する必要があります。

複数のアニメーションの作成

　１つのファイル（シーン、レイヤー、ノード）に、複数のアニメーションを作成する場合は、１つ目のアニメーションは『0〜30』フレーム、2つ目のアニメーションは『30〜90』フレームといったように、区分を分けて作成します。各区分のアニメーションに名前を付けることも出来ます。

　余談ですが、私は最初、アニメーションを追加するとタイムラインが別に作られるのかと思っていました。１つのファイルにタイムラインは１つのようです。

アニメーションの追加

　をクリックし、『Name』、『Start Frame』、『End Frame』を設定します。

アニメーションの管理・修正

　をクリックすると、作成したアニメーションがリスト表示されます。
　リストの『Name』、『Start Frame』、『End Frame』をダブルクリックすると、内容を修正することが出来ます。

アニメーションの削除

　アニメーションを消す場合は、左下の『−』ボタンをクリックします。

作成中のアニメーションの確認

　『Animationウインドウ』の左上にある操作パネルで、作成中のアニメーションの動きを確認することが出来ます。

• 上側のボタンの機能は、左から次のようになっています。
  • 選択中のアニメーションの最初のフレームに移動
  • 1フレーム戻る
  • 選択中のアニメーションを再生する
  • 1フレーム進める
  • 選択中のアニメーションの最後のフレームに移動
  • ループ再生と１回再生の切り替え
• 下側のドロップダウンリストで、再生するアニメーションを選択します。

その他の操作は、作成例の中で説明します。

アニメーションの作成例

作成するアニメーション

下記のアニメーションを作成します。
・『Title_In』：タイトルとスタートボタンを表示
・『Tile』：スタートボタンを点滅
・『Tile_Out』：タイトルとスタートボタンを隠す
・『Chara_In』：キャラクターを表示
・『Chara』：キャラクターに簡単な動きを付ける

プロジェクトの新規作成

新規プロジェクトから作成します。

1. 『Cocos Studio2』を起動
2. アプリケーションメニューの『File』-『New Project...』をクリック
3. 開いたウィンドウで『All』の『Cocos Project』を選択し、『Next』をクリック
4. 次のように設定を行った後、『Finished』をクリック
   • 『Project Name（プロジェクト名）』：HelloCocos（任意のプロジェクト名）
   • 『Orientation（画面の向き）』：『縦向きの画面のアイコン』を選択
   • 『Engine Version（cocos2d-xのバージョン）』：『cocos2d-x-3.7』を選択
   • 『Project Language（使用するプログラミング言語）』：『JavaScript』を選択

使用する画像

それぞれの画像を右クリックして、画像の右に書いた名前をつけて保存して下さい。

• ：『titile.png』
• ：『start.png』
• ：『chara_0.png』
• ：『chara_1.png』
• ：『chara_2.png』

プロジェクトへの画像の追加

1. 『Cocos Studio2』の画面左下の『Resourcesウインドウ』内で右クリックし、『Import Resources...』をクリック
2. 先ほど保存した５枚の画像を選択し、『Open』をクリック

タイトルとスタートボタンの作成

タイトル用スプライト

1. 画面左上の『Objectsウインドウ』の『Basic Objects』にある『Sprite』を、『Canvas（アプリの画面を作成するウインドウ）』へドラッグアンドドロップ
2. 画面右の『Propertiesウインドウ』で『Sprite』のプロパティを下記のように変更
   ＊書いていないパラメータは変更していません。
   • 『Name』：SpriteTitle
   • 『Feature』
     • 『Image Resource』：title.png（Resourcesウインドウからへドラッグアンドドロップして登録）

スタートボタン用スプライト

1. 『Sprite』を、『Canvas（アプリの画面を作成するウインドウ）』へドラッグアンドドロップ
2. 『Propertiesウインドウ』で『Sprite』のプロパティを下記のように変更
   • 『Name』：SpriteStart
   • 『Position & Size』
     • 『Position』：X 320、Y 420
   • 『Feature』
     • 『Image Resource』：start.png

この図ではスタートボタン用スプライトを配置し、画像ファイルを設定しています。

『Title_In』アニメーションの作成

タイトル用スプライト

1. 『Animationウインドウ』の左上にある『AutoRecord Frame』にチェックを入れる
   AutoRecord Frame』にチェックを入れた状態でノードのプロパティを変更すると、現在のフレームの関連する項目に、自動でキーフレームが追加されるようになります。
2. 『Animationウインドウ』の『SpriteTitle』の横のをクリックし、隠れていた項目を表示
3. 『SpriteTitle』の行の『0フレーム目』をクリック
4. 『Properties』ウインドウで、下記のように設定
   • 『Position & Size』
     • 『Position（位置）』：X 320、Y 400
   • 『General』
     • 『Scale（拡大縮小）』：X 200、Y 200
     • 『Rotation（回転角度）』：-45
     • 『Opacity（不透明度）』：0
5. 『SpriteTitle』の行の『30フレーム目』をクリック
6. 『Properties』ウインドウで、下記のように設定
   • 『Position & Size』
     • 『Position』：X 320、Y 540
   • 『General』
     • 『Scale』：X 100、Y 100
     • 『Rotation』：-5
     • 『Opacity』：100
7. 再度『SpriteTitle』の行の『0フレーム目』をクリック
8. 『Animationウインドウ』の右端にある『Frame Curve Settings』で『Quad_EaseIn』を選択
   
   『0フレーム目』と『30フレーム目』を結んでいる線が矢印になります。

スタートボタン用スプライト

1. 『Animationウインドウ』の『SpriteStart』の横のをクリックし、隠れていた項目を表示
2. 『SpriteStart』の行の『0フレーム目』をクリック
3. 『Properties』ウインドウで、下記のように設定
   • 『General』
     • 『Scale』：X 100、Y 200
     • 『Opacity』：0
4. 『SpriteStart』の列の『30フレーム目』をクリック
5. 『Properties』ウインドウで、下記のように設定
   • 『General』
     • 『Scale』：X 100、Y 100
     • 『Opacity』：100
6. 『SpriteStart』の行の『0フレーム目』をクリック
7. 『Animationウインドウ』の右端にある『Frame Curve Settings』で『Quad_EaseIn』を選択

アニメーションに名前を付ける

1. 『Animationウインドウ』の左上の（Add Animation）ボタンをクリック
   
2. 『Add Animationウインドウ』で下記のように設定して『OK』をクリック
   • 『Name』：Title_In
   • 『Start Frame』：0
   • 『End Frame』：30

『Title』アニメーションの作成

スタートボタン用スプライト

1. 『SpriteStart』の『Opacity』の行の『75フレーム目』をクリック
2. 『Add Frameボタン』をクリックし、キーフレームを追加
3. 『SpriteStart』の行の『90フレーム目』をクリック
4. 『Properties』ウインドウで、下記のように設定
   • 『General』
     • 『Opacity』：0

アニメーションに名前を付ける

1. 『Animationウインドウ』の左上の（Add Animation）ボタンをクリック
2. 『Add Animationウインドウ』で下記のように設定して『OK』をクリック
   • 『Name』：Title
   • 『Start Frame』：30
   • 『End Frame』：90

『Title_Out』アニメーションの作成

タイトル用スプライト

1. 『SpriteTitle』の『Opacity』行の『120フレーム目』をクリック
2. 『Add Frameボタン』をクリックし、キーフレームを追加
3. 『SpriteTitle』の『Scale』行の『120フレーム目』をクリック
4. 『Add Frameボタン』をクリックし、キーフレームを追加
5. 『SpriteTitle』の行の『150フレーム目』をクリック
6. 『Properties』ウインドウで、下記のように設定
   • 『General』
     • 『Scale』：X 200、Y 200
     • 『Opacity』：0

スタートボタン用スプライト

1. 『SpriteStart』の行の『91フレーム目』をクリック
2. 『Properties』ウインドウで、下記のように設定
   • 『General』
     • 『Opacity』：100
3. 『SpriteStart』の『Scale』行の『91フレーム目』をクリック
4. 『Add Frameボタン』をクリックし、キーフレームを追加
5. 『SpriteStart』の行の『105フレーム目』をクリック
6. 『Properties』ウインドウで、下記のように設定
   • 『General』
     • 『Scale』：X 100、Y 200
     • 『Opacity』：0

アニメーションに名前を付ける

1. 『Animationウインドウ』の左上の『Add Animationボタン』をクリック
2. 『Add Animationウインドウ』で下記のように設定して『OK』をクリック
   • 『Name』：Title_Out
   • 『Start Frame』：91
   • 『End Frame』：150

キャラクターの作成

1. アプリケーションメニューの『File』-『New File...』をクリック
2. 下記のように設定し、『New』ボタンをクリック
   • 『Type』：『Node』
   • 『File Name』：NodeChara
     
3. 『Objectsウインドウ』の『Basic Objects』にある『Sprite』を、『Canvas』の『NodeChara.csd』へドラッグアンドドロップ
4. 『Propertiesウインドウ』で『Sprite』のプロパティを下記のように変更
   • 『Name』：SpriteChara

『Chara_In』アニメーションの設定

1. 『Animationウインドウ』の『AutoRecord Frame』にチェックを入れる
2. 『Animationウインドウ』の『SpriteChara』の横のをクリックし、隠れていた項目を表示
3. 『SpriteChara』の行の『0フレーム目』をクリック
4. 『Properties』ウインドウで、下記のように設定
   • 『Position & Size』
     • 『Position』：X 0、Y 550
   • 『Feature』
     • 『Image Resource』：chara_0.png
5. 『SpriteChara』の行の『90フレーム目』をクリック
6. 『Properties』ウインドウで、下記のように設定
   • 『Position & Size』
     • 『Position』：X 0、Y -20
7. 『SpriteChara』の行の『0フレーム目』をクリック
8. 『Animationウインドウ』の右端にある『Frame Curve Settings』で『Bounce_EaseOut』を選択

アニメーションに名前を付ける

1. 『Animationウインドウ』の左上の『Add Animationボタン』をクリック
2. 『Add Animationウインドウ』で下記のように設定して『OK』をクリック
   • 『Name』：Chara_In
   • 『Start Frame』：0
   • 『End Frame』：90

『Chara』アニメーションの作成

1. 『SpriteChara』の行の『90フレーム目』をクリック
2. 『Frame Curve Settings』で『Sin_EaseInOut』を選択
3. 『SpriteChara』の行の『120フレーム目』をクリック
4. 『Properties』ウインドウで、下記のように設定
   • 『Position & Size』
     • 『Position』：X 0、Y 20
5. 『SpriteChara』の行の『130フレーム目』をクリック
6. 『Properties』ウインドウで、下記のように設定
   • 『Feature』
     • 『Image Resource』：chara_1.png
7. 『SpriteChara』の行の『135フレーム目』をクリック
8. 『Properties』ウインドウで、下記のように設定
   • 『Feature』
     • 『Image Resource』：chara_02.png
9. 『SpriteChara』の行の『145フレーム目』をクリック
10. 『Properties』ウインドウで、下記のように設定
    • 『Feature』
      • 『Image Resource』：chara_1.png
11. 『SpriteChara』の行の『150フレーム目』をクリック
12. 『Properties』ウインドウで、下記のように設定
    • 『Position & Size』
      • 『Position』：X 0、Y 20
    • 『Feature』
      • 『Image Resource』：chara_0.png
13. 『SpriteChara』の行の『120フレーム目』をクリック
14. 『Frame Curve Settings』で『Sin_EaseInOut』を選択

アニメーションに名前を付ける

1. 『Animationウインドウ』の左上の『Add Animationボタン』をクリック
2. 『Add Animationウインドウ』で下記のように設定して『OK』をクリック
   • 『Name』：Chara
   • 『Start Frame』：90
   • 『End Frame』：150

データの保存

1. 『MainScene.csd』と『NodeChara.csd』ともに『Animationウインドウ』の現在のフレーム（青いライン）を『0フレーム目』の位置にする
   • 実行時にシーン・ノードを呼び出した時に、保存した時のフレームの位置の状態で呼びだされます。
   • 『MainScene.csd』と『NodeChara.csd』での作業を切り替えるには、『Canvas』の上部のタブをクリックするか、『Resourcesウインドウ』でファイルをダブルクリックします。
     
2. アプリケーションメニューの『File』-『Save All』をクリック

パブリッシュ

1. アプリケーションメニューの『Project』-『Publish and Package...』をクリック
2. 『Publish』- 『Publish Type』- 『Publish To Code IDE』をクリック
3. 『OK』をクリック

作成したプロジェクトがパブリッシュされて、『Cocos Code IDE』が起動します。　

これで『Cocos Studio 2』での作業は終了です。
続きの『Cocos Code IDE』での作業は、次のブログに書くことにします。

補足

タイムラインの『Skew』、『Scale』、『Position』以外の項目

『Animationウインドウ』の各ノードの横のをクリックしてツリーを展開した時、デフォルトでは『Skew』と『Scale』と『Position』の行だけが表示されます。『Image Resource（画像）』や『Opacity（不透明度）』、『Color（色）』の行が無いので、それらのキーフレームが作成出来ません。これらの行は『AutoRecord Frame』にチェックをつけた状態で、そのプロパティを変更することで追加されます。

パラパラ漫画を作る別の方法

1. 『Resourcesウインドウ』で使用する画像を全て選択した状態で、右クリックし、『Create Sprite Animation...』をクリック
2. 開いたウインドウで、下記の設定行い、『OK』をクリック
   • 『Start』：挿入開始位置
   • 『Spacing』：画像を切り替える間隔
   • 『Append the first frame as end frame』：チェックすると、最後のフレームとして１番目の画像のフレームが追加されます。

今回は、以上です。

あとがき

　記事は長いですが、作業量はそんなに多くない思います。
　慣れればアニメーションを全てコードで書くより、断然楽になりますね。