LoginSignup
12
5

More than 1 year has passed since last update.

VCIAdvent Calendar 2022Day 15
@miyumiyu

メタバース空間でレースクイーンになったからよくある傘をメタバース空間に持ち込みたい

Last updated at Posted at 2022-12-14

はじめに

はーい、みゅみゅです。

前回、メタバース空間でレースクイーンになったのでよくあるSofmap背景をバックに写真を撮ったのですが、何かが足りないです。

そう、レースクイーンは雨も降ってないのにみんな傘を持ってます。
ということで今回はレースクイーンに必要不可欠な傘を世の中にある定義に当てはめればどう考えてもメタバースなバーチャルキャストでに持ち込みたいと思います。
そして前回のSofMap背景をバックに写真を撮って完全無欠なレースクイーンを目指します。

なお当方、モデリングの知識はまったくありません。

傘のモデルについて

傘のモデルはレースクイーンになるために購入しましたこちらの商品に付随しておりました。
作者さま　感謝です！

購入しダウンロードして展開を行ったら、【UmbrellaOpen_RacingBikini.fbx】 というFBXモデルが付属してましたので、こちらを利用してバーチャルキャスト内に持ち込みたいと思います

image.png

１．UniVCIのダウンロードとインストール

内容は前回とまったく同じです。
以下、前回の記事のリンクに飛ぶのがめんどくさい人向けのコピペです。

VCI制作にはUniVCIというUnity Packageが必要となります
UniVCIのダウンロード
https://github.com/virtual-cast/VCI/releases

こちらから最新のUniVCI(UniVCI-???.unitypackage)と付属のUniVRM(UniVRM-???.unitypackage)をダウンロードします。

  1. UniVRM
  2. UniVCI
    この順番でインストールします。
    （ファイルをダブルクリックするとインストールが始まります）

※途中何か言われたら【Accept All】で
image.png

2.Unityの上に作業用フォルダを作りそこに必要な素材を入れる

今回、傘を作るのでUnity上にフォルダを作りそこにオブジェクトなどの必要な素材を入れていきます。

【Assets】を右クリックでCreate→Folder 選択してフォルダーを作成します。

image.png

フォルダー名は今回は傘を作るので 【kasa】 にします。
image.png

作ったフォルダー（kasa)の中に今回使う素材を入れます。
ここで注意しないといけないが、FBXファイルの他にテクスチャのイメージ素材も必要になります。
なので今回は

  • オブジェクトファイル（FBX）
  • テクスチャファイル（pngなどイメージ）
    この2つが素材として必要です。

展開したファイルの中に 【UmbrellaOpen_RacingBikini.fbx】 がありますので、そのファイルを先程作成しました 【kasa】 にドラック＆ドロップで入れます。
image.png

同じく、textureというフォルダにある 【RacingBikini_TEX.png】 も先程作成しました【kasa】にドラック＆ドロップで入れます。
image.png

【kasa】 のフォルダはこんな感じです。
image.png

3.傘をシーン上でそれっぽく出す

傘をUnity上で出してみましょう！
先程ドラック＆ドロップした 【UmbrellaOpen_RacingBikini】 をHierarchyにドラック＆ドロップしてみましょう。
Hierarchyにドラック＆ドロップすると、Unityという世界に表示されます。

image.png

Unityの世界に傘が出ましたが真っ白です。
これはテクスチャが設定されてないので真っ白です。

今度はイメージ素材 【RacingBikini_TEX】 を真っ白な傘のオブジェクトにドラック＆ドロップしてみましょう。
（HierarckyではなくSceneに表示されてる傘のオブジェクトに対して直接ドラック＆ドロップです）

そうすると、真っ白な傘がそれっぽい感じのかっこい傘に変わりました。
a-3.gif

4.VCIの作成

ここからはVCIとして出力できるように設定していきます。
基本的な流れは前回と同じrootオブジェクト作成してsubitem作成、そしてコライダーを作成していきます。

4-1. rootオブジェクトの作成

VCIオブジェクト（アイテム）の一番最初の階層となるオブジェクトを作成します。
このオブジェクトにはVCIアイテムそのものの情報が入ります。

Hierarchky 左クリックで 【Create Empty】
image.png

これがVCIアイテムのrootオブジェクトになるのでわかりやすい名前にします
（例では kasa）

image.png

