日報

VR Chat関連の日報です

VR Chatのアバターにて、ボーンにアイテムを追従させる方法

先日VRChat利用を想定したパーティクルとトレイルのセットをBoothにて出しました。

hitton.booth.pm

通常通り質問やサポートの対応はできないものの、参考までに自分の設定方法を記しておこうと思います。

こちらで記載する内容は下記です。

  1. 指や足元のボーンに追従するようにアイテムを設定する方法
  2. FXメニューで上記のアイテムをオンオフできるようにする方法

【注意事項】

  • 記載するのはあくまで自分が使っている方法なので、もっと良いやり方があるかもしれません。
  • 分からない部分があれば各自検索などお願いします。

指や足元のボーンに追従するように設定する方法

アイテムを追従させたいボーン配下に空のGameObjecetをアタッチする。 仮に右手の人差し指に追従させることとします。

名前をParticle_rightと変更する(名前は自分が分かればなんでもいいです)

Particle_rightをArmatureの外に置く。

Particle_rightTransformの数値が右指のボーンの位置になっているのを確認。
※ここの数値はいじらない

インスペクターからAdd Componentし、Parent Constraintを追加。

IsActiveにチェックを入れて、ConstraintSettingsに追従元のボーン(今回は右の人差し指)を入れる。

Particle_rightの配下に追従させたいアイテムを入れる。

Particle_rightの配下に置いたアイテムは、必要に応じて角度や大きさを変更してください。

FXメニューで上記のアイテムをオンオフできるようにする方法

「[無料]【VRChat】ExpressionMenuで服とか小物のオン/オフができるやつ SimpleObjectSwitch」が便利なので、メニューでのオンオフの設定はこちらを使っています。 booth.pm (自分でメニュー作るの大変なので、ツール頼み……)

前述のボーンに追従するようにアイテムを設定する部分で、ボーンの種類ごと&オンオフしたい単位でアイテムをまとめるとよいかと思います。

以上です。

Udemy 「初心者向けUnity Particleエフェクト講座」を受講した感想。VRChatで活かせるといいなあ。

日報というには間が空きすぎているけれど、VR Chat関連の勉強をしたので久々に更新をしてみる。

年末年始の休暇を使って、VRChatに関連するスキルを伸ばすために、Udemyの「初心者向けUnity Particleエフェクト講座(PR)」に手を出してみた。
講座のボリュームとしては休日を1日使えば一通り動画を見て、実際に自分でパーティクルを作って完成まで持っていくことができるという感じ。
※Udemy(ユーデミー)とはオンライン学習プラットフォームであり、講師が自分の知識やスキルを共有し、学習者がそれらのコースを受講することができるサイト

講座の感想

この講座に触れてみての印象は、かなり好感が持てた。VRChatのワールド作成やアバター改変にはざっくりとした知識があったが、パーティクル作成に関する知識を補完することができた。

テクスチャのアトラス化に関する部分やその他パーティクルの設定は今まで「大体こんな感じか」という漠然としたイメージで設定していたのが、詳細を知ることができたのはよかった。
スプライトエディターについては存在すら知らなかったので、使い方が非常に参考になった。

また、作例が3つも用意されていて、それに加えて動画だけでなく実際のファイルが提供されていたのは大助かりだった。
動画を参考にしながら実際に手を動かしてみる過程で、思ったように進まない時も作例を参照して修正できた。

練習で作ってみたパーティクルはこんな感じ。 youtu.be

Unityに関する書籍は確かに参考になるものも多いけれど、動画形式の講座は視覚的に理解しやすく、実際の動きを確認しながら進められるのは非常に便利。
再生速度の調整や、不明点があれば繰り返し見直せる点も素晴らしい利点だ。

ちなみに、UnityのC#に関する別のUdemy講座も購入済み。これを活用してVRChatでのギミック作成に挑戦してみたいと思っている。(この講座を進めたら記事にしてみます)

2024年は色々Boothで公開できるようになるといいな。

関連リンク

今回受講したパーティクル作成のコースはこちら。
初心者向けUnity Particleエフェクト講座 | Udemy(PR)

合わせて購入したUnity C#プログラミング入門はこちら。
【最短でUnityプログラム脱初心者を目指します!】もっと早く教えてほしかった!Unity C#プログラミング入門 | Udemy(PR)

UIを使ってVR Chatで使える自作ワールドポータル集を作った話

VR Chatのホームワールドに、この画像のような自作ワールドポータル集を設置しました。

ポータル
自分のワールドへ行くときに、いちいちメニューを開いてスクロールして…みたいな手間を省けるのが便利。

