まゆたまガジェット開発逆引き辞典

電子工作やプログラミングのHowtoを逆引き形式で掲載しています。作りたいモノを決めて学んでいくスタイル。プログラマではないので、コードの汚さはお許しを。参照していないものに関しては、コピペ改変まったく問いません

バーチャルキャスト+VCIで、タッチすると(アイテム同士が接触すると)アニメーションが再生される

VCI(バーチャルキャストでアイテムを扱うための環境)を使って、アイテムにタッチするとアニメーションが再生されるようにします。
こんな感じ。

前回はグリップボタンを押すことでアクションが起きましたが、今回はアイテム同士が接触することでアクションが起こる状態を作っていきます。
prince9.hatenablog.com


これを応用すれば、「ボタンを押してアニメーションを再生する(リモコン)」も可能です。
ご本家のwikiでは例としてこちらにちょろっと書いてある程度で、詳細な説明がされていません。Unityでアニメーションを作った経験がないと、初見では分かりづらいかと思われます。
virtualcast.jp

VCIの環境を整える

1. 一度もVCIスクリプトつきのアイテムを作成・アップロードしたことがない場合は、下記の最初から「VCIスクリプトを書く」4.まで行い、Unityで環境をつくる。
prince9.hatenablog.com

初回の設定が終わっている(一度でもVCIスクリプトつきのアイテムを「The Seed Online」上にアップロードしたことがある)場合は、上記のリンクの「VCIスクリプトを書く(2回目以降はここから始める)」4.までを行う。

2.下記の条件すべてをクリアしているか確認する。クリアしていない場合は、リンクを参考にVCIスクリプトをつけたいアイテムを「The Seed Online」にアップロードして使用済みの状態にしておく
prince9.hatenablog.com

■条件
・VCIスクリプトを追加したい「つかんで動かせるVCIアイテム」をUnityで作成済み
・VCIスクリプトを追加したい「つかんで動かせるVCIアイテム」を「The Seed Online」に投稿or公開状態でアップロード済み
・VCIスクリプトを追加したい「つかんで動かせるVCIアイテム」をバーチャルキャストで一度でも呼び出して使った状態

アイテムを用意して、初期位置を調整する

今回使用するアイテムは下記の2つです。ステッキでウサギさんにタッチすると、ウサギのアニメーションが再生されるシンプルな仕組みです。

・アニメーションさせたいアイテム(今回の例だとウサギ)
・上記にタッチすることでアニメーション再生のトリガーとするアイテム(今回の例だとステッキ)

バーチャルキャスト自体、アバターがタッチしてもアクションは起こらない仕様になっています。アイテムにアクションを起こさせる場合、アイテム同士が接触する・アバターがアイテムをつかんでグリップボタンを押すの2択になります。今回はアイテム同士が接触することでアクションが起こる状態を作っていきます。

1.作成済みの「VCIスクリプトを追加したい"つかんで動かせるVCIアイテム"」があるUnityプロジェクトを開く
2.「root」の下に入っている「つかんで動かしたいアイテム(オブジェクト)」を「Hierarchy」の何もないところにドラッグし、いったん親子関係を解除する
アイテムの大きさを調整したい場合は、この時点で「R」キーを押して調整しておく
3.2.のオブジェクトをクリックし、「Inspector」→「Transform」→「Position」を一度0,0,0にする
4「Hierarchy」→「Create」をクリックし、「CreateEmpty」を選択する
5.空の「GameObject」ができているので、「GameObject」をクリックして適当な英字名に変更する(ここでは「UsaAtari」にしました)
6.5.で作った空のオブジェクトに3.の「つかんで動かしたいアイテム(オブジェクト)」をドラッグし、親子関係にする
f:id:prince9:20190416031456p:plain

7.親子関係になった8.(ここでは「UsaAtari」オブジェクト)をクリックし、Wキーを推して好きな位置に変更する。0,0,0の場合は下すぎてアバターやステージ(環境)によっては手が届かないことがあるため。アバターの顔の位置あたりが適当か?
8.7.を「root」オブジェクトにドラッグ&ドロップし、さらに親子関係にする
f:id:prince9:20190416031544p:plain

アイテムをつかんだり衝突判定ができるようにする

「つかんで動かせるVCIアイテム」を作るときと方法は同じですが、「VCISubItem」と「Box Collider」を設定するオブジェクトが違います。
公式では例としてのみ書かれていて、詳細な説明がないので注意です。

rootオブジェクトに対する設定

