top of page

第2回 文字をポリゴンにしてパーティクルにする

  • 執筆者の写真: じゅーごや
    じゅーごや
  • 2019年10月5日
  • 読了時間: 8分

皆様こんにちは、じゅーごやです。

お元気でしたか?私は(脳)天気です。


昭和レベルなこと言ってないで早速今回の内容に入りましょう。

前回の流れはこんな感じでした。


1. 画像編集ソフトで吹き出し付き文字画像を作る

2. ユニティに画像をインポート、マテリアルを設定する

3. パーティクルシステムを設定する


ぶっちゃけ2と3は毎回やりますね。

別のものを使いまわせると作業効率がぐっと上がるかと思います。


さて、今回は画像データではなくfbxデータ、つまり3Dモデルデータで

パーティクルシステムを使ってみようということになります。

今回使用するツールはWindows10に標準装備されている

「ペイント 3D」というソフトです。早速起動してみましょう。


デスクトップ左下の「ここに入力して検索」と書いてあるところに

3Dと入力したら出てきてくれると思います。

上の「テキスト」タブ→右上の3Dテキストを選ぶと厚みのある文字が書けちゃいます。


前回は「こんにちは」という文章を作りましたので、今回は記号で作ってみましょう。

「ほし」で変換して「☆」を書いてみました。

「ねこ」で変換して猫っぽいシルエットが出せたりもするので

是非色々試してください。もちろん手書きでも3D化できますよ。

ちなみに後でUnity上で色はいくらでも変えられるので黒のまんまで書いても大丈夫です。


画面上側の「3D表示」を押して右クリックしながらドラッグすると

画面を回せます。しっかり立体になってますね。


というわけでこれを3Dモデルデータとして出力しましょう!

左上の「メニュー」→「名前を付けて保存」→「3Dモデル」

この時に大事なのがファイル形式を必ずFBXにしておくことです。

Unityでサポートされている形式で出力しましょう。


出力出来たらUnityにインポートします。

画像同様、Unityのウィンドウにドラッグ&ドロップでできます。

