FC2ブログ
ヽ|∵|ゝ(Fantom) の 開発blog? ホーム »サンプル
このページの記事一覧

【Unity】VRM(VRoid)をライブステージで踊らせるアプリを作ってみた  


 VRM には Unity で動的にモデルをインポートできる「UniVRM」というオープンソースが公開されているので、そのサンプルビューワと「ユニティちゃんライブステージ!」プロジェクト(オープンソース)を組み合わせて、VRMVRoid)を動的に読み込んでダンスさせるアプリを作ってみた。一応、音楽も BVHモーションファイルも動的に読み込めるので、やろうと思えば自由な曲でダンスもできるかも知れない。

 アプリは当初、プラグイン利用の実験も兼ねて、Android で作っていたのだが、そもそも VRMVRoid)自体の利用が PC 中心(主に VRChat や バーチャルキャスト)であろうと考えて、急遽 PC でも見れるように Windows版 もビルドしてみた(Mac は持ってないのでスマン(笑))。

 現在ベータ版として、色々な機能を試験的に導入中という感じだが、ただダウンロードした VRM または、自分で作った VRoid などを踊らせてみるだけなら十分可能なので、色々試して遊んで貰えると嬉しい。

VRM Live Viewer ver.0.42β(ベータ版)


>>Windows 版(x64) をダウンロード
(Google Drive を利用。画面右上にあるダウンロードアイコンを押す)


(Google Drive を利用)


Android 4.4以上
※「提供元不明アプリのインストール」許可が必要です。


VRM をリアルタイムに読み込ませて観ることができる
>>アクシアVRM(縞パンver.)は、Google Drive からもDLできます。


 簡単な操作説明やヘルプはアプリにも入れてあるが(ボタンを押すと出る)、既知の不具合なども一緒に、マニュアル代わりにここにも載せておこう。今後のオープンソースプロジェクトのバージョンアップやバグフィックスなどによっても修正は入るとは思うが、現在までの状態を確認するのにも良いかも知れない。

 とは言え、まずは単純に楽しんで貰えれば良いと思う。VRM の配布は「ニコニ立体」に多くアップロードされているが、有名キャラやオリジナルキャラは Web上でも公開されているので、そういったものもついでに掲載しておいた。もしツイッターでもメールでも(アドレスは「ReadMe.txt」を参照)、連絡してくれれば、このページにもリンクを貼っておこうと思う(PC ではともかく、スマホで直接ダウンロードできるものはほとんど無いため、アプリ内でもできるだけ紹介したいと考えている)。

■アプリのダウンロード
■操作説明
 ●基本操作(キー・マウス[PC] / タッチ[Android])
 ●モーション
 ●ブレンドシェイプ
 ●背景
 ●音楽
 ●曲リスト(Music Select)
 ●曲リストから削除(Remove Songs)
 ●マイク感度の設定 (Mic Sensitive)
 ●エフェクト切り替え (Effect Select)
 ●BVHモーションの再生設定 (BVH Play Setting)
 ●ユーザーオブジェクトの配置 (User Object Transform)
 ●360度画像の回転 (360deg Image Rotation)
 ●オプション設定等
 ●その他
■背景を変える
 ●背景の3Dモデルを読み込んでみる
 ●360度(全天球)画像読み込んでみる
 ●エフェクト(パーティクル)を入れてみる
■試験的に実装している機能
■補足説明
■既知の問題(不具合など)
■VRM(3Dアバター)の入手方法
■GLB(3Dモデル)の入手方法
■GLTF(3Dモデル)の入手方法
■360度(全天球)画像の入手方法
■BVH(モーションファイル)の入手方法
■使用できる BVH を作る(変換する)
■利用したオープンソースプロジェクト・素材など

(※) Unity 2018.2.1f1 / VRoid Studio 0.1.1 - 0.2.9 / UniVRM 0.42 / Windows10(x64) / Galaxy S7 Edge (Android 7.0/8.0) で確認



■操作説明

●基本操作(キー・マウス[PC] / タッチ[Android])
(Windows 版)
[ドラッグ] カメラ回転
[ホイール] カメラ遠近
[中ボタンでドラッグ] カメラの視点移動
[画面端でスワイプ, Tabキー] パネルの開閉
[Esc] アプリ終了
>>PC版の場合、キーボードやジョイスティックでの操作もできます。

●キーボードでのカメラの操作(Windows 版のみ)
[←][→][↑][↓] カメラ視点を動かす
[Ctrl]+[←][→][↑][↓] カメラ視点を中心に旋回
[+][-](テンキー) カメラのズームイン・アウト

[Z][C][S][X] カメラ視点を動かす第2キー(※変更・削除される可能性があります)
[Ctrl]+[Z][C][S][X] カメラ視点を中心に旋回第2キー(※変更・削除される可能性があります)
[A][D] カメラのズームイン・アウト第2キー(※変更・削除される可能性があります)

●ジョイスティックでのカメラ操作(Windows 版のみ)
[方向スティック] カメラ視点を動かす
[A]ボタン+[方向スティック] カメラ視点を中心に旋回
[X]ボタン カメラのズームイン
[B]ボタン カメラのズームアウト
[Y]ボタン 音楽の再生/停止(切り替え)(※変更・削除される可能性があります)


[背景]
(Sketchfab)Islands (@pravsha)
(設定ファイル)islands_scene.json(右クリックで「名前を付けてリンク先を保存」)
>>背景の設定方法


(Android 版)
[ドラッグ] カメラ回転
[ピンチ] カメラ遠近
[指3本でドラッグ] カメラの視点移動 (※先に中指と薬指を画面に置き、人指し指でドラッグすると細かい操作がしやすい)
[画面端でスワイプ] パネルの開閉
[バックキーを2回押す] アプリ終了

●各設定パネルは上部(タイトル文字の上あたり)をドラッグすると移動できます。鍵アイコンを押すと表示がロックされ、パネル以外の画面上でカメラの操作ができます。


[ファイル読込] VRM(3Dアバター)/GLTF(3Dモデル) /GLB(3Dモデル)/BVH(モーション)/360度(全天球)画像(jpg, png)/音楽(wav, ogg, mp3[※Androidのみ])/JSON(設定ファイル)をアプリにロードします。
".gltf", ".glb" で読み込まれた3Dデータは背景オブジェクトとして扱われます。



●ファイルのドラッグ&ドロップができます(※PC版のみ)

 ドロップされたファイルは順次ロードされます。同種類のファイルでは意味がありませんが、例えばアバター(vrm)&モーション(bvh)&背景モデル(gltf/glb)&音楽(wav)を同時にドロップすると順次ロードされていきます。


[背景(森)]
(Sketchfab)VR Alien Forest (@FDU_oficial)
(設定ファイル)vr_alien_forest_with_download_scene.json(右クリックで「名前を付けてリンク先を保存」)
[背景(つり橋)]
(Sketchfab)Aztec Style Temple Kit (@zaxel)
(設定ファイル)aztec_style_temple_kit_scene.json(右クリックで「名前を付けてリンク先を保存」)
[背景(岩山)]
(Sketchfab)Silex - 10 (@panormandic)
(設定ファイル)silex_-_10_scene.json(右クリックで「名前を付けてリンク先を保存」)
[背景(星の海)]
(Sketchfab)sea of star (@Hedgehog Boo)
(設定ファイル)sea_of_star_scene.json(右クリックで「名前を付けてリンク先を保存」)
>>背景の設定方法



●モーション

[BVH] 読み込んだ BVH を再生します。デフォルトではPC版に同梱されている「test.bvh」と同じものが使われます。
BVH(モーション)をアプリにロードします。ただし、「Y-up 右手座標系」(OpenGL系、Maya, Daz3D など)の座標系になります。「Z-up 右手座標系」(3ds Max など)の場合は、見た目がおかしくなります。[>>3Dツールごとの座標系など]
  BVHモーションの再生設定(BVH Play Setting)を開きます。

※[BVH 読込] はに変更されました。
※[Y:180], [Loop], [Speed] は再生設定パネルに置き換えられました。
[CRS] ユニティちゃんライブステージ -Candy Rock Star- のモーションを再生します。プリセット曲(Unite In The Sky)のダンスモーションです。余談ですが「CRS」(Candy Rock Star の略)はユニティちゃんのライブステージでの衣装の名前ですが、「CRS」という略記はプロジェクト名などにも使われているため、関連するものにはよく利用されます。
[T-Pose] Tポーズに固定します。


●ブレンドシェイプ

(リップシンク)
┌ [None / Key] なし / キーボードで口パク操作できます(PC版のみ)。
├ [AIUEO / CRS] "あいうえお"の口パクをします(※プリセット曲が再生されてないとき)。プリセット曲(Unite In The Sky)が再生されているときは曲のリップシンクが再生されます。
└ [Mic LipSync] マイクから音声を認識して口パクします。
マイク感度設定を開きます。
[Auto Blink] 目パチをします。
[Look At Me] 目でカメラを追います(※目のボーンが入ってるモデルのみ。T-Pose だとわかり易い)。


●背景

(ドロップダウン) 背景を変更します。
[プリセット背景の変更] 何も無い(Plane)、ユニティちゃんステージ(CRS Stage)、浮遊(Floating)が選択できます。これら背景は 3Dモデル(gltf/glb)360度(全天球)画像などをロードすることで内容を入れ替えることもできます。ドロップダウンを切り替えると内容はリセットされます。
[床の変更] 主に透明な床のようなものを変更できます。360度(全天球)画像を読み込んだときなどに良いかも知れません。プリセットの Plane の床と同じものも入っていますが、こちらはサイズの変更ができます(Plane では背景となっていてサイズは固定されてます)。3Dモデル(gltf/glb)とは排他的で、モデルを読み込んだときは「(床なし/3D)」(=床なし、または3Dモデル)に、逆に床を切り替えると、モデルは消去されます(どちらか1方のみ表示可)。
[空の変更] 主に空の画像を変更します。360度(全天球)画像とは排他的で、360度画像を読み込んだときには「(空なし/360)」(=空なし、または360度画像)に、逆に空を切り替えると、360度画像は消去されます(どちらか1方のみ表示可)。
360度(全天球)画像(jpg, png)、または 3D背景モデル(gltf/glb)を読み込みます。PC版の場合、360度画像は 2:1 比(3840x1920)として扱われます。
3Dモデル(gltf/glb)がロードされているとき、オブジェクトのサイズや回転、位置などが編集できます。
床を使用しているとき、サイズを変更できます(元のサイズが1)。床のサイズは各床ごとに保持されます。
360度画像がロードされてるとき、全天球を回転できます。
エフェクトの切り替えを開きます。



[背景(6角物体)]
(Sketchfab)Texture Practice - Substance Stage (@Javier Da Rosa)
(設定ファイル)texture_practice_-_substance_stage_scene.json(右クリックで「名前を付けてリンク先を保存」)
[背景(円形物体)]
(Sketchfab)Aztec Stone War (@Blender Books)
(設定ファイル)aztec_stone_war_scene.json(右クリックで「名前を付けてリンク先を保存」)
[背景(SF柱物体)]
(Sketchfab)Extra Destination (@Javier Da Rosa)
(設定ファイル)extra_destination_scene.json(右クリックで「名前を付けてリンク先を保存」)
[背景(テレポート物体)]
(Sketchfab)Teleport (@soidev)
(設定ファイル)teleport_scene.json(右クリックで「名前を付けてリンク先を保存」)
[背景(チェス板)]
(Sketchfab)Chess Board (@Anthony Yanez)
(設定ファイル)chess_board_scene.json(右クリックで「名前を付けてリンク先を保存」)
[全天球画像]
(BOOTH)日本列島360 全天球静止画9枚セット (@VoxelKei)
>>背景の設定方法