以下どのようにして作ったかメモです。 ……が、私はプログラミング赤ちゃんレベルなので、強引に解決してる部分があると思います。
もっとスマートだったり、処理が軽くできる方法が多分あるはず。

Canvasの設定

UIを表示したい場所にCanvasを置いて、VR ChatでUIを使う準備をする。 これを怠ると「Unity上では動くのに、VR Chatでは動かない!」ってなる(なった)。

  • Canvasに「VRC Ui Shape」をアタッチする
  • CanvasのLayerを「Default」にする
    初期LayerのUIのままだと、VR Chat内でメニューを開いているときしか操作できないらしい

UIを配置

ボタンや画像をいい感じに置く。

Udon sharpを頑張って書く

自作ワールドポータル集では、Udon sharpの処理は以下の3つに分かれている。

  1. 画面更新処理
  2. ポータルを出すボタンの処理
  3. ポータルを消すボタンの処理

それぞれ処理の説明は以下。

1. 画面更新処理

画面下部にあるワールド指定のボタンを押すと、赤枠部分が指定の内容に変更される。

まず、タイトル、説明、画像の部分について。

画面下部にあるワールド名のボタンを押すと、対応する内容で赤枠部分が更新されるようにした。

①タイトルと②説明文について

タイトルと説明文は、UIのTextMeshProを使用している。 このオブジェクトを、指定の内容で書き換える対応を作成した。

最初はString型の文字列を渡して、UI TextMeshProのオブジェクトの内容(TextMeshProUGUI.text)を書き換えようかと考えていた。

改行コードを文字列の中に入れても反映されず、コードの中で処理しなくてはいけないらしい……ということを調べていた中で、String型はお勧めできないという記述を発見。(忘れちゃったけどメモリがどうとかだったような……???)
真偽は定かではないけれど、プログラミング赤ちゃんなので素直に従うことにした。

Hierarchyに置いた非表示のUI Textに更新をかけたい内容を設定して、その内容(Text.text)でTextMeshProのオブジェクトの内容(TextMeshProUGUI.text)を書き換えたら、ついでに改行問題も解決したのでよしとした。

非表示のUI Textはワールドの数×2個(タイトルと説明文)作成した。

③画像の更新について

画像はUIのImageを使用している。 UI ImageのSourceImageの内容を変更すれば、画面上で書き換わるみたい。

SourceImageに設定する画像は、Sprite形式にしておく必要がある。

Hierarchyに置いた非表示のUI Imageに更新したい画像を設定して、すでに表示されているUI Image(初期画像)の更新をかけることとした。

簡単に言うとこういうこと。

初期画像.sprite = 更新したい画像.sprite;

④ポータルを出すボタンについて

まずは、表示するポータルの準備。
GameObjectにVRC PortalMakerをアタッチして、RoomIdの中に"wrld"から始まるワールドのIDを設定する。ワールドのIDは、VR Chatのワールドのページから確認できる。
このGameObjectを表示状態にすれば、ワールド上にポータルが現れる。これをワールドの数だけ作る。

「ポータルを出す」ボタンは、これらのポータルのGameObjectを表示する役割を持つ。そのため、ワールドの種類分作成する。
ボタンの種類は、UI TextmeshProを使用した。

画面下部にあるワールドのボタンを押したら、単純に各「ポータルを出す」ボタンを表示すればいいでしょと考えていたけれど、そうもいかなかった。 なぜなら、同じ場所にどんどん「ポータルを出す」ボタンが重なって表示されるからである……。そりゃそうだ。

仕方ないので、全ての「ポータルを出す」ボタンを非表示する処理を行った後、指定の「ポータルを出す」ボタンを表示するような処理にした。

⑤ポータルを消すボタンについて

画面下部にあるワールド名のボタンを押したとき、すでに「ポータルを消す」ボタンが表示されてなかったら表示させる処理とした。

2. ポータルを出すボタンの処理

ボタンが押されたら、下記処理を行う

  1. ポータルのGameObjectを全部非表示にする
  2. 次に指定のポータルのGameObjectを表示する処理を行う。

3. ポータルを消すボタンの処理

ボタンが押されたら、下記処理を行う

  1. ポータルの表示を全部オフにする

ポータルを出すボタンから、表示をオンにする部分を抜いただけ。

使用アセット

Unity公式が配布しているボタンのテクスチャ集。

Udonを使う時の注意点