1.「Hierarchy」にある「root」をクリックし、「Inspector」に「VCIObject(Script)」があるか確認する。ない場合は「Add Component」をクリックし、検索窓に「VCI」と入力して「VCIObject」を選択して追加する
2.「root」がクリックされている状態で、「Window」メニュー→「Animation」→「Animation」を選択し、「Animation」の画面を出す
3.「Animation」ウィンドウが出てくるので「Create」ボタンを押す
f:id:prince9:20190416040150p:plain
4.英字で名前をつけて「Save」を押す
5.「Animation」ウィンドウの赤い●をクリックし、録画状態にする
f:id:prince9:20190416040329p:plain
6.「Add Property」をクリックし、「つかんで動かしたいアイテム(オブジェクト)の▶︎」→「Transformの▶︎」→「Position横の+」の順でクリックし、下記のような状態にする
f:id:prince9:20190416040759p:plain
7.下記に「15」と入力して、15に飛ぶ
f:id:prince9:20190416041117p:plain
8.「Scene」ビューに戻って、「Hierarchy」の「つかんで動かしたいアイテム(オブジェクト)」をクリックする
9.「W」キーを押して、上方向(Y軸方向)に少し動かす
・0の状態
f:id:prince9:20190416041206p:plain
・15の状態
f:id:prince9:20190416041235p:plain
10.「Animation」ウィンドウの「1:00」のところにある◆マークを「30」のところまでドラッグする
f:id:prince9:20190416041457p:plain
11.赤い●をクリックし、録画状態を解除する
12.「Animation」ウィンドウの赤い●の隣のボタンをクリックし、先頭に戻る
13.「Animation」ウィンドウの▶︎を押して、「Scene」ビューでアニメーションが動いているか確認する
14.「Assets」に「root」という名前のAnimation Controllerができているのを確認する
f:id:prince9:20190416063121p:plain
15.「Hierarchy」の「root」をクリックし、「Inspector」→「Add Component」をクリックする
16.「Inspector」に「Animater」が追加されていなければ、「Add Component」をクリックする。あればそのまま18.へ
17.16.がない場合は検索窓に「Animater」と入力して「Animater」をクリックする
18.「root」オブジェクトの「Inspector」→「Animater」→「Controller」の横の□に、14.で作ったAnimation Controllerをドラッグ&ドロップする
f:id:prince9:20190416063141p:plain

空のオブジェクト(ここでは「UsaAtari」オブジェクト)に対する設定

このオブジェクトに衝突判定やアイテムをつかむ設定を行います。アニメーションがついてない単なる「つかんで動かせるVCIアイテム」とは異なり、アイテムのオブジェクト自体に設定するのではない点に注意!

1.「UsaAtari」をクリックし、「Inspector」→「Add Component」をクリックする
2.検索窓に「VCI」と入力して「VCISubItem」をクリックする
3.「VCI Sub Item(Script)」がInspectorに出ていることを確認し、「Grabbable」にチェックを入れる
「Grabbable」にチェックを入れて、後述のColliderを設定することで掴めるようになります
4.大きさを変えたい場合は「Scalable」と「UniformScaling」にチェックを入れる。
UniformScalingは同じ比率で拡大縮小させる場合にチェックを入れる
5.「Rigidbody」の「Use Gravity」のチェックを外す。
「Use Gravity」のチェックを外す(重力を無視する)+「Is Kinematic」にチェックを入れないと、離したときに落下していくので注意
6.空中に留まっていて欲しいので、「Is Kinematic」にチェックを入れる
7.そのまま「Add Component」をクリックし、検索窓に「Box Collider」と入力して「Box Collider」をクリックする
8.「Edit Collider」ボタンをクリックして画面上で緑の■を動かし、アイテムをタッチしたい+つかみたい範囲が入るように大きさを調整する。
今回はウサギのボディあたりを範囲とした
f:id:prince9:20190416034826p:plain

設定済みの状態がこちらです。「Rigidbody」の「Mass」を10にすることで、つかんだときにあまりフラフラしないようにしています。
f:id:prince9:20190416034930p:plain

タッチされてアクションが起こるオブジェクト(アイテム)に対する設定

特に設定はありません

アクションのトリガーとなるアイテムに対する設定