●音楽

[Start](= Sync Start) オンになっているとき、音楽再生ボタンを押すとモーションを最初から再生します。
[Stop](= Sync Stop) オンになっているとき、音楽停止ボタンを押すとモーションを停止し、最初のフレームに戻します。音楽なしでモーションを再開したいときは、モーションの[BVH]または[CRS](トグルボタン)をもう一度押すと再開できます(CRSの口パクのみはCRS楽曲再生で再開されます)。
音楽を再生します。
音楽を停止します。
曲リストを開きます。再生する曲・再生方法などを選択できます。
※[曲リストに追加][曲リストから削除][再生モード][遅延再生の時間設定]などは、曲リスト内に移動しました。


●曲リスト(Music Select)

プレイリストに曲を追加します。対応するファイルの種類は「wav」「ogg」です(Android版では「mp3」も可)。
「曲リストから削除(Remove Songs)」へ移動します。
曲の再生モードを切り替えます。「1曲停止」は曲が終わると停止、「1曲ループ」はループ再生(シームレスループ曲に向いています)、「全曲ループ」は曲が終わるとプレイリスト中の次の曲へ行き、全曲終わるとリスト最初の曲へ行きます。「シャッフル」は曲が終わるとプレイリスト中の曲でランダムに再生されます。
再生ボタンを押してから遅延して開始する時間を設定します(秒)。設定は曲のファイル名ごとに記憶されます。BVH モーションなどにタイミングを合わせたいときなどに使います。
[連続/シャッフルでプリセットを除く] 再生モードが「全曲ループ(連続)」「シャッフル」のとき、プリセット曲(Unite In The Sky)を除いて再生します。ただし、追加された曲がない場合は無効です。


●曲リストから削除(Remove Songs)

曲リストから選択されたファイルを削除します。ファイル自体は削除しません。
[削除]ボタンを押すと実行されます。


●マイク感度の設定 (Mic Sensitive)

[Level] マイクからの入力値がリアルタイムで表示されます (0~1)。バーが赤いときは認識されない音量で、緑で認識されます。それらは以下の「Threshold」の値で分別されます。
※「Mic LipSync」のときのみ測定可能です。
※ハードウェア(PC等の録音[マイク]レベル)の設定にも依存します。
[Threshold] このレベルより下の場合、認識しません。主に雑音のカットに使います。
[Gain] 元のレベルを定数倍します。元の入力レベルが小さすぎたり大き過ぎたりする場合など調整するのに使用します。

※スマートフォンの場合はマイクとスピーカーが一体となっているので、購入時付属の「マイク付きイヤホン」またはヘッドホン等を利用すると声を認識しやすくなります(「Threshold」を調整すれば、ある程度は音楽付きでも認識できます)。




●エフェクト切り替え (Effect Select)

 エフェクトを選択できます。
背景を切り替えるとリセットされます。
[Emission] 効果量を調整できます。1が基準量です。0.5で半分、2.0で2倍のパーティクルが生成されます。
※パーティクルの量が多くなるほど、重くなることがあるので注意して下さい。


[背景(星の海)]
(Sketchfab)sea of star (@Hedgehog Boo)
(設定ファイル)sea_of_star_scene.json(右クリックで「名前を付けてリンク先を保存」)
[背景(家)]
(Sketchfab)Isometric House (@Raphael Baget)
(設定ファイル)isometric_house_scene.json(右クリックで「名前を付けてリンク先を保存」)
[背景(ボクセル)]
(Sketchfab)Room 07 / MagicaVoxel (@moyicat)
(設定ファイル)room_07__magicavoxel_scene.json(右クリックで「名前を付けてリンク先を保存」)
[背景(森)]
(Sketchfab)VR Alien Forest (@FDU_oficial)
(設定ファイル)vr_alien_forest_with_download_scene.json(右クリックで「名前を付けてリンク先を保存」)
>>背景の設定方法



●BVHモーションの再生設定 (BVH Play Setting)

 ロードされているBVHモーションの再生方法/速度/回転/位置を変更できます。
[Loop] オンでループ再生します。オフでは1回再生で停止します。
[Speed] 再生速度を変更できます(元の速度は1)。音楽から遅れていくときなどは、少し再生速度を早めると合わせることもできます(端末の処理速度・データにもよるが、約 1.01~1.018 倍くらい。私がテストしてる実機は 1.016 倍くらい)。また、30fpsのデータを再生すると早送りのように見えるので(当アプリは60fpsが基準)、その場合は、0.5 にするとちょうど良い感じに見えます。
[Rotation] 向きの回転をします(-180~180度)。
[Position X] ワールド座標X方向(横)に移動します。
[Position Y] ワールド座標Y方向(縦)に移動します。
[Position Z] ワールド座標Z方向(奥)に移動します。
※位置(Position)はスライダーの範囲より大きい値または小さい値をテキストボックスに入力できます。
※設定値は"ファイル名"で保存されます。

設定値をファイル(.json)から読み込みます。
設定値をファイル(.json)に保存します。



●ユーザーオブジェクトの配置 (User Object Transform)
(※この機能は仕様・UI等が大幅に変更される可能性があります)

 「モデル読込」から読み込んだ ".gltf" または ".glb" のモデルデータ(GLTF: Sketchfab 等で配布されている形式)の配置・回転・サイズを変更/消去できます。読み込まれたモデルは背景オブジェクトとして扱われます。

[Position X] オブジェクトをワールド座標X方向(横)に移動します。
[Position Y] オブジェクトをワールド座標Y方向(縦)に移動します。
[Position Z] オブジェクトをワールド座標Z方向(奥)に移動します。
[Rotation] オブジェクト回転します(-180~180度)。
[Scale] オブジェクトのサイズを変更します(元サイズは1)

※回転以外はスライダーの範囲より大きい値または小さい値をテキストボックスに入力できます。
※設定値は".gltf"のとき"フォルダ+ファイル名"で(Sketchfab では "フォルダが名前/scene.gltf" となってるため。ファイルのあるフォルダのみ)、".glb"のとき"ファイル名"で内部保存されます。

現在ロードされているオブジェクトを消去します。
設定値をファイル(.json)から読み込みます。
設定値をファイル(.json)に保存します。


[背景(森)]
(Sketchfab)VR Alien Forest (@FDU_oficial)
(設定ファイル)vr_alien_forest_with_download_scene.json(右クリックで「名前を付けてリンク先を保存」)
[背景(ダム)]
(Sketchfab)Hampton Lake Dam (Post Hurricane Irma) (@likeonions)
(設定ファイル)hampton_lake_dam_post_hurricane_irma_scene.json(右クリックで「名前を付けてリンク先を保存」)
[背景(チェス板)]
(Sketchfab)Chess Board (@Anthony Yanez)
(設定ファイル)chess_board_scene.json(右クリックで「名前を付けてリンク先を保存」)
[キャラクター(Racingミク)]
(Sketchfab)Hatsune Miku-Racing Miku 2014 (@julianu2be)
[キャラクター(スパイダーマン)]
(Sketchfab)Ultimate Spider-man (@Neytryno)
>>背景の設定方法



●360度画像の回転 (360deg Image Rotation)

 読み込まれた360度(全天球)画像の回転を変更/消去ができます。

[Rotation] 360度(全天球)画像を回転します(-180~180度)。

※設定値は"ファイル名"で保存されます。

現在ロードされている360度(全天球)画像を消去します。


[背景(円形物体)]
(Sketchfab)Aztec Stone War (@Blender Books)
(設定ファイル)aztec_stone_war_scene.json(右クリックで「名前を付けてリンク先を保存」)
[全天球画像]
(BOOTH)日本列島360 全天球静止画9枚セット (@VoxelKei)
>>背景の設定方法


●オプション設定等(Setting)

 各設定パネルを開きます。PC版の場合は、一部ショートカットを試験的に定義しています(ショートカットは変更される可能性があります)。

[パネル位置のリセット] 全パネルの位置をリセットします。各パネルは上部(タイトル文字の上あたり)をドラッグすると移動できます。


●その他

オプション設定を開きます。パネルの不透明度、マイク感度、ユーザーオブジェクトの配置などの各設定へ移動できます。
「操作説明/ヘルプ」が出ます。
パネルなどを閉じます。
パネルの表示をロックできます。グレー状態のときは通常の状態で、パネル外をクリックするとパネルが閉じられます。青のときはロック状態で、パネル外でカメラを操作できます。

[画面左下のアプリ名] クリックするとクレジット「CREDIT」(ライセンス等)、内部ライブラリのバージョンなどが出ます。



■背景を変える

 ここではチュートリアル的に背景を変える方法を書いておきます。背景モデルには Sketchfab などで配布されている 3Dモデル(.gltf)またはニコニ立体などで配布されている背景モデル(.glb)を読み込んで配置することができます。また RICOH THETA など360度カメラで撮影・保存した画像や、フリー素材として配布されている全天球画像も背景(主に空)として利用することができます。これらは別々に配置され、「ユーザーオブジェクトの配置 (User Object Transform) 」と「360度画像の回転 (360deg Image Rotation)」で大きさや回転、位置などを調整できます。

 また、0.38β 以降からは設定値をファイル(.json)へ保存・読み込み機能ができるので、同じオブジェクトでも設定を瞬時に切り替えて利用することも可能です。設定ファイルはPC/スマートフォンで共有できるので、PCで調整した設定をスマートフォンで読み込むこともできます(ただし、シェーダの関係で色や光沢など見た目は変わることがあります。またスマートフォンはPCに比べてメモリ/CPUが弱いので、あまり大きなデータを読み込むとフリーズすることがあります)。

 今回は一般配布されているフリー素材を利用して、背景を変えてみたいと思います。素材自体の作り方は作者によってまちまちなので、設定値は任意で構いません。あくまで調整する方法として理解して下さい。

※各素材の著作権は著作者に帰属します。各素材についての利用方法などは、各著作者が提示されてる利用規約などをご確認下さい。


●背景の3Dモデルを読み込んでみる

 背景モデルの例として Sketchfab から 3Dモデル(.gltf ファイル)を読み込んでみます。ニコニ立体からダウンロードした背景モデル(.glb)を使うときも全く同じ手順になります(置き換えて考えて下さい)。ロードした後は大きさ・回転などを調整する必要がありますが、ここでは簡略のため、0.38β 以降の「設定値の読み込み(.json)」を使って、私が実際にデモで使った設定を利用します。

 元の背景は空の変化をわかりやすくするため「Plane」を使います。「CRS Stage」でも構いませんが、オブジェクトを配置したとき、空が無く真っ暗な背景となります。




1.Sketchfab で 3Dモデルをダウンロードするには会員登録する必要があります(無料)。面倒ならツイッターなどソーシャルアカウント利用もできるので、ページの右上にある「SIGN UP」からソーシャルアイコンをクリックで登録しておきます。既に登録してある場合は「LOGIN」でログインします。




