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

【Unity】タブ切り替えの UI をコードを書かないで作る  


 今回はスクリプト無しでタブ切り替え(TabStrip, Tabs Widget)を作る方法を紹介しよう。と言っても私が考えたわけではなく、内容的には海外記事の翻訳したものを、自分なりにアレンジしたものだったりする(笑)。

Unity UI: Easy Tabs (no scripting)



 タブの UI の実装に関しては、大抵スクリプトで画像を切替える方法がオーソドックスな気がするが、今回のように Toggle を上手く利用する方法もなるほどと感じたので、日本語記事にしておくと初心者にも役に立つんじゃないかと考えた(ググってもなぜかタブ実装の詳しい日本語記事が見つからなかったので)。それに何にしてもコードを書かずに済ませられるなら、それだけ労力を減らせるので、そういった方法は積極的に導入していくと良いと思う(アプリが大きくなるにつれ、大量のコードの管理・デバッグに時間を取られてしまうため)。


(※) Unity 2018.4.12f1 / Windows10(x64) で確認



■タブの backgroud 画像を用意する



 とりあえず、参考記事を真似して、もっと簡単な画像を用意したので、必要ならダウンロードして使って欲しい。もちろんダウンロードした素材は自由に加工して使って貰っても構わない(zip には psd と完成例の unitypackage も付けておく)。

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


 プロジェクトビューで適当なフォルダを作ったら、zip に入っている「Tab_altas.png」をドラッグドロップなどして、インポートして欲しい(.unitypackage はこの記事の完成例となっている。プレファブ化して利用するのも良いだろう)。

 「Tab_altas.png」をインポートしたら、まずはインスペクタで「Texture Type」を「Sprite (2D and UI)」に、「Sprite Mode」を「Multiple」にしよう。これは1つの画像を複数のスプライトとして利用する設定だ。



 次にそのままインスペクタから「Sprite Editor」を開いて、上部の [Slice]を押して、「Type」で「Grid By Cell Size」で「Pixel Size」を 64x64 にして、[Slice] して欲しい。これでグリッド状に 64x64 でスプライトが等分割される。



 分割したら、各スプライトをクリックすると、右下に「Sprite」の設定が出るので、Name(名前)や Border(引き伸ばしの領域)を設定しておこう。名前は左から「Tab_panel」「Tab_item」(わかり易い名前なら何でも良い)と付けておき、Border は各スプライトの LRTB を全て 18 にしておいて欲しい。完了したら、右上の [Apply] を押しておく。画像の引き伸ばし領域の設定に関しては以下の記事がわかり易いだろう。

UnityのSpriteを引き伸ばす際に綺麗に引き伸ばす方法 SpriteEditor






■タブの UI を作る

 スプライトの設定ができたら、本題のタブの UI を作っていこう。まずは背景のベースとなる画像(Image)を1つ置く。場所はどこでも良いが、とりあえず中央に置いておきたいので RectTransform の Pos を全て (0, 0, 0) にしておく。



 また、ついでに Image を置いたときに自動で追加された Canvas の「Canvas Scaler」を適当に設定しておく。ここでは「UI Scale Mode」を「Scale With Screen Size」に、「Reference Resolution」を「1920 x 1080」にしておいた。この辺りは自分の環境によって変えて欲しい。



 先ほど置いた Image も「TabPanel」と名前を変えておき、サイズも適当に決めておこう。ここでは 600 x 500 にしておいた。そして Image に「Tab_altas」の分割スプライトの「Tab_panel」を設定しておく



 次にタブの画像を並べるレイアウト用の空オブジェクトを作ろう。「TabPanel」をヒエラルキーで選択して、右クリックで「Create Empty」して、名前を「TabContainer」としておく。そして、[Add Component] から「Toggle Group」と「Horizontal Layout Group」を追加しておく。設定は自分の環境に合わせればよいが、「Child Control Size」と「Child Force Expand」をオンにしておけば、自動でレイアウトしてくれる。



また「TabContainer」の RectTransform は Pivot や引き伸ばしなどの設定をしておこう。これも画像などのサイズによるので、自由に設定しても構わない。設定例はキャプチャを参考にして欲しい。


 TabContainer を適当に設定したら、次に各タブを作っていこう。TabContainer を右クリックして、Toggle を置く。初期位置がおかしくなってたりしたら、一旦 Toggle をオフ→オンにすると自動レイアウトになっている場合、再配置される(セーブなど何らかの操作をすると再計算される)。

 置いた Toggle はわかり易いように「Tab 1」とでも名前を変えておき、「Toggle」コンポーネントの「Group」に、先ほど「TabContainer」にアタッチした「Toggle Group」を登録しておく。



 そして「Tab 1」を展開し、「Bacground」の Image にスプライト「Tab_atlas」の「Tab_item」を設定する。Color も A(アルファ)を下げておく。RectTransform は適当で良いが、上下ストレッチを設定しておこう。



 また、更に下の階層の「Checkmark」にも「Tab_item」を設定し、同じように RectTransform をストレッチ設定にしておく。あとはテキストとなる「Label」も適当に設定しておくと良いだろう。



 タブが1つできたら、「Tab 1」を [Ctrl + D] で適当に複製しよう。名前は適当に付けて欲しい。また複製したタブの「Toggle」コンポーネントの「IsOn」は全てオフにしておく(これも設定したら、一旦オブジェクトをオフ→オンすると再描画できる)。



 タブを並べたら、次に切り替える内容を作ろう。これも自分の環境によって何でも構わないが、「TabPanel」以下に適当に同じサイズの空オブジェクトをタブと同じ数だけ作り、内容を各オブジェクトに入れておく、ここでは「PageContainer」を作って「Page 1~3」を作ってテキストを入れておいただけだ。好きにやって貰って構わない。これらも「Page 1」以外は非表示にしておく(タブのオン/オフの初期状態に合わせておく)。



 Page 1~3 を作ったら、各対応タブに戻り、「Toggle」コンポーネントの「On Value Changed (Boolean)」にコールバックを設定しよう。これは Toggle.IsOn のオン/オフ状態が変化したときに、実行されるメソッドなどを登録するものだ。ここに各対応する「Page」の表示/非表示を設定する。具体的には「Tab 1」には「Page 1」の「GameObject.SetActive (Dynamic)」をセットし、同様に「Tab 2」には「Page 2」を、「Tab 3」には「Page 3」をセットする。ここでは表示の切り替えだけなのでコードを書く必要はないが、色々コールバックに仕込みたいなら以下の記事を参考にして欲しい。