このObjectの中に【VCI Object】コンポーネントを追加します。
(このコンポーネントにVCI情報が入ります）
【Add Component】 から 【VCI Object】 を追加します。

image.png
コンポーネントの中の必須項目を入れていきます。

項目 内容
Title kasa (傘だから)
Version 1.0 （なんとなくこの数字）
Author miyumiyu （わたしです）

image.png

4-2. SubItemの作成

実際にオブジェクト配置を行うSubItemを作成していきます。
SubItemの階層を作り、その下に傘のオブジェクトを入れていきます。

先程作った 【kasa】 オブジェクトの下にCreate Enptyでオブジェクトを作成し、できたオブジェクトをわかりやすい名前に変更しておきます　
（例では kasa-subitem です)

image.png

作成した 【kasa-subitem】 の階層の下に、傘のオブジェクト本体 【UmbrellaOpen_RacingBikini】 を配置します。
（【UmbrellaOpen_RacingBikini】をドラック＆ドロップで移動します）

image.png

4-3. コライダーを仕込む

作成したアイテムは持ち歩いたり拡大、縮小したいので手に持たすためにコライダーコンポーネントを追加しなくてはいけません。

【UmbrellaOpen_RacingBikini】を選択して、【Add Component】 から 【Box Collider】を追加します

image.png

すると、コライダーが緑色の線ででてきますのでとりあえず柄の部分に当たり判定があればいいので小さくしていきます。
【Edit Collider】のボタンを押すと緑色の線の真ん中に緑の点が出るので、その点を動かして小さくしていきます
image.png

こんな感じで柄の部分に当たり判定（緑の枠）を入れます。
※わたしはこういうところ、結構ガバガバです
image.png

4-4.レイヤーを設定

傘はもって歩いたりすることができます。
この時、正しい当たり判定（レイヤー）を設定しないと、体に当たってあらぬ方向（荒ぶるという）状態になりやすいのでレイヤーを設定します。
レイヤーの詳しい説明はこちら
https://virtualcast.jp/wiki/vci/component/unitycomponent/collider

今回は、持つアイテムなので 【VCIPickUp】 を選択します。

image.png

4-5. VCI SubItemの設定

SubItemとして設定したkasa-subitemに 【VCI Sub Item】 コンポーネントを追加して動き方を指定します

image.png

【VCI Sub Item】コンポーネントを追加すると【Rigidbody】コンポーネントも追加されます。

持ちたいので Grabbable ON
拡大、縮小を行いたいので ScalableはON
拡大、縮小を行うときはすべての辺で同じだけスケール値を変えたいので Uniform ScalingはON
引き寄せは特に必要ないのでAttractableはOFF
重力は必要ないので Use GravityはOFF
物理挙動はいらないので Is Kinematic はON

image.png

4-6. 全体的に位置合わせを行う

これで大体出来上がったのですが、位置や回転をちゃんとしていきたいと思います。
image.png
このような階層になったと思いますので

kasa
kasa-subitem
UmbrellaOpen_RacingBikini

これらすべてのTransformのPosition、Rortationをすべて0にします　（０でリセット）
そうすると傘が寝転ぶと思います。
この状態でVCIを作成すると、バーチャルキャスト上にもこのような状態で出現してたいていの場合は地面に埋まります

image.png

ちょっと不便なので【kasa-subitem】のTransformをちょっと変更して下の図のように数字を入れます。

image.png

そうすることで傘が立ち上がり、地面からすこし浮いた位置になると思います

image.png

4-7. エクスポートしてVCIを作成

rootオブジェクト(kasa)を選択して、上のメニューから【VCI】-【Export VCI】を選択します
image.png
ファイル名と保存場所が聞かれるので自分の好きな場所に置きます

5.THE SEED ONLINEにアップロードします

THE SEED ONLINEにVCIアイテムとしてアップロードします
アップロードするとこんな感じでアイテムの状態が見えます
image.png

6.バーチャルキャストでアップロードしたVCIを出します

バーチャルキャスト上でカスタムアイテムから先程アップロードしたVCIアイテムを選択します
問題なければ作成したVCIアイテムが出現します

2022120220474104_DevFes公演会場_みゅみゅ.png

コンポーネント追加して、VCI出力するとさくっとVR空間にアイテムを持ち込むことができます。

7.自分好みにカスタマイズしていきたい

ここらへんはお好みです。
せっかくがんばって作ったアイテム、自分好みに色々改造したいきたいなーと

7-1.色が暗いので明るくしたい

できた傘をバーチャルキャスト内に持っていったら、なんとなく暗くてキャラクターの色の質感と違うので明るくしていきたいと思います。

Hierarchyから 【UmbrellaOpen_RacingBikini】 を選択します。