2.今回は例として「Islands(@pravsha)」モデルをダウンロードしたいと思います。作者アイコンすぐ下の「Download」を押すとダイアログが出るので「Autoconverted format (gltf)」の方の「Download」ボタンを押してダウンロードして下さい。




Author: pravsha
License: CC Attribution-ShareAlike Creative Commons Attribution-ShareAlike

※検索ボックスでキーワードを入力して「Downloadable」にチェックを入れると、ダウンロードできるモデルを探すこともできます。


3.ダウンロードしたら zip を解凍し、ファルダにある「scene.gltf」を VRMLiveViewer にドラッグ&ドロップします。Android 版の場合は SDカードなどにコピーし「モデル読込」から」同じように読み込むことができます(スマホでは読み込みに結構時間がかかります)。




4.無事読み込むことができたら(スマホの場合、フリーズすることもあります。その場合はなるべく他のアプリを終了させ、メモリなどを確保して下さい。あまりに大きなデータは何度やっても読み込めない場合があります)、設定()から「ユーザーオブジェクトの配置(User Object Transform)」を開き、大きさや回転を調整します。ここでは簡略のため、私がデモで使用した設定値ファイル(.json)を用意しておくので、それを利用することにします。


※このモデルは小さいですが、逆に大き過ぎてロードした状態では見えないものもあります。その場合は「Scale」を適当にいじって大きさを確認して下さい。



5.以下から設定値ファイル(.json)をダウンロードして下さい。ファイルは端末のデフォルトの「ダウンロード」フォルダなどに保存されるので、それを VRMLiveViewer にドラッグ&ドロップ、または「User Object Transform」パネル上のフォルダアイコン()から読み込めます。するとすぐに設定が反映され、モデルの大きさや回転、配置などが変更されます。

(Islands の設定ファイル)
islands_scene.json(右クリックで「名前を付けてリンク先を保存」)


※自分で値を調整したものをディスクアイコン()で保存することもできます(現在の値はアプリ内部でも保存されているので、毎回ファイルに保存する必要はありません。どちらかというとデータエクスポート用です)。スライダー値はある一定範囲に制限されていますが(あまりに幅が大きいと細かい値が調整できないため)、テキストボックスの方では制限値を超えた値を入力できます。自由に調整しても構いません。



●360度(全天球)画像読み込んでみる

 背景の3Dモデルを読み込んだだけでも十分ですが、ここではついでに 360度(全天球)画像を読み込んで調整する方法もやってみます。全天球画像は jpg や png ファイルで画像の縦横比が 2:1 のものが使えます。3840x1920[px] が最適です(Android の場合、あまりに大きい画像だとフリーズすることがあります)。


1.ここでは @VoxelKei さんが配布されている「日本列島360の静止画」を使ってみたいと思います。ダウンロードするには BOOTH に会員登録する必要があります(無料)。BOOTH は pixiv が運営してるサイトなので、pixiv アカウントでもログインできます。



2.ログインしたら、@VoxelKei さんの「ボクスケショップ」にお邪魔します。「日本列島360 全天球静止画9枚セット」は無料で配布されているので、そちらのページへ移動します。右側にある「無料ダウンロード」をクリックすると画像がダウンロードされます。今回サンプルに使っている夜の画像は9番目(JPN360_9.jpg : 2018/10現在では一番下)になります。



3.全天球画像をダウンロードしたら、VRMLiveViewer にドラッグ&ドロップします。または右パネルの山アイコン()を押し、ここからファイルを選択します。


4.画像がロードされたら、「設定」ボタン()を押し「360画像の回転」パネルを開きます。ここで「Rotation」で回転を調整します(任意で構いません。ここでは約 -70度くらいです)。


※全天球画像(空)を消したい場合は×アイコン()を押せば消えます。



●エフェクト(パーティクル)を入れてみる

 右パネルにあるキラキラアイコン()を押すか、設定()から「エフェクトの切り替え」でパーティクルを入れることができます。また「Emission」で放出量を調整できます(基準量を1として0.1~3倍)。これらは任意で構いません。




 後はモーションを「CRS」や「BVH」にし、音楽を再生します。カメラをズームアウトすると、遠くから眺めることもできます(更に遠くへ行くと、全天球で囲まれていることがわかります)。

 PC版ではジョイスティックにも対応しているので、まるで空中遊泳でもしてるように楽しむこともできます。




●全天球で囲まれた空中庭園みたいになる(笑)

Author: VoxelKei
License:クリエイティブ・コモンズ 表示-非営利 4.0 国際 (CC BY-NC 4.0)



■試験的に実装している機能

 掲載時点での試験的に実装している機能です。これら機能は今後、大幅な仕様変更や削除される場合もあります(要望が多いものは正式な機能として残します)。お試し機能くらいに考えておいて下さい。

(※PC版のみ)
 以下のキーはショートカットキーのように利用できます。何らかの設定パネルが開いているとき、またはデータなどのロードしているときは無視されます。

●ショートカット的なもの

[V] モデル(VRM/GLTF) 読込(ファイル選択)を開く
[B] BVH 読込(ファイル選択)を開く
[N] 音楽 読み込み(ファイル選択)を開く
[M] 音楽のリストを開く
[J] 音楽の遅延再生の時間設定を開く(※変更・削除される可能性があります)
[G] BVHモーションの再生設定を開く(※変更・削除される可能性があります)
[L] マイク感度の設定を開く(※変更・削除される可能性があります)
[F] ユーザーオブジェクトの配置を開く(※変更・削除される可能性があります)
[K] パネルの透明度設定を開く(※変更・削除される可能性があります)
[H] 操作説明・ヘルプを開く(※変更・削除される可能性があります)
[;] エフェクト切り替えを開く(※変更・削除される可能性があります)
[<] 360度画像の読み込み(ファイル選択)を開く(※変更・削除される可能性があります)
[:] 360度画像の回転を開く(※変更・削除される可能性があります)

[0](テンキー) 音楽の再生
[.](テンキー) 音楽の停止
[*](テンキー) CRS の楽曲とモーションの再生(※変更・削除される可能性があります)
[7](テンキー) リップシンクを「None / Key」にする(※変更・削除される可能性があります)
[8](テンキー) リップシンクを「AIUEO / CRS」にする(※変更・削除される可能性があります)
[9](テンキー) リップシンクを「Mic LipSync」にする(※変更・削除される可能性があります)

●一度読み込んだファイルの記憶機能

 VRM, BVH, 音楽ファイルなど、現在読み込んでいるファイルのパスを記憶し、キーを押すことにより、ファイル選択を開かずに読み込みを開始します。ファイルが見つからなかった場合は無視されます。

・記憶するときは [Shift]キー+以下の各キー
・読み込みするときは、記憶したキー

で利用できます。キーボード上では横並びの10個になります。

「VRM/GLTF」 の記憶キー:[F1]~[F10]
「BVH」 の記憶キー:[1]~[9][0] (フルキー)
「音楽」 の記憶キー:[Q][W][E]…[P]
(※変更・削除される可能性があります)

●リップのマニュアル操作(※変更・削除される可能性があります)

※「None / Key」 のとき
(全てテンキー)
[1] あ
[2] い
[3] う
[4] え
[5] お
●実は「あ、あ、マイクおっけー!」以外は、「あ」「え」「お」の3つを適当に連打してるだけ(笑)。
歌詞のひと区切りの最後や、伸ばしてる所だけ合わせれば、意外とそれっぽく見える(笑)。




■補足説明

・v0.32βにおいて、曲リストの UI が PC版 と Android版で共通化されました。
[曲リストに追加][曲リストから削除][再生モード][遅延再生の時間設定]などは、「曲リスト(Music Select)」内に移動しました。

・v0.37βにおいて、右パネルにあったBVHモーションの回転([Y:180]),ループ設定( [Loop]),再生速度設定( [Speed])は「再生設定パネル(BVH Play Setting)」にまとめられました。

・v0.42βにおいて、[VRM 読込] ボタンが [ファイル読込] に統合されました。また [BVH 読込] ボタンも に変更されました。実際にはどのボタンからも種類に関係なく読み込むことができます(ただし、各ボタンによりデフォルトのフィルタ[=拡張子]や最後にアクセスしたフォルダなどの保存状態が違います。※PCのみ)。



■既知の問題(不具合など)

 現在わかっている不具合を挙げておきます。しかしながら、仕様上アプリからは修正できないものもあるので、その場合はご了承下さい。

※分類
[×] 仕様上、修正は難しい
[△] 修正には調査が必要(場合によっては修正できるかも?)
[-] それは仕様だ。問題ない(笑)
[○] 解決済み


[×] モーションを途中で切り替えると位置がずれる。
→ CRS のダンスモーションは相対的に移動してるため、タイミングによってはステージの中心からずれることがあります(特に重い処理などで一時的に止まってしまう時間が長いときなど)。その場合は曲を最初から再生するか、「T-Pose」で中心に移動する方法があります。

[×] VRoid を読み込むとギラギラする。
VRoidVRM が利用してる NormalMap やシェーダーの差異のようです。VRoid のバージョンアップに伴い、少しずつ良い感じに変換されるようになっています(特に VRoid Studio 0.1.x で作ったものは、かなりギラつく→ 0.2.13 以降で再エクスポートすると良くなる)。今後も pixiv に期待しましょう(笑)。

[×] GLTF/GLB モデルの色合いが違う。一部欠けたり描画順がおかしかったりする。
→ シェーダ等の違いにより、見た目がどうしても変わってしまいます(Unity に読み込んだ場合「Standard Shader」一択になります)。また透過や発光などのシェーダは無視されることがあります(シェーダ[=Standard Shader]が対応できないとき)。完璧な再現はできないのでご了承下さい。

[×] GLTF/GLB のロード(ビルド)中にフリーズする。
→ モデルによっては巨大なテクスチャや大量のメッシュ(ポリゴン)で作成されているものがあります。その場合は動的にモデルを生成するのにかなりのメモリやCPUパワーを必要とします。また新しくモデルが入れ替えられる直前までは、既に読み込まれているモデルがメモリを使っています(つまり消去されるまでは約2倍のメモリを喰う)。端末のキャパをオーバーした場合、フリーズすることもあるようです(またはとてつもなく重くなる)。なるべく軽いモデルを使って下さい。特にスマホではその傾向が顕著のようです。またエラーが出るものは何らかが原因で対応できないものなのでご了承下さい。

[-]「Look At Me」が効いてない気がする
→ ダンスのように大きく首を動かすモーションでは特にわかりずらいです。「T-Pose」にして試してみて下さい。
また、目にボーンが入ってないモデルでは視線を動かせません。あと、常に「こっちを見る」ギミックが入っているモデルも効果がありません(その場合は逆にオフにしても「こっちを見る」感じになります)。

[○] モデルによっては一部欠けて表示される(特にバックスクリーンカメラ)。[ver.0.19 にて Fix]
→ モデルによってはメッシュの連結(親ボーンのリンク)とバウンズが上手くマッピングできず、各パーツの bounds がカメラの表示領域から外れ、カリングされてるようでした。少し負荷は上がりますが、カメラ領域外にいるときもカリングされないように修正しました(このアプリでは1体なので、負荷より表示を優先すべきと考えた)。

