cocos2d-x andoroidエミュレータのエラー回避

RC0で一度動いたーと思って、その後RC1環境にしてみて、それがだめだったので、やっぱりとRC0環境に戻してといろいろやってたらRC0自体もandroidエミュレータで実行できなくなってしまったので、どうしたものかと思ってたのですが、なんとかなったので、メモ。

起きていたエラーは以下のものでした。

dvmFindClassByName rejecting ‘org/cocos2dx/lib/Cocos2dxHelper’

です。
何が起きてるのかと思ったのですが、ライブラリ側がうまく連結されて無くてそちらを参照できないために動作してなかったみたいです。
で、このフォーラムのやりとりを見て対応。ライブラリ側のjavaファイルをコピーしてアプリのプロジェクトに追加するという力技でした。

というわけで、
HAXMのエミュレータでも、実機でも動くようになりました。

本来ならlibcocos2dxのプロジェクトをインポートしているので、そっちが参照されてうまいこといくはずなんだろうなーと思いつつ、それがうまくいかない場合は直接コピーして対処するしかないのかなーという印象です。

cocos2d-x ver3.0 RC0, RC1の環境構築メモ

cocos2d-x ver3.0 RC0, RC1の環境構築をしてみたので、そのメモをしておきます。あとでもう１回やることになっても思い出せるように。ビルドターゲットはiOSとAndroidが動くようにという感じでやりました。
結論から言うと、RC1はAndroidエミュレータで落ちるのでまだ使わないほうが良いみたいですね。RC0は大丈夫です。

さて、
まず最初にcocos2d-xの公式サイトから最新のパッケージをダウンロードします。（最初RC0しか無かったので、それでやりましたけど、その後RC1が公開されましたので、再度ダウンロードしました）

次にAndroid用の環境の用意で、いろいろ見つかるブログを参考にセットアップを行いました。こことか。

NDKのセットアップ（下記のを使いました）
https://dl.google.com/android/ndk/android-ndk-r9d-darwin-x86_64.tar.bz2

AndroidSDKのセットアップ（下記のを使いました）
これはSDKとEclipseがセットになってます。
https://dl.google.com/android/adt/22.6.2/adt-bundle-mac-x86_64-20140321.zip

上記のを解凍した場所をcocos2d-xのセットアップの際に設定する必要があります。
cocos2d-xを解凍した場所で、./setup.pyを実行し、上記のSDK等のパスを設定します。
これで必要な環境変数が設定されます。（shellを立ち上げ直すと環境変数がセットされた状態でshellが起動します）

これで一旦完了。

cocosコマンドを使ってプロジェクトが作成できます。
こちらを参考に。作ってみます。

cocos new SampleProj -p com.xionchannel.sample -l cpp -d ~/Documents
みたいな感じにするとHello Worldのプロジェクトが作られます。
共通ソース部分と各環境別にフォルダ分けされて置かれてます。

proj.ios_macの中にはXcodeのプロジェクトがあります。
開いてビルドするとワーニングは多数出ますが問題なく動きます。

proj.androidにはAndroid向けの環境があります。
ビルドするにはbuild_native.pyを実行すればできます。
Eclipseで実行確認するには多少手順が必要で、こちらの設定の説明が有用でした。
とはいえ、結局RC1ではAndroidのエミュレータでの起動直後に落ちてしまってどうにもならない感じで、本家のフォーラムでも落ちるって話題になってました。今のところ対処方法無いっぽい。実機だと大丈夫なのかな？試してないのでわからないっす。
RC0では動きます。
さて、Androidのエミュレータは起動が遅くて、動作も遅くて確認が大変なので、x86の高速エミュレータ(HAXM)を使ったほうが確認が楽です。それを設定してみました。
このブログを参考にインストールします。
ただ、OSがMarvericksになっている場合は、この高速エミュレータがOSを巻き込んで落ちてしまうので、このブログの対応が必要になります。要するに修正バージョンを入れないとだめってことですね。
さらに、Android側のmakeファイルを修正して、x86向けのコンパイル模するようにしないといけません。これが参考になります。

