モーリーのメモ

アプリ開発等(プログラミング、CG作成)、興味を持ったことを実践してまとめるブログです。

モーリーのメモ

2Dキャラクタアニメーションをテスト! その3:Cocos Creator

 こちらの記事の続きです。
mmorley.hatenablog.com
 前回は、座標の構成について考えました。
 
 次は、各パーツの親子関係と表示順序を考えながら、『Cocos Creator』で実際に組み立ててみます。

使用環境

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

『Cocos Creator』でパーツを組み立てる

 『Cocos Creator』に体のパーツの画像を取り込んで組み立てます。
 組み立てるパーツこれです。 全部で17個あります。
    f:id:mmorley:20160422231518p:plain:w180

『Empty Node』を活用

 前回、こんな風に座標系の構成を考えました。
 f:id:mmorley:20160424153627p:plain
 青枠の座標系の中に、赤枠があって、赤枠の中でパーツを組み上げます。
 『Empty Node』を枠として使います。
 青枠にあたる『Empty Node』を『Canvas』に追加して『character』という名前にします。
 そして、赤枠にあたる『Empty Node』を『character』に追加して『character_layer』という名前にします。

関節の位置を設定

 次は『Character_layer』の中で、体のパーツを組立てます。
 パーツを追加するタイミングで『Anchor』を関節の位置に設定します。
 f:id:mmorley:20160424174155p:plain
 腰(股関節)から体のパーツが派生するように、パーツの親子関係を作ります。

パーツの親子関係と重なり方1

 親子関係を作ると、親を動かすと子も一緒に動きます。
 逆に子が動いても親は動きません。
 右腕の場合の親子関係は、
 親:r_upper_arm(右上腕)ー子:r_lower_arm(右前腕)ー孫:r_hand(右手)
 です。
 f:id:mmorley:20160424203523p:plain
 で、ここで問題なのが、
 親子関係を作ると、子が必ず前に表示されるようになることです。
 なので、下図のようにします。
 f:id:mmorley:20160424210911p:plain
 『r_upper_arm_layer』という『Empty Node』を作って親とし、『r_upper_arm』と『r_lower_arm』を子にします。
 肩を動かす時は『r_upper_arm_layer』を動かせば腕全体が動きます。
 また『r_upper_arm』と『r_lower_arm』は同じ階層の子なので、どちらでも手前に表示できます。

パーツの親子関係と重なり方2

 『パーツの親子関係と重なり方1』で全部行けるかと思いましたが、一箇所だめでした。
  f:id:mmorley:20160424214610p:plain
 表示の順序は、奥から左上腕→左大腿→右大腿→胴体→右上腕にしたいのですが、
 動きは『左上腕、胴体、右上腕』と『左大腿、右大腿』で別系統です。
 表示の順序の間に別系統のパーツが割り込んでいます。
 
 この問題はこうすることにしました。
 f:id:mmorley:20160424222734p:plain
 左上腕は、胴体と一緒に動かすのをあきらめました。
 ただ単独で動かすのは大変なので、『l_body_layer』という『Empty Node』を作って、その中に入れました。
 腰と肩の位置は右と同じにします。
 1つ手間ですが、『body』の腰を回転させる時は、『l_body_layer』も同じだけ回転させれば、左右の肩が同じ位置になります。

実際に組み立てる

 上記の方法で、全てのパーツを組み上げました。
 f:id:mmorley:20160424224100p:plain
 中々のものになりました。
 見た目はこんな感じです。
 f:id:mmorley:20160424224326p:plain
 青線(base_line)は、ポーズを変えた時にどのぐらい動かしたかわかりやすいようにするために入れています。

あとがき

 もっといい方法もあるのかもしれませんが、こんな感じで体のパーツを組み上げました。
 表示順序をある程度は変更できるようにしました。
 ただ、今はマネキンなのであまり気になりませんが、動かしたり、服の絵を描いたら、対応できないケースも出てくるかもしれません。