[○] BVH モーションがだんだん音楽から遅れていく。[ver.0.22 にて、再生速度調整機能を追加]
→ 特に他の形式から BVH に変換した場合など、フォーマットによる誤差(BVH はフレームベース[1フレームごとにデータがある]だが、フォーマットによっては時間ベース[一定間隔ごとにデータがあり、間は自動補間する]で作成されているデータもある。MMDなど)、ものによっては実機との負荷の影響もあり、少しずつ遅れていくようです(例えば BVH が 60fps で作られていたとしても、実機で確実に 60fps 出るわけではないので、少しずつずれていく)。再生システムを変更することも考えましたが、既存のデータの見え方も変わってしまうため、独自に再生速度を調整できるようにし、より汎用的に利用できるようにしました(再生速度操作によってスローモーションや早送り再生も表現できる)。BVH のデータと現実時間の遅延誤差は実機の処理能力にもよりますが、再生速度(Motion Speed)を約 1.01~1.018 倍くらいにしておくと、音楽とも合うようです(内部処理が55fpsくらい出ている場合。実際には端末ごとに平均的な値を見つけるしかない。私がテストしている実機の場合 1.016 倍くらいが丁度良いことが多い)。再生速度はファイル名ごと(フォルダ名を含まない)に記憶されるので、ちょうど良い値を見つけておけば、いつでも再現できるようにしてあります。

[○] BVH を読み込んだが、動かない。[ver.0.24 にて Fix]
→ エクスポートした3Dツールの座標系の違いで読み込めなかったり、見た目がおかしくなったりするようです。当アプリで読み込める BVH は「Y-up 右手座標系」(OpenGL系、Maya, Daz3D など)の座標系になります。「Z-up 右手座標系」(3ds Max など)の場合は、見た目がおかしくなります。[>>3Dツールごとの座標系など]
また内部ライブラリのバージョンアップでも修正されました(当アプリでは v0.24β以降)。
参考までに初期に読み込まれている BVH ファイル(「test.bvh」)を同梱して置きます(このファイルと同じ座標系)。
[>>現在、読み込み可能が確認されているもの]

[○] 表情が反映されないものがある。少しおかしくなることがある。[ver.0.28 にて、一定パターンのみ Fix(ユーザー定義のため、全てはカバーできない)]
→ VRM のプリセット表情として使えるものが、キャラによって定義されてない場合があります。定義されてないものは無視されます。
「あいうえお」が揃ってない、片目を閉じる(ウインク)などが定義されてない、等のモデルも多くあります。
また、笑顔のブレンドシェイプ(プリセットの Joy)が「目のにっこり+口を大きく開けて笑う」のようになっているとき、リップシンクの「あいうえお」が実行されると、2重に口のモーフがブレンドされておかしくなることがあります。

※CRS では VRM のプリセット表情の「Joy」(にっこり), Blink_L」(ウィンク),「Blink」(目閉じ)を使っています。当アプリでは 0.27β以降、VRoid に関しては Joy のデフォルト定義「~_ALL_Joy」の代わりに「~_EYE_Joy」を使用することによって、リップシンクとの2重モーフにならないように対処しています(VRoid Studio 0.2.8 までで生成された VRM で確認済み)。また、VRoid 以外では Joy に定義した各ブレンドシェイプの名前に "mouth", "あ", "ワ" が含まれている場合、口のブレンドシェイプとみなして無視するようにしています。



■VRM(3Dアバター)の入手方法

 一般的に Web で配布されているものを利用できます。各モデルの利用方法はその規約に従って下さい。

ニコニ立体ちゃん
ニコニ立体で "vrm モデル配布" を検索
東北ずん子
(アプリのヘルプボタン → 下の方へスクロールして、画像アイコンをクリックでもブラウザからダウンロードできます)
アクシア[縞パン ver.]アリシア色改変モデル。頒布許可済み[@不沈空母]&ニコニ立体ちゃんライセンス
(アプリのヘルプボタン → 下の方へスクロールして、画像アイコンをクリックでもブラウザからダウンロードできます)
VRMファイルを作ってみたい
※アクシア(縞パン ver.) は実験用にこの手順に従ってコンバートしたものです(テクスチャだけ変えている[利用許可済み@不沈空母])。

※一般配布している VRMファイルの情報などありましたら、ツイッターでもメールでも教えて貰えると嬉しいです。このページにまとめて掲載させて頂きます。特にスマホでもすぐに利用できる(= zip でない:スマホユーザーが簡単にDLできるようにするため)ものに関してはアプリ内のヘルプに掲載させて頂きます。


(c) SSS LLC.(ず・ω・きょ)
(c) DWANGO Co.,Ltd. ニコニ立体ちゃんライセンス




■GLB(3Dモデル)の入手方法

 ニコニ立体など、3Dモデル共有サイトで入手できます。各モデルの利用方法はその規約に従って下さい。

ニコニ立体で "Vキャス背景" を検索
※検索キーワード:"glb" でも出てきますが、まだほとんどのモデルがダウンロードできないようです(2018/10 時点)。

glbファイルの作り方

 ちなみに GLTF と GLB は内部的には同じものです。GLB は GLTF の一連のファイルをアーカイブ(圧縮)したものらしいです。しかし、GLB はバーチャルキャストでの使用が考えられていることが多いため、スケールが等倍(Unity の1ユニット=1m 基準。1ユニットの値が3Dモデルツールによって違うため、3Dモデルを他のソフトで用いると、スケールが異なってしまう問題が出る)で作られていることが多く、VRM系のアプリでは扱いやすいメリットがあります(もっと流行って欲しいですね(笑) ← 今は配布されているものがあまりにも少ない |||orz)。



■GLTF(3Dモデル)の入手方法

 Sketchfab など、3Dモデル共有サイトで入手できます。各モデルの利用方法はその規約に従って下さい。

Sketchfab
「Search」で検索し、オプション(OTHERS)で「Downloadable」にチェックを入れると、ダウンロード可能なものに絞れます。各モデルページの「Download」を押すと「Autoconverted format (glTF)」があるので、ダウンロードして「モデル読込」から "~.gltf" を読み込みます(※シェーダ等の違いにより、完璧な再現はできないのでご了承下さい)。



■360度(全天球)画像の入手方法

 RICOH THETA など360度カメラで撮影・保存した画像や、フリー素材として配布されている全天球画像を利用できます。各素材の利用方法はその規約に従って下さい。

RICOH MIKU THETA
RICOH THETA Type HATSUNE MIKU(アプリ)

日本列島360 全天球静止画(BOOTH)
※「日本列島360 全天球静止画」は無料でダウンロードできます。





■BVH(モーションファイル)の入手方法

 一般的に Web で配布されているものを利用できます(データによっては読み込み失敗するものもあります)。各モーションファイルの利用方法はその規約に従って下さい。

Perfume Global Site
 Projectページの「DOWNLOAD」から BVH と音楽ファイルがダウンロードできます。「Terms of use」(利用規約)にチェックを入れるとDLできるようになります。
 音楽もダウンロードできるので、[ライブラリ追加アイコン]で読み込みできます。
※BVH は「Y:180」にチェック入れて再生した方が良いです。

Live Animation モーションライブラリ
 各サンプルの「BVHサンプルXX」(XX:番号)を右クリックで「名前を付けてリンク先を保存」でダウンロードできます。
※「Y:180」にチェック入れて再生した方が良いものがほとんどです。

The Daz-friendly BVH release of CMU's motion capture database
 カーネギー・メロン大のデータベースのモーションキャプチャーデータをBVHに変換したものらしいです。各 zip のリンク(「Zip file for BVH directories 01-09」など)をクリックすると、緑色のダウンロードボタンが出るので、それを押すと zip がダウンロードできます。ボタンを押すと、海外らしい結構うざい広告(笑)が出ますが、閉じてしまって構いません。現在 2548 ものモーションキャプチャーデータを利用できます(>>モーションリスト)。特に使用に制限はなく、商業利用も可能のようです。元々学術研究用でもあるので、割と好きに使っても問題ないと思われます。

 また、少しページの下へ行くと「SECONDARY RELEASE: Daz-friendly hip-UNCORRECTED BVH files release.」というのもあります。こちらは「Hips」のオフセットが0でない(補正されてない)データのようです。「フットスリップの問題が発生した場合にのみ、これらのファイルを選択して使用してください」と書いてありますが、読み込んでみると、少しスムーズな動きをする気がします。ただし、いきなりコマ飛びのような動きも多いです。

 ここの他のサンプル(3dsMAX用など)を試してわかったんですが、エクスポートした3Dツールの座標系の違いで読み込めなかったり、見た目がおかしくなったりするようです。使用ライブラリの BVH インポータは OpenGL系(「Y-up 右手座標系」:Daz3Dも同じ)なので、例えば 3dsMAXなど「Z-up 右手座標系」の場合は見た目がおかしくなります

※直接読み込める BVHファイルの情報などありましたら、ツイッターでもメールでも教えて貰えると嬉しいです。このページにまとめて掲載させて頂きます。





■使用できる BVH を作る(変換する)

 現在の所、ヒエラルキーによるボーン構造やオフセット値など(?)、VRMLiveViewer で利用できるものとそうでないものがあるのがわかっています(使用ライブラリの BVH インポータは OpenGL系(「Y-up 右手座標系」:Daz3Dも同じ)なので、例えば 3dsMAXなど「Z-up 右手座標系」の場合は見た目がおかしくなります)。

 なので、非常に大雑把で正しいやり方とは言えないと思いますが、以下に簡単に利用できる方法を書いておきます。それは「Live Animation」(掲載時点:β4.65)というアニメーション(モーション)作成ソフトを使うことです。このソフトはキネクト(モーションキャプチャー)を取り込んだり、他のモーションファイル形式を変換したりできるソフトです。動作確認はフリー版(β4.65)でしてます。

1.Live Animation を起動したら、キャラ(アバター)の中から「johnny」君を選択します。他のキャラでも試してみましたが、「johnny」君以外は上手く行かないようです(追加アバターも試しましたが、見た目がおかしくなるようです) BVHインポータのバージョンアップにより修正されました(当アプリでは v0.24β以降)。



2.次に再生するモーションファイルをドラッグ&ドロップします(形式は何でも構わないが、BVHエクスポートしても、読み込めるのとそうでないものがあるので注意)。例えば「モーションライブラリ」で配布されている「~.lam」なども利用できます。必要あればアニメーションを編集しても構いません。



3.メニューから「ファイル>エクスポート>BVH」をすると、BVHエクスポートのダイアログが開きます。ファイル名以外の項目では赤で囲んだ「右手座標系」と「基本ポーズの反転」をチェックする必要があるようです。他のオプションは任意で設定して下さい。



 あとはエクスポートした「~.bvh」を VRMLiveViewer の [BVH 読込] から読み込みます。何らかが原因で使用できない場合は、エラーログが表示されます([×]ボタンで閉じることができます)。fbx や他の BVH 配布サイトの bvh も試したことがありますが、利用できないものも多くあります(→ BVHインポータのバージョンアップで修正されました(当アプリでは v0.24β以降)。ただし、3dsMAXでエクスポートしたものなど「Z-up 右手座標系」の場合は見た目がおかしくなります)。

踊りのモーションla_001_SIL_TOSH.lam)をBVH変換したものと、
エキスポートサンプルをそのまま読み込んで踊らせてみた例。
顔の向きを少し上に(正面を向くように)編集している。