UI Buttonに直接Udon Behaviourをアタッチしても動作できないので、下記手順で対応する

  1. 空のGame Objectを作成して、InspectorでUdon Behaviourをアタッチする
  2. ButtonのButton(Inspector側)にあるOnclick()の+ボタンを押す
  3. Objectの部分に1で作成したGameObjectを設定する
  4. No Functionとなっている部分を、Udon Behaviour.SendCustomEvent(string)に変更する
  5. 入力欄が現れるので、実行したい関数名を設定する

最後に

行きつ戻りつしながら、だいたい2日くらいで作りました。

RoomIdの値を渡してVRC PortalMakerのRoomIdをいい感じに更新できればHierarchyがもうちょっとすっきりしそうなのですが、どうコードで書くのか分かりませんでした。(大して調べてないせいもありますが……。)
仕方ないので非表示のゲームオブジェクトずらずら&Inspectorで設定する部分が多い状態になっています。

とはいえ、やりたかったことができたのでおおむね満足です。

VRChatのワールド「Ruins tea party」作成の振り返り

2022年6月初旬に公開したワールド「Ruins tea party」作成の振り返り記事です。

ワールドを作ったきっかけ

自分なりの映えワールドを作ってみたい……! 結果的には「映え?」になったような気はする。

「Ruins tea party」の概要

終末を迎える世界で、あなたと誰かのティーパーティ
世界は終わっても木々はざわめき、優しい光は天から降り注ぐ。

ワールド作成について

初めてやったこと

公開ワールドでは初めてPostprocessingの機能であるブルーム、カラーグレーディングを利用した。(作り途中ワールドでは試したけど放置してる……) Quest対応が自分の中で必須なので、今までPostprocessingは使わないようにしていた。今回も使うのはやめようかと思ったのだけど、「自分なりの映えワールド」がテーマなので悩んだ結果使うこととした。

自分で色味を調整した2つのモードと、スイッチについているデフォルトの2つのモード、スイッチオフ状態とPC版では5つの雰囲気が楽しめる。同じワールドでもイメージが変わるのは面白い。

また、Terrainを使ったのも公開ワールドでは初めて。

大変だったこと

地面が見えている部分と水に浸食されている部分の差をつけるのに、地面の高低差をきれいに作るのが難しかった。
Terrainで地面の高さはマイナスにできないので、地面が見えている部分を持ち上げなければならない。地面が妙にデコボコになってしまい、2回くらいやりなおした。

ワールド訪問はこちらからどうぞ

VR Chatのページ

vrchat.com

使用アセット

booth.pm booth.pm booth.pm booth.pm booth.pm

VRChatのワールド「You are everything」作成の振り返り

2022年5月末に公開したワールド「You are everything」の作成振り返り記事です。

ワールドを作ったきっかけ

「独占欲」をテーマにワールドを作ってみようと思い立ったので。
そう思い立った流れとしては、

  1. VRCでフルメタルジャケット上映会に参加
  2. そういえば、監督が同じ(キューブリック)のアイズ ワイド シャットもそろそろプライムビデオでの公開が終了だ観てみるか
  3. なるほど……嫉妬心からの独占欲いいね

という感じ。

「You are everything」の概要

ワールドに用意されているのは、あなたを閉じ込めるための籠。「死んでも離れない」という花言葉を持つアイビーが絡まっています。そして、あなたを見つめるたくさんのモニタ。

この部屋を抜け出した先に待っているのは……ある意味ハッピーエンド。

ワールド作成について

前回作ったワールド(Floating islands)が広かったので、今回はコンパクトにまとめてみた。
3つに部屋が分かれているけれど、話の流れとそれぞれの役割を決めていたので何を設置するかは迷いはなかった。

声を発注しようかと思ったけれど、BGMと一部操作時に効果音をつけたのみにとどめた。やりすぎると微妙にホラーワールド風味になりそうだったので、この判断は良かったと思う。あくまで「愛」のワールドなので。

初めてやったこと

ワールドのテーマを決めて、ストーリーに沿って作るというのは初めて。その方が漠然と「〇〇な感じのワールド作ろう」と考えるより、完成系のイメージがつけやすかった。ただし、ストーリーが自分の中でいい感じに思いつかないと難しそう。

技術面での初めてのこととしては、Blenderのアドオン「Building Tools」で建物を作ってみた。窓やドアもスイスイ作れて便利だけど、いい感じにテクスチャをあてるには当然UV展開が必要だった。(UV展開面倒だよね……)
籠はBlenderにて面からワイヤーフレームを作る機能で簡単に作成できた。

