!!!独り言日記 !!システム開発(2014/06/24) 自身のサイトで覚書で書いてる情報は、もう数年前のやつで 今試したら古すぎて実行すらできないのも多々ありますねぇ。 訳あってこのあたりも再度勉強中なので、近々更新するようにします。 !![Unity] 続・Mecanim(2014/06/22) bugAnimCtrlというAnimator Controllerにidle/walk/flyの各Animation Clipを割り当て、 それぞれに対してidle/walk/flyというTriggerで状態遷移できるように指定。 シーンにMeshとボーン情報を持つ(ここではbug_idle)モデルを配置し、Animatorに作成したAnimator Controller(ここではbugAnimCtrl)を割り当て、としたのが前回の日記までの流れ。 ここに「bugAnimScript.cs」というスクリプトを割り当てます。 using UnityEngine; using System.Collections; public class bugAnimScript : MonoBehaviour { // Use this for initialization void Start () { } // Update is called once per frame void Update () { } void OnGUI () { if (GUILayout.Button("Idle")) { Animator animator = this.gameObject.GetComponent(); animator.SetTrigger("idle"); } if (GUILayout.Button("Walk")) { Animator animator = this.gameObject.GetComponent(); animator.SetTrigger("walk"); } if (GUILayout.Button("Fly")) { Animator animator = this.gameObject.GetComponent(); animator.SetTrigger("fly"); } } } GUI部品として、「Idle」「Walk」「Fly」というボタンを配置し、それぞれが押された場合に Animator animator = this.gameObject.GetComponent(); animator.SetTrigger("idle"); のようにAnimatorを取得して、それに対してSetTriggerでTriggerを指定してます。 これで実行し、ボタンが押されるとアニメーションを切り替えることができます。 {{ref_image unity_mecanim_20140622.png}} 後は、スクリプト内でゲームの行動のためのアニメーションを切り替える、とかはすぐできそうですね。 walkのアニメーションの歩く処理で前進してないですが、 これは「gameObject.transform.localPosition」の位置を変更していくとOK。 Animator では、Triggerによる切り替え以外でもfloat/int/boolの指定が可能なので他にもいろいろ表現できそうではあります。 !アニメーションしない場合がある? また、ごくごくまれにですがUnity 4.3/4.5ともに、Androidにこれらをapkで出したところ、 一切アニメーションをしない場合がありました。一度アニメーションしなければずっとなので、ビルドによる? この場合は、Unity Editor上で一度アニメーションのプレビューを再生し、再度apkを出力すると正しく動作する確率が上がる気がします。 でも、何かの拍子でアニメーションしない場合あり。 今のところ原因不明。 次回は原点に戻ってアニメーションの基礎的なこと、 idle状態の動きや6足以上の昆虫の歩行についてを予定してます。 !![Unity] [Shade 3D] Mecanim(2014/06/18-19) ずいぶん時間が空きましたが、カミキリムシにモーションをつけてUnityに渡す、の手順です。 Unityでは「Mecanim」という仕組みでアニメーションさせましょう。 ! [Shade 3D側] Shade 3D上でモーションをつける Shade 3D Ver 14.1.2で確認しました。 行動としては、 *idle (待ち状態) *walk (歩行) *fly (飛んだ状態) の3つをShade 3Dでモーション作成します。 それぞれを別ファイルにして「bug_idle.shd」「bug_walk.shd」「bug_fly.shd」で保存しました。 以下のようなアニメーション。 {{h264player http://ft-lab.ne.jp/files/movie/anim_test_01_20140618.mp4,width=640,height=480}} ※ 分かりやすいように床を配置してますが、これはfbxにエクスポートする際は不要です。 このときに *同一のポリゴンメッシュを使う *同一のボーンの組み合わせを使用する *同一のスキン割り当てを行っていること を守るようにします。モデリング〜ボーン配置〜スキニングまでを完了させたものをshdファイル保存して、idle/walk/flgのファイルとして別々に保存しておけばOKそうですね。 すべてループで動きがつながるようにしてます。 モーションウィンドウで、0フレーム目のキーフレーム(すべてのボーンの情報を記録すること)を 最終フレームにコピー&ペーストしておきます。 こうすることで、ループ再生時にスムーズに動きがつながります。 {{ref_image shade_anim_00_20140618.png}} なお、idle/walk/flyのそれぞれに移行する際の動きについてはここでは考慮しなくてOKです。 Unity側のMecanimでうまいこと補間してくれますので。 ! [Shade 3D側] fbx出力 Shade 3Dでfbxで出力します。 このときに標準の出力オプションからの変更として、 *ジオメトリタブの「面の頂点法線を出力」をOnにする *表面材質タブの「イメージをfbxファイルに埋め込み」をOffにする *アニメーションタブの出力を「キーフレームのみ」にする としました。 「面の頂点法線を出力」については、Unity側で法線を再計算させてもよいのですが、できるだけShade 3D上の設定をそのまま生かしたいのでOnにしてます。 「イメージをfbxファイルに埋め込み」をOffにする理由。 これは、UnityやFBX SDKを使うツールは、fbxファイルを開く際に「fbm」という拡張子のテクスチャを展開するフォルダを作成し、その中に埋め込みテクスチャを展開します。 Unityの場合は環境を移行する際(Win <==> Macを行き来する場合があるなど、共同開発時もかな?)にreimportが発生して、このfbmのフォルダを再作成するためエディタ上の読み込み速度が低下します。 数十のfbxファイルがある場合など、これだけのために結構待たされてしまいます。 自身の経験ですが、'''MaterialとTextureの割り当てはUnity側で全部行う'''としたほうが効率がいいかなと思います。 fbxでテクスチャを外部参照させる形だと、Unity側はテクスチャを読み込みませんので、Shade 3Dでfbxを出力する際はイメージを埋め込まないように指定しておきます。 Materialに関しては、Unity側で読み込まれます(テクスチャのない状態で)。 この後、Textureは手動でUnityにインポートして該当Materialに割り当ててあげるとよいかと思います。 「キーフレームのみ」は、そんなにモーションのカーブにこだわらなければこれでOK。 動きが怪しい場合は1ステップごとに出力するとよいかと思います。 ボーンの変換行列で回転(0, 0, 0)、スケール(1, 1, 1)となるように心がけていれば、これはほとんど「キーフレームのみ」でOKかと。 bug_idle.fbx/bug_walk.fbx/bug_fly.fbxという3つのファイルを出力するとしました。 ! [Shade 3D側] fbx出力の際に同一データは極力省きたい 作成した3つのfbxファイルでは、 *形状のジオメトリ(ポリゴンメッシュ)とスキン情報 *ボーン構成 は同じであります。アニメーションデータを出力する場合には、ボーン自身は名前と階層構造で関連付けられるため、これはいずれのファイルでも必要。 ただ、ポリゴンメッシュは1つだけUnityに渡すことができれば後は不要です。 そこで ,fbxファイル,ポリゴンメッシュ,ボーン,モーション情報 ,bug_idle.fbx,出力,出力,出力 ,bug_walk.fbx,-,出力,出力 ,bug_fly.fbx,-,出力,出力 のように、walk/flyについてはfbx出力前にポリゴンメッシュを削除して、ボーンとモーションだけをfbxに出力するようにしました。 ! [Unity側] Unityにfbxを読み込み Unityでは、アニメーションの「待ち状態」「歩く」「走る」「ジャンプする」などの最小の動きを「Animation Clip」と呼んでいます。 これらのAnimation Clipを順番に組み合わせて再生することでキャラクタに動きをつける仕組みが「Mecanim」になります。 Shade 3Dで作成したfbxは、このAnimation Clip単位で出力したことになりますね。 1つのfbxに複数の動きを1タイムラインで与えて、Unity上で複数のAnimation Clipに 分離することも可能です。 このへんは試したことがないので割愛。 プロジェクトウィンドウに「bug_idle.fbx」「bug_walk.fbx」「bug_fly.fbx」をドラッグしてインポートします。 {{ref_image unity_anim_00_20140618.png}} サムネイルでは、idleに関してはメッシュデータも入れているのでそれが表示されますが、walk/flyについてはモーション情報だけなのでサムネイルに画像が出てません。 ! [Unity側] 各アニメーションのプレビュー 各アイコンの中央右に三角の記号があるのでそれをクリックすると、内包されているデータが列挙されます。ここではidleを見てみましょう。 このうち、三角の再生ボタンのアイコンがあるのがAnimation Clipデータです。 {{ref_image unity_anim_02_20140618.png}} これを選択して、Inspectorウィンドウの下を見るとモーションが再生できるかと思います。 {{ref_image unity_anim_03_20140618.png}} walk/flyのモーションの場合は、fbx自身にメッシュデータを入れていないのでプレビューでは何も表示されません。 idleのメッシュ情報のあるものをプレビュー部にドラッグすることでモーション再生できるようになります。 {{ref_image unity_anim_04_20140618.png}} では、この3つのAnimation Clipを元にフラグで動きを切り替えるようにしてみましょう。 ! [Unity側] Animation Clipをループ再生できるように指定 idle/walk/flyのInspectorウィンドウで、Animationsタブを選択。 「Loop Time」をOnにしてApplyボタンで適用させます。 {{ref_image unity_anim_05_20140618.png}} これで、各Animation Clipはループ再生となります。 ループで再生したくない場合はLoop TimeをOffにします。 ! [Unity側] Animator Controllerの作成 Projectウィンドウを右クリックし、「Create」-「Animator Controller」を選択。 これは、複数のAnimation Clipを状態遷移するものになります。 {{ref_image unity_anim_00_20140618.png}} シーンビューに「Animator」というタブがあり、最後に選択したAnimator Controllerがここに表示されます。 ! [Unity側] Animator ControllerにAnimation Clipを配置 プロジェクトより編集したいAnimator Controllerのアイコンを選択し、 Unity Editor中央上のScene/Game/Animatorのタブのうち、Animatorを開きます。 プロジェクトより、Animator ControllerのアイコンをドラッグしてAnimatorウィンドウにドラッグ。 {{ref_image unity_anim_06_20140619.png}} これで、各Animation Clipが配置されます。位置はどこでもいいです。 オレンジ色のものが、このアニメーションを開始したときにデフォルトで再生されるAnimation Clipになります。 マウス右クリックでのメニューにて「Set As Default」を選択するとデフォルトを変更できます。 {{ref_image unity_anim_07_20140619.png}} ! [Unity側] Triggerの指定 動きのストーリー(状態遷移)ですが、ここではデフォルトでidle、 何かアクションがあったらwalkでの歩行処理、別のアクションがあったらflyで飛ぶ処理、とするようにしましょう。 idle/walk/flyのそれぞれにトリガーが割り当てられており、どれか1つのアクションを行う、とします。 Animatorウィンドウの左下に「Parameters」というのがあります。 ここの「+」を押して表示されるメニューから「Trigger」を選択、名前をidleとします。 同じように、walk/flyを追加。 {{ref_image unity_anim_08_20140619.png}} この段階では、まだ各トリガーとAnimation Clipは連動してません。 ! [Unity側] 状態遷移 idleのAnimation Clipを選択し、右クリックメニューで「Make Transition」を選択。 idleからflyにマウスドラッグします。 すると、矢印が表示されます。 {{ref_image unity_anim_09_20140619.png}} ここではidle/walk/flyそれぞれに移行できるようにするため、すべてに矢印を設けます。 {{ref_image unity_anim_10_20140619.png}} ! [Unity側] 状態遷移にTriggerを関連付け ここでは6本の矢印を設けました。 それぞれの矢印を選択し、これにTriggerを割り当てていきます。 例として、idle → walk。この矢印部分を選択してください。 Inspectorウィンドウの一番下、Conditionsで「walk」を選択します。 これは、Triggerとしてwalkが選択された場合に状態を移行する/遷移させる、という意味合いになります。 {{ref_image unity_anim_11_20140619.png}} 同様に以下も割り当てていきます。 *walk → idle (Triggerがidleの場合に移行) *idle → fly (Triggerがflyの場合に移行) *fly → idle (Triggerがidleの場合に移行) *walk → fly (Triggerがflyの場合に移行) *fly → walk (Triggerがwalkの場合に移行) ! [Unity側] シーンにGameObjectを配置し、Animator Controllerを割り当て カミキリムシのメッシュを含む形状をシーンにGameObjectとして配置します。 ここでは、fbxのうちMesh情報を入れたidleのものをドラッグ。 GameObjectとしての名前は変更してOKです。 Inspectorウィンドウで、Animatorの「Controller」に先ほどTriggerや状態遷移を設定したAnimator Controllerを指定します。 {{ref_image unity_anim_12_20140619.png}} ここまでで設定は完了。 このGameObjectをPrefabとしてプロジェクトに保存しておくと(Projectウィンドウにドラッグする)後々流用できて便利です。 ! [Unity側] アニメーションの状態遷移の動作テスト Unity Editor上で、Game/SceneウィンドウとAnimatorウィンドウを並べて出します。 {{ref_image unity_anim_13_20140619.png}} 再生ボタンを押し、Animatorウィンドウ左下のParametersのチェックボックスをOn/Offします。 すると、idle/walk/flyのどれかをOnにすると、それに切り替わるのが分かります。 どれかがOnの場合は、明示的にそれ以外をOffにすること。 現在のTriggerを一度Offにしてから次に遷移するTriggerをOnにする。 もうちょっとうまいやり方があるかもしれません。 これを動画にしたのが以下になります。 {{h264player http://ft-lab.ne.jp/files/movie/unity_anim_movie_20140618.mp4,width=640,height=480}} 長くなったのでこれで一区切りして、次回でスクリプトからのアニメーション切り替えに進みます。 後、そもそもidle状態の動きや歩行アニメーションってどんなボーン移動を行えばよいのだろう、というのもあると思いますのでそれらは随時。 !!続続・SpeedTree(2014/06/08) 木のモデリングだけSpeedTreeで処理、 後はシーン自身(Terrain)をShade 3Dで作成して木をインポートしてレンダリング。 {{ref_image shade_speedTree_test_01_20140608.jpg}} {{ref_image shade_speedTree_test_02_20140608.jpg}} ポリゴンメッシュに木が絡みつく処理は、一度Shade 3Dで作成した壁や地面のポリゴンメッシュをfbxでSpeedTreeに渡し、SpeedTree上で木を巻きつけてます。 1つの木は5000〜8000三角形ほど。これくらいならPCのゲームでも十分な速度が出ますね。 Unityに持っていってウォークスルーしても問題なしでした。 リダクションはSpeedTree内でできるので、まだ最適化は可能ではありそうです。 !!KADAN Ver 1.0.2 申請中(2014/06/07) android用のカジュアルゲーム「KADAN」をVer 1.0.2にバージョンアップしました。 ただいまGooglePlayに申請中なのですぐに公開されるかと思います。 http://www.ft-lab.jp/KADAN/index.html GooglePlayにバージョンアップ申請すると、過去2回の経験で2時間〜5時間くらい見ておけばGooglePlayに更新が反映される感じです。 変更点は以下のとおりです。 *環境によって、たまに不安定になることがある問題を回避 (安全性の強化) *キャラクタのアニメーション周期の微調整。 *アイテム取得条件のバランス調整。少し緩和しました。 *木を切り倒す際のバランス調整。 *新アイテムの追加 (3つ追加)。 機能追加しながら、という結構ラフなリリースになりますが、次回以降は「思い立ったら即公開」と方針を変えてみようかと思います。 その前に、、、アプリ第二段を早めにリリースできるようにしようかな。 iOS版も早く出したほうがいいのですが、これはUnity ProのiOS版の購入がいりますのでちょっと手が出てなかったりします(^_^;; なお、Unityみたいなゲーム用エンジンですが、 CryEngineがSteamで9.9$/月で購入できるようになりましたね。 後、UDK(UnrealEngine)が19$/月。 iOSだと最近Appleで発表されたSwiftとか。モバイル2D向けだと、cocos2d-xとか無料で使えるのもちらほらあります。 開発ツール戦国時代に突入中、、、。こう見るとUnityが割高に思えますが、AssetStoreと大きなコミュニティーの安心感でなんとか。 でも、勢力図は今後変化していくのかなぁという気もします。 私はUnity大好きなもんで、ここは今のところ揺るがず、です。 !!続・SpeedTree(2014/06/05) ↓Mesh Forcesというので、指定のメッシュ(外部からfbxインポートしてもよい)に沿うように障害物判定してまとわりついた表現が可能。 {{ref_image speedtree_02_20140605.jpg}} なお、中心の木を大雑把に左奥に曲げてるのは「Magnet」を使用。 ↓トーラスのポリゴンメッシュをインポートし、これの表面に木を生やす。 {{ref_image speedtree_03_20140605.jpg}} Terrainへの対応やコケっぽい表現もできそう。 !!SpeedTree(2014/06/05) 2つ前の日記で、木のレンダリング画像を出したのは「SpeedTree」ってのを見せびらかしたいということで出してみました(^_^;; http://www.speedtree.com/ これは木生成専用のスタンドアロンアプリです。買ったのは「SpeedTree Architect」というもの。 オフラインレンダラ用のポリゴン数が多いものと、リアルタイム用のポリゴン数が少ないものを生成できます。 Architect版はアニメーション(ボーンが仕込まれるらしい)はできません。 葉の枚数が多くなった場合などやはりポリゴン数が増えるため、 ゲームやリアルタイムではFor Games版を勧められてますね。Unity版はUnity 5のリリースあたりで出るとのことです。 PCゲームでの使用ならArchitectで出力した木で問題なさそう。モバイルでの木の使用は、ポリゴン数が多くなりがちなので厳しい感じがしました。 for Unity版はfbxエクスポート機能とかあるのか不明ですが、自分としては 特にfor Unityでなくてもいいや、それよりも試してみたいってのがありましたので購入です。 ゼロからぱぱっと木を作ることができ、fbxやobj形式で出力できます。 ↓ねじれた木が絡みついているのを作ってみました。合計 15272 triangles。 {{ref_image speedtree_20140605.jpg}} ↓Shade 3Dに持っていってレンダリング。 {{ref_image shade_tree_01_20140605.jpg}} 木の葉はアルファで抜く処理をしてますので、fbxでShade 3Dにインポートした後、 表面材質のマッピングのイメージの下で「アルファ透明」を選択してあげる必要があります。 葉はGIレンダリングではなかなか表現が難しいですね。 上記の2枚目の画像は、葉の表面材質で *透明 0.1 *屈折 1.5 *荒さ 99.0 *マッピングでイメージ/トリムを追加し、リストの先頭に持ってくる **この際に拡散反射で指定した画像と同じものを選んで「グレイスケール(A)」を選択 **適用率を0.7くらいにする としてレンダリングしてみました。 少し透けた感じで、かつ、半透明にならないように「荒さ」でグンと散るようにしてみましたが、まだ葉特有の柔らかい感じが出ませんねぇ。Shader対応のGIレンダラならこのあたりも葉らしくできるのだろうか。 SpeedTreeは何ができる?というのはまだ試行錯誤中なので、こんなのができた、という画像は日記ネタにするようにします。 なお、Shade 3Dに持っていった後にボーンを仕込めば、木が風でゆれる表現などはできそうですね。 !!今週末にモバイルアプリ「KADAN」バージョンアップ予定(2014/06/05) http://www.ft-lab.jp/KADAN/index.html で展開しているandroidアプリ「KADAN」ですが、目処としては6/7〜8にバージョンアップできそうです。 今回は開発環境をUnity 4.5に移行しましたので、こちらの検証も行ってます。 バグ修正など行ったら即座に公開したほうがよいかなとは思いますが(Google Playだと数時間で申請が通りますし)、このあたりのバージョンアップ方針などは随時柔軟に変えながら対処していくようにします。 アプリ用の日記を別( http://ft-lab.sblo.jp/ )に分けてるので告知系関連はあえて独り言日記には書いてなかったのですが、一応ここにも書いておいたほうがいいかなと。 モバイルアプリの次回作は、あまり時間をかけずに開発中です。 次はPhoton Cloudを使用。でも、マルチプレイメインじゃなくて「マルチプレイで協力すると効率いいよ」的な立ち位置にしようかと。 しばらくは自身の勉強・試行錯誤もあるのでゲームアプリばかりになりますが、 ユーティリティー的なのも出しておきたいですね。 今年は、後2本はモバイルアプリ出すことができればなぁと思ってます。 !![Shade 3D] 木(2014/06/05) GIで木の葉の透けた感じの表現がなかなか難しい。 {{ref_image shade_tree_test_20140605.jpg}} !![Unity] Unity 4.5(2014/06/02) ここ数日Unity 4.5で開発してますが、Unity 4.3.4時にWin環境でUnity Editorを終了させるとたまにadb.exeが原因でフリーズしていた問題は起きなくなりました。 地味に気になっていた部分なので一安心。今のところ、これといって不都合は起きてないですねぇ。 !![Shade 3D] [Script] 続続・レンダリング結果の色調整 Ver 1.0.1(2014/06/01) 「レンダリング結果の色調整」 Ver 1.0.1にアップデートしました。 http://ft-lab.ne.jp/cgi-bin/wiki.cgi?page=Shade+Script *「レンダリング画像に反映」ボタンを押してイメージウィンドウのレンダリング画像を更新する際、ウィンドウを一度閉じて開かなくても画像が更新されるようにした。 *色調整後のプレビューのダイナミックレンジが考慮されていない問題を修正。 !![Shade 3D] [Script] 続・レンダリング結果の色調整(2014/06/01) 早速バグ見つけました(^_^;; プレビューでのダイナミックレンジがなくなっている予感。 ファイル保存ではOKですが、、原因追跡中。 後、レンダリング画像に反映する処理で、イメージウィンドウをわざわざ閉じて開かなくても更新できる方法を教えてもらいました。 すぐにアップデート予定です。 !![Shade 3D] [Script] レンダリング結果の色調整(2014/06/01) http://ft-lab.ne.jp/cgi-bin/wiki.cgi?page=Shade+Script にて「レンダリング結果の色調整」というスクリプトをアップしました。 Shade 3D Ver.14用です。 {{ref_image shade3d_color_correction_20140601.jpg}} ※ 後々、GitHubに移行させるかもしれません。まだ仮置き。 Shade 3D上でのPythonとwidgetsの自身の勉強向けのものですが、このスクリプトでShade Basicでも後から「ガンマ」「輝度(ゲイン)」を調整して、画像ファイルとして出力できるようになります。 Python/widgetsとしては、JavaScriptでShade 3D側とつなぐのですが JavaScriptを書くのが手間でしたので「AngularJS」というフレームワークを使ってます。 これについては「[[AngularJS]]」に、Pythonについては「[[Python]]」にプログラム情報などを記載していくことにします。 まだぜんぜん書ききれてません。 以下、プログラムの話題です。 widgetsはWebブラウザの見た目ですので、JavaScript/AngularJSで詰めていくと結構なことができそうではありました。 イメージとしては、見た目はWidgets(HTML/JavaScript/AngularJS)で行い、実際のShade 3Dとの連携はPythonで書いてつなぐ、という感じですね。 Shade 3Dのスクリプトリファレンスでは、textareaを使ったPythonコードの埋め込みをしてたのですが、html/JavaScript部とpythonコードを分離したかったので「XMLHttpRequest」を使ってみることにしました。 AngularJSで外部テキストファイルをテキストに読み込む機能がある気がするので、まだスマートではないですね、、、。 たぶん、今の実装ならIE 11以降が出た場合に動作しなくなる気がする、、、。