読者です 読者をやめる 読者になる 読者になる

モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

マニュアルの『アニメーション』を読む! その1:Cocos Creator

Cocos Cocos Creator JavaScript Mac

 アニメーションを使いたいのですが、使い方がよくわからないので、とりあえずマニュアルを読んでみました。
 最新版と同期が取れているのか、若干怪しいのですが、これを読むしかないですし。

使用環境

 私が使用している環境です。

  • Mac OS X El Capitan Version 10.11.4
  • Cocos Creator Version 1.0.1
  • ブラウザ:Google Chrome Version 50.0.2661.75 (64-bit)

チュートリアルの原文の場所

 チュートリアルの原文は、エディタの画面のアプリケーションメニューの『Help』-『User Manual』をクリックし、左の一覧の『Animation』から、見ることが出来ます。

アニメーションシステム

 この章では、『Cocos Creator』にバンドルされているアニメーションシステムを紹介します。アニメーションエディタは、通常期待されるものと同じ標準的な機能:標準的な、移動、回転、拡大縮小とスプライトアニメーション、を持っています。『Cocos Creator』はユーザー定義のコンポーネントとカスタムプロパティの経時変化のサポートの提供によりこれを追加します。また、任意に編集できるタイムカーブ、プレビュー、シーンビューでの直接的な移動パスの編集により、たった一行もコードを書くことなく、いろいろな複雑で凝ったダイナミックな効果を作成することが出来ます。

アニメーションについて

アニメーションコンポーネントとアニメーションクリップ

 『Cocos Creator』はコンポーネント化された構造です。アニメーションもその例外ではなく、ノード内のコンポーネントです。アニメーションクリップは、しかしながら、アニメーションデータを保存するドキュメントです。ノードにアニメーションデータをスムーズに適用するためのエンジンを有効にするために、アニメーションクリップをアニメーションコンポーネントに取り付ける必要があります。

アニメーションエディタを理解するために

 アニメーションエディタは7つのエリアから成っています。
f:id:mmorley:20160416203157p:plain:w550

  1. 共通ボタンフィールド:いくつかの共通機能のボタンがあります。左から右に、レコーディング状態のスイッチ、最初のフレームに戻る、最後のフレームへ進む、再生/停止、次のフレームに進む、新しいアニメーションクリップを作成、アニメーションイベントを挿入、です。
  2. タイムラインとイベント:主にタイムラインを表示します。追加されたユーザー定義のイベントは、ここにも表示されます。
  3. 階層管理(Node Tree):現在のアニメーションクリップによって、影響を受けるノードデータが含まれています。
  4. ノードのアニメーションフレームのプレビューフィールド:主に、各ノードの全てのフレームのタイムラインのプレビューを表示します。
  5. プロパティリスト:選択されたアニメーションクリップで、現在選択されているノードのプロパティのリストを表示します。
  6. キーフレーム:各プロパティに対応しているフレームはここに表示されます。アニメーションクリップの基本的なプロパティです。アニメーションクリップを選んだ後、基本的なデータはここに表示され、変更することが出来ます。

基本的な操作

タイムラインのズーム率を変更

 2、4、6、のエリアでマウスのホイールをスクロールして下さい。タイムラインの表示の比率をズームイン/アウト出来ます。

タイムラインの表示エリアの変更

 キーボードの『shift』を押して、2のエリアを左クリックし、左右にドラッグして下さい。または、2、4、6のエリアでホイールボタンで、ドラッグして下さい。

現在のタイムラインの選択を変更

 タイムライン(2のエリア)のエリア内をクリックまたはドラッグして下さい。現在のタイムノードを変更出来ます。または、4のエリアで赤線をドラッグして下さい。

レコーディング状態のオープン/クローズ
  1. 1のエリアの左端のボタンをクリックして、レコーディング状態をオープン/クローズして下さい。
  2. プロパティのフレームとパスの追加と削除を行うと、自動的にレコーディング状態がオープンします。
  3. アニメーションを再生すると自動的にレコーディング状態がオープンします。
  4. 再生している時に、シーンの保存等の操作を行うと、レコーディング状態はクローズします。
