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

cocos2d-xSNSへ画像を投稿

Pocket

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

くまのがっこう神経衰弱バトルのSNS投稿の作り方をご紹介します。スコアとランクとアイテムを画像にしてTwitterへ投稿しています。Lineはテキストのみ。FacebookはSDKを入れないと投稿できないようでしたので今回は見送っています。

sns

iOS、Androidとネイティブ連携をする為に以下の3つのファイルを追加します。

SnsLauncher.h (iOS、Android共通のヘッダーファイル)

SnsLauncher.mm (iOSのネイティブ連携用のファイル)

SnsLauncher.cpp (Androidのネイティブ連携用のファイル)

SnsLauncher.cppはiOSのビルドの対象にしないために、ファイルを追加する際にAdd to targetsのチェックを外してください。

snsXcode

次に投稿する画像を生成してSnsLauncherを呼び出すところです。

HelloWorldScene.h

HelloWorldScene.cpp

ここでの注意点はテクスチャに画像を追加する際にretain()するかどうかです。この実装ではretain()するとメモリリークを起こしたのでretain()しませんでした。必ずXcodeのデバッグナビゲータを使ってメモリの使用状況を確認しましょう。

 

iOSの場合はSocial.frameworkを追加すれば完了です。

socialFw

 

Androidの場合は以下の設定を追加します。

proj.android/jni/Android.mk

proj.android/src/org/cocos2dx/cpp/AppActivity.java

今回は処理をAppActivity.javaに直接書きました。AppActivity.javaを継承するクラスを作るやり方もネットで紹介されていますので調べてみてください。

Twitterなどの他のアプリケーションと画像ファイルを共有する為にFileProviderの設定を追加します。

proj.android/AndroidManifest.xml

android:authorities=”com.gameshonen.hello.fileprovider” を自分のアプリケーションのpackage名.fileproviderへ書き換えてください。

proj.android/res/xml/filepaths.xml を新規に追加します。

 

android-support-v4.jarをリンクして使えるようにします。一番簡単な方法はsdk/extras/android/support/v4/android-support-v4.jarをproj.android/libsへコピーすると使えるようになります。

Pocket

cocos2d-xスライドビュー

Pocket

くまのがっこう神経衰弱バトル
くまのがっこう神経衰弱バトルのチュートリアルに使ったスライドビューの作り方をご紹介します。このビューはスワイプ操作かボタン操作を行うとページ単位でスライドが移動します。ここではスワイプ操作のみに絞ったサンプルをご紹介します。

slide

SlideView.h

SlideView.cpp

HelloWorldScene.h

HelloWorldScene.cpp

スライドビューを生成するところとかスライドを載せるところとかをもっとスマートに書ければと思うのですが、ゲームを作っている最中はとりあえず動けばそのまま作業を進めてしまうのでどうしても書きっぱなしな感じになります。こうしてブログでまとめるとキレイに書き直したくなります。

Pocket