1.「Assets」に「.fbx」「.glb」形式どちらかのファイルをドラッグ&ドロップして読み込ませる。今回は「Usacon」というオブジェクト名
2.1.を「Hierarchy」の何もないところにドラッグ&ドロップする
3.2.がクリックされている状態で、「W」キーを押して位置を調整する。アバターの顔あたりが無難?
4.3.を「root」オブジェクトにドラッグ&ドロップして、下記のような状態にする
f:id:prince9:20190416043221p:plain
5.4.がクリックされている状態で、「Inspector」→「Add Component」をクリックする
6.検索窓に「VCI」と入力して「VCISubItem」をクリックする
7.「VCI Sub Item(Script)」がInspectorに出ていることを確認し、「Grabbable」にチェックを入れる
「Grabbable」にチェックを入れて、後述のColliderを設定することで掴めるようになります
8.大きさを変えたい場合は「Scalable」と「UniformScaling」にチェックを入れる。
UniformScalingは同じ比率で拡大縮小させる場合にチェックを入れる
9.「Rigidbody」の「Use Gravity」のチェックを外す。
「Use Gravity」のチェックを外す(重力を無視する)+「Is Kinematic」にチェックを入れないと、離したときに落下していくので注意
10.空中に留まっていて欲しいので、「Is Kinematic」にチェックを入れる
11.そのまま「Add Component」をクリックし、検索窓に「Box Collider」と入力して「Box Collider」をクリックする
12.「Edit Collider」ボタンをクリックして画面上で緑の■を動かし、アイテムをタッチしたい+つかみたい範囲が入るように大きさを調整する

設定済みの状態がこちらです。
f:id:prince9:20190416043452p:plain

VCIスクリプトを書く

ようやく下準備が完了しました。後はスクリプトを書いて「root」にコピペするだけです。
今回は「Usacon」というステッキ型のオブジェクトをつかんだ状態でウサギにタッチすると、ウサギがアニメーションする流れになっています。

要素として、
・ステッキとウサギの衝突判定
・衝突するとアニメーションが一度再生される(ループなし)
となります。

実際のコードはこちら。

---[SubItemの所有権]アイテムにCollider(not Trigger)が接触したときに呼ばれる。
---@param item string @SubItem名
---@param hit string @Collider名

function onCollisionEnter(item, hit)
    if (item == "Usacon" and hit == "UsaAtari") or (item == "UsaAtari" and hit == "Usacon") then
        vci.assets._ALL_PlayAnimationFromName("JumpAnim",false)
    end
end

function onCollisionEnter(item, hit)〜でアイテム同士が接触したときの状態を書きます。
if以下〜は、もしアイテム「Usacon」と「UsaAtari」が接触したら、で、
vci.assets._ALL_PlayAnimationFromName〜は「JumpAnim」というアニメーションを一度再生しなさい、という流れです。

vci.assets._ALL_PlayAnimationFromName("アニメーションのファイル名",タッチごとに一度再生ならfalse。ループ再生させるならtrue)となります。
ここでもし「Stopcon」という別アイテムと「Usacon(ステッキ)」が接触したときに再生を止めたいという場合は、function onCollisionEnter(item, hit)の部分に下記を追加します。

    if (item == "Usacon" and hit == "Stopcon") or (item == "Stopcon" and hit == "Usacon") then
        vci.assets._ALL_StopAnimation()
    end

再生と停止両方を入れたスクリプト全体としては下記になります。

function onCollisionEnter(item, hit)
    if (item == "Usacon" and hit == "UsaAtari") or (item == "UsaAtari" and hit == "Usacon") then
        vci.assets._ALL_PlayAnimationFromName("JumpAnim",true)
    end

  if (item == "Usacon" and hit == "Stopcon") or (item == "Stopcon" and hit == "Usacon") then
        vci.assets._ALL_StopAnimation()
    end


end

|

vci.assets._ALL_StopAnimation()で止まります。

VCIスクリプトを適用する

1.「root」オブジェクトをクリックし「Inspector」→「Scripts」に下記を入力する
・Size → 1にする
・Name →「main.lua」と入力
・Source →「VCIスクリプトを書く」項目ので書いたスクリプトをコピペする。必要なコード全体をここにコピペする形です

VCIアイテムを書き出す

1.「Hierarchy」の「root」をクリックし、「VCI」メニュー→「UniVCI-バージョン」→「Export VCI」を選択する
2.ウィンドウが開くので、「新しいフォルダー」をクリックし、「Sample」と名前をつける
3.「Sample」フォルダをダブルクリックし、英語でファイル名をつけて「保存」を押す

The Seed Onlineにアップロードする

1.「The Seed Online」にアクセスする
seed.online

2.ログイン後、すでにアップロード済みの「つかんで動かせるVCIアイテム」をクリックする
3.「別のファイルを再アップロードする」をクリックし、「VCIアイテムを書き出す」3.で書き出した「.vci」ファイルをクリックする
4.「選択」ボタンを押して再アップロードする
8.下の方の「利用規約に同意する」にチェックを入れる
9. バーチャルキャストとThe Seed Onlineを連携した上でバーチャルキャストに入ると、アイテムのところに出てくるので使えるようになる