APP_ABI := armeabi armeabi-v7a x86

みたいな感じです。
これで高速動作するエミュレータでらくらく確認できるって感じみたいです。

とりあえず以上です。RC1早く治ってほしいですね。
さて、RC0に戻さなくちゃな。

さいたま勉強会 vol7 エフェクトの作り方

　4/28にさいたま勉強会に参加してきました。今回は「エフェクトの作り方」として手描きアニメーションによるエフェクト作成の基礎みたいなものを発表させてもらいました。参加者はプログラマばかりなのであまり目に触れる機会のないものだったかと思いますが、単純に見て楽しい内容に映ったようなので良かったかなと思います。

　さいたま勉強会はどんな内容でも発表して良いよというものなので、何が発表されるか毎回ドキドキなのですが、今回もかなりバリエーションに富んだ内容でした。
　今回のおしながきは以下のとおり。

・@dsgarageさん　Arduino×Unity
　ArduinoをUnityからコントロールしようというお話。シリアル通信で制御可能なはずとのことですが、一からコードを作るのがなかなか困難とのことで、uniduinoというアセット（$30）の紹介とともに制御の方法について解説しておりました。Arduino Esploraというゲームパッド型のArduinoがあるそうで、それも気になります。

・@k_katsumiさん　SECoreTextView
　SECoreTextViewという岸川さんの自作ライブラリの紹介。URLやTwitterのユーザー名、ハッシュタグ、画像などが含まれたリッチテキストの表示を簡易に行うためのライブラリです。かなり応用範囲が広そうな便利なものと感じました。また発表ではどうやって実装しているかの細かい話まで聞けてものすごく濃かったです。

・@ajinotataki（私です）　エフェクトの作り方
　ゲームにおけるエフェクトはどういうものがあって、どうやって作られているかを軽くおさらいした後に手描きエフェクトの基礎の紹介。その後はリクエストに従って手描きをライブでやりました。細かくは後述します。

・@akisutesamaさん　Parseでガチャ回すお
　Parseという簡易サーバーサービスを使っていわゆるガチャをどうやるかについてを例に使用方法を紹介。データベースとしては設計を先にしなくてもデータ優先で作っても自動的にサーバーができていく点は良い。しかしサーバー側で実行するコードがJSでデバッグがしづらいなど、そちらの面は難ありとのこと。小規模開発やプロトタイプで使用する分にはいいのではとのことでした。

・@yoichinejiさん　Logic Proの活用と耳コピについて
　Logic Proを買ったもののどう使って良いかという状況に光を当てる発表。耳コピについてはWaveToneというアプリが非常に便利そうでした。

　さて、エフェクトの発表についてですが、当日のスライドはこちら。PDFはこちら。

　で、手描きの基礎に入るわけなのですが、以下の2つがわかればなんとかなるかなと思って紹介しました。
　１つは、「移動の錯覚」で、以下のような点の後に線が表示されることで点が移動して見えるというもの。

　それをディテールを整えると以下のようになります。

　もう1つは「送り」で自然現象は繰り返し出てくるパターンが移動していくように見えることが多いのですが、それを意識して絵を描くということ。

　こんなのも「送り」に含まれると思います。

　で、ディテールを整えると、以下のようになります。

　という感じに紹介しました。
　その後は会場のみなさんにリクエストを貰ってその場で描きました。

　以下のは電撃での攻撃。パズドラみたいに手前から奥に攻撃するイメージ。
 これ描いてる時の録画を岸川さんがやってくれたのですが。それはこちら。

　以下のは水属性の攻撃。これも同様に手前から奥に攻撃するイメージ。

　以下のは召喚的なイメージ。何かが現れた感じですね。
これ描いてるのを、これまた岸川さんに録画していただいたのですが、それはこちら。

