だいたい47度

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

PageTop

Box2Dでアニメーションのテスト(cocos2d)

Box2Dのシンプルなbodyにアニメーションをつけてみました。

前回、関節の動きによって移動する物体を作りました。その結果、パラメータ制御が面倒だけどキチンと制御しないとまともに動かないことが分かりました。また、最終型でも動きが不安定すぎてゲームには向かなそうでした。

動き自体はマヌケでよかったのですが、ゲームを成立させるために、もうちょっとシンプルな物体を使ってみようと考えました。その結果が下記の動画です。



今回の実装
今回は単純なボディを作りました。動画の中盤に表示していますが、四角に回転する円を一つつけただけです。倒れないように、毎Stepごとに角度を感知しインパルスをぶつけて補正してやっています(こちら参照)。また、同じ位置に20Step以上いた場合は方向を変えるようにしています。

アニメーションとしては下の5つの画像をテキストアトラスに入れて動かしました。うん、まぁなんとなく歩いているように見える。
penguin_anim1penguin_anim3penguin_anim2penguin_anim5penguin_anim4

アニメーションの管理は、以前の記事のchapter 3で述べたようにplistを使って行なっています。ペンギンクラスのinitでanimationをplistから読み込み、クラスの状況とCCSpriteのnumberOfRunningActionsが0かどうかを確認しながらCCAnimateを実行しています。このへんは完全にLearning Cocos2Dで学んだ通り。

アニメーションで使っているpngファイルのbodyへの貼り付けは、cocos2dのBox2Dテンプレートを開いた時にあるPhysicsSpriteを利用しています。上述のアニメーション管理や状態管理のため、CCSpriteを継承したGameObjectクラスを作り、PhysicsSpriteの親クラスをCCSpriteからGameObjectに切り替えます。あと、PhysicsSpriteのプロパティとしてworldも持たせておくと便利です。最後にPhysicsSpriteを継承したペンギンクラスを作ってやればOK。

わかったこと
安定した移動は作れる。がちょっとつまらん?
思ったより安定して動いていました。また物理エンジンを使った効果として適度に傾いてくれるので、5枚しか画像を用意しなかったにしてはそれなりに動いているように見えます。ただ、前回の方が動きの面白みがありますね……。

アニメーションのノウハウが必要
画像そのもののノウハウと、アニメーションするためのノウハウと両方必要そうです。とりあえず気づいたことを書きますが他にも多くのノウハウがあるのだろうな。

画像そのものについては、今回はテストなので適当に作るはずだったのですが、それでも何度か作り直しがありました。まず、最初に完全に真横を向いたキャラクタを作ったのですが、それよりちょっとこっちを向いた方が可愛いような気がして作り直しました。マリオとかもそんな感じだし。あとは、画像には枠線をつけたほうが良さそうです。足とかは枠線がないと動いているように見えないです。ただ今回のペンギンは何となく汚いので、枠線の付け方は考えなきゃいけなそう。

アニメーションのノウハウとしては、まず画像数を増やさなきゃいけません。ちょっとカクカクして見える。大体9-10枚くらいは必要そうです。また、画像ごとに細かい違いをいれなきゃいけないようです。たとえば歩くときは頭が上下動するものですが、今回は不動なのでリアルさも可愛さもなくなっています。

次のステップ
もうちょっとアニメーションに凝ってみようと思います。今回安定した動きでゲームとしても成立しそうですが、前回に比べてペンギンの動作の楽しさが減りました。ここをアニメーションの改善でカバーしたいです。ただ、アニメーションについてはどこまでもいってしまう話のような気がするので、とりあえず最低限のラインを超えれるように頑張ります。

また、物理エンジンを使って動くパーツを追加してあげる事で、動作をリッチに見せたいと思います。その際flipXのことを忘れないようにしないといけません。今回は羽もつけてみようと思ったのですが、flipXしたときにjointする点を変更しなきゃいけなかったため実装しなおしになり心が折れて辞めました。

上記2つでキャラクタがまともに動作するようならゲームの実装をしていこうかなー。
関連記事
スポンサーサイト

PageTop

コメント


管理者にだけ表示を許可する
 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。