アニメーションの再生/停止
  1. 1のエリアの再生ボタンをクリックすると、自動的に停止ボタンに変わります。再びボタンをクリックするとアニメーションは停止します。
  2. 再生している時に、シーンの保存等の操作を行うと、停止します。

アニメーションコンポーネントとアニメーションクリップの作成

アニメーションコンポーネントの作成

 ノードごとに異なるコンポーネントを追加できます。もしノードにアニメーションを作成したい場合、そのために新しいアニメーションコンポーネントを作成する必要があります。
 アニメーションを作成する2つの方法があります。

  1. 使用したいノードを選択します。『Properties』パネルで、右上の『+』をクリックするか『Add Component』ボタンをクリックし、『Add Other Component』-『Animation』を選択します。
  2. アニメーショエディタを開きます。『Node Tree』パネルで、アニメーションを追加したいノードを選択します。『Add Animation Component』ボタンをクリックします。

f:id:mmorley:20160416203545p:plain:w550

アニメーションクリップの作成と取り付け

 ノード上にアニメーションコンポーネントを持ちましたが、対応するアニメーションクリップデータがありません。アニメーションクリップを作成する2つの方法があります。

  1. 『Assets』パネルで、左上の『+』をクリックするか、何もないエリアを右クリックして、『Create』-『Animation Clip』を選択して下さい。『New AnimationClip』という名前で、クリップドキュメントが作成されます。
     作成はこれで十分ではありません。『Node Tree』パネルでノードをクリックして選択し、再び『Properties』パネルでアニメーションを見つける必要があります。『Clips』の現在の値が0ですが、1に変更して下さい。
     『Assets』パネルから、新しく作成された『New AnimationClip』を新しく出現したアニメーションクリップの選択ボックスにドラッグします。
  2. アニメーションコンポーネントにアニメーションクリップドキュメントがなにも追加されていない場合は、新しいアニメーションクリップドキュメントを作成するために、アニメーションエディタのポップアップウインドウの『Add New AnimClip』ボタンをクリックします。

f:id:mmorley:20160416214018p:plain:w550

アニメーションカーブの編集

 さて、ノードにアニメーションクリップが取り付けられたので、アニメーションクリップにアニメーションカーブを作成することが出来ます。
 まず、アニメーションのプロパティを理解する必要が有ります。これらには位置、回転等のノードに既存のプロパティとコンポーネントのユーザー定義のプロパティが含まれています。コンポーネントに含まれているプロパティは、『cc.Sprite.spriteFrame』のように、それら自信の名前の先頭にコンポーネント名を追加します。
f:id:mmorley:20160416215939p:plain
 上の画像において『position』のカーブはプロパティパスで、対応する青い点はアニメーションフレームです。

新しいプロパティパスの追加

 新しいプロパティパスを追加するための通常の方法は、まず、ノードを選択し、それからプロパティフィールドの『add property』をクリックすることです。
ポップアップメニューで、追加可能な全てのプロパティが表示されます。追加したいプロパティを選択すると対応するパスが追加されます。
 レコーディング状態にある対応するノードのプロパティを直接変更することも出来ます。左上の赤い丸をクリックすることで、レコーディング状態をオープンし、直接『Scene』パネルに選択したノードをドラッグすると、『add property path』はそれに対応して、プロパティリストに追加され、キーフレームは、現在のタイムラインに追加されます。レコーディング状態では『Properties』パネルで直接他のプロパティを変更することで、自動的にプロパティパスとキーフレームを追加します。

プロパティパスの削除

 プロパティリストでプロパティを右クリックし、ポップアップメニューで、『delete』を選択すると、プロパティはアニメーションデータから削除されます。

アニメーションフレームの追加

 レコーディング状態でプロパティを直接変更することで、自動的に対応するプロパティとフレームを追加出来ます。
 プロパティリストで対応するプロパティの右側の『+』を直接クリックすると、タイムラインの現在選択しているポイントにフレームが追加されます。