　以上でした。
　ここで紹介したアニメ素材については自由にしてもらって構いません。
　ではではー。

　あ、当日のツイートまとめはこちら。

ライトマップのシェーダーをMac, iOSで両立するには

　先日の記事でライトマップを別シーンで使うために、自前のライトマップシェーダーを用意して行うようにしてましたが、いざそれをiOSへ持っていくとそのままだと問題がでることがわかりました。
　ま、絵が出ないってことなんですけどね。
　Unity標準のライトマップシェーダーもそうなっているそうですが、LightModeの設定にライトマップ方式がいくつかあるのには理由があるらしく、環境によって有効な設定が違うようです。LightMode=VertexLMRGBMはMacならばOKですが、iOSでは何も出ません。逆にLightMode=VertexLMの場合はiOSはOKですが、Macでは何も出ません。という感じです。

　てなわけで、どうするか。
　UnityのShaderLabにはSubShaderというタグがありまして、それを使うと有効なシェーダーが実行時に選ばれるというものがあります。これを使えばいいんじゃない？とすると、以下のようになります。

SubShader {
　　Tag { "LightMode" = "VertexLMRGBM" }
}
SubShader {
　　Tag { "LightMode" = "VertexLM" }
}

　ところがこれではダメで、LightModeでどうなっててもどうやらSubShaderレベルでは有効なシェーダーとして判別されてしまうようです。なので、やるなら以下のように１つのSubShaderの中に２つをいれてしまいます。

SubShader {
　　Pass {
　　　　Tag { "LightMode" = "VertexLMRGBM" }
　　}
　　Pass {
　　　　Tag { "LightMode" = "VertexLM" }
　　}
}

　こうすると片方は何も描画しないのでうまくいくようです。たしかに実際にうまく表示できました。使わない方のPassのオーバーヘッドが無いのかどうかについては調べきれてないです。GLSL化された後のコードを見れば分かるとは思うんですけどね。

参考１：Alpha-VertexLit.shader
http://dorumon.googlecode.com/svn/trunk/pwars/Assets/Standard%20Assets/DefaultResources/Alpha-VertexLit.shader
参考２：Multiple target platform lightmap shader
http://forum.unity3d.com/threads/75487-Multiple-target-platform-lightmap-shader

Unityのライトマップを別のシーンで使う

　Unityではライトマップはシーンデータに固定されて、他のシーンで使用することが出来ないというのが仕様ですが、他で使用するための方法を考案しました。最初は適当にライトマップを貼れるシェーダー書けばいいんでしょって思ってましたが、どのあたりに制約があるのかわかりました。

　てなわけで、まずはモデルへの焼付けを行います。通常通りモデルやライトをstaticにしてLightmapウィンドウにて焼き付けます。今回はキャラにトップライトを設定して、主にオクルージョンの焼付けをメインにしたような調整で行いました。こうするとある程度キャラに動きが入ってもそこそこ見た目が破綻しないので。

　こんなかんじになります。わかりにくいですが、エプロンの下に影が落ちています。トップライトの影とオクルージョンが入っている感じです。エプロンを腰の後ろで縛っている部分にもオクルージョンが入っていますね。
　試しにこれで動かしてみたら、以下のようになります。（なんか色が違ってますけど、細かいことは気にしないでください。テストレンダリングなので微妙に設定違いだったりするからです）

　で、これを別のシーンにもっていくわけですが、普通だとunity_LightmapSTという値がシーンで管理されているために、正しい描画結果になりません。ライトマップがずれて表示されたりします。このunity_LightmapSTっていう値はどこにどう設定されているのかということですが、LightmapウィンドウのObjectタブを見ると焼き付け後には値が入っていることが分かります。

