cocos2d-xで見つけた新機能 Part2

おはこんばんちは!

GT2の組長こと鈴木翔也です!!

今日は前回の続きでcocos2d-xの新機能を紹介していきたいと思います。

今回紹介するのはこちら!!

SpriteBachNode!!

これはみんなが知らず知らずにやっているやってはあまり良くないことは解消することができます!!

なに? 良くないことって? と思うかもしれませんがそちらを紹介していきましょう!!

では今回はUnityちゃんを5人表示してみましょう!

まずfor文で5回回してSpriteを生成すると

こんな感じかな?

スクリーンショット 2016-08-02 14.04.14

結果

スクリーンショット 2016-08-02 14.04.35

こらーーーーーーーーーーーーーーーー よくない処理をやってるぞ!!

何かわかるか? そうSpriteでテクスチャを読み込むとファイルの中身までしっかり読み込みに行くんやぞ!! 重くなるやろうが!!

ということでした! んじゃどうすればいいのって思うかもしれませんがこれを解消してくれるのがSpriteBachNodeです!!

SpriteBachNodeとはファイルの中身の絵の情報をテクスチャにし、記憶しておくためのクラスです。

使い方は簡単!!

絵の情報を読み込んでSprite生成次に教えてやるだけ!! な! 簡単だろ!

使い方はこんな感じ

スクリーンショット 2016-08-02 14.28.59

見た目は変わらないがシューティングなど同じ敵をたくさん作るときはこれを使って描画スピードを上げたほうがいいと思う!!

cocos2d-xで見つけた新機能 Part1

おはこんばんちは!

GT2の組長こと鈴木翔也です!!

最近見つけたcocosd2d-xの機能を紹介していきたいと思います。

私が最近見つけた機能はこちら

globalZoder SpriteBatchNode

です!!

2回にわたってこの機能を紹介していきたいと思います。

まずはglobaZoderです。

ゲームプログラミングをしたことある人はZoderというものを聞いたことがあるかもしれませんがこれはそれの拡張版だと思ってください。

cocos2d-xの親ノードに依存するものでこのZoderは親ノードに依存しないものとなっております。

例えですが親ノードが二つあり、それぞれにZoderに0と1の値を入れておきます。

スクリーンショット 2016-08-02 13.23.21

ここにSpriteの子供を二つ追加します

そしてZoder 0の親にもう一つのSpriteより前に描画されるようにZoderに大きな値を入れます
スクリーンショット 2016-08-02 13.34.29

結果

スクリーンショット 2016-08-02 13.34.42

Unityちゃんが前に出るようにするためにZoderを大きくしたにもかかわらずHelloWoeldが前に描画されました。

このことから親のZoderに依存し、Unityちゃんの親のZoderよりHelloWorldの親のZoderが大きいため先に描画されたのがわかります。

さてここからが本題でglobalZoderとはこのいぞんとは関係なく描画してくれるというものとなります。

このglobalZoderは負、0、正の3つで構成されています。

これはあまりZoderとかわりありません。

このglobalZoderは何も設定していなければ0になります。

描画順は 負⇨0⇨正となっております。 これもあまりZoderと変わりません。

ではこのglobalZoderを使ってUnityちゃんを前に描画してみたいと思います。

UnityちゃんのglobalZoderを1にして

スクリーンショット 2016-08-02 13.48.25

いざ実行!!

スクリーンショット 2016-08-02 13.48.56

Unityちゃんが前に描画されました!! やった!!

このようにglobalZoderは親に依存せずZoderを決められるというものでした!

まとめ
親に依存しないため親のせいで前に描画、もしくは後ろにびょうがされているものを前に持ってくることができます。

しかししっかり管理しないと前で描画したいものも一緒に後ろにやってしまうことがあるので注意が必要です。

[輪講]cocos-2d-xで制作したゲームにGoogle Analyticsを導入して利用統計情報を取得する

アプリのシーン滞在時間やアクションなどの統計情報を取るためのGoogle AnalyticsをSDKBOXを使ってcocosのプロジェクトに追加する手順を紹介します。

GoogleAnalyticsのアカウント登録の説明は省略します。

・SDKBOXのインストール

以下のコマンドを実行する。

python -c “import urllib; s = urllib.urlopen(‘https://raw.githubusercontent.com/sdkbox-doc/en/master/install/install.py’).read(); exec s”

・自分のcocosプロジェクトにGoogle Analytics Pluginを追加する

Google Analyticsを導入するプロジェクトのディレクトリに移動します

図14

以下のコマンドを実行して、プロジェクトにGoogle Analyticsを追加します
sdkbox import googleanalytics

図15

導入に成功した場合以下の表示になっています
最後の行が “Installation Successful :)” となっています

図16

・GoogleAnalyticsにアプリを登録する

[アナリティクス設定]-[プロパティ]-[新しいプロパティを作成]をクリック

図10

モバイルアプリ・Googleアナリティクス開発者サービス SDKを選択し、アプリ名を入力

図6

業種とタイムゾーンを選択し、[トラッキングIDを取得]をクリック

図7

アナリティクス設定のプロパティ項目、[トラッキングコード]をクリック

