Cocos2d-xでGame Center(GameKit)、Google Play Games Servicesを使ってランキング機能を実装する

どうも、ころさめです
今回はCocos2d-xでゲーム内のランキング機能を実装したので、メモがてらここに貼っつけていきます
LobiなんかもCocos2d-xに対応していたりするので良いと思いますが、今回のアプリはカジュアルゲームだったので、ユーザー登録が必要ないGame CenterとPlay Games Servicesにしました
また、ここでは実装のみ紹介するので、コンソール側の登録などは以下などを参考にしてください

Game Center機能を実装する – Qiita
Google Play Game Servicesをとりあえず使ってみる(登録編) – Qiita

ちなみにログイン完了時のコールバック処理や認証失敗時のエラーダイアログ表示などは行っていないので、それが気になる方は各自で実装をお願いします

各OS共通

RankingController.h

全OS共通のヘッダです
シングルトンパターンを使っているのでどこからでも呼べるようにしています
各メソッドがvirtualなのはiOSでオーバーライドを行うからです

RankingController.cpp

全OS共通の実装です
getInstanceはiOSのみRankingControllerを継承したインスタンスを生成するためここでは実装しません
また、Android以外のOSでもビルドが通るように何もしないメソッドを用意しています(iOSはオーバーライドで実装)
AndroidのisLogin等の実装はRankingController_Android.cppで行います

iOS

RankingController_iOS.h

iOS用のヘッダです
RankingControllerの継承クラスと、Objective-CのGameCenterControllerクラスを宣言しています
GameKitを使用するので、Build PhasesのLink Binary With LibrariesからGameKit.frameworkを追加してください
GameCenterControllerクラスを用意する理由はGKGameCenterControllerDelegateを使用するためです

RankingController_iOS.mm

iOS用のObjective-C++の実装部分です
GameCenterControllerでは実際にGameKitを使ってログインやスコアの更新、ランキングの表示を行っています
LEADER_BOARD_IDにはiTunes Connectで設定したリーダーボードのIDを入れてください
スコア送信失敗時や未ログイン時のランキング表示失敗などのエラー表示は特に何もしていないので、必要な場合は何かしらの処理を入れてください
また、ランキングの集計期間を1日や1週間にしたい場合は、GKGameCenterViewControllerのleaderboardTimeScopeをGKLeaderboardTimeScopeTodayやGKLeaderboardTimeScopeWeekに変更してください
RankingController_iOSではGameCenterControllerの生成と呼び出しを行っています
ここでRankingControllerのgetInstanceの実装を行うことで、iOSでのみgetInstance時にRankingController_iOSを生成するようにしています

Android

RankingController_Android.cpp

RankingControllerのAndroidでの実装部分です
基本的にはPlayGamesController.javaのメソッドをJNI経由で呼んでいるだけです
PlayGamesControllerはシングルトンなので、staticのメソッドを呼ぶのではなく、PlayGamesControllerのインスタンスを取得してからそのインスタンスのメソッドを呼んでいます

PlayGamesController.java

AndroidのJava側の実装です
この実装を行う前に、PlayGamesServicesAPIを使うためにapp/build.gradleに以下を追加してください

後ろのバージョンはその時のGooglePlayAPIのバージョンに合わせてください
また、GooglePlayDeveloperConsoleで実績を5つ以上、リーダーボードを1つ以上設定した上でリソースを取得し、res/valuesに保存してください
その上で、AndroidManifest.xmlに以下を追加してください

この状態で上記PlayGamesControllerを実装して、R.string.leaderboard_の部分を設定したリーダーボードの名前に書き換えてください
ちなみにこのクラスはActivityではないのでonActivityResultが呼ばれないため、AppActivityに以下を追加してください

これらを実装した上で、C++部分で以下のような実装を追加してください

このようにすれば、iOSであればGameCenter、AndroidであればGooglePlayGamesServicesを使ってランキングの更新、ランキングの表示が行えると思います

Cocos2d-xでgetWritablePath以外のファイルパスを取得する