image.png
その中で Shaderとある部分に　【VRM/MToon】 を選択します。
これは、VRMモデルで使われてるシェーダで一緒にあわせていくと質感も同じになるかなぁ　と
（ここらへんは好みの問題もあると思うのですが、私はこれが好みです　えっへん）

ついでにデフォルトだと影の部分がピンクっぽくなるので、影の色（Shade Color)をRGBそれぞれ0.9ぐらいにします（ちょとだけ暗く）

image.png

これで、再度VCIにエクスポートしてTSOにアッポロードすればキャラクターの質感に合った色になるかと思います。　やったね！

2022120220565118_DevFes公演会場_みゅみゅ.png

7-2.傘を開閉したい

せっかくの傘なので傘を開閉したいと思います。
こちらの傘は作者様のおかげで、傘の開閉のBlendShapeが設定されていますので、ここをVCIで制御できれば傘の改変が行なえます。

a-4.gif

VCIでアニメーションのスクリプトの作り方はこちらを参考に作成していきます。
https://virtualcast.jp/wiki/vci/sample/animation/tutorial2

Animationコンポーネントを入れる

アニメーションを行うためにはSubItemにアニメーションコンポーネントを入れる必要があります。
【kasa-subitem】 の中にAnimationコンポーネントを入れます。

image.png

Animationウィンドウを開く

kasa-subitemを選択した状態で、メニューから[ Window > Animation > Animation ]を選択して、Animationウィンドウを開きます。

image.png

傘が開くアニメーションを作成

Createボタンを押してわかりやすいアニメーションの名前をつけます。
（ここでからは例として kasahiraku という名前をつけます）

Add Propaty で　UmbrellaOpen_RacingBikini → Skinned Mesh Renderer → Blend　Shapes.Close を選択します。
（傘の開閉を行いたい　→　傘の開閉は BlendShapeで行ってる　→　そのBlenSapeをアニメーションで動かせばいい）

image.png

特にこだわりはないのですが、2秒で開く、2秒で閉じるを実現したいと考えました。
1秒は60フレームなので2秒で120フレームです。

右上の数字を入れるところ（フレーム数が表示）
image.png
ここに0を入れて開くアニメーションを作りたいのでBlendShapeの数字は100（最大）にします
image.png
すると傘が閉じるかと思います

次に2秒（= 120フレーム目）がきたら開くようにします
同じように右上のフレーム数のところには120 そして BlendShapeの値は0 を入れます

image.png

これで傘が開いたと思います
Previewで確認してみましょう。
Previewの横の再生ボタンを押したら傘が閉じて開くアニメーションが確認できるかとおもいます。
a-1.gif

傘が閉じるアニメーションの作成

同様に傘が閉じるアニメーションの作成を行います。

先程まで作ったので　kasahiraku　でしたので
こんどは kasatoji を作ります。

image.png

kasahiraku をクリックして Create New Clip ... 先程と同じようにファイルを作成します。
（kasatojiを作ります）

今度は閉じるアニメーションを作成するので
0フレーム目　→ blendshapeは 0
120フレーム目　→ blendshapeは 100
と設定します。
a-2.gif

これで、一番最初に追加した animationコンポーネントに2つのアニメが入ります。

image.png

アニメーションが動くようにVCIスクリプトを作成

アニメーションの準備が整いましたのでVCIスクリプトを作成します。

やりたいことを整理すると下のような内容になります。

１．最初（出現時）は開いた状態
２．開いた状態でUSEすると閉じる（kasatoji アニメ実行)
３．開いてる状態じゃなければ（閉じた状態）USEすると開く（kasahiraku　アニメ実行）

整理するとこんな感じのスクリプトです

スクリプトを作成する前に、スクリプトをコピペする準備（VCIスクリプトを書く場所を作る）します。
rootオブジェクトの kasa　のコンポーネントのVCI Object この中に Scriptsという項目がありますので Sizeを0から1に変更します。

image.png

変更後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で開閉する傘の出来上がりです。
2021-07-05_1_AdobeExpress.gif

。。。ただし、この傘には問題点が一つありますので次の章で

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

これで。傘の開閉が同期されるようになりました。

さいごに

モデリングができなくても好きなものが自由に作れる世の中です。
自分だけのアイテムを作って、スクリプトやらいろんな物を自分好みに魔改造していって末永く遊べるアイテムを作るのも楽しいですよ。
是非みなさんもチャレンジしてみてください！

2022120620523411_DevFes公演会場_みゅみゅ.png

12
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
12
5