　下の方にある、Tiling X, Tiling Y, Offset X, Offset Yがそれです。このそれぞれの値がunity_LightmapST.xyzwに入るようにUnityのシステムからシェーダー側へuniform変数として受け渡されます。これを元にシェーダー側ではUV2のスケーリングとオフセットを行なってズレを修正するので、ライトマップが正しく貼れることになります。
　さて、では自前のシェーダーでライトマップ用UV2のズレを修正するには上記の値を何らかの状態で保持しておいてシェーダーに伝達すればいいので、マテリアルのプロパティとして値を追加して持って行く事にしました。以下の用に設定します。（注、自前シェーダーのプロパティなので、普通のシェーダーにはありません）

　ちょっと図が細かいですけど、先ほどの値をマテリアルのLightmapSTのVectorへセットしてあります。ちなみにシェーダーコードは以下の様な感じです。HalfLambert + Lightmap + Ambientにしてあります。

　描画結果はどうなるかというと、以下の様な感じです。ライトマップ焼付けが白のトップライトだったのですが、下の図では横からの赤いライティングでベースに緑が入っているのがわかります。横からの赤いライトがDirectionalLightでHalfLambertになってます。ベースの緑はAmbientですね。ライトマップの影響はほんのりと分かる感じになってます。

　シェーダーコードのことで注意ですが、LightModeはVertexLMRGBMを選択しないと正しくライティングできません。LMRGBMじゃないとライトマップのデコードが出来ないみたいです。とはいってもシェーダーコードの中では特にライトマップとして扱ってるわけでもないんですけどね。謎です。なお、今回はライトマップを１枚で焼き付けましたけど、Dualの場合にはVertexLMを選択することになるみたいです。細かいことは以下を参考に。
　http://docs.unity3d.com/Documentation/Components/SL-PassTags.html

　とはいえ、unity_LightmapSTに縛られたくない場合には、他の方法も考えられます。
　１，ライトマップの焼付けを3dsmaxやSoftimageなどのDCCツール側で行う。UV2も自前で展開してね。
　２，Unityでライトマップ焼付けた後にunity_LightmapSTの補正をスクリプトで計算して、UV2へ書き戻してしまう。これならunity_LightmapSTの値がシーン違いで失われても問題ありません。マテリアルもモデル毎に増えないしいいかもしれない。
　以上です。

さいたま開発勉強会４回目で発表しました。シェーダーについてGLSL, cocos2d, UnityのShaderLabまで

６月３０日に久しぶりにさいたま開発勉強会が行われましたので、蕨の商工会議所まで行って来ました。遅刻遅刻〜ってタクシーで急いで会場まで乗り付けたんですけど、どうやら会場があいて無くて入れない様子。会場代払ってるのに管理者が来なかったみたいです。なんということ！
急遽隣の区民会館に部屋を借りて勉強会を行うことになりました。プロジェクターが無くてスライド共有に苦労しましたけど結果的にはうまくいってよかったです。

さて、当日の発表内容は以下のとおり。

・@ajinotataki：シェーダーしよっ☆ GLSL, cocos2d, UnityのShaderLab
　スライド：http://www.slideshare.net/xionchannel/lets-play-shaders
　サンプルコード：http://xionchannel.no-ip.org/cocos2d_shaderTest.zip

・@tmokitaさん：iPhone開発 超超初心者Tips50 (寝たければ寝てね！)
　スライド：http://www.slideshare.net/tmokita/saitama-beginner-tips50

・@f_megmeg5さん：Androidクラスタの私がcocos2d-xでマルチディスプレイ対応してみた
　スライド：http://www.slideshare.net/megmegfive/vol4-13446073

・@shun_nakaharaさん：iOSのGCDについて
　スライド：http://www.slideshare.net/shunnakahara/gcd-13499796


・@nun_さん：１０時間で！無料で！アプリプロモーション
　スライド：http://www.slideshare.net/AsamiNagasaki/10-13490251

・@yoichinejiさん：cocos2d-x + ○○でどうにかしてこれしたい
　スライド：なし、tweetで発表でした。

私は、先週のcocos2d勉強会に続き、シェーダーを掘り下げた内容の発表を行いました。

おおまかな流れとしては、

・シェーダーとは何か、概念的な説明