どうも、ころさめです
前回シェア機能を実装した時に、Androidにおいてシェアする画像の保存先がgetWritablePathだと他のアプリから画像が参照できず、画像のシェアができないといった問題がありました
また、iOSにおいてはデフォルトのgetWritablePathの保存先がDocumentsになっているため、ダウンロードしたファイルをgetWritablePathに保存しているとアプリ申請でリジェクトを食らうといったことがよくあります
なので、保存先のパスを取得する処理を簡単に実装したのでメモがてらここに貼ります

FilePath.h

各OS共通のヘッダです
AndroidにおいてはgetDocumentPathは正確にはgetFilesPathあたりの名前が正しいのですが、共通化するためiOSに合わせてます

FilePath_Apple.mm

iOS、Mac用の実装です
getWritablePathの実装をコピペしてNSCachesDirectoryを選べるようにしただけです
isPublic引数はAndroidのためのものなので無視しています

FilePath_Android.cpp

Android用の実装です
isPublicがtrueならExternalの方のファイルパスを返すようにしています

FilePath.java

AndroidのJavaの実装です
Externalのディレクトリがnullだと空白を返しているので注意
ここら辺適当な実装なので気になる方は各自で修正してください
また、Externalのディレクトリに書き込み・読み込みをする場合、以下の権限が必要になるのでAndroidManifest.xmlに以下を追加してください

おまけのFilePath.cpp

iOS、Mac、Android以外の場合の実装です
ビルドを通すためだけのものなので面倒なのでgetWritablePath返しちゃってます

以下この実装を使ったサンプル

こんな感じでやれば画面のスクリーンショット画像をキャッシュディレクトリに保存してLINEでシェアなんかできたりすると思います

Cocos2d-xでTwitter、Facebook、LINEの簡易的なシェア機能を実装する

どうも、ころさめです
なんかプロジェクトが変わるたびにいつも同じようなコードを書いている気がするので、シェアの機能を実装したついでにここにコードをメモしておきます
ちなみにSDKを使った本格的な実装は面倒だったのでopenURLやintentなどを使った簡易的なものになります
まずは基本のクラスから

Share.h

とりあえずシェアするものはメッセージと画像とURLにしています
LINEはそれぞれ画像かメッセージかのどちらか片方しか送れないので一つずつ関数を用意しています

Share.cpp

LINEのメッセージ送信のみiOSとAndroidで実装を共通化可能なためここで実装しています
LINEのメッセージはURLエンコーディングする必要があるのでエンコードしてからopenURLを叩いています
URLエンコードの実装はほぼStackOverflowからパクっています
iOSとAndroid以外では一応ビルドエラーが出ないようにしています(英語は適当)

ここから下はOSごとの実装になります

Share_iOS.mm

iOS側のObjective-C++の実装になります
TwitterとFacebookのシェアではSLComposeViewControllerを使っているため、必ずSocial.frameworkをBuild Phasesから追加してください
LINEの画像のシェアはline://のURLスキームでopenURLから行いますが、iOSの場合はペーストボード名をURLに含める必要があります

Share_Android.cpp

Android側のJNI他の実装になります
このファイルはiOSのビルド対象に含めないでください
AndroidのTwitterとFacebookのシェアはIntentを使ってシェアしますが、Facebookはメッセージのシェアは行えないので、画像かURLがあった場合のみシェアを行います
AndroidのLINEはURLにファイルパスを含めるだけで画像のシェアを行えます
ただ、Androidの画像のシェアはgetWritablePathで取得するファイルパスが他のアプリから参照できないため、Cocos2d-xで保存した画像をシェアする場合はファイルパスを工夫する必要があります

Share.java

AndroidのJNIで呼ぶJavaの実装になります
TwitterはURLがある場合はメッセージの後ろに空白を入れてURLを入れています
Facebookは画像とURLが両方ある場合は画像を優先してシェアするようにしています

これで一応一通りシェアが可能になるかと思います
最初はgithubで公開しようかと思ったのですが、既に似たようなものがあったのでやめました
Androidの画像のファイル保存先の取得については次の記事でやろうと思います

Cocos2d-x(JS)でCocosStudioのcsdファイル内csdファイルのアニメーションを取得、再生する その2

