はじめに
はーい、みゅみゅです。
前回、メタバース空間でレースクイーンになったのでよくあるSofmap背景をバックに写真を撮ったのですが、何かが足りないです。
そう、レースクイーンは雨も降ってないのにみんな傘を持ってます。
ということで今回はレースクイーンに必要不可欠な傘を世の中にある定義に当てはめればどう考えてもメタバースなバーチャルキャストでに持ち込みたいと思います。
そして前回のSofMap背景をバックに写真を撮って完全無欠なレースクイーンを目指します。
なお当方、モデリングの知識はまったくありません。
傘のモデルについて
傘のモデルはレースクイーンになるために購入しましたこちらの商品に付随しておりました。
作者さま 感謝です！
購入しダウンロードして展開を行ったら、【UmbrellaOpen_RacingBikini.fbx】 というFBXモデルが付属してましたので、こちらを利用してバーチャルキャスト内に持ち込みたいと思います
１．UniVCIのダウンロードとインストール
内容は前回とまったく同じです。
以下、前回の記事のリンクに飛ぶのがめんどくさい人向けのコピペです。
VCI制作にはUniVCIというUnity Packageが必要となります
UniVCIのダウンロード
https://github.com/virtual-cast/VCI/releases
こちらから最新のUniVCI(UniVCI-???.unitypackage)と付属のUniVRM(UniVRM-???.unitypackage)をダウンロードします。
- UniVRM
- UniVCI
この順番でインストールします。
（ファイルをダブルクリックするとインストールが始まります）
※途中何か言われたら【Accept All】で
2.Unityの上に作業用フォルダを作りそこに必要な素材を入れる
今回、傘を作るのでUnity上にフォルダを作りそこにオブジェクトなどの必要な素材を入れていきます。
【Assets】を右クリックでCreate→Folder 選択してフォルダーを作成します。
フォルダー名は今回は傘を作るので 【kasa】 にします。
作ったフォルダー（kasa)の中に今回使う素材を入れます。
ここで注意しないといけないが、FBXファイルの他にテクスチャのイメージ素材も必要になります。
なので今回は
- オブジェクトファイル（FBX）
- テクスチャファイル（pngなどイメージ）
この2つが素材として必要です。
展開したファイルの中に 【UmbrellaOpen_RacingBikini.fbx】 がありますので、そのファイルを先程作成しました 【kasa】 にドラック＆ドロップで入れます。
同じく、textureというフォルダにある 【RacingBikini_TEX.png】 も先程作成しました【kasa】にドラック＆ドロップで入れます。
【kasa】 のフォルダはこんな感じです。
3.傘をシーン上でそれっぽく出す
傘をUnity上で出してみましょう！
先程ドラック＆ドロップした 【UmbrellaOpen_RacingBikini】 をHierarchyにドラック＆ドロップしてみましょう。
Hierarchyにドラック＆ドロップすると、Unityという世界に表示されます。
Unityの世界に傘が出ましたが真っ白です。
これはテクスチャが設定されてないので真っ白です。
今度はイメージ素材 【RacingBikini_TEX】 を真っ白な傘のオブジェクトにドラック＆ドロップしてみましょう。
（HierarckyではなくSceneに表示されてる傘のオブジェクトに対して直接ドラック＆ドロップです）
そうすると、真っ白な傘がそれっぽい感じのかっこい傘に変わりました。
4.VCIの作成
ここからはVCIとして出力できるように設定していきます。
基本的な流れは前回と同じrootオブジェクト作成してsubitem作成、そしてコライダーを作成していきます。
4-1. rootオブジェクトの作成
VCIオブジェクト（アイテム）の一番最初の階層となるオブジェクトを作成します。
このオブジェクトにはVCIアイテムそのものの情報が入ります。
Hierarchky 左クリックで 【Create Empty】
これがVCIアイテムのrootオブジェクトになるのでわかりやすい名前にします
（例では kasa）
このObjectの中に【VCI Object】コンポーネントを追加します。
(このコンポーネントにVCI情報が入ります）
【Add Component】 から 【VCI Object】 を追加します。
コンポーネントの中の必須項目を入れていきます。
| 項目 | 内容 |
|---|---|
| Title | kasa (傘だから) |
| Version | 1.0 （なんとなくこの数字） |
| Author | miyumiyu （わたしです） |
4-2. SubItemの作成
実際にオブジェクト配置を行うSubItemを作成していきます。
SubItemの階層を作り、その下に傘のオブジェクトを入れていきます。
先程作った 【kasa】 オブジェクトの下にCreate Enptyでオブジェクトを作成し、できたオブジェクトをわかりやすい名前に変更しておきます
（例では kasa-subitem です)
作成した 【kasa-subitem】 の階層の下に、傘のオブジェクト本体 【UmbrellaOpen_RacingBikini】 を配置します。
（【UmbrellaOpen_RacingBikini】をドラック＆ドロップで移動します）
4-3. コライダーを仕込む
作成したアイテムは持ち歩いたり拡大、縮小したいので手に持たすためにコライダーコンポーネントを追加しなくてはいけません。
【UmbrellaOpen_RacingBikini】を選択して、【Add Component】 から 【Box Collider】を追加します
すると、コライダーが緑色の線ででてきますのでとりあえず柄の部分に当たり判定があればいいので小さくしていきます。
【Edit Collider】のボタンを押すと緑色の線の真ん中に緑の点が出るので、その点を動かして小さくしていきます
こんな感じで柄の部分に当たり判定（緑の枠）を入れます。
※わたしはこういうところ、結構ガバガバです
4-4.レイヤーを設定
傘はもって歩いたりすることができます。
この時、正しい当たり判定（レイヤー）を設定しないと、体に当たってあらぬ方向（荒ぶるという）状態になりやすいのでレイヤーを設定します。
レイヤーの詳しい説明はこちら
https://virtualcast.jp/wiki/vci/component/unitycomponent/collider
今回は、持つアイテムなので 【VCIPickUp】 を選択します。
4-5. VCI SubItemの設定
SubItemとして設定したkasa-subitemに 【VCI Sub Item】 コンポーネントを追加して動き方を指定します
【VCI Sub Item】コンポーネントを追加すると【Rigidbody】コンポーネントも追加されます。
持ちたいので Grabbable ON
拡大、縮小を行いたいので ScalableはON
拡大、縮小を行うときはすべての辺で同じだけスケール値を変えたいので Uniform ScalingはON
引き寄せは特に必要ないのでAttractableはOFF
重力は必要ないので Use GravityはOFF
物理挙動はいらないので Is Kinematic はON
4-6. 全体的に位置合わせを行う
これで大体出来上がったのですが、位置や回転をちゃんとしていきたいと思います。
このような階層になったと思いますので
kasa
kasa-subitem
UmbrellaOpen_RacingBikini
これらすべてのTransformのPosition、Rortationをすべて0にします （０でリセット）
そうすると傘が寝転ぶと思います。
この状態でVCIを作成すると、バーチャルキャスト上にもこのような状態で出現してたいていの場合は地面に埋まります
ちょっと不便なので【kasa-subitem】のTransformをちょっと変更して下の図のように数字を入れます。
そうすることで傘が立ち上がり、地面からすこし浮いた位置になると思います
4-7. エクスポートしてVCIを作成
rootオブジェクト(kasa)を選択して、上のメニューから【VCI】-【Export VCI】を選択します
ファイル名と保存場所が聞かれるので自分の好きな場所に置きます
5.THE SEED ONLINEにアップロードします
THE SEED ONLINEにVCIアイテムとしてアップロードします
アップロードするとこんな感じでアイテムの状態が見えます
6.バーチャルキャストでアップロードしたVCIを出します
バーチャルキャスト上でカスタムアイテムから先程アップロードしたVCIアイテムを選択します
問題なければ作成したVCIアイテムが出現します
コンポーネント追加して、VCI出力するとさくっとVR空間にアイテムを持ち込むことができます。
7.自分好みにカスタマイズしていきたい
ここらへんはお好みです。
せっかくがんばって作ったアイテム、自分好みに色々改造したいきたいなーと
7-1.色が暗いので明るくしたい
できた傘をバーチャルキャスト内に持っていったら、なんとなく暗くてキャラクターの色の質感と違うので明るくしていきたいと思います。
Hierarchyから 【UmbrellaOpen_RacingBikini】 を選択します。
その中で Shaderとある部分に 【VRM/MToon】 を選択します。
これは、VRMモデルで使われてるシェーダで一緒にあわせていくと質感も同じになるかなぁ と
（ここらへんは好みの問題もあると思うのですが、私はこれが好みです えっへん）
ついでにデフォルトだと影の部分がピンクっぽくなるので、影の色（Shade Color)をRGBそれぞれ0.9ぐらいにします（ちょとだけ暗く）
これで、再度VCIにエクスポートしてTSOにアッポロードすればキャラクターの質感に合った色になるかと思います。 やったね！
7-2.傘を開閉したい
せっかくの傘なので傘を開閉したいと思います。
こちらの傘は作者様のおかげで、傘の開閉のBlendShapeが設定されていますので、ここをVCIで制御できれば傘の改変が行なえます。
VCIでアニメーションのスクリプトの作り方はこちらを参考に作成していきます。
https://virtualcast.jp/wiki/vci/sample/animation/tutorial2
Animationコンポーネントを入れる
アニメーションを行うためにはSubItemにアニメーションコンポーネントを入れる必要があります。
【kasa-subitem】 の中にAnimationコンポーネントを入れます。
Animationウィンドウを開く
kasa-subitemを選択した状態で、メニューから[ Window > Animation > Animation ]を選択して、Animationウィンドウを開きます。
傘が開くアニメーションを作成
Createボタンを押してわかりやすいアニメーションの名前をつけます。
（ここでからは例として kasahiraku という名前をつけます）
Add Propaty で UmbrellaOpen_RacingBikini → Skinned Mesh Renderer → Blend Shapes.Close を選択します。
（傘の開閉を行いたい → 傘の開閉は BlendShapeで行ってる → そのBlenSapeをアニメーションで動かせばいい）
特にこだわりはないのですが、2秒で開く、2秒で閉じるを実現したいと考えました。
1秒は60フレームなので2秒で120フレームです。
右上の数字を入れるところ（フレーム数が表示）
ここに0を入れて開くアニメーションを作りたいのでBlendShapeの数字は100（最大）にします
すると傘が閉じるかと思います
次に2秒（= 120フレーム目）がきたら開くようにします
同じように右上のフレーム数のところには120 そして BlendShapeの値は0 を入れます
これで傘が開いたと思います
Previewで確認してみましょう。
Previewの横の再生ボタンを押したら傘が閉じて開くアニメーションが確認できるかとおもいます。
傘が閉じるアニメーションの作成
同様に傘が閉じるアニメーションの作成を行います。
先程まで作ったので kasahiraku でしたので
こんどは kasatoji を作ります。
kasahiraku をクリックして Create New Clip ... 先程と同じようにファイルを作成します。
（kasatojiを作ります）
今度は閉じるアニメーションを作成するので
0フレーム目 → blendshapeは 0
120フレーム目 → blendshapeは 100
と設定します。
これで、一番最初に追加した animationコンポーネントに2つのアニメが入ります。
アニメーションが動くようにVCIスクリプトを作成
アニメーションの準備が整いましたのでVCIスクリプトを作成します。
やりたいことを整理すると下のような内容になります。
１．最初（出現時）は開いた状態
２．開いた状態でUSEすると閉じる（kasatoji アニメ実行)
３．開いてる状態じゃなければ（閉じた状態）USEすると開く（kasahiraku アニメ実行）
整理するとこんな感じのスクリプトです
スクリプトを作成する前に、スクリプトをコピペする準備（VCIスクリプトを書く場所を作る）します。
rootオブジェクトの kasa のコンポーネントのVCI Object この中に Scriptsという項目がありますので Sizeを0から1に変更します。
変更後Source に下記のスクリプトコピペして入れます。
-- 最初（出現時）は開いた状態
local state=0 -- 0開いてる 1閉じてる
-- SubItem名から、Animationコンポーネントを求める
local Anime = vci.assets.GetTransform("kasa-subitem")
local SubitemAnime = Anime.GetAnimation()
function onUse(use)
if use == "kasa-subitem" then
if state==0 then -- 開いた状態でUSEすると閉じる（kasatoji アニメ実行)
SubitemAnime.PlayFromName('kasatoji', false)
state=1
else -- 閉じた状態でUSEすると開く（kasahiraku アニメ実行）
SubitemAnime.PlayFromName('kasahiraku', false)
state=0
end
end
end
これで、USEで開閉する傘の出来上がりです。
。。。ただし、この傘には問題点が一つありますので次の章で
7-3.傘を開閉を同期したい
傘の開閉はできたのですが、問題は自分しか閉じたり開いたりのアニメーションが見えないのです。
これは、VCIの特性上オブジェクトの位置や大きさははシステム側で同期されるが、アニメーションは同期されないからです。
（詳しくはこちらです https://virtualcast.jp/wiki/vci/tips/sync）
そのため、アニメーションをVCIで同期を行う処理を入れないといけません。
詳しくはこちらのページを参考に、先程作ったスクリプトを魔改造していきます。
-- SubItem名から、Animationコンポーネントを求める
local Anime = vci.assets.GetTransform("kasa-subitem")
local SubitemAnime = Anime.GetAnimation()
local islocalClose = false
-- 最初（出現時）は開いた状態
if vci.assets.isMine then
-- アイテム呼び出しユーザーでだけ初期化します
vci.state.Set('isClose', false) -- 初期値。何もしないと nil になる
end
function onUse(use)
if use == "kasa-subitem" then
-- 開いてるかどうかのフラグを取り出す
local isClose = vci.state.Get('isClose')
-- フラグを反転して格納する、ここではアニメーションを実行しません
vci.state.Set('isClose', not isClose)
end
end
function updateAll() -- 全ユーザーで実行したいので updateAll を使います
local isClose = vci.state.Get('isClose') -- 状態を得ます。アイテム内同期変数は全ユーザーで同期(同じ)になります。
if isClose then -- 閉じてたら閉じるアニメーション
if not islocalClose then
SubitemAnime.PlayFromName('kasatoji', false)
islocalClose = true
end
else -- フラグが開いてるのであれば開いてるアニメーション
if islocalClose then
SubitemAnime.PlayFromName('kasahiraku', false)
islocalClose = false
end
end
end
これで。傘の開閉が同期されるようになりました。
さいごに
モデリングができなくても好きなものが自由に作れる世の中です。
自分だけのアイテムを作って、スクリプトやらいろんな物を自分好みに魔改造していって末永く遊べるアイテムを作るのも楽しいですよ。
是非みなさんもチャレンジしてみてください！