■利用したオープンソースプロジェクト・素材など

[VRMビューワ/VRMインポーター]
VRM
UniVRM

MIT License
Copyright (c) 2018 DWANGO Co., Ltd. for UniVRM
Copyright (c) 2018 ousttrue for UniGLTF, UniHumanoid
Copyright (c) 2018 Masataka SUMI for MToon

[リップシンク]
Oculus Lipsync
Oculus VR, LLC Software Development Kit License
Copyright (c) 2015 Oculus VR, LLC. All rights reserved.

AniLipSync
MIT License
Copyright (c) 2018 XVI Inc.

[UnityWindowsFileDrag&Drop]
MIT License
Copyright (c) 2018 Markus Göbel (Bunny83)

[Sphere100.fbx(全天球メッシュ)]
MIT License
Copyright (c) 2015 Makoto Ito

[ライブモーション&ステージ&楽曲]
ユニティちゃんライブステージ!

ユニティちゃんライセンス(UCL)
(c) Unity Technologies Japan/UCL

[東北ずん子アイコン]
(c) SSS LLC.(ず・ω・きょ)

[ニコニ立体ちゃん(アリシア)]
(c) DWANGO Co.,Ltd. ニコニ立体ちゃんライセンス

※各素材の著作権は著作者に帰属します。各素材についての利用方法などは、各著作者が提示されてる利用規約などをご確認下さい。








(関連記事)
【Unity】【C#】Android で VRM(VRoid)を動的に読み込む
【Unity】VRoid(VRM)をインポートして動かす
【Unity】Androidのトーストやダイアログ、通知、音声認識、ハード音量操作など基本的な機能を使えるプラグインを作ってみた


スポンサーサイト

category: Unity

thread: ソフトウェア開発

janre: コンピュータ

tag: VRoid  VRM  サンプル 
tb: 0   cm: --

【Unity】VRoid(VRM)をインポートして動かす  


 VRoid Studio が 8/3 に一般公開されたのでさっそく触ってみた。


 VRM 形式は VRChat が流行った経緯もあり、3Dアバターファイルフォーマットとして新たに MMD とは別に VR 用として利用できるフォーマットだ(そのためか VRoid 上では A ポーズだね(笑))。Unity 向けの C# による標準実装(UniVRM)がオープンソースで提供されていて、簡単に扱えるということなので試してみた。

 実際にとても簡単で、ざっくり説明しておくと、UniVRM の Unity パッケージが配布されているので、それをプロジェクトにインポートし、VRoid Studio で作ったキャラをエクスポート(*.vrm ができる)。保存した VRM ファイルをプロジェクトにインポート(ドラッグ&ドロップでOK)すれば良い。あとは見た目が少しおかしくなったりするので、その辺りを適当に修正し、以前にやった方法で歩かせたりすれば動かせる。そんな感じだ。


(※) Unity 5.6.3p1 - 2018.2.1f1 / VRoid Studio 0.1.1 - 0.2.3 / UniVRM 0.40 / Windows10(x64) で確認



●VRoid Studio から VRM を作成する

1.まだ VRoid Studio をインスールしてないなら、公式サイトからダウンロードして、インストールしよう。ページの下の方へ行くと、Windows版 と Mac版 の両方がある。アーカイブを解答したら、そのフォルダ(ファイル)ごと移動すれば使えるようだ。

VRoid Studio

 ただ、私がバージョン 0.1.1 と 0.2.0 を試した所、保存したデータが完全互換では無いようだ(というか髪の位置がずれる)。またインストしたフォルダが別れていると(「VRoidStudio-v0.1.1-win」「VRoidStudio-v0.2.0-win」のように)起動時の「開く」メニューの一覧には出てこない(そして起動後には他のデータを読み込めない)。キャラを作り込むのは正式版が出てからの方が良いかも知れない(笑)。まぁ、現在はベータ版なので、今後改善されることを願おう。

●ver.0.1.1 で作ったもの


●ver.0.2.0 で読み込んだら髪の位置がずれた(笑)

※「髪型編集」で「手描きグループ1」を選択肢、「ガイドパラメータ>高さ」を調整すると直るようだ。


2.「新規作成」でキャラを作った場合は少なくとも髪だけは付けておこう。実際最初に髪を塗るのが面倒だったので(笑)、そのままデフォルトでエクスポートしてみたが、Unity で読み込んだら髪の部分だけ空の白いメッシュが重なってしまった。面倒だったらアホ毛一本でも良いかも知れない(笑)。


3.後はとにかくキャラができたらファイルのメニューからエクスポートするだけだ(ver.0.2.x 以降は「撮影・エクスポート」に移動した)。また、私が試したのは ver0.1.1 だったが、アプリが不安定なのか、閉じようとしたらフリーズしたりするので、なるべく途中経過は保存(Ctrl+S)しておいた方が良いかも知れない。

 エクスポートしたファイル(*.vrm)は「C:\Users\(ユーザー名)\Documents\vroid\avatars」(※Windows版)のように、個人用のドキュメント以下に作られるようだ。


※下のボタンが見えない場合は、ウィンドウを広げれば見えるようになる




●VRM を Unity にインポートする

1.Unity のプロジェクトを開いたら、まずは先に変換ツール「UniVRM」をプロジェクトにインポートしよう。

UniVRM

 パッケージは「UniVRM-x.xx.unitypackage」と「UniVRM-RuntimeLoaderSample-x.xx.unitypackage」(x.xx はバージョン)の2つがあるが(掲載時点:0.40)、「~RuntimeLoader~」となってる方は、実行時にリアルタイムに読み込む方法のようだ。ここでは「UniVRM-x.xx.unitypackage」の方をインポートして欲しい。


 「API Update Required」ダイアログが出たら「I Made a Backup. Go Ahead!」(自動でアップデート)で良い。



2.UniVRM のインポートが終わったら、VRoid Studio でエクスポートした VRM ファイルを適当なフォルダでも作って(ここでは「Model」としている)、エクスプローラーから(※Windowsのとき)ドラッグ&ドロップしよう。インポートにはしばらく時間かかるが、変換が完了したら、ドロップしたフォルダにプレファブができる


「NormalMap settings」が出たら「Ignore」の方が良いかも知れない。「Fix now」でも構わないが、インポート(変換)したマテリアルがギラギラとする(NormalMap を手動で直すしかない)。私はその辺りはあまり詳しくないのでお任せする(←とりあえず動けば良い人(笑))。
(※ver.0.2.x 以降では修正されてるようなのでどちらでも可。)



3.あとはプレファブをヒエラルキーに置いて、カメラやモデルの位置を調整すれば良い。ここではカメラの Z軸を -2 に、モデルの Y軸の回転を 180 度にしてカメラに写している。


※「NormalMap settings」は「Ignore」にしている




●VRoid(VRM)キャラを動かす

 VRMのインポートに成功したら、キャラを動かしてみよう。基本的には以前に書いた「SDプロ生ちゃんを動かす!」と同じ方法で良い。大まかに説明すると、歩行モーションなどのアニメータや、キー入力を判定するスクリプトをモデルにアタッチすれば良い。ただ、一から作るのは結構大変なので、とりあえず既存のアセットやスクリプトを利用して動かしてみよう。

1.歩行モーションなどはユニティちゃんのアセットを利用するので公式サイトからダウンロードしよう。サイトにアクセスして、画面右上の「DATA DOWNLOAD」を押し、規約を読んだら一番下の方にある「ユニティちゃんライセンスに同意しました。」をチェックし、「データをダウンロードする」でダウンロードページへ移動できる。ここでは「ユニティちゃん 3Dモデルデータ」を押してパッケージをダウンロードして欲しい。

 また、ここでは余談になるが、ユニティちゃんパッケージは Unity4 時代からリリースされているので、ユニティちゃん自体を使いたいときは、「ユニティちゃんシェーダー (Unity 5.4/5.5β 対応版)」や「ユニティちゃんスクリプト(Unity 5 修正パッチ)」もダウンロード&インポートした方が良い。

ユニティちゃん公式


2.パッケージをダウンロードしたら、プロジェクトにインポートしよう(掲載時点:UnityChan_1_2_1.unitypackage)。
インポートしたら、ヒエラルキーに置いた VRoid のモデルをクリックし、インスペクタで「Animator>Contoller」に「UnityChanLocomotions」をセットしよう。エディタでプレイしてみればわかるが、これだけで立ちアニメーションが再生される(わかりづらいかも知れないが、拡大してみると、ゆっくりと呼吸してるようにアニメしている)。



3.アニメーションするようになったら、次に操作できるようにスクリプトをアタッチする前に、ヒエラルキーで空のオブジェクトを作り(Creat Empty:ここでは「VRoid_Locomotion」としている)、その子要素になるように VRoid モデルをドロップしよう。また、親オブジェクト(VRoid_Locomotion)の Position や Rotation などは全て (0, 0, 0) にしておく(微調整はモデルの方の Transform でやる)

 これはそのモデルを変更したくなったとき、簡単に中身だけ変えられるようにしておく処置だ。VRoid Studio 本体もしばらくはアップデートされるだろうし、その互換性も微妙なようなので、このようにしておくと更新時に非常に楽になる。



4.VRoid モデルを空オブジェクトの子要素に置いたら、次に操作スクリプトを親オブジェクト(VRoid_Locomotion)にアタッチしよう。ここではユニティちゃんの操作スクリプト「UnityChanControlScriptWithRgidBody.cs」に少し修正を入れて、他のキャラでも使えるようにした「UnityChanControlScriptWithRgidBodyForAny.cs」スクリプトをアタッチする。そのスクリプトは以下からダウンロードして欲しい。

>>サンプルのスクリプトをダウンロード
(Google Drive を利用。画面右上にあるダウンロードアイコンを押す)


5.スクリプトをアタッチしたら、「Rigidbody」の「Constrains>Freeze Rotation」と「Capsule Collider」の「Center>Radius」「Height」だけは調整しておこう。シーンビューを平行投影モードにすると調整しやすい。真横からみると VRoid モデルは少し足が埋まってしまうようなので(※VRoid Studio 0.1.1 で作った場合(?))、ここでは子要素(モデル)の Y軸を 0.07 だけ上げている。値は任意で良い。



●モデルの Position.Y だけ 0.07 にして少し調整している(※VRoid Studio 0.1.1 で作った場合(?))


6.ここまでできたらプレイしても良いが、床が無いので奈落の底に落ちる(笑)。ヒエラルキーに Cube を置いて床にしても良いが、せっかくなので、モックに使えるアセットをインポートしてみよう。

 Unity2017 まではメニューから「Assets>Import Package>Prototyping」でアセットをインポートできたのだが、Unity2018 以降はどうやら「StandardAssets」は廃止されたようだ(たぶんインポートしたアセット同士でバージョンによるエラーや競合などのトラブルが発生しやすいため)。まぁ、オブジェクトだけなら Unity4 時代のものでも問題は無いので(スクリプトやシェーダーは古いバージョンをインポートするとエラーが出やすいので注意)、アセットストアから「Sample Assets (beta) for Unity 4.6」をダウンロードしよう。

Sample Assets (beta) for Unity 4.6