f:id:mmorley:20160416224505p:plain:w550

アニメーションフレームの選択

 選択されたシーケンスフレームをクリックすると、選択状態で表示されます。すぐにシーケンスフレームが青から白になります。もし複数のシーケンスフレームを一度に選択する必要があるなら、『control』キーを押しながら必要なものを選択するか、直接ドラッグして、プロパティフィールドでそれらハイライトにします。
f:id:mmorley:20160416224830p:plain:w550

アニメーションフレームの移動

 選択されたフレームにマウスを移動すると、マウスは左右の矢印になります。選択されたフレームは、マウスの左ボタンを押している間、ドラッグすることが出来ます。

アニメーションフレームの変更

 変更するアニメーションフレームをクリックすると、タイムラインの選択フレームがこのフレームになります。レコーディング状態がオープンになっていることを確認した後、『Properties』パネルで直接対応するプロパティを変更します。

アニメーションフレームの削除

 シーケンスのフレームを選択した後、プロパティフィールドで『−』記号をクリックすると、現在選択されたシーケンスのフレームが削除されます。もしくは直接『fn + delete』キーを押すと、選択した全てのフレームが削除されます。

スプライトアニメーションの編集

 フレームアニメーションを作成するための具体的な方法を見てみましょう。

ノードへの新しいスプライトコンポーネントを追加

 まず、ノードに正しくテクスチャを表示させる必要があります。このためには、ノードにスプライトコンポーネントを追加する必要があります。ノードを選択した後、『Properties』パネルで『Add Component』ボタンをクリックして『Add Renderer Component』-『Sprite』を選択します。

プロパティリストに『cc.Sprite.spriteFrame 』を追加

 ノードが適切にテクスチャを表示することが出来たなら、テクスチャ用のアニメーションパスを作成する必要があります。アニメーションエディタで『add property』をクリックし、それから『cc.Sprite.spriteFrame』を選択します。

フレームの追加

 『Assets』パネルからプロパティフレームフィールドにテクスチャをドラッグして、『cc.Sprite.spriteFrame』パスの上に置きます。それから次のフレームで表示すべきテクスチャを指定された位置にドラッグします。再生をクリックし、新しく作成されたアニメーションをプレビューすることが出来ます。

タイムカーブの編集

 我々はすでにいくつかの基本的なアニメーションを作成しました。しかし、ときには二つのフレームの間にEaseInOut等のスローモーション効果を使用する必要があります。アニメーションエディタで、どのようにすれば出来るのでしょうか?
 まず、1つのパス上に2つの異なるフレームを作成する必要があります。例えば、[0, 0]から[100, 100] に開始する位置に2つのフレームを作成します。すると、これら2つのフレームの間に接続する線が現れます。接続線をダブルクリックすると、タイムカーブエディタが開きます。
f:id:mmorley:20160417000625p:plain

プリセットカーブの使用

 カーブエディタの左側から、『Ease In』等の様々なプリセットの効果を選択できます。選択した後、いくかのプリセットパラメータが右側の上部に現れます。
これらは必要に応じて選択することが出来ます。

ユーザー定義のカーブ

 ときには、プリセットのカーブではアニメーションのニーズを満たせないこともあります。しかしながら、我々自身でカーブを変更することができます。右下のプレビュー画像に2つのグレーの制御点があります。これらの制御点をドラッグして、カーブのパスを変更することが出来ます。制御点を視野の外にドラッグする必要がある場合は、マウスホイールか、プレビュー画像の右上のズームイン/アウト用の小さく描かれているスケールを使用することが出来ます。サポートされている比率は0.1から1の範囲です。
 
 まだ続きがありますが、今回はここまでにします。
 
 続きです。
mmorley.hatenablog.com

あとがき

 レコーディング状態にするための赤い丸が見つかりませんが、アニメーションエディタを開いていればレコーディング状態ということでしょうかね。