Boothで購入した監視カメラが残念ながらQuest版ではうまく動作しなかった。調べた結果、UnityのRender Textureを使えばシーン内にあるカメラの映像をオブジェクトに反映できることが分かった。Planeにカメラ画像から取得したテクスチャを当てて、Quest対応用モニタ画面とした。
やり方:【Unity / Render Texture】カメラの映像をオブジェクトに反映する方法 | STYLY

いちいちPC/Questで対応を分けるのはワールドアップロード時に面倒なので、次からはPC版もRender Textureを使うようにした方がいいかもしれない。

大変だったこと

Blenderでパスに沿ってオブジェクトを配列で増やすのがなぜかうまくいかず、一つ一つアイビーの葉を手作業でつける羽目に。
たくさんつけたら中に入っている人が良く見えなかったので多少間引いた。

ワールド訪問はこちらからどうぞ

VR Chatのページ

vrchat.com

使用アセット

booth.pm booth.pm booth.pm booth.pm booth.pm booth.pm booth.pm booth.pm booth.pm booth.pm

VRChatのワールド「Floating islands」作成の振り返り

だいぶ期間が空いてしまったけれど、作成したワールドの振り返り記事です。 作成したワールドの名前は「Floating islands」です。

ワールドを作ったきっかけ

空飛ぶ島ってロマンだよね……! 例えば『天空の城ラピュタ』みたいな。 そう思いつつUnity asset storeを見てみたら、こちらアセットを発見。

Zenith: Low Poly Floating Islands
Zenith: Low Poly Floating Islands

大小さまざまな浮島と飛行船、島、家、瓦礫、植物、装飾などで構成されたパックです。お手頃価格(22ドル)だしちょうどいい。
このアセットを軸にしてワールドを作ってみることにしました。

「Floating islands」の概要

今日は空への道がつながる祝祭の日。街にはお店が出て、思わず動物たちも飛び出してきました。
地上から空へワープすると、そこは一面の銀世界。グライダーに乗って島々を探検したり、のんびり温泉につかったり。空には楽しいことがいっぱい待ってます。

ワールド作成について

大きな島(実はこれも浮島でした)を地上部分とし、上空は橋でつながった大きい2つの島を中心として、3つの小さな島と飛行船を浮かべてみました。 ワープしてきた時のインパクトのため上下で差をつけたかったので、空に浮かぶ島は雪景色としました。

また、ファンタジー風味の世界感なので「かわいらしいものを増やそう!」と思い、ワールドのあちこちに動物を配置しました。

初めてやったこと

見よう見まねで地上部分で飛ぶ紙吹雪のパーティクルと、温泉の湯気パーティクルを自分で作ってみた。
パーティクルは使いようによってはワールドの動作が重くなってしまう。それが一番の気がかりだった。
パーティクルだけではなくワールド全体の調整の上、Quest単体でももっさり感がそこまで気にならない程度にできたと思う。

ワールドに置いたものにアニメーションをつけたのも初めてだった。 アニメーションを作った時に思ったように動かせなかったので、カプリコーン(山羊座のヤギ)はその場でしっぽをピチピチさせるだけにとどまってしまった。どうせなら島の中をウロウロさせたかったな。

今回は購入品と過去に作ったオブジェクトを主に使ったので、Blenderで作ったのはワープ用のドアとキノコモチーフの家具、PCモニタくらい。あとからBlenderの無料アドオンで簡単にドアを作れることを知った。悲しい。

大変だったこと

これだけのスペースがあるということは、何かで埋めなくていけないわけで……。
広いだけのスカスカのワールドや、各浮島に建物を置いてお茶を濁すだけではつまらない。

というわけで、各島をこんな感じに構成してみた。

  • 地上部分
    入口に家が並び、正面に教会がある島。そう、これも大きな島でできている。
    教会の横のお店で店番をしているたみほちゃんは驚きのCC0ライセンス。
    街のその辺にいる柴犬と猫は購入品。柴犬はアバターとして販売されていますが、一定の条件の上でワールドにて使用する許可を得ています。

  • 1つ目の浮島
    地上のワープゾーンを通ると、この島に移動する。賑わいを出すために、柴犬(Sit判定が付いていて座れる)やハリネズミ、ハムスター、カプリコーンなど動物多め。各島を巡るグライダーも用意されている。
    「ワールドのいい感じの場所にミラーを置くものだ」という言葉をどこかで見て「なるほど!」と思ったので、柴犬に座った時に正面に来るようにミラーが出るようになっている。

  • 2つ目の浮島
    温泉とこたつのある島。小さな浮島と飛行船へのワープ扉と、地上へのワープゾーンが島の入口に設置してある。

  • 3つ目の小さな浮島
    野菜農家の家かと思いきや、部屋の中には運動用のバーベルとプロテイン、スクワット部屋で撮影した写真を飾ってある。
    「Enjoy squats! - スクワットを頑張る部屋」へのポータルが設置されているので、勢いよく部屋に入るとスクワット部屋に飛ばされる。

  • 4つ目の小さな浮島
    キノコの家具を愛する誰かさんのお家がある島。
    パソコン、ベッド、ぬいぐるみがあって、一番生活感があるかもしれない。

  • 5つ目の小さな浮島 カウンターバーのある島。バーの壁にハワイの写真があるのは、雪国の民が南国に憧れたのかもしれない。写真は過去に私が撮影したもの。

  • 飛行船

    • 1階
      ベッドと花のあるテーブルが置いてある部屋。この部屋だけ、ちょっとスカスカ……。何か置こうと思ってそのままになっている。
    • 2階
      水撫月ちゃんファンのVR 部屋。壁が寂しかったので、こちらも過去に撮った写真を飾ってみた。