7.ダウンロードが完了したらインポートするときに、ダイアログで一度「None」を押し、全てをオフにしてから、「Prototyping」のフォルダのみをチェックしよう(Prototyping 以下は自動でチェックが入る)。全てをインポートすると時間がかかるのと、エラーが出る可能性があるので、気をつけよう(Unity4 時代のものは特に)。



8.インポートができたら、フォルダ「Standard Assets/Prototyping/Prefabs/」以下に色々なオブジェクトが入っている。床には「FloorPrototype64x01x64」辺りを置けば良いだろう。他にも階段「Step~」、坂「Ramp~」など色々あるので、好きに置いてみると良いだろう。

 ちなみに、Ctrl キーを押しながらオブジェクトをドラッグすると、一定幅で移動することができるので、グリッド状にキレイに配置することができる。この幅はメニュー「Edit>Snap Settings...」で設定できるので上手に使おう。



9.プレイしてみると上手く動いただろうか?動くには動いたが、カメラは追従してないかも知れない。カメラを追従させる方法は、一番簡単なやり方だと、「Main Camera」を作ったキャラの子要素にしてしまえば良い。ヒエラルキーで「Main Camera」を「VRoid_Locomotion」にドラッグ&ドロップしよう。子要素にしたら距離やアングルなどを調整して完了だ。




 カメラをスムーズに動かすには以前の記事「SmoothFollow3」辺りを使うと良い。ちなみにアセットストアで配布しているプラグインにはスワイプ、ドラッグ、ピンチ操作できるスクリプトなども一緒に入っているので、スマホなどで使ってみたいときには良いだろう。




※カメラスクリプト「SmoothFollow3」はプラグインにも同梱されています。





(関連記事)
【Unity】VRM(VRoid)をライブステージで踊らせるアプリを作ってみた
【Unity】【C#】Android で VRM(VRoid)を動的に読み込む
【Unity】SDプロ生ちゃんを動かす!
【Unity】SDユニティちゃんを動かす!(Unity4)
【Unity】【C#】ユニティちゃんをサクっと簡単に動かす!(Unity4)
【Unity】【C#】SmoothFollow3(SmoothFollow に回転・遠近・高さ操作とピンチ・スワイプとの連携機能を付けた拡張版)


category: Unity

thread: ゲーム開発

janre: コンピュータ

tag: VR  VRoid  VRM  サンプル 
tb: 0   cm: --

【Unity】【C#】uGUI ドロップダウンの要素をコードで設定と取得、外観のカスタマイズなど  


 どちらかというと備忘録。調べているとき色々な方法があったので、少しまとめておいた感じ。どのやり方でも違いはないので、用途によって使いやすい方を選べば良いと思う。

※ Unity 5.5.0f3 / Windows10(x64) で確認




■ドロップダウンの要素をコードで設定する

 まずはドロップダウンを画面に置いてしまおう。「GameObject」メニューから「UI>Dropdown」で「Canvas」以下に生成される。インスペクタで下の方へスクロールして見てみると、予め3つの要素が設定されている。これをコードで変更することになる。なお、GUI 関連をシーンビューで見るときは、「2D」のボタンをオンした方が見やすいかも知れない。







 要素を設定するコードは以下のようになる。インスペクタで操作するドロップダウンオブジェクトを設定して、スクリプトで変更する感じだ。「using UnityEngine.UI」を入れて置いた方が簡潔だろう。なお、クラス名は任意で良い。

●要素を文字列のリストで設定する
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class DropdownTest : MonoBehaviour {

public Dropdown dropdown; //操作するオブジェクトを設定する

// Use this for initialization
void Start () {
if (dropdown) {
dropdown.ClearOptions(); //現在の要素をクリアする
List<string> list = new List<string>();
list.Add("1");
list.Add("2");
list.Add("5");
dropdown.AddOptions(list); //新しく要素のリストを設定する
dropdown.value = 1; //デフォルトを設定(0~n-1)
}
}
}

 このスクリプトを適当なオブジェクトにアタッチして、操作するオブジェクトをドラッグ&ドロップで設定しておく。今回は「Canvas」にアタッチしてあるが、どこでも良い。プレイして「Dropdown」をインスペクタで見てみると要素が変わっていることがわかる。なお、デフォルトの値(value)は要素の先頭を0とした連番となっている。ここでは2番目([1])の要素を設定している。



●プレイ中




 もう1つ、直接プロパティに設定する方法もある。内容的には上記の例と同じものだが、追加するリストには「Dropdown.OptionData」クラスの要素を使う。リストの内容はこの形式で保持されていると考えれば良いだろう。

●要素を「Dropdown.OptionData」のリストに直接設定する
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class DropdownTest : MonoBehaviour {

public Dropdown dropdown; //操作するオブジェクトを設定する

// Use this for initialization
void Start () {
if (dropdown) {
dropdown.options.Clear(); //現在の要素をクリアする
dropdown.options.Add(new Dropdown.OptionData("1"));//新しく要素を追加する
dropdown.options.Add(new Dropdown.OptionData("2"));
dropdown.options.Add(new Dropdown.OptionData("5"));
dropdown.value = 1; //デフォルトを設定(0~n-1)
//dropdown.RefreshShownValue();//更新を確認(画像を設定したとき)
}
}
}

 こちらを使った場合はアイコン画像(Sprite)なども一緒に設定できる。以下に資料を載せておくので必要があれば参照して欲しい。「Dropdown.RefreshShownValue()」は画像も更新したときは必要になるようだ。文字列だけなら無くても構わない。

(参考)
Unity5のドロップダウンのオプション値をスクリプトで設定する




■ドロップダウンの要素を取得する

 次に設定した要素を取得してみよう。今回は値(value)とテキストを取得することにする。ちなみに値の方は先頭からの連番(0~n-1)になる。

 この場合はコールバックイベントの「Dropdown.onValueChanged(int)」が使える。まずはスクリプトを用意して、「+」ボタンを押してインスペクタに設定しよう。なおここでは「DropdownTest」スクリプトは「Canvas」オブジェクトにアタッチしてあるものとする。

●「OnValueChanged(int)」コールバックを使って要素を取得する
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class DropdownTest : MonoBehaviour {

public Dropdown dropdown; //操作するオブジェクトを設定する

// Use this for initialization
void Start () {
if (dropdown) {
dropdown.ClearOptions(); //現在の要素をクリアする
List<string> list = new List<string>();
list.Add("1");
list.Add("2");
list.Add("5");
dropdown.AddOptions(list); //新しく要素のリストを設定する
dropdown.value = 1; //デフォルトを設定(0~n-1)
}
}

public void OnValueChanged(int value) {
Debug.Log("value = " + value); //値を取得(先頭から連番(0~n-1))
Debug.Log("text(options) = " + dropdown.options[value].text); //リストからテキストを取得
Debug.Log("text(captionText) = " + dropdown.captionText.text); //Labelからテキストを取得
}
}


 プレイしてドロップダウンを変更してみると値がコンソールにデバッグ表示される(はじめの1回はデフォルト設定の変更のため。0からならデフォルト設定は必要ない)。


 値(連番)ではなくて、直接選択されたテキストを使いたいときもあるだろう。この場合は大まかに2つの方法がある。1つは上記のドロップダウンに設定したリストを取得する方法と、選択したときに表示されるラベルを取得する方法だ。


 内容的にはリストの方は設定した値を取得しているだけなので説明はいらないと思うが、「Label」からというのはヒエラルキーで「Dropdown>Label」と開くと、このオブジェクトに選択したテキストが設定されているのがわかるからだ。「Dropdown.captionText」はそのテキストを保持しているオブジェクトと考えれば良いだろう。




■ボタンを押したとき、ドロップダウンの要素を取得する

 まずはドロップダウンがある状態から、「GameObject」メニューの「UI>Button」でボタンを追加しよう。このボタンを押したとき、選択されているドロップダウンの要素を取得するようにする。基本的には今までの方法と変わらない。取得タイミングをボタン押下にしただけだ。

 ボタンには「Button.onClick()」というコールバックが標準で備わっている。ドロップダウンのときと同じようにスクリプトを用意して、「+」ボタンを押してインスペクタで設定しよう。先のドロップダウンの例をそのまま使うなら、以下のようになる。


●「OnClick()」コールバックを使って要素を取得する
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class DropdownTest : MonoBehaviour {

public Dropdown dropdown; //操作するオブジェクトを設定する

// Use this for initialization
void Start () {
if (dropdown) {
dropdown.ClearOptions(); //現在の要素をクリアする
List<string> list = new List<string>();
list.Add("1");
list.Add("2");
list.Add("5");
dropdown.AddOptions(list); //新しく要素のリストを設定する
dropdown.value = 1; //デフォルトを設定(0~n-1)
}
}

public void OnClick() {
Debug.Log("dropdown.value = " + dropdown.value); //値を取得(先頭から連番(0~n-1))
Debug.Log("text(options) = " + dropdown.options[dropdown.value].text); //リストからテキストを取得
Debug.Log("text(captionText) = " + dropdown.captionText.text); //Labelからテキストを取得
}
}

 この例のようにドロップダウンの初期化とボタンの操作を1つのクラスで管理する場合は上記のやり方で十分だが、別々のクラスで管理したいときはどうすれば良いのだろうか。もちろん同じように操作するオブジェクトを設定させても良いが、コールバックのオーバーロードをすればもう少し簡潔に書くこともできる。

●コールバックのオーバーロードを使って要素を取得する
(初期化のみのクラス「DropdownTest」)
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class DropdownTest : MonoBehaviour {

public Dropdown dropdown; //操作するオブジェクトを設定する

// Use this for initialization
void Start () {
if (dropdown) {
dropdown.ClearOptions(); //現在の要素をクリアする
List<string> list = new List<string>();
list.Add("1");
list.Add("2");
list.Add("5");
dropdown.AddOptions(list); //新しく要素のリストを設定する
dropdown.value = 1; //デフォルトを設定(0~n-1)
}
}
}

(要素の取得のみのクラス「ButtonTest」)
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ButtonTest : MonoBehaviour {
//OnClick のオーバーロード
public void OnClick(Dropdown dropdown) {
Debug.Log("dropdown.value = " + dropdown.value); //値を取得(先頭から連番(0~n-1))
Debug.Log("text(options) = " + dropdown.options[dropdown.value].text); //リストからテキストを取得
Debug.Log("text(captionText) = " + dropdown.captionText.text); //Labelからテキストを取得
}
}

 この「ButtonTest」を例えばボタンにアタッチし、要素を取得するドロップダウンをインスペクタで設定すれば、スクリプトはかなり簡潔になる。ドロップダウンの状態は「Dropdown」オブジェクトが保持しているわけだから、これを引数にして直接渡してしまえば良いわけだ。もちろん「Label」オブジェクトを引数にするのもアリだろう。





●プレイ中にボタンを押すと…




■uGUI の見た目を変更する(簡易的な外観のカスタマイズ)

 一番簡単な方法として、各オブジェクトの「Image>Source Image」を入れ替えれば良い。試しに Asset Store (Ctrl-9) から「Cartoon UI Pack」をインポートして使ってみよう。キーワードに「Cartoon UI」を入れて「無料のみ」のボタンを押せば簡単に見つかる。


 インポートし終わったら、あとは適当なものを選ぶだけだ。好きなものを設定してみよう。見た目が変わったハズだ。




 また、ボタンをハイライトしたときの色などの設定は「Highlighted Color(ハイライト)」「Pressed Color(押したとき)」「Disabled Color(無効化のとき)」を変更すれば良い。好きな色を設定してみよう。



 他にも細かい設定ができるようなので参考URLを載せておこう。色々試してみると良いだろう。