図2

トラッキングIDをコピー

図13

コピーしたIDをトラッキングするcocosプロジェクトのResources内にあるsdkbox_config.jsonにペーストします

図17

・Google Developer Console と Google Analyticsのリンク

アナリティクス設定のプロパティ項目[すべてのサービス]をクリック

図1

Google Playの[リンク設定の変更]をクリック

図4

[新しいPLAYリンク]をクリック

図9

リンクするアプリを選択し、[続行]をクリック

図8

[リンクを有効化]をクリック

図5

[完了]をクリック

図3

これでGoogle Developer Console と Google Analyticsの紐付けが完了します

・ソースコードにGoogle Analyticsのセッションを開始する記述とログを送信する記述を埋め込む

AppDelegate.cppで”PluginGoogleAnalytics.h”をインクルードする
(SDKBOX対象ターゲットでのみ読み込む為に#ifdef SDKBOX_ENABLEDしておくことをお勧めします)

図18

アプリ起動時に実行される関数applicationDidFinishLaunching()でGoogle Analyticsの初期化をします

図19

ログを送信したい箇所があるcppでも”PluginGoogleAnalytics.h”をインクルードする

図20

シーンの初期化関数でシーンのログを送信することで、どのシーンでユーザが離脱しているかなどの統計が取れます

図21

ゲームクリアや項目の達成でイベントのログを送信することで、どのような項目をクリアや達成しているかの統計を取ることができます

図22

シーンやイベントのログの統計を取ることで、ユーザがアプリをどのような使い方をしているか知ることができます。

[輪講]GUIでプロジェクトの作成が可能なcocosの紹介

GUIでプロジェクトを作成でき、Cocos Storeからアセットのダウンロードが可能なcocos(正式名称)を紹介します。

・インストール方法
Visual Studio 2015を起動して、新しいプロジェクトからcocosをインストールを選択

図1

このような表示が出たらインストールをクリックします。

図2

次へをクリックします。

図3

しばらくするとインストールが終了します。
インストールが終了したら、デスクトップからcocosを起動し、Cocos StoreからCocos Frameworkをダウンロードします。

図7

Cocos Frameworkのダウンロードが終了したら、DownloadsのDownloadedタブからCocos Frameworkのinstallをクリックしインストールします。

図8

Cocos Frameworkのインストールが終わったら、プロジェクトのnew Projectをクリックしてプロジェクトを作ります。

図5

デフォルトのプロジェクトとさまざまなデモのプロジェクトを作成することが出来ます。

図6

画面の向きや開発言語を選択し、Finishをクリックします。

図9

プロジェクトが作成されるとCocos Studioが起動します。(スクリーンショット撮り忘れました。。。)

画面構成がCocos Studio、その他のコーディングは従来通りIDEを使用することで、効率良く開発ができると思います。

Cocos Studioから実行したプロジェクトファイルは画面のキャプチャやスクリーンショットが撮れるので、PV制作の際には役に立つと思います。

図12

※この手順でインストールされるcocosはver2.3.3で最新β版のver3.10ではありません(2016年6月2日現在)
アップデート通知が表示されることがありますが、ver3.10βはCocos Storeなどがありませんので、アップデートしないことをお勧めします。

輪講-Live2dについて

ゲーム使用される動くイラスト技術は大体三つが主に使われる

「Live2d」、「E-mote」、「MotionPortrait

図1

図2index_il001

それぞれ対応するプラットフォーム

Live2d:

Unity OpenGL(Cocos2d-x) iOS Android PSP PS Vita DirectX Flash WebGL PS3 PS4 3DS Java 遊技機

E-mote:

DirectX Windows 吉里吉里2/KAG3 iOS Android Unity (iOS/Android) Cocos2d-x

上記以外のコンシューマー用SDKもあるらしい

MotionPortrait:

Android iOS MacOS Windows Flash Unity

 

それぞれの優れてるどころ

Live2dはパーツを細かくすることで繊細かつリアルな動きができる、その反面デザイナさんへの負担が多きい

E-moteはパーツわけがわずか8種類で、作業効率が早い

 

図1cocos2dxでの実装

1.Cocos2dxのプロジェクトを準備する、先にコンパイルしといた方がいい

2.Live2d CubismSDKをダウンロード。ファイルを解凍して、以下のフォルダ構成になる

図6

3.ファイルを自分のプロジェクトに移す。libincludeを自分のプロジェクト直下に入れる。次はsample_cocos2dx3.5/Simple/ClassesResourcesを自分のプロジェクト直下に入れて上書きする!

 

4.プロジェクトの設定を行う。Cocosのプロジェクトを開いて、プロジェクトのプロパティを開いて、C/C++の中の追加インクルードディレクトリに、さっきのlibincludeのパスを追加する。

図1

5.次はC/C++の中のプリプロセッサの定義にL2D_TARGET_WIN_GLを追加する

図2

6.エラーを消す、サンプルにコードを追加する

SampleLive2DSprite.h先頭に↓のコードを追加する図3

AppDelegate.cpp先頭に下のコードを追加する

図4

ここまでやると!

図5