これだけ中身のある建物を設置すると、ライトベイクもそれなりに時間を要した。
各島一つ一つライトベイクの値を調整し、いい感じになったら全体をまとめてベイクするようにしたがとにかく大変だった……。

ワールド訪問はこちらからどうぞ

VR Chatのページ

vrchat.com

紹介動画


www.youtube.com

使用アセット

booth.pm booth.pm booth.pm tategamililha.booth.pm mech.booth.pm booth.pm booth.pm booth.pm booth.pm booth.pm booth.pm booth.pm booth.pm booth.pm

Unity上でロポリこんちゃんと柴犬を踊らせて、動画を撮った方法まとめ

f:id:hitton74214051:20220324125911p:plain タイトル通り、Unity上でアバターを動かして撮影する方法をまとめてみました。
※もっとスマートな方法があるのかもしれませんが、自分はこうやってみたという記録です。

使用したUnityのバージョン:Unity 2019.4.31.f1

作成した動画

実際に作った動画はこちら。

www.youtube.com

動画作成手順

準備から撮影までの手順は以下の通りです。

舞台を作成する

BlenderとUnityを使って舞台を組み上げていきます。やり方はVR Chatのワールド作成と変わりません。

f:id:hitton74214051:20220324133444p:plain

今回は桜の木とスノードーム風オブジェクト(雪はないけどスノードームでいいの?)を新たにBlenderで作成しました。
横にあるコップやトレイ等は以前作ったものの使いまわし。他は購入品やBoothの無料モデルです。使用したものは最後にまとめています。

アバターを動かすアニメーションを作成する

花びらが散るドーム内にキャラクターがただ立っているだけでは面白くないので、動かすことにしてみました。

アバターに紐づくアニメーションコントローラーを作成し、順番にアニメーションを再生します。

f:id:hitton74214051:20220324134351p:plain

待機状態のポーズを入れている"KonChan"の次に"tefuri"を再生し、最後に”Dance”という流れです。"Dance"はループ再生になっています。

今回は試していませんが、アニメーションを一定回数のみで止めるにはスクリプトで制御できそう。
参考:Animatorを一定回数繰り返したい【Unity】【簡単】 | へっぽこ記録

柴犬の方も同様の流れで設定。アバター購入時に入っていたしっぽ振りモーションに、目パチのアニメーションを加えてみました。

カメラを動かすアニメーションを作成する

Main Cameraにもアニメーションコントローラーを紐づけます。 f:id:hitton74214051:20220324135427p:plain

カメラ位置、カメラ角度を変えるようなアニメーションをオレンジの"main_camera"に設定しています。 f:id:hitton74214051:20220324135750p:plain

Animationタブから実行して、自分の思った通りの流れでカメラが動くように何回か見直しをしました。
UnityのGameタブを開いて実行ボタンを押すと、パーティクルを含めた全てのオブジェクト、カメラを同時に動かして確認することができます。

Unityで撮影する

満足のいく流れでアニメーションが作れたら、動画撮影をしてみましょう。

動画の撮影に使用するUnity Recorderは、UnityのPackage Manager からインストール可能です。

Unity Recorderは、Unity上部メニューのWindow -> General -> Recorder -> Record Windowで表示できます。

START RECORDINGのボタンを押すと、自動的に実行状態になって動画を撮影することができます。
Output Fileメニューの中にあるPathで指定した場所に、動画が自動で保存されます。 f:id:hitton74214051:20220324140949p:plain

もし、動画の品質やアスペクト比率を変えたい場合には、右側の赤枠の部分を変更して下さい。

今回使用したアイテム