(参考)
【Unity】uGUIドロップダウンメニュー(コンボボックス)の使い方
【Unity開発】uGUIのDropDownの使い方【ひよこエッセンス】






(関連記事)
【Unity】【C#】【JavaScript】4.6.x の Canvas~UI Text のテキストをコードで変更する
【Unity】【C#】【JavaScript】GUIText をコードで生成する


category: Unity

thread: ゲーム開発

janre: コンピュータ

tag: C#  サンプル  Unityリファレンス 
tb: 0   cm: --

【Unity】SDプロ生ちゃんを動かす!  


 以前、標準サイズのプロ生ちゃんを動かす方法を書いてみたのだが、その後、Unity エディタやモデルのバージョンアップに伴い、記事の内容がかなり古くなってしまったので、改めて記事を書き直してみることにした。

 せっかくなので当時のモデルには入ってなかった「SDサイズ」を動かしてみようと思う。内容的には標準サイズのプロ生ちゃんを動かす方法と変わらないので、SDプロ生ちゃんを動かした後、標準サイズのモデルに入れ替える方法も兼ねてやってみよう。最新版(掲載時点:Ver.3・2016/11/06)には Tシャツ姿なども入っているので、試しに動かしてみる。基本的には簡略のため、ほとんどがデフォルト状態のままいくので、微調整は各自で適当にやって欲しい。

※ Unity 5.5.0f3 / Windows10(x64) で確認






■インポート等前準備

1.はじめに「暮井 慧(プロ生ちゃん) MMD/Unity/FBX 公式データ」をダウンロードしよう。ニコニコのアカウントが必要なので、無ければ適当にアカウントを作れば良い。右側にある「ダウンロード」ボタンを押せば、zip がダウンロードできる。ダウンロードが完了したら解凍して、「Pronama-chan_Ver3>Unity(Ver.3)」フォルダにある「PronamaChan_Ver3.unitypackage」を新しいプロジェクトにでもインポートしよう(SDだけなら「PronamaChanSD_Ver3.unitypackage」でも良い)。またエディタがUnity5.5以降なら「PronamaChanShaderForUnity5.5.unitypackage」(5.5用シェーダ)もインポートしても良いかも知れない。





2.次にモデルを動かすために、ユニティちゃんのオフィシャルサイトからユニティちゃんモデルのパッケージをダウンロードしよう。右上の「DATA DOWNLOAD」を押して、キャラクター利用のガイドラインの一番下まで行き、「ユニティちゃんライセンス」に同意すればダウンロードページへ行ける。ここから「ユニティちゃん 3Dモデルデータ」(掲載時点 Version 1.2 [UnityChan_1_2.unitypackage])をダウンロードする。これも同じようにプロジェクトへインポートしよう。







3.準備ができたら、とりあえず動き回れる床を作りたいので、「GameObject>3D Object」メニューから「Cube」などで床を作ろう。「Transform」で Y 軸とスケールだけ調整しよう。大きさなどは任意で良い。





4.次にプロ生ちゃんのモデルを配置しよう。プロジェクトエクスプローラで「PronamaChan>Prefab>SD>Unlit」を開き、「PronamaChan_SD_dynamic_xxx.prefab」(xxx はスパッツなどのバリエーション)をヒエラルキーにドラッグ&ドロップする。ちなみに「~_dynamic」は「揺れ物(髪やスカートなどの揺れ)」がセットアップされているプレファブだ。自力でセットアップするのは非常に大変なので、製作者様には本当に感謝としか言いようがない(笑)。位置だけは (0, 0, 0) にしておこう。ずれてしまった場合は Transform の Position で修正できる。






5.モデルを配置したら、「GameObject」メニューから「Create Empty」で空オブジェクトを作り、適当に名前を付け、Position を原点(0, 0, 0) に合わせよう。そしたらこの中に、先ほど配置したモデル「PronamaChan_SD_dynamic_xxx」(xxx はスパッツなどのバリエーション)をヒエラルキーでドラッグ&ドロップして子要素にする。これは後でモデルだけ簡単に入れ替えるため措置だ。空オブジェクト(親)の名前は「PronamaChanSD_Locomotion」にしておいた。





6.また、カメラが少し遠いので、位置も調整しておこう。ここでは正面からにしておいた。シーンは適当な名前で保存しておく。








■動かすためのセットアップ

 前準備ができたら、ユニティちゃんパッケージには移動用アニメーターとスクリプトが付いているので、これを改造したものを使ってプロ生ちゃんを動かしてみよう。

>>サンプルのスクリプトをダウンロード
(Google Drive を利用。画面右上にあるダウンロードアイコンを押す)

1.まずはアニメーターから設定する。プロジェクトエクスプローラで「UnityChan>Animatiors」フォルダを開き、「UnityChanLocomotions」を探そう。次に、ヒエラルキーから配置したモデル「PronamaChanSD_Locomotion」の子要素「PronamaChan_SD_dynamic_xxx」(xxx はスパッツなどのバリエーション)をクリックし、インスペクターの「Animator>Controller」に見つけた「UnityChanLocomotions」(移動用アニメーター)を設定しよう。これはユニティちゃん用だが、表情レイヤー以外ならそのまま使える(今回は表情は固定のまま)。また「Apply Root Motion」のチェックは外しておく。








2.次に移動用スクリプトを設定しよう。ダウンロードしたサンプルの中に「UnityChanControlScriptWithRgidBodyForAny.cs」というファイルがある。これをインポートして、ヒエラルキーのモデルの親要素「PronamaChanSD_Locomotion」をクリックし、インスペクターにドラッグ&ドロップしよう。これはユニティちゃん用のスクリプトを少しばかり改造したものだ。内容的にはアニメーターの取得を子要素まで拡げたり、衝突判定を無視するレイヤーの設定、ジャンプカメラの無効化くらいで、基本はほとんど変わってない。
※ Unity5 用のユニティちゃんスクリプトの修正パッチ「UnityChanScript_ver1.2.1_Unity5only.unitypackage」にも合わせてある。内容的には AnimatorStateInfo のプロパティ: nameHash (Unity4) → fullPathHash (Unity5) に変更されただけ。





3.スクリプトを追加したら、「Capsule Collider」も自動的に追加されたと思うが、インスペクターで「Center>Y」と「Radius」あたりを調整しておこう。値は好きにして構わない。なお、サイズを調整するとき等はシーンギズモの真ん中の■を押して「平行投影モード」にした方がわかりやすい。もう一度押すと元に戻る。




平行投影モード


4.次にインスペクターで「Rigidbody」の「Constraints」の▼を開き、「Freeze Rotation」を全てチェックを入れておこう。これを入れておかないと、移動したとき、コケる(笑)。



5.最後に、カメラは固定で移動するとプロ生ちゃんが見えなくなってしまうので、カメラをキャラに追従させよう。一番簡単な方法は「Main Camera」を「PronamaChanSD_Locomotion」の子要素にしてしまう方法だ。ヒエラルキーで「Main Camera」を「PronamaChanSD_Locomotion」にドラッグ&ドロップして、カメラの位置を調整するだけで良い。こうするとプロ生ちゃんと一緒にカメラも動く。これでとりあえずは目的達成だ。




走り出すプロ生ちゃん

 プレイボタンを押して動作を確認してみよう。上手くできていれば、カーソルキー上下で前進・後退、カーソルキー左右で旋回、移動中にスペースキーでジャンプ、停止中にスペースキーで伸びポーズをするハズだ(床が光っていてわかりずらいかも知れないが)。



■標準サイズ(Tシャツ)のプロ生ちゃんに変更してみる

 ここからはオマケになるが、せっかく色々なモデル(衣装)が入っているので、上記の完成した SDプロ生ちゃんを使って標準サイズのプロ生ちゃんも動かしてみよう。実際にはプロ生ちゃんではなくても、「ニコニ立体ちゃん」や「東北ずん子」などメカニムを使用しているモデルなら同じ方法で動かせる。

1.ヒエラルキーで先ほど作った「PronamaChanSD_Locomotion」を選択し、Ctrl - D で複製しよう。複製したらわかりやすいように名前を変更し、複製元のオブジェクトはインスペクタの一番上のチェックを外して非表示にしよう。






2.複製した方の子要素「PronamaChan_SD_dynamic_xxx」(xxx はスパッツなどのバリエーション)は削除し、プロジェクトエクスプローラで「PronamaChan>Prefabs」以下から好きなモデルを選んで、先ほどの複製(ここでは「PronamaChanT_Locomotion」とする)にドラッグ&ドロップして子要素にしよう。モデルによっては「Equipments Changer」(衣装変更)と「Blend Shape Value Changer」(表情変更)が付いているかもしれない。その場合はチェックを外しておこう。




アタッチされていたらチェックを外す


3.あとはSDプロ生ちゃんのときのセットアップと同じだ。追加したモデルに「UnityChan>Animators」内のアニメーター「UnityChanLocomotions」を設定し、親オブジェクトの「Capsule Collider」を調整しよう。以下は設定例だが任意で良い。








4.最後にカメラがSDサイズのときの高さになっているので、Y軸だけ調整しよう。値は任意で良い。セットアップし終わったら、プレイして動くことを確認してみよう。他のモデルもこの方法で簡単に入れ替えられる。





■ドラッグでアングルを変えられるカメラをセットアップする

 上記のセットアップではカメラは移動ブジェクトの子要素になっていたため、アングルが固定されたままだった。せっかなので、以前「SmoothFollow に回転アングルと高さと距離の遠近機能を付けてみる」で作ったスクリプトをカメラに追加して、キャラの回りをドラッグでぐるりと眺めてみよう。

※ここからは元のSDサイズでやるので、「PronamaChanSD_Locomotion」をインスペクタで表示に、「PronamaChanT_Locomotion」を非表示にして下さい。

1.ヒエラルキーで先ほど作った「PronamaChanSD_Locomotion」をクリックし展開しよう。先ほどのままの場合、「Main Camera」が子オブジェクトになっていると思うが、これをドラッグして外に出してしまおう。



2.カメラをオブジェクトの外に出したら、ヒエラルキーで再び「PronamaChanSD_Locomotion」を選択し、右クリックから「Create Empty」で空の GameObject を追加しよう(子要素にする)。これをカメラの視点とするので、Y軸だけ調整し、名前を「TargetPos」とでも付けておこう(名前は任意)。






3.次に、ダウンロードしたアーカイブに「SmoothFollow2.cs」が入っているのでインポートして、カメラに追加しよう。追加したら先ほど作った視点用の空オブジェクト「TargetPos」を「Target」にドラッグ&ドロップして設定しよう。その他のパラメタはデフォルトのままで良いが、ここではプロ生ちゃんを正面から見たいので「Pre Angle」(開始時のアングル)だけを 180度にしておく。後ろからにしたい場合は 0 のままで良い。



 これだけでとりあえずセットアップは完了だ。プレイして確認してみよう。ドラッグやホイールでアングルや距離が変えられるハズだ。またデフォルトでは[Z][X][C][V][B][N]キーでも操作できるようにしてある。設定パラメタの詳細・図解などは「SmoothFollow に回転アングルと高さと距離の遠近機能を付けてみる」を見て欲しい。






