cocos2d-xアニメーション

Pocket

くまのがっこう神経衰弱バトル

くまのがっこう神経衰弱バトルのオープニングとエンディングのアニメーションの作り方をご紹介します。

opening

はじめはベタにアニメーションの処理をプログラムに書いていたのですがコードが長くなりちょっとした変更も難しくなってしまいました。そこでシナリオをplistにして外に出し、それを読み込んでタイマーでアニメーション処理をする仕組みを作りました。

HelloWorldScene.h

HelloWorldScene.cpp

このプログラムにアニメーションのシナリオのanimation.plistを読み込ませるとアニメーションを表示します。

http://gameshonen.com/blog/uploads/animation.plist

このplistはエクセルで作ったシナリオを一旦csvへ保存してphpを使ってplistへ変換しています。

http://gameshonen.com/blog/uploads/animation.xlsx

これはplistを生成する為のエクセルデータです。

animationXls

  • time: アニメーションの処理を実行する時間(秒)intervalから自動計算
  • interval: スレームの表示時間(秒)
  • image: 表示する画像ファイル名
  • mode: 処理の内容
  • position: 画像を表示する座標(x y)
  • scale: 画像を表示する倍率
  • rotation: 画像を表示する角度
  • opacity: 画像の透明度(0〜1.0)
  • action: 表示した画像にかけるエフェクト
  • parameter: actionのパラメーター(SCALE:倍率、MOVE:座標、FADE:透明度)
  • duration: actionの実行時間

このエクセルデータをcsvで保存して下記のphpでplistへ変換してアプリへ組み込みました。(ブログで表示するために拡張子を無効にしています)

http://gameshonen.com/blog/uploads/generate_plist_php

$ php generate_plist_php > animation.plist

自分が使えれば良いというレベルで作っているのでオレオレ仕様ですが、くまのがっこう神経衰弱バトルを作るときにはこの方法で正確かつ効率的にアニメーションを作る事ができましたのでご参考になればと思い公開しました。

実際にゲームに組み込んでいる処理は座標の指示や途中でイベントを差し込んだりともう少し複雑ですが、見づらくなるので根幹の部分を抽出してあります。

これからもアニメーションがたくさん入った楽しいゲームを作りたいと思います。

Pocket

投稿者: Kei Osumi

GAME SHONENのプログラマー

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です