すみません、今回先走って設定を全部済ませてしまいました(

順を追って解説します。


今回は3Dモデルデータなので前回の画像のインポート設定のようなものは割愛です。

3Dモデルにも動かすための「リグ設定」とかあるんですが

パーティクルの場合はボーンとかウェイトとかが意味を為さないので…


とりあえず進めましょう。

マテリアルを作ります。覚えてますでしょうか?

下窓で右クリック→「Create」→「Material」ですね。


シェーダー設定はこんな感じ。(日本語化パッチありますがあててません…)

今回はユニティちゃんトゥーンシェーダー(UTS)を使ってみました。

そう、今回は3Dモデルなので背景を透過させることにこだわらなくても良いのです!

どんなシェーダーを使っても大丈夫なのです!

いや、UTSでも透過とか普通にできますが前回は手軽さでUnlitにしました。

UTSの使い方も私は素人なので丁寧に解説されているサイト様を

参照するほうがよろしいでしょう。


逸れましたが、今回は地の色(左画像上、BaseMap色)をちょっと暗めの黄色にして、

Emissive(右画像真ん中あたり)に明るい黄色を設定して

黄色く光るようにしてみました。UTSにしたのはこれがやりたかっただけです。

Ark Toon Shaderとかでも簡単に光らせることができます。


ではパーティクルシステムを作りましょう。

左のヒエラルキーで右クリック→「Effect」→「Particle system」です。


今回は3Dモデルをパーティクルとして

出すので設定が変わります。

Particle Systemの一番下にある

「Renderer」の「Render Mode」を

「Mesh」に変更します。これで3Dモデル

そのものをパーティクルにすることが

できるのです。


Meshに変えるとすぐ下にどのMeshを

使うか選ぶ欄が出てきますので、

右端にあるちっちゃな丸を押して

出てきた窓からお目当てのモデルを

探しましょう。


続いて、「Material」の欄に用意した

マテリアルをドラッグ&ドロップします。


ちなみにMaterialの二つ下、

「Render Alignment」を「World」に

変更してますがこれは後ほど…







さて、このままだと例の如く、前方へ星を大量にばらまくパーティクルになります。

メルヘンだしそれはそれで良さそうですね。


しかし私は控えめでお茶目なので()もっと可愛らしくしたいと思います。

イメージは『ウィンクした時に星が出る』という感じ。

パチッとしたときに大きな星が出て、小さな星が後から舞うというものを

作ってみたいと思います。


設定がこちら。

複雑なので説明を割愛いたします(

チェックが入ってるコンポーネントはこんな感じのものです。


・Emission

パーティクルの発射タイミングや頻度を制御します。

チェックが入ってないとパーティクルが出ません。


・Velocity over Lifetime

パーティクルが発生した後に時間で速度を変えます。

X, Y, Zそれぞれの軸に対して設定できます。


・Rotation over Lifetime

パーティクルが発生した後に時間で回転させます。

X, Y, Zそれぞれの軸に対して設定できます。


・Sub Emitter

今回の目玉です。発生させたパーティクルの場所から

別のパーティクルを新しく発生させることができます。

ヒエラルキー内でそれぞれ親と子の関係にした

パーティクルシステムで設定ができます。

今回は大きいメイン☆から小さいサブ☆が出ます


Sub Emitterは使いこなすといろんな表現ができるようになるので

頑張るとハッピーになれます。きっと。

例えばパーティクルが壁に当たって爆発するという表現も

Sub Emitterを使うとできるのです。

需要があればこのSub Emitterに特化した解説をしても

いいかなと思ってます。楽しいので。楽しいのでッ!!


また、メイン設定のなかの「Looping」のチェックは外します。

これがついてるとウィンクしてる間に何度も出ちゃうので。


ついでに、設定の中でちょっと前に触れました「Renderer」の

「Render Alignment」をWorldにしておきます。


デフォルトの「View」は見る人から常に同じ向きに見える設定です。

Billboardに似てますね。

で、これを「World」にしておくと、空間のXYZ軸を基準に出てくるので

見る角度によって変わります。ぺったんこな画像だと残念になりますが

厚みのある3Dモデルならこの方が見栄え良いかなと思います。


さて、そしてウィンクした時に出したいので、

これをアバターのHeadのボーンにドラッグ&ドロップ!

位置の調整が必要になるので目元から出るように調整します。

アバターによってPositionやRotationの数字は変わってきます。


今回はアニメーションでパーティクルを出すところまでご説明致しましょう。

UNITY-CHAN! for VRChat 2.0(https://booth.pm/ja/items/1304583)には

アニメーションオーバーライドで使える一通りのアニメーションが

一緒に入っていますのでそれを編集していきます。

アニメーションを編集する前に必ず


3Dモデルを複製してから使用してください。


これ重要です。後でわかります。

取り返しがつかないわけではないのですが…かなり面倒です。


まず、ヒエラルキーのアバター

(上画像なら CRS Unity-chan! for VRchat 結合 DB設定済み)

をクリックして、Ctrlキー+Dキー でコピーができます。

すぐ下に同じ名前の(1)とついたものができたらオーケーです。


そのままだと重なってるので(1)の方のPositionを2とかにしてずらします。


アニメーションファイルを探してヒエラルキーにある(1)モデルにドラッグ&ドロップしましょう。使うアニメーションファイルだけで大丈夫ですが、どんなアニメーションかを

確認するために全部入れちゃいます。

すると、下の窓に別のファイルが突如出現します。

が、気にしなくて大丈夫です。ここでは使いません。


では上のタブから「Window」→「Animation」と選びます。


アニメーション編集用のウィンドウが出ますので、ヒエラルキーの

(1)アバターをクリックすると読み込んだアニメーションの中身が見えます。

ウィンクの表情があるか探してみましょう。

なければ他のアニメーションを改造して作りましょう…。

こちらを参考にすればうまくいくと思います。


ユニティちゃんでわかるVRchatのためのunity教室

第5回 ユニティちゃんを笑顔にしよう

~アニメーションオーバーライド表情実装編~


ちなみに表情や手のカタチのチェックはアニメーションウィンドウの

左上「Preview」を押せば見れますが、

……その際に中腰になります。

しかもこの姿勢、アニメーションを終了しても戻りません。

この状態だとVRChatにアップロードできなくなってしまいます。

なので "必ず" アバターは複製してからやりましょうね。


上の画像ではウィンクのアニメーションを見つけました。

…ウソです。なかったので改造しました。

同じUNITY-CHAN! for VRChatで試してみる方は「笑み」のアニメーションの

表情設定を↑画像のようにちょっと変えるといけます。


このアニメーションに「☆のパーティクルをONにする」という設定を加えます。

(↑ではすでに入っていますが)

アニメーション欄の一番下「Add Property」を押してボーンの階層を開いていきます。

(大抵はArmature→Hips→Spine→Chest→Neck→Head)

Headの下に入れたパーティクル(今回は『メイン☆』)を開き、

「Is Active」の右の『+』マークをクリックしましょう。

これでアニメーションに『メイン☆』をONにするという内容が加わります。


VRChat上で使うアニメーションオーバーライドでは、同じ内容を

2フレーム分設定するのがセオリーとなっております(私も良く分かってない)

ので、コマ送りマークを押して隣のフレームもONにしておきましょう。

これでアニメーションはオーケーです。


さて、Avatar Descriptorの設定が完了すれば残すはコピー前のアバターを

アップロードするのみですが、最後に以下の点をチェックしましょう。


・『メイン☆』がOFF(選択した時に右上のチェックが外れている)

・『サブ☆』はON(右上にチェックが入っている)


アップロードについては割愛いたします。



ここまでお付き合い頂きまして誠にありがとうございました。

まだ第二回ではありますが、いかがでしょうか。

少しでも皆様の役に立っていたら嬉しいです。


ささやかですが、今回作成した『ウィンク☆』のパーティクルを

お使いいただける状態で配布いたします。


UTS ver2.0をUnityにインポートした状態で、

このunitypackageファイルを読み込むと

出来上がったパーティクルシステムのPrefabファイルが入っています。

これをHeadのボーンにドラッグ&ドロップするだけで導入できます。


位置合わせとアニメーションは頑張ってくださいね。

今回は設定も複雑になってしまったので設定を眺めて頂くと

何か発見もあるかもしれません。


それでは、次回は3回目にして番外編…


VRChatでパーティクルを使用する際の落とし穴


を少々ご紹介しようと思います…

それでは、よいVRChatライフを。

Comments


  • twitter

©2019 by じゅーごやのVRChat 小技集。Wix.com で作成されました。

bottom of page