【Unity】【C#】UnityEvent, Action, delegate, interface でのコールバック実装方法とインスペクタでの登録



 もし、クリックしたときのトランジション(色の変化)がいらないなら、各 Toggle の Transition の Target Graphic を None(元の画像を外す)にしておけば良い。



 これで完成だ。シーンを保存して動作を確かめてみよう。


VRM Live Viewer では、これをそのまま使っている。
色や文字を太字に変化するようにすれば、見た目も結構良くなる。
何よりタブ切り替えのコードを書かなくて済むので実装が楽だ(笑)。






(関連記事)
【Unity】【C#】UnityEvent, Action, delegate, interface でのコールバック実装方法とインスペクタでの登録
【Unity】【C#】制限付きでテキストのサイズに合わせて他のオブジェクトのサイズも変化させる
【Unity】【C#】RectTransform の矩形の実座標を取得する
【Unity】【C#】uGUI ドロップダウンの要素をコードで設定と取得、外観のカスタマイズなど
【Unity】【C#】インスペクタの表示項目を動的に変更する
【Unity】【C#】独自のギズモ(Gizmo)を表示する


関連記事
スポンサーサイト



category: Unity

thread: ゲーム開発

janre: コンピュータ

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

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


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

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

 現在ベータ版として、色々な機能を試験的に導入中という感じだが、「VRoid Hub」や「ニコニ立体」「BOOTH」などでダウンロードした VRM または、自分で作った VRoid / VRoid Mobile などを踊らせてみるだけなら十分可能なので、色々試して遊んで貰えると嬉しい(※キャプチャや動画などご自由にどうぞ。また、ハッシュタグ「#VRMLiveViewer」はどなたか付けてくれたので、私も便乗させて貰ってます。感謝!)。

VRM Live Viewer ver.0.99β(ベータ版)
× VRoid Hub    



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

◆アップデート(修正) 情報◆
0.99β・シーンデータのインポート/エクスポート機能を追加。
・シーンロード/セーブとVRMフォルダブラウザのスクロール位置を保持するように変更。
・パネルをロックしたまま背景ベースを切り替えると一部ドラッグできない領域(パネルがあった位置)ができる不具合を修正。
0.98β・Groupタブのサムネイルを非同期生成することにより、登録数が多いときのプチフリーズを軽減。
・日本語以外の言語設定のときでも、VRoidHubの「利用する」ボタンが日本語になってしまう不具合を修正。
0.97β・フィルターを各タブごとに独立することにより、タブ切り替えでリセットされないように変更。
・内部ライブラリを VRoidSDK 0.0.20 にアップデート。
0.96.1β・「他人の利用NG」「公開」設定になっているとき、自分のモデルでも「利用する」ボタンが無効になる不具合を修正。
→ バグ報告は Twitter などでお気軽にどうぞ!(超助かります👍)






(Google Drive を利用)


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



>>アクシアVRM(縞パンver.)は、Google Drive からもDLできます。


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

 とは言え、まずは単純に楽しんで貰えれば良いと思う。VRM の配布は「VRoid Hub」や「ニコニ立体」に多くアップロードされているが、有名キャラやオリジナルキャラは Web上でも公開されているので、そういったものも掲載しておいた

■アプリのダウンロード

■操作説明
 ●基本操作(キー・マウス[PC] / タッチ[Android])
 ●キーボードでのカメラの操作(Windows 版のみ)
 ●ジョイスティックでのカメラ操作(Windows 版のみ)

■サイドパネル
 ●ファイルの読み込み
 ●モーション
 ●ブレンドシェイプ
 ●背景
 ●音楽
 ●その他
 ●モデル情報

■ファイル関連
 ●各種ファイルを開く (Open File)
 ●VRM のフォルダーブラウズ(VRM Folder Browser)
 ●VRM のファイル移動(VRM File Move)
 ●シーンの読み込み/保存(Scene Load/Save)
 ●シーンの削除(Scene Delete)

■各種設定パネル
 ●曲リスト(Music Select)
 ●曲リストから削除(Remove Songs)
 ●音楽の遅延再生(Music Start Timing)
 ●マイク感度の設定 (Mic Sensitive)
 ●エフェクト切り替え (Effect Select)
 ●BVHモーションの再生設定 (BVH Play Setting)
 ●ユーザーオブジェクトの配置 (User Object Transform)
 ●床のサイズ変更 (User Object Size)
 ●360度画像の設定 (360deg Image Setting)
 ●カメラの設定 (Camera Setting)
 ●オプション設定等

■背景を変える
 ●背景の3Dモデルを読み込んでみる
 ●360度(全天球)画像読み込んでみる
 ●エフェクト(パーティクル)を入れてみる

■GLBで背景モデルを自作する(※別ページ)

■試験的に実装している機能
 ●ショートカット的なもの
 ●ブレンドシェイプのキー操作
 ●一度読み込んだファイルの記憶機能

■補足説明

■バージョンによる差異について
 ●過去バージョンのダウンロード

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

■VRoid Hub 連携
 ●VRoid Hub について(連携方法)
 ●VRoid Mobile で作ったキャラを使う
 ●フィルタの使い方
 ●グループの使い方

■素材の入手方法
 ●VRM(3Dアバター)の入手方法
 ●GLB(3Dモデル)の入手方法
 ●GLTF(3Dモデル)の入手方法
 ●360度(全天球)画像の入手方法
 ●BVH(モーションファイル)の入手方法

■使用できる BVH を作る(変換する)
■利用したオープンソースプロジェクト・素材など

(※) VRoid Studio 0.7.4 / VRoid Mobile 1.8 / Windows10(x64) / Galaxy S7 Edge (Android 7.0/8.0) で確認
(※) 内部ライブラリ・SDKバージョン: Unity 2018.4 / UniVRM 0.53 (MToon 3.2) / VRoid SDK 0.0.20
(※) キャプチャー/仕様はリリース当時のバージョンのものなので、現在のバージョンとは異なってる場合があります。



■操作説明

●基本操作(キー・マウス[PC] / タッチ[Android])

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

※まだ暫定的ではありますが、「ショートカット」や「ブレンドシェイプ」のキー操作もできます。

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

●キーボードでのカメラの操作(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(右クリックで「名前を付けてリンク先を保存」)
>>背景の設定方法




■サイドパネル

●ファイルの読み込み [左パネル]

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

※アプリによっては専用フォルダにダウンロードされることがあります(Chromeなどデフォルトの場合)。仮想フォルダやクラウドストレージでも同じようにそのアプリ専用アクセスになることがあります(※Android の場合「ダウンロード」フォルダが内部・外部ストレージ両方の仮想ダウンロードフォルダとなっているため、ファイルの情報が取得できない→直接フォルダアクセス("/storage/emulated/0/Download"等)した場合は読み込める)。その場合他のアプリからはアクセスできないことがあるので、別のフォルダに移動して読み込んでみて下さい。

VRoid Hub に接続し、直接アバターをロードできます(※連携設定が必要です)。
※スマホで利用する場合は、モデルのサイズが大きい場合もあるので、なるべくWIFIを使って下さい。

各種類ごとにファイルを開きます(PC版 / Android 8.0 以上のみ)。
シーンの読み込み/保存を開きます。
VRM フォルダブラウザ (VRM Folder Browser) を開きます。


●モーション [右パネル]

[BVH] 読み込んだ BVH を再生します。デフォルトではPC版に同梱されている「test.bvh」と同じものが使われます。
BVH(モーション)をアプリにロードします。ただし、「Y-up 右手座標系」(OpenGL系、Maya, Daz3D など)の座標系になります。「Z-up 右手座標系」(3ds Max など)の場合は、見た目がおかしくなります。[>>3Dツールごとの座標系など]
  BVHモーションの再生設定(BVH Play Setting)を開きます。
※処理落ちなどでモーションが遅れた場合は、再度クリックすると再計算されます(Sync Start がオンのとき)。
※[BVH 読込] はに変更されました。
※[Y:180], [Loop], [Speed] は再生設定パネルに置き換えられました。

[CRS] ユニティちゃんライブステージ -Candy Rock Star- のモーションを再生します。プリセット曲(Unite In The Sky)のダンスモーションです。余談ですが「CRS」(Candy Rock Star の略)はユニティちゃんのライブステージでの衣装の名前ですが、「CRS」という略記はプロジェクト名などにも使われているため、関連するものにはよく利用されます。
※処理落ちなどでモーションが遅れた場合は、再度クリックすると再計算されます(Sync Start がオンのとき)。

[T-Pose] Tポーズに固定します。





●ブレンドシェイプ [右パネル]

(リップシンク)
┌ [None / Key] なし / キーボードで口パク操作できます(PC版のみ)。
├ [AIUEO / CRS] "あいうえお"の口パクをします(※プリセット曲が再生されてないとき)。プリセット曲(Unite In The Sky)が再生されているときは曲のリップシンクが再生されます。
├ [Mic LipSync] マイクから音声を認識して口パクします。
└ [Audio LipSync] 再生中の音源(音楽)から音声を認識して口パクします。楽器音なども混ざるので正確さには欠けるのでご了承下さい。マイク入力の調整をすれば、少しだけましになります(笑) [※ストリーミング再生でのリアルタイムな認識のため、毎回必ず同じ認識になるとは限りません]。

※[AIUEO / CRS] 以外のとき、ブレンドシェイプのキー操作もできます。

マイク感度設定を開きます。
[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, bmp)、または 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楽曲再生で再開されます)。
音楽を再生します。
音楽を停止します。
曲リストを開きます。再生する曲・再生方法などを選択できます。
※[曲リストに追加][曲リストから削除][再生モード][遅延再生の時間設定]などは、曲リスト内に移動しました。


●その他 [左パネル or 各パネル]

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

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


●モデル情報 [左パネル]

 モデルに設定されている各項目の内容によってブラウザやメーラーなどを起動できるアイコンが表示されます。
 また VRoid Hub からロードされた場合、情報が追加されることもあります([*VRoid Hub] が付きます)。

ブラウザでWebページを開きます
Googleで検索します(ブラウザ)
メーラーを起動します

 内容の検出は "http://" または "https://" の場合、URLと認識されます。VRoid Hub モデルの場合、タイトル・作者のページが開きます。
 また連絡先では、Twitter アカウントの場合(@fantom_1x または Twitter: fantom_1x など)はツイッターのURLを開きます。メールアドレスの場合はメーラーが起動します。
 その他の語句はGoogle検索となります。





■ファイル関連

●各種ファイルを開く (Open File) [から]

 各種類ごとにファイルを開きます。これは [ファイル読込] がファイル種類を問わずに共通でフォルダを開くことに対し、種類ごとに最後にアクセスしたフォルダを記憶しておけるものです。ただし、フォルダの記憶はPC版とAndroid 8.0以上のみの機能になります(Android 7.0以前ではどのボタンでも共通になります[=OSが対応してないため])。
VRM フォルダブラウザ (VRM Folder Browser) を開きます。



●VRM のフォルダーブラウズ(VRM Folder Browser) [※スマホ版ではAndroid 5.0以上]

 開いたフォルダからVRMファイルを検出し、サムネイルの一覧を作成します。サムネイルをクリックすることにより、VRMをロードできます([ファイル読込]でVRMを読み込むのと同じになります)。サムネイルは縮小してキャッシュされ、2回目以降の表示はキャッシュが使われます。キャッシュは元VRMのファイル名と更新日付に依存します。VRMにサムネイルが設定されてない場合は、白い画像になります。

※アプリによっては専用フォルダにダウンロードされることがあります(Chromeなどデフォルトの場合)。仮想フォルダやクラウドストレージでも同じようにそのアプリ専用アクセスになることがあります(※Android の場合「ダウンロード」フォルダが内部・外部ストレージ両方の仮想ダウンロードフォルダとなっているため、ファルダ内の情報が取得できない→直接フォルダアクセス("/storage/emulated/0/Download"等)した場合は読み込める)。その場合他のアプリからはアクセスできないことがあるので、別のフォルダに移動して読み込んでみて下さい。

 一度開いたフォルダはドロップダウンに登録され、ドロップダウンから選択でもフォルダを移動できます。登録されているフォルダパスは、存在しないか、VRMファイルが1つも見つからなかったときに、自動的にドロップダウンから削除されます(※次回起動時に削除)。

フォルダを開きます。
VRM ファイル移動 (VRM File Move) を開きます。(※現在、Android には実装されてません)



●VRM のファイル移動(VRM File Move)(※現在、Android では利用できません)

 VRM Folder Browserで開いているフォルダの VRMファイルを「移動先」フォルダへ移動します。
チェックして、[移動]ボタンでファイルを移動できます。

[移動先を開く] ファイル移動の実行後、移動先のフォルダを VRM File Browser で開きます。

フォルダを開きます。
VRM フォルダブラウザ (VRM Folder Browser) を開きます。



●ファイルのドラッグ&ドロップができます(※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(右クリックで「名前を付けてリンク先を保存」)
>>背景の設定方法


●シーンの読み込み/保存 (Scene Load/Save) [から]

 現在の各種データ(アバター, モーション, 背景モデル, 空, エフェクト, 音楽, ブレンドシェイプ, マイク感度など)の設定を1つの「シーン」という単位で保存/読み込みを行います。


 ロードは順次読み込みとなり、現在の状態に追加で読み込まれます([ファイル読込]で1つ1つ読み込むのと同じ動作になります)。
 ただし、背景モデル(gltf/glb/プリセット背景/床など)や空(360度画像/プリセット空)などは排他的となります(最後に読み込まれたものが表示されます)。
 また、背景ベース(Plane / CRS Stage / Floating など)を読み込むとプリセット背景の初期状態にリセットされます。

 各確認ダイアログには付加機能があり、[読み込み]では各種類ごとでのロード、[上書き保存]では名前のみを変更することができます。

[読み込み] 選択したシーンをロードします。
 確認ダイアログでは読み込む種類を選択できます。背景ベース以外は現在の状態に追加となります。
 例えば「アバター(VRM)」のみチェックを外して、背景のみを現在と入れ替える、なんてこともできます。
 VRoid Hub のアバターのロードは常にキャッシュが優先されます(デフォルトではタイトルに "(VRoid Hub)" が付いています)。
※VRoid Hubのアバターをロードするには予めログインしておく必要があります。
※VRoid Hubのアバターはリアルタイムにダウンロードされるため、なるべく高速な回線/WIFI等を使って下さい。通信状態により、繋がらない場合もあります。


[名前変更] 選択したシーンの名前を変更できます。
 設定内容は変更されません。

[新規保存] 現在の状態をシーンとして保存します。
 確認ダイアログでは名前を自由に付けられます。[自動生成]は"曲名 / アバター in 背景"になります。

[上書き保存] 選択したシーンに現在の状態を上書きします。また名前の変更も同時にできます。
 確認ダイアログでは名前を変更できます。[上書き保存]では名前と設定が保存されます。
 [名前変更]ボタンは名前だけの変更になります。設定は保存されません。
 デフォルトでは選択したシーンの名前になります。[自動生成]ボタンを押すと、現在の曲名、アバター、背景などから自動で生成します。

[Auto Save] オートセーブされているシーンをロードできます。
 シーンやファイルの読み込み、背景ベース変更、アプリの終了時など大きな変更がある前に自動バックアップとして保存されています。ただし、あくまでも変更前の状態だけなので、履歴を遡るようなことはできません。
 これも [読み込み] と同じように確認ダイアログが表示され、種類を選択して一部のみを読み込むこともできます。

シーンの削除(Scene Delete)へ移動します。
データをファイル(.json)から読み込みます。
データをファイル(.json)に保存します。

シーンのデータにはサムネイルや素材自体は含まれません。ファイルの絶対パスとアプリでの設定値のみが記録されています。従ってファイルを移動したときなどは「ファイルが見つかりません」等のメッセージがでます。その場合は元のパスに素材ファイルを置くか、一度読み込んでから保存し直せば利用できます(※PC 版と Android 版で互換性はありますが、パスが変わってしまうので注意して下さい)。
※サムネイルはロード時や「VRMフォルダブラウザ(VRM Folder Browser)」等を使ったときに生成(キャッシュ)されます。ただし、VRoidHub のモデルを利用してる場合、VRoidHub にログインしておく必要があります(ログインしてからロード画面等に行けば、自動生成されます)。


●シーンの削除 (Scene Delete) [から]

 保存されているシーンを削除します。削除されたデータは元に戻せません。
 [削除]ボタンで実行されます。
シーンの読み込み/保存(Scene Load/Save)へ移動します。




■各種設定パネル

●曲リスト (Music Select) [から]

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


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

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


●音楽の遅延再生 (Music Start Timing) [から]

 再生ボタンを押してから、遅延して開始する時間を設定します(秒)。BVH モーションなどにタイミングを合わせたいときなどに使います。実際には処理の負荷などにより、わずかにずれることがあります。
設定は曲のファイル名ごとに記憶されます。


●マイク感度の設定 (Mic Sensitive) [ or から]

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

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




●エフェクト切り替え (Effect Select) [orから]

 エフェクトを選択できます。
背景を切り替えるとリセットされます。
[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) [orから]

 ロードされている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) [orから]
(※この機能は仕様・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)
>>背景の設定方法



●床のサイズ変更 (Floor Size) [orから]

 プリセットの床(右パネルの背景の床)を使用しているとき、サイズを変更できます。

[Scale] 床のサイズを変更します(元サイズは1)





●360度画像の設定 (360deg Image Setting) [orから]

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

[Rotation] 360度(全天球)画像を回転します(-180~180度)。
[Scale] 全天球のサイズを変更します(1が元のサイズ)。

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

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


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



●カメラの設定 (Camera Setting) [から]

 カメラの動きなどを調整できます。ただし、速度が一定であっても、背景やモデルの負荷によって、体感速度が違う場合があります。システムでは最後の値を記憶してますが、シーンごとにも保存できます。

[Speed] カメラの移動/回転速度を調整できます(1が基準の速度で、0.1~3倍)。マウス/キーボード/ジョイスティック共通です。


●オプション設定等 (Setting) [から]

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

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




■背景を変える

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

GLBで背景モデルを自作する

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

●ショートカット的なもの(※0.94βで大幅に変更されました)

[V] VRoidHub 連携を開く
[F] VRM Folder ブラウザを開く
[R] シーン の読み込み/保存を開く
[M] 曲リストを開く

[E] エフェクト切り替えを開く
[J] 音楽の遅延再生の時間設定を開く
[G] BVHモーションの再生設定を開く
[W] マイク感度の設定を開く
[T] ユーザーオブジェクトの配置を開く
[U] 360度画像の設定を開く
[Y] 床の設定を開く
[K] カメラの設定を開く

[Q] ファイルパネル(Open File)を開く
[L] モデル(VRM/GLTF) 読込(ファイル選択)を開く
[B] BVH 読み込み(ファイル選択)を開く
[N] 音楽 読み込み(ファイル選択)を開く
[I] 全天球(360度画像) 読み込み(ファイル選択)を開く

[H] 操作説明・ヘルプを開く
[O] パネルの透明度設定を開く
[[] クレジットパネルを開く

[0](テンキー) 音楽の再生
[.](テンキー) 音楽の停止
[*](テンキー) CRS の楽曲とモーションの再生
[PgUp] 曲リストで次の音楽を再生する
[PgDn] 曲リストで前の音楽を再生する

[F1] リップシンクを「None / Key」にする
[F2] リップシンクを「AIUEO / CRS」にする
[F3] リップシンクを「Mic LipSync」にする
[F4] リップシンクを「Audio LipSync」にする

●ブレンドシェイプのキー操作(※変更・削除される可能性があります)

※「AIUEO / CRS」 のときは利用できません。
(テンキー)
[1] あ (A)
[2] い (I)
[3] う (U)
[4] え (E)
[5] お (O)
[6] デフォ表情 (Neutral)
[7] 目閉じ (Blink)
[8] 右目閉じ (Blink_R)
[9] 左目閉じ (Blink_L)
(フルキー)
[1] 喜 (Joy)
[2] 怒 (Angry)
[3] 哀 (Sorrow)
[4] 楽 (Fun)
[5] 視線上 (Look_Up)
[6] 視線下 (Look_Down)
[7] 視線右 (Look_Right)
[8] 視線左 (Look_Left)



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

※この機能は 0.94βで廃止されました。「シーンの読み込み/保存」でも現在読み込んでいるファイルや設定を記録できるので、そちらを使って下さい(読み込みのオプションでアバター/モーション/音楽等、別々にロードすることもできます)。

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

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

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

「VRM/GLTF」 の記憶キー:[F1]~[F10]
「BVH」 の記憶キー:[1]~[9][0] (フルキー)
「音楽」 の記憶キー:[Q][W][E]…[P]



■補足説明

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

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

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

・v0.52βにおいて、内部ライブラリである UniVRM を 0.46c へアップグレードしました。
 それに伴い、シェーダーやノーマルマップの更新・修正等の影響で、v0.51β以前とは見た目が大きく異なってしまう場合があります(v0.51β以前の内部ライブラリバージョンは UniVRM 0.42)。
 詳しくは「バージョンによる差異について」にて確認して下さい。

・v0.81βにおいて、「360度画像の回転(360deg Image Rotation)」に全天球のサイズ変更も加わり、「360度画像の設定(360deg Image Setting)」に名前が変更されました。

・v0.87βにおいて、環境光の影響を軽減するため、光源色を Unity のデフォルトに変更しました(以前は少し青みがかっていたが、白っぽくなった)。
 詳しくは「バージョンによる差異について」にて確認して下さい。

・v0.94βにおいて、「一度読み込んだファイルの記憶機能」は廃止されました。「シーンの読み込み/保存」でも現在読み込んでいるファイルや設定を記録できるので、そちらを使って下さい(読み込みのオプションでアバター/モーション/音楽等、別々にロードすることもできます)。

・v0.95βにおいて、「常にダウンロード」オプションは削除されました。内部 SDK のアップデートにより、オプション不要で自動的に最新版をダウンロードするようになりました。



■バージョンによる差異について

 内部ライブラリである UniVRMやシェーダ(MToonも含む)により、バージョンによって見た目が大きく異なる場合があります。

VRM Live ViewerUniVRMMToon影響のある修正内容備考
0.51β以前0.421.3 -- --
0.52~0.54β0.46c1.7UniVRM ReleaseNote v0.44(ja)
UniVRM ReleaseNote v0.45(ja)
--
0.55~0.74β0.491.7 (*1)UniVRM ReleaseNote v0.49(ja)(*1) 本来なら1.8だが、光源反映の影響範囲が大き過ぎるため、ダウングレードで対応。
0.75~0.86βPC版のCRS Stageの一部影を無くし、軽量化(Android版は元から影処理が軽量)
0.87β以降0.533.2UniVRM ReleaseNote v0.52(ja)
UniVRM ReleaseNote v0.53(ja)
MToon が v3.2 となり、環境光の反映や影の感じが変わりました。Issue 等を見てみると、環境光反映との相殺で影が打ち消されている可能性があります。今後のバージョンアップで対応されるか否かはわかりません。

 特に Android をご使用の方は試用版を用意しましたので、アップデート前に試用版で動作確認後、本アプリをアップデートするか否かを検討して下さい。Android は上書きのダウングレードができないため、以前のバージョンに戻すことができません。十分注意してインストールして下さい(OSの仕様)。必要であれば、過去のバージョン(試用版)も使って下さい(※別のアプリとしてインストールされます。Trial となってますが、内容は通常版と同じです)。

 Windows の場合は、別フォルダを作って使用すれば、過去のバージョンも併用して使えます。

(Google Drive を利用)


Android 4.4以上 (※5.0以上推奨)

●環境光の反映などのため、陰影の感じが変わっています[※PC, Android 版両方]
v0.51β以前
v0.52~0.86β

v0.87β以降

●シェーダーの追加/環境光の変更などにより、影の付き方や、一部表現されてなかったものが表示されます
[※PC, Android 版両方]
v0.51β以前
v0.52~0.86β

v0.87β以降

●CRS Stage を軽量化するため、一部影の処理を無くしました(影の処理は負荷が高いため)
[※PC版のみ (Android版は元から軽量)]
v0.74β以前
v0.75β以降

●環境光の影響を軽減するため、光源色を Unity のデフォルトに変更しました(以前は少し青みがかっていたが、白っぽくなった)。
[※PC, Android 版両方]
v0.86β以前
v0.87β以降

●シェーダーが環境光の影響を強く受けるようになったため、影が薄くなる(消える)場合があります。
[※PC, Android 版両方]
v0.86β以前
v0.87β以降

 特に VRoid に関しては「既知の問題」にあるように、VRoid Studio 0.1.x でエクスポートしたものはかなりギラ付くようです。その際は最新版の VRoid Studio で再エクスポートすれば、ある程度修正されます。同様に UniVRM 0.42以前にエクスポートしたものは、最新の UniVRM でエクスポートすれば、ある程度修正されます。

 また、0.87βでは「Fade モードを使っている素材が透過されてない」という問題も確認しています。これらの詳細は「既知の問題」にも書いてあります。


●過去バージョンのダウンロード

 過去バージョンも置いておきますので、必要な方はダウンロードして使って下さい。
 Android は OSの仕様上、ダウングレードができないので、試用版となります(※別のアプリとしてインストールされます。Trial となってますが、内容は通常版と同じです)。

[Windows 版] (※別フォルダに分ければ共存できます)
>>Windows 0.51β をダウンロード
>>Windows 0.74β をダウンロード
>>Windows 0.86β をダウンロード

[Android 版] ※Android 4.4以上 (※5.0以上推奨)
>>Android 0.51 試用版をダウンロード(※別アプリとしてインストールされますが、内容は通常版と同じです)

>>Android 0.86 試用版をダウンロード(※別アプリとしてインストールされますが、内容は通常版と同じです)





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

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

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


[△] シェーダーの Fade モードが反映されなくなった?(※v0.87β以降)
→ GLTF を読み込んだ際に Fade モード(アルファで透明になる素材)が反映されてないことを確認しています。
 この問題は内部ライブラリである UniVRM のバグレポートとして送ってあります。今後のバージョンで修正されると思います。

●Fade モードを使っている素材が透過されてない
v0.86β以前
v0.87β以降


[×] 360度画像、モデルの一部のテクスチャが読み込まれない。
→ アプリでは特に素材のサイズ制限を設けてないため、巨大な 360度画像、GLTF/GLB などで大きなテクスチャを使っているものなどがロードされている、VRoidHub連携で大量のサムネイルをロードしているなど場合、メモリ不足で後から読み込んだ素材がロードできない場合があるようです(エラーは出ないで、一部が欠けてしまう、または無視される)。その場合は素材のサイズを小さくするか、または一旦アプリを終了し、他のアプリなども落としてメモリを確保してから試してみて下さい。特にスマホはPCよりもメモリが小さいことが多いため、ものによっては読み込めない場合もあります(スマホの場合、デフォルトでディスプレイが高解像度になってる事が多いので、解像度を下げることでメモリ確保や描画速度を軽くする方法もあります)。

[△] VRoid Hub からモデル読み込みが止まってしまう。
→ 通信状態やキャッシュの状態によって(?まだ調査中。なせがエラーが出ないことがある)、ごく稀に上手く読み込めないことがあるようです。しばらくしてエラーが出た場合は、ログウィンドウを閉じて再度試してみて下さい。出ない場合は、アプリを再起動してみて下さい。
 特にスマホで利用する場合は、なるべくWIFI等、高速な回線を使って下さい。

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

[×] ダウンロードした VRM が読み込めない。VRM Folder Browser で何も表示されない。
→ アプリによっては専用フォルダにダウンロードされることがあります(Chromeなどデフォルトの場合)。仮想フォルダやクラウドストレージでも同じようにそのアプリ専用アクセスになることがあります(※Android の場合「ダウンロード」フォルダが内部・外部ストレージ両方の仮想ダウンロードフォルダとなっているため、ファルダ内の情報が取得できない→直接フォルダアクセス("/storage/emulated/0/Download"等)した場合は読み込める)。その場合他のアプリからはアクセスできないことがあるので、別のフォルダに移動して(確実なのは内部ストレージ)読み込んでみて下さい。

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

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

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

[×] 音楽ファイルがエラーで読み込めない
→ ファイル名に記号が入っているとき、読み込みに失敗することがあります。その場合は記号を削除(リネーム)すれば、読み込めるようになります。内部のフォーマットが対応できない場合は読み込めません(他のフォーマットに変換すれば使える場合もあります)。

[-]「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」(目閉じ)と口パクに「A, I, U, E, O」(あいうえお)を使っています。当アプリでは 0.27β以降、VRoid に関しては Joy のデフォルト定義「~_ALL_Joy」の代わりに「~_EYE_Joy」を使用することによって、リップシンクとの2重モーフにならないように対処しています(VRoid Studio 0.2.8 までで生成された VRM で確認済み)。また、VRoid 以外では Joy に定義した各ブレンドシェイプの名前に "mouth", "あ", "ワ" が含まれている場合、口のブレンドシェイプとみなして無視するようにしています。

[○] 最新バージョンのモデルが VRoid Hub からロードできない。[ver.0.86 にて Fix]
VRoid Hub システムは最新10個のローカルキャッシュを保持しています。これは利用頻度の高いモデルを何度もダウンロードしないようにするためです。キャッシュが無効になった時点で新しいバージョンがダウンロードされます(→ 内部 SDK のアップデートにより、自動的に最新版がダウンロードされるようになりました)。



■VRoid Hub について(連携方法)

 VRoid HubVRMフォーマットで作られた 3Dモデルの共有プラットフォームです。pixiv が運営しており、同社が提供しているVRoid Studio を使えば、誰でも簡単に3Dモデルを作成/アップすることができます。

 また VRoid Hub には連携機能があり、このアプリではサイトでお気に入りを付けたもので、他の人の利用OKのモデル、または自分でアップしたモデルであれば、直接アプリにロードすることができます。



●VRoid Hub との連携方法

1.初回時は [VRoid Hub に接続] でブラウザが開きます。



2.「あなたのアカウントをVRM Live Viewerを連携しますか?」で [連携する] を押します。



3.連携許可すると認可コードが発行されるので、PCの場合はコピーして、アプリの入力ボックスに入力して下さい。スマホの場合は自動で入力されます。



 これで連携完了になります。次回以降は接続するだけでOKです(※ログアウトした場合は同じ手順をします→認可コードは毎回変わります)。




●VRoid Mobile で作ったキャラを使う

VRoid Mobile
VRoid Hub

 VRoid Mobile で作ったキャラ(アバター)なら、VRoid Hub 連携でダウンロードして使えます。

 「Yours」タブには VRoid Hub へアップロードしたキャラのみが表示されるので、「利用する」でダウンロードして踊らせて下さい。



●フィルタの使い方

 現在表示されているリスト(All / Yours / Liked タブごと)に表示されているサムネイルの中から、条件に合ったモデルだけを抽出できます。ちなみに「Yours」タブは自分のアップロードしたモデル、「Liked」タブは VRoidHub (Web)でハートを付けたモデル、「All」タブはその両方となります。

 フィルタの種類は以下の3種類となり、種類を選択すると、その内容をドロップダウンで選択できます。

[Tag] タグの中から検出します。ただし、VRoidHub (Web) とは少し異なり、大文字小文字を区別しません(1つにまとめられます)。
[Author] 作者から検出します。同名であっても別々になります。
[Name] モデル名から検出します。別のモデルで同名の場合も検出されます。

[☆/★] お気に入りのオフ/オンを切り替えます。リストに表示されてないものは表示されません([See more] で対象となるサムネイルが表示されると出てきます)。
[×] フィルタ解除、または一番上の空白で解除となります。
リロードは1度全てをリセットし、サーバーから最新の情報を取得し直します(詳細画面[利用条件]でハートを外してもリストに残ってますが、リロードすると消えます)





 また、利用条件(モデルの詳細画面)からもフィルタを利用できます。モデル名をクリックすると [Name] フィルタが、作者名をクリックすると [Author] フィルタが実行されます。左にある アイコンでは VRoidHub (Web) でのページがブラウザで表示されます。


 タグをクリックすると、「タグを選択」(Select Tag)が開きます。このダイアログのオプションが「フィルタ」(Filter)の場合、フィルタで実行されます。

 「Web (VRoidHub)」を選択した場合は VRoidHub で検索されます。「ダウンロードOK」にチェックを入れた場合は、ダウンロード可能なものに絞り込みされます。

VRoidHub 上の検索とアプリ内でのフィルタの検出結果は少し異なります。例えば VRoidHub 上では「VOCALOID」と「vocaloid」は別々の結果が出ますが(2019/9 掲載時点)、フィルタでは同じものとして検出されます(大文字小文字違いは1つにまとめられます)。

●リストの中からフィルタで見つける場合


●Web (VRoidHub) でタグ検索する場合
(「ダウンロードOK」をオンにすると、絞り込み検索ができます)





●グループの使い方

 グループとは自由に分類わけできるフォルダのようなものです。各モデルごとにグループへ登録することができ、複数のグループにまたがることも可能です。

 リスト画面ではサムネイルの下に表示されるバーでグループへの操作ができ、詳細画面(利用条件)では右上にあるアイコンからポップアップで登録と削除ができます。

 グループ自体の編集は「Group」タブで、右端の [Group Edit] ボタンから新規作成 / 名前変更 / 削除ができます。
※デフォルトグループ「(Default)」は常に存在し、名前変更・削除などの編集はできません。また、ドロップダウンでは常に最上位に表示されます。

※サムネイルを含むモデルの情報は登録した時点のものになっている場合があります。その場合はリロードボタンを押すことにより、最新情報を取得できます。

(リスト画面)
グループ登録モード オン/オフ 切り替え
 グループに追加モード
 別のグループへ移動モード(Groupタブのみ)
 グループから削除モード(Groupタブのみ)

グループ編集画面へ

リストのモデル情報の再取得(リロード)



(詳細画面 [利用条件])
グループへ登録/削除 ポップアップ表示


※グループ機能はこのアプリ独自のものであり、データはローカルに保存されています。そのため、例えば PC 版と Android 版の両方を使っている場合、データは別々に保存されます(サーバーを介しません)。





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

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


VRoid Hub
VRoid Mobile


ニコニ立体ちゃん
ニコニ立体で "vrm モデル配布" を検索


 BOOTHとはコミケなどのように、個人の創作活動でも販売できるネットショップサービスです。最近ではVRM, VRoidモデルやカステム用の素材なども販売されています。無料の素材などもあるので、色々覗いてみるのも良いかも知れません。


BOOTHで "vrm" を検索
BOOTHで "vroid" を検索
BOOTHで "vroidテクスチャ" を検索 (衣装などのカスタマイズ素材)


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


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




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

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


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

GLBで背景モデルを自作する
glbファイルの作り方



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



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

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


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

Sketchfab
「Search」で検索し、オプション(OTHERS)で「Downloadable」にチェックを入れると、ダウンロード可能なものに絞れます。各モデルページの「Download」を押すと「Autoconverted format (glTF)」があるので、ダウンロードして「モデル読込」から "~.gltf" を読み込みます(※シェーダ等の違いにより、完璧な再現はできないのでご了承下さい)。
Sketchfab のモデルは各作者のモデリングツールに依存するため、あまり等倍(1ユニット=1m)は無いようです。ほとんどの場合、「ユーザーオブジェクトの配置 (User Object Transform)」を使ってサイズや位置を調整することになります(※大き過ぎたり、小さ過ぎたりすると見えないので、その場合はスケールを適当に変えてみると元サイズがわかります)。



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

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

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

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


BOOTHで "全天球" を検索



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

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

Live Animation モーションライブラリ
 各サンプルの「BVHサンプルXX」(XX:番号)を右クリックで「名前を付けてリンク先を保存」でダウンロードできます。
BVHモーションの再生設定 (BVH Play Setting) で [Rotation] を 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 右手座標系」の場合は見た目がおかしくなります

Perfume Global Site
 Projectページの「DOWNLOAD」から BVH と音楽ファイルがダウンロードできます。「Terms of use」(利用規約)にチェックを入れるとDLできるようになります。音楽もダウンロードできるので(※配布終了してしまったようです。残念… |||orz)曲リスト(Music Select):から [プレイリストに追加]:で読み込みできます(※PC版の場合、エクスプローラからアプリにファイルをドラッグ&ドロップしても追加できます)。
BVHモーションの再生設定 (BVH Play Setting) で [Rotation] を 180度回転して再生した方が良いです。

※直接読み込める BVHファイルの情報などありましたら、ツイッターでもメールでも教えて貰えると嬉しいです。このページにまとめて掲載させて頂きます(「BVHモーション配布」みたいのはあまり無いんですよね…)。


>>Perfume Global Site でモーション/音楽配布されてます。
(※配布終了してしまったようです。残念…|||orz)




■使用できる 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 に読み込みます。何らかが原因で使用できない場合は、エラーログが表示されます([×]ボタンで閉じることができます)。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

[VRoid SDK / VRoidHub, BOOTHロゴ]
Copyright (c) pixiv All Rights Reserved.

[リップシンク]
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 / BMPLoader]
MIT License
Copyright (c) 2017-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. ニコニ立体ちゃんライセンス

[アクシア(アリシア改変モデル)]
(c) 不沈空母

[日本列島360アイコン]
(c) VoxelKei

(※敬称略)

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









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


関連記事

category: Unity

thread: ソフトウェア開発

janre: コンピュータ

tag: VRoid  VRM  サンプル  VRMLiveViewer 
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】Unity2018.3.2 にアップグレードすると見た目がおかしくなることがある
【Unity】SDプロ生ちゃんを動かす!
【Unity】SDユニティちゃんを動かす!(Unity4)
【Unity】【C#】ユニティちゃんをサクっと簡単に動かす!(Unity4)
【Unity】【C#】SmoothFollow3(SmoothFollow に回転・遠近・高さ操作とピンチ・スワイプとの連携機能を付けた拡張版)


関連記事

category: Unity

thread: ゲーム開発

janre: コンピュータ

tag: VR  VRoid  VRM  Unityオープンソースライブラリ  サンプル 
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】タブ切り替えの UI をコードを書かないで作る
【Unity】【C#】制限付きでテキストのサイズに合わせて他のオブジェクトのサイズも変化させる
【Unity】【C#】【JavaScript】4.6.x の Canvas~UI Text のテキストをコードで変更する
【Unity】【C#】【JavaScript】GUIText をコードで生成する


関連記事

category: Unity

thread: ゲーム開発

janre: コンピュータ

tag: Unityリファレンス  uGUI  サンプル 
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: --


プロフィール

Social

検索フォーム

全記事一覧

カテゴリ

ユーザータグ

最新記事

リンク

PR