どうも、エンジニアのころさめです
前回からの続きで、今回は作成したCocosStudioのcsdファイル内csdのNodeのアニメーションをコード上で制御する方法を紹介します

まず、Nodeからアニメーション(ccs.ActionTimeline)を取得するために以下のようなメソッドを用意します

このメソッドを利用して、ccs.loadをしているところで以下のように実装します

この状態でproject.jsonやresource.jsなどを修正してから起動すると、子要素のアニメーションがループ再生されるのが確認できると思います

なぜこれで子要素のアニメーションが取得できるかというと、ccs.loadをした際に読み込むcsd(json)データが、CocosStudio v2以降のものであれば、timelineParser-2.x.jsが呼ばれ、そこで以下のような処理をしているからになります

読み込んだactionをnodeのタグと同じにした上でrunActionしているのがわかると思います
そのため、nodeからnodeのタグでgetActionByTagをするとccs.ActionTimelineが取得できるというわけです

これを応用して、以下のようなccs.loadのwrapperを用意すると非常に捗ります

こうすることにより、nodeとactionを分けずに扱えるため、actionが必要になった時だけutils.getActionTimeLineを呼ぶといった使い方ができるようになるため、オススメです

まだCocos2d-x(JS)とCocosStudioの両方を使って開発する人は少ないですが、慣れればC++やCocosBuilderよりもより早く開発できるようになるので、試してみる価値はあると思います

Cocos2d-x(JS)でCocosStudioのcsdファイル内csdファイルのアニメーションを取得、再生する その1

どうも、スパイラルセンスに入社してから1年半ぐらいのエンジニアのころさめです
直近の仕事がなくなったため社内ニートしようと思ってたらブログを書けと言われて渋々書いております
一応これまでCocos2d-xを使った開発に2年半ほど携わってきたので、私の記事はCocos2d-x関連の記事が多くなると思います

さて、最近まで私はCocos2d-x(JS)とCocos Studioを使って10ヶ月ほど開発を行っていました
ただ、Cocos2d-x(JS)用の新しいエディタであるCocos Creatorが発表されたにも関わらず、これまでにCocos StudioとCocos2d-x(JS)を利用した基本的な実装方法についての情報がweb上にほとんどありませんでした
しかしこの前、ようやく非常に参考になる情報が以下に掲載されました

Cocos2d-x (JS) ハンズオン #5 「Cocos StudioとCocos2d-x (JS)との連携」

基本的な実装方法についてはこれで十分なのですが、ちょっと変わったことをしようとするとどこにも情報はなく、自分で試したりCocos2d-xの実装を確認する必要があります
今回はそのうちの一つ、csdファイル内csdファイルのNodeのアニメーションを取得、再生する方法についてになります

まず、CocosStudioで以下のようにアニメーションを設定したcsdファイルを用意します

Icon

次に、アニメーションを設定したcsdファイルを別のcsdファイル表示時にドラッグ&ドロップします

drag

すると、csdファイル内に別のcsdファイルを子要素のNodeとして持たせることができます
Begin to record frameにチェックを入れて、この子要素のNested Actionという項目を設定すると、親のアニメーションの特定のタイミングで子要素をアニメーションさせることができます

nested_action

しかし、これだと親のアニメーションの時間が子要素より短い場合、子要素のアニメーションが途中で止まってしまったり、クリックイベントのタイミングでアニメーションを再生させたい場合などの時に、複雑なタイムラインになっていまいます

そのため、この子要素のアニメーションの再生をコード上で制御する必要があるのですが・・・長くなったので続きは次の記事で

WordPressにソースを貼り付けたいのでCrayon Syntax Highlighterを導入する

マッサンです。

技術系の記事をモリモリ書こうと思っておりますので、ソースコードを貼り付けることが多いかと思います。そこで、Crayon Syntax Highlighterを導入しました。

重いので軽い別のものにしたほうがよい、という記事を見かけましたが、かんたんに導入してみたかったのでこれにしました。

私は学生時代にC言語について学び、そこを源流としてきました。なので他の言語についてもCライクに記述することでものにしようとしてきました(今はもうちょっと進歩的です)。

こういった機能を使うとコピペしやすいので重宝しますね。