■簡単なステージを作ってみる

 Unity Technology が提供している Sample Assets には便利なカメラスクリプトやマルチプラットフォームUI、パーティクルやエフェクト、車や飛行機などのモデル等も入っている。このアセット内にモックアップパーツのようなものも入っているので、プラットフォームゲームの仮置きにも良いかも知れない。
(※) 入っている素材は例とは少し異なるが、メニューから「Assets>Import Package>Prototyping」をインポートして使っても良い。

1.Ctrl - 9 で Asset Store を開き、検索ボックスに「Sample Assets」を入れて検索してみよう。「無料のみ」のボタンを押すと絞り込みやすい。リストが出たら「Sample Assets (beta) for Unity 4.6」を探して「ダウンロード」しよう。既に落としてあるなら「インポート」するだけで良い。
(※) Unity5.5 にアップグレードしたばかりのときは Asset Store にログインできない(エラーが出る)かも知れない。その場合は Unity エディタを再起動するとログインできるようになる。





2.インポートダイアログが出たら一旦ダイアログ下にある「None」ボタンを押して全てのチェックを外そう。全部入れても良いが、かなりの量があるので、今回はステージに使うパーツだけにする。スクロールバーで 2/3 過ぎたあたりに来たら、「Prototyping」というフォルダがあるので、そこにチェックを入れる。以下の階層のアセットは自動でチェックが入るので、あとはダイアログ下の「Import」ボタンを押して、エディタにインポートしよう。



3.インポートが終わったら、とりあえず床にテクスチャ(マテリアル)を貼ってみよう。プロジェクトエクスプローラで「Standard Assets>Prototyping>Materals」フォルダを開いて、「PrototypeGhecker」を Ctrl - D で複製しよう。複製したら「PrototypeGhecker 1」等の名前になっていると思うので、それをシーンビューの床(Cube)にドラッグ&ドロップしよう。あとはインスペクタでタイリングのサイズなどを調整すれば良い(任意で良い)。
(※) プロ生ちゃんの壁紙などでも可。








4.あとはプロジェクトエクスプローラで「Standard Assets>Prototyping>Prefabs」フォルダ以下にあるオブジェクト(プレファブ)を適当に置くだけだ。配置するときはシーンギズモで平行投影モードにするか、レイアウトを 4分割(メニューから「Window>Layouts>4 Split」)にするのも良いかも知れない。また、Ctrl を押しながらオブジェクトを移動すれば、一定間隔でスナップしながら配置できる(スナップ量はメニューから「Edit>Snap Settings...」で設定できる)。自由にステージを作ってみよう。






■スカイボックスを設定する

 最後にスカイボックスを設定してみよう。上記の「Sample Assets (beta) for Unity 4.6」にも Unity4 時代の Skybox が入っているが、せっかくなので別のスカイボックスを使ってみよう。

1.再び Ctrl - 9 で Asset Store を開き、検索ボックスに「Fantasy Skybox」を入れて検索し、「無料のみ」のボタンを押してみよう。リストが出たら「Fantasy Skybox FREE」を探して「ダウンロード」し、続けて「インポート」しよう。
(※) Unity5.5 にアップグレードしたばかりのときは Asset Store にログインできない(エラーが出る)かも知れない。その場合は Unity エディタを再起動するとログインできるようになる。





2.ダイアログが出たら「Import」ボタンでインポートしよう。インポートが終わったら、プロジェクトエクスプローラで「Fantasy Skybox FREE>Materials」フォルダにある「Sunny 01A」を探そう。






3.見つけたらメニューから「Window>Lighting」を開き、一番上にある「Enviroment Lighting」の「Skybox」に「Sunny 01A」を設定する。これでとりあえずは完成だ。







 ほとんどの設定がデフォルトのままなので、色々変更・調整してみると良いだろう。特に Unity5 になってからはライティングやシェーダーの仕様が大幅に変更されたようで、そういう意味では今回はかなりいい加減だ、その辺はきちんと調べた方が良いかも知れない。とりあえず動かせれば良い人向けということで(笑)。




(関連記事)
【Unity】プロ生ちゃんを動かす!(Unity4)
【Unity】【C#】ユニティちゃんをサクっと簡単に動かす!(Unity4)
【Unity】【C#】SmoothFollow に回転アングルと距離の遠近機能を付けてみる
【Unity】【C#】FPS(フレームレート)をリアルタイムに測定して表示するv2(4隅選択可能で、画面サイズの変更にも対応版)






このコンテンツの一部には『ユニティちゃんライセンス』で許諾されたアセットが使用されています。
Portions of this work are licensed under Unity-Chan License




category: Unity

thread: ゲーム開発

janre: コンピュータ

tag: プロ生ちゃん  サンプル 
tb: 0   cm: --

【Unity】【C#】FPS(フレームレート)をリアルタイムに測定して表示するv2(4隅選択可能で、画面サイズの変更にも対応版)  



※「UI-Text(uGUI)版」は>>こちら

 約1年と少し前(当時:Unity 5.1.2f1)、UnityPlayer が旧プラグインとされ、サポートが終了となり、WebGL に移行しようと試してみたが、まだ HTML5(WebGL)出力はβ版だった事もあり、動作は非常に重くファイルサイズも巨大となり、とても実用的とは言えなかった。

 しかし最近(掲載時点:Unity 5.4.3f1)ではパフォーマンスも改善され、ファイルサイズも随分と小さくなり、十分に使えるレベルになったので、色々試してみようと Unity4 時代に作ったサンプルなどを Unity5 に読み込んで試してみている。

 ただ、残念ながら100%互換とは行かないみたいだね。見た目は多少目をつぶるが、動きはある程度の速度が出ないと操作性や快適さに関わるので、実験するにあたって、以前に作った「簡易FPSモニタ」は欠かせないアイテムとなった。以前のバージョンは一定位置固定で、自分なりに定数を書き換える仕様になっていたが、実は簡単に4隅を選択して配置できるバージョンも作ってある。手軽に使えるアイテムとして載せておこう。

●リアルタイムにFPSを測定して表示するv2(4隅選択可能で、画面サイズの変更にも対応版)
using UnityEngine;
using System.Collections;
using System.Collections.Generic;

/**
* フレームレート測定モニタv2
*/
public class FpsMonitor : MonoBehaviour {

//測定用
int tick = 0;
float elapsed = 0;
float fps = 0;

//表示基準位置用
public enum Alignment
{
LeftTop, //画面左上
RightTop, //画面右上
LeftBottom, //画面左下
RightBottom, //画面右下
}

public Alignment alignment = Alignment.LeftTop;

//外観設定(デフォルト値)
const float GUI_WIDTH = 75f; //GUI矩形幅
const float GUI_HEIGHT = 30f; //GUI矩形高さ
const float MARGIN_X = 10f; //画面からの横マージン
const float MARGIN_Y = 10f; //画面からの縦マージン
const float INNER_X = 8f; //文字のGUI外枠からの横マージン
const float INNER_Y = 5f; //文字のGUI外枠からの縦マージン

//オフセット位置(MARGIN_X, MARGIN_Y)ユーザー設定用
public Vector2 offset = new Vector2(MARGIN_X, MARGIN_Y);
public bool boxVisible = true; //囲みボックスの可視フラグ
public float boxWidth = GUI_WIDTH; //囲みボックスの幅
public float boxHeight = GUI_HEIGHT; //囲みボックスの高さ
public Vector2 padding = new Vector2(INNER_X, INNER_Y);

float x, y; //表示位置
Rect outer; //外枠(GUI矩形領域)
Rect inner; //内枠(文字領域)

//画面サイズ変更チェック用
int oldScrWidth;
int oldScrHeight;


// Use this for initialization
void Start () {
oldScrWidth = Screen.width;
oldScrHeight = Screen.height;
LocateGUI();
}

// Update is called once per frame
void Update () {
tick++;
elapsed += Time.deltaTime;
if (elapsed >= 1f) {
fps = tick / elapsed;
tick = 0;
elapsed = 0;
}
}

void OnGUI () {
//画面サイズ変更チェック
if (oldScrWidth != Screen.width || oldScrHeight != Screen.height) {
LocateGUI();
}
oldScrWidth = Screen.width;
oldScrHeight = Screen.height;

//fps表示
if (boxVisible) {
GUI.Box(outer, "");
}

GUILayout.BeginArea(inner);
{
GUILayout.BeginVertical();
GUILayout.Label("fps : " + fps.ToString("F1"));
//↓たまに極端に大きな値が出るので使い勝手が悪い
//GUILayout.Label("fps : " + (1f / Time.deltaTime).ToString("F1"));
GUILayout.EndVertical();
}
GUILayout.EndArea ();
}

//表示位置を計算する
void LocateGUI() {
x = GetAlignedX(alignment, boxWidth);
y = GetAlignedY(alignment, boxHeight);
outer = new Rect(x, y, boxWidth, boxHeight);
inner = new Rect(x + padding.x, y + padding.y, boxWidth, boxHeight);
}

//横位置の計算
float GetAlignedX(Alignment anchor, float w) {
switch (anchor) {
default:
case Alignment.LeftTop:
case Alignment.LeftBottom:
return offset.x;

case Alignment.RightTop:
case Alignment.RightBottom:
return Screen.width - w - offset.x;
}
}

//縦位置の計算
float GetAlignedY(Alignment anchor, float h) {
switch (anchor) {
default:
case Alignment.LeftTop:
case Alignment.RightTop:
return offset.y;

case Alignment.LeftBottom:
case Alignment.RightBottom:
return Screen.height - h - offset.y;
}
}
}

 使い方は Main Camera や Directional Light 等、ずっと使われているものにスクリプトを追加しても構わないし、空の GameObject を配置しておいて、それに追加しておくのも良いだろう。GUI を使っているので、どこかに GUI Layer が追加されている必要がある(大抵は Main Camera にはじめから組み込まれている)。

 また、測定方法は更新されたフレーム数を1秒以上経過したとき、その経過時間で割る方式にしているが、以下のように、1秒を毎デルタタイムで割る方法もある。

GUILayout.Label("fps : " + (1f / Time.deltaTime).ToString("F1"));

 しかしやってみると、表示が速すぎて見づらいのと、たまに極端に大きい値(350fpsとか)が出るようなのでやめた。超詳細なフレームレートを測定したいのなら、検討するのも良いだろう。

 内容的には以前と同じで、指定した4隅の位置や画面サイズの可変に対して、描画位置を再計算するだけのものなので、難しくはないだろう。あくまで手軽に表示位置変更できるようにしただけのバージョンである。


(関連記事)
【Unity】【C#】UI-Text 版 FPS(フレームレート)をリアルタイムに測定して表示する
【Unity】【C#】FPS(フレームレート)をリアルタイムに測定して表示する
【Unity】【C#】独自のギズモ(Gizmo)を表示する
【Unity】【C#】インスペクタの表示項目を動的に変更する


category: Unity

thread: ゲーム開発

janre: コンピュータ

tag: Unityライブラリ  C#  サンプル 
tb: 0   cm: --


プロフィール

Social

検索フォーム

全記事一覧

カテゴリ

ユーザータグ

最新記事

リンク

PR

▲ Pagetop