・シェーダーを使って何ができるかの実例

・OpenGLESでのシェーダーを使うための流れ

・それを踏まえてcocos2dでシェーダー使用の流れ

・cocos2dでオリジナルシェーダーを使うための改造ポイント

・cocos2dでのシェーダーデモ

・Unityでシェーダーを使うために

・ShaderLabの基本的な説明

・VertexShader, FragmentShaderを内包する場合の例

・SurfaceShaderを使う場合の例

という感じです。

前の発表会ではそもそもシェーダーに対しての事前知識が無い受講者に対していきなりコア部分の話をしてしまってよくわからないという事態を引き起こしてしまったので、反省して、今回はシェーダーとは何かという部分にページを割いて概念としての説明を丁寧にやってみたつもりです。

他の発表者さんでは@tmokitaさんの発表内容が良かったです。１問１答形式でTIPSをバンバン紹介していく感じで、あまり知られていない内容のものもちょこちょこあり非常に為になりました。

@nun_さんの発表は時間の都合で割愛されてしまったようで残念でした。

で、我らが@yoichinejiさんのネタですけど、今回はプロジェクターが無いことでいつものようにネタを展開することができなかったようで、ネタバレにならないようにtweetを駆使してやる感じでしたね。

開発言語がC++であるということが共通項となるので、Kinect + cocos2d-xというのを組んでみたという発表でした。まだ未完成ではあるそうですけど、Kinect関連で画面描画するのはなかなかとっつきにくいらしいので、cocos2d-xを使用出来ればいいんじゃないかとのことです。

以上でした。

cocos2d勉強会２回目で発表しました

今日はcocos2d勉強会２回目がGREEさんの会場にて行われました。そこで、cocos2d（ver2.0系列）でオリジナルシェーダーを使うための方法について発表したので、以下に資料とか置いておきます。

●スライドはこちら
●サンプルソースはこちら

内容としては以下の様な感じです
・シェーダーとは何か
・OpenGLでのシェーダーを使うための基本的な流れの紹介
・それを踏まえてcocos2dではどの部分を修正すれば良いかを紹介
・実際のデモ
という感じでやりました。
twitterの発言の様子を後から見るとついてこれなかった方多数のようでしたので、申し訳ないです。先にデモをしたほうが良かったのでは？とおっしゃってくれた方もいらっしゃいました。

来週末のさいたま勉強会vol4でも同じ内容を多少詳しくしたものと、Unityでのシェーダーの記述方法について発表しますので、質問がある方はそちらに来てもらえると良いかと思います。また、twitterやメールでもご連絡いただければ答えさせて頂きます。

とはいえ確かにシェーダーを記述したり利用するのはハードルが高いし、そもそもcocos2dのような2Dライブラリで本当に必要なのかといえば、まず必要にならないので技術デモのような感じだったかと思います。逆にUnityではシェーダーは無くてはならない要素だったりするのでそちらの方が親和性が高いかもしれないなと思った次第です。

他の方の発表は以下のとおりでした。
・@Seasonsさんがこれまでのcocos2dの流れや海外の様子の紹介

・Walzer WangさんがSkypeを使用してのcocos2d-xの紹介

・@torotitiさんがOpenOfficeをレベルエディタとして使用してcocos2dで絵本を作ったという事例紹介

・@splhackさんがOpenfeintをアップグレードするとGREEになるよという話

OpenOfficeをレベルエディタに使用した話は非常に興味深かったです。OpenOfficeの保存ファイルはxmlと画像リソース等をzipで固めた形式なので、Rubyで展開してパースするのに便利だったということで、コンバートしたデータをcocos2dで再生するように環境を整えたとのことです。これは何かに使えそう！

そういやPSSSDKは地雷という話を懇親会で聞きました。まあiOSが並行開発出来ない時点でフレームワークとしてどうなのよと言われたら言い返せませんよね。

短かったですが、なかなか興味深い勉強会でした。

ではまたー。