.png)
第１回 パーティクル吹き出しでしゃべる
- じゅーごや
- 2019年9月24日
- 読了時間: 8分
更新日：2019年10月5日
初めまして。そうでない方はこんにちは。
VRChatで『じゅーごや』というネームで遊んでいる者です。
VRChatは今、バーチャルマーケット3という一大イベントを終えたばかり。
地上波でも放送されたその影響力も目を見張るものがあります。
この機にVRChatを始められた方も多いのではないでしょうか？
バーチャルマーケットで販売されているアバターはどれも魅力的なものばかりで
早速買って導入している方、したいと考えている方も多いことでしょう。
そして自分好みに改変を楽しみたい方もきっと多いはずです。
そんなアバター改変を始めた皆様、またなかなかアバター改変に
手を付けられなかった皆様へ、魅力的な個性を引き出す一助となればと思い
このような形で情報発信をさせて頂くことを決意致しました。
拙い技術力と伝達力ではありますが、何かのご参考となれば冥利に尽きます。
能書きはここまでにしまして、
VRChatをやってるとですね、割といらっしゃるんですよね
無言勢の方々。
特に始めたばかりでなかなか声を出しづらいという方も多いのではないでしょうか。
身振り手振りや絵文字、エモートでコミュニケーションを取ってくださる姿は
アバターも相まってとても可愛らしい（かっこいい）のですが、
表現の幅をちょっと広げてよりコミュニケーションを取りやすく、
より可愛らしく（かっこよく）なれないかなと考えました。
初めのあいさつがちょっとコミカルにできるだけで
その後のイメージもグッと上がると思うんですよね。
というわけで、第１回は
吹き出しパーティクルでしゃべろう
と題しまして、素材の用意からUnityでの設定方法までを解説します。
完成のイメージとしては下の画像のような感じです。
アバターはこちらのVRChat用に最適化されたユニティちゃんをお借りしています。
Hearts Laboratory様 UNITY-CHAN! for VRChat 2.0
では早速素材の用意からいきましょう。
まず、今回の説明では画像編集ソフトとしてGIMP Ver2.10.8というものを使用しています。
アバターのテクスチャー改変にも大変役に立ちますので、
編集ソフトがないという方はぜひぜひインストールしてみてくださいね。
もちろん同等の操作ができるソフトであればGIMPでなくてもオッケーです。
加えまして、吹き出しの枠を自作するのが面倒という方にも
吹き出し素材を配布している大変ありがたいサイトもあるので
活用してみてはいかがでしょうか。
フキダシデザイン様 https://fukidesign.com/
さて、では上記サイトや自作でそれっぽい吹き出しの枠を作っておきます。
そしてGIMPを開いて「ファイル」タブ→「新しい画像を作成」
キャンパスサイズは1024×1024もしくは512×512ぐらいが良いでしょう。
すると真っ黒い画像が出てくるので、
右下の空間で右クリック→「アルファチャンネルの追加」
アルファチャンネルとはつまり透明な背景のことです。
これをレイヤーの一番下に置いておけば何もないところが透明になるわけですね。
一応説明しますと、レイヤーというのは色々な部分が描かれた透明な板を重ねて絵を
表現する場合に、一枚一枚の板のことをそう呼びます。
さて、透明な背景を作ったらひとまず黒い背景は消してしまいましょう。
全選択（Ctrl＋Aキー）を押してdeleteキーで、
背景が白黒の四角が並んだような感じになります。
この模様が透明ですよーというわけですね。
この透明なレイヤーに別のレイヤーを重ねます。
左上の「ファイル」タブ→「レイヤーとして開く」を選択して、
あらかじめ用意した吹き出しのファイル（あらかじめJPEGかPNGにしておきましょう）
を選んで開きます。
そうすると右下に別のレイヤーが追加されました。
吹き出しの画像データがこのレイヤーにそのまま重なった感じです。
では、「ツール」タブ→「変形ツール」→「拡大・縮小」で
大きさを整えましょう。
幅と長さの数値の右にあるチェーンのマークがついた状態で
幅を背景の幅（1024×1024であれば1024）と同じにしてあげると
縦横の比率そのままにいっぱいまで広がります。
このままですと吹き出しの中や周りは白いままです。
なので、気になる場合は白いところを透明にしちゃいましょう。
「ツール」タブ→「選択ツール」→「ファジー選択」を選びます。
これは似通った色の区画を自動で選んでくれる便利機能です。
アバターのテクスチャー改変でも強い味方になるのでぜひ覚えて行ってくださいね。
では、ファジー選択で白い場所をクリックして、deleteキーでその部分を消していったら
下の画像のような感じになります。……なったでしょうか？
なりましたら左上のごちゃーっとしたアイコンの中にある
「テキスト」という文字を入力できるツールを選びます。
今回は「こんにちは」と入力して文字の大きさを調整してみました。
テキストボックスの端にアイコンを合わせてクリック&ドラッグすると
テキストボックスの大きさと位置を調整できます。
ここまで出来ましたら画像ファイルとして出力してみましょう。
「ファイル」タブ→「名前を付けてエクスポート」
あらかじめUnityのプロジェクトがありましたらAssetフォルダの下とかに
入れるとわかりやすいと思います。
後でプロジェクトファイルに読み込んでも良いので出力先は自由です。
ちなみにエクスポートの設定は下画像の感じです。
背景を保存しないと真っ黒になったりすると思いますのでご注意を。
ファイル形式はPNGが良いと思います。
では、GIMPでの作業を終えていよいよUnityを立ち上げましょう。
保存先のフォルダからUnityのウィンドウにドラッグ&ドロップすればインポートできます。
……が、なんと、なんとファイルが真っ黒ではありませんか。
おのれじゅーごや、図ったな？
……とお思いの方もいらっしゃるかと存じますが弁明の猶予をください。
Unityには画像のインポート設定というものがあります。
↑画像のように、画像ファイルを選択して、右上の「Inspector」というタブを開くと
画像ファイルの設定を見ることができます。
デフォルトでは背景を透過しない設定になっていますので、
「Alpha Is Transparency」にチェックを入れて下の「Apply」を押しましょう。
やったー、ちゃんと見えるようになりました。
では次にマテリアルを作ります。
アバターやオブジェクトと同じようにパーティクルにもマテリアルが必要です。
下の窓で右クリック→「Create」→「Material」
するとマテリアルのファイルができますので、
とりあえずシェーダーの種類を↑画像のように「Unlit」→「Transparent」にしましょう。
余談ですが、「Unlit」は描画の際に周囲の環境に影響を受けない設定です。
色付き文字であれば周りが真っ暗でも見えます。
「Transparent」背景の透過を適応しますという設定ですね。
できましたらマテリアルに画像ファイルをテクスチャとして適用しましょう。
画像ファイルをマテリアル設定画面のちっちゃい窓（右下にSelectと書いてある）に
ドラッグアンドドロップすればオーケーです。
下の窓のマテリアルファイルも歪んだ「こんにちは」になりましたね。
では本命の操作、パーティクルシステムを呼び出します。
左の窓（Hierarchy，ヒエラルキー）で右クリック→「Effect」→「Particle System」
白い球がバラバラ撒かれますが、とりあえず右の窓の一番上（Transform）の
PositionとRotationは全て0にしておきましょう。
この白い球を「こんにちは」に変えるわけです。
右の窓のParticle Systemを下にスクロールすると
「Renderer」という項目がありますのでクリックして開きます。
開くと「Material」という項目があるので、「Default-Particle」から
先ほど作った「こんにちは」のマテリアルに変えます。
画像適用と同じようにドラッグ&ドロップでオーケーです。
すると、なんということでしょう…
圧が強い。
こんな挨拶をされたらちょっとドン引いてしまいます。
いや、これはこれで個性です。私は貴方の自由を尊重します。
まあ、できればもっと可愛らしく出したいと思いますので
個数を減らして動きも抑えましょう。
Particle Systemの数値を画像のように変更してみました。
主に変えたのは以下の数値です。
・Start Speed … パーティクルの飛ぶ速さです。厳密には初速です。
・Max Particles … 一度に発生するパーティクルの最大数です。
ついでにParticleシステムの2つにある「Shape」のチェックを外しておくと
「こんにちは」が出る位置が固定されます。
画像ではついでに位置もいい感じに整えてみました。
最後に、左の窓にあるParticle Systemをアバターの「Headボーン」に
ドラッグ&ドロップして頭の動きに追従するようにしてあげれば完成です。
ちなみにですが、Rendererの項目の「Render Mode」が「Billboard」となっていますが、
これはどの角度から見ても同じように見えるという設定です。
なので、「こんにちは」を表示しながらユニティちゃんが下を向いても
「こんにちは」が下を向いてしまうということはありません。
板ポリゴンに画像を貼ったオブジェクトでも吹き出し文字を出せますが、
こういう便利な表現が簡単にできるのがパーティクルの強みです。
さらに、↑の画像では「こんにちは」をちょっと左右に揺らせる設定をしています。
「Rotation over Lifetime」という項目をいじるとできます。
これは、パーティクルの発生した時間に応じて回転させるというものです。
さて、いかがでしたでしょうか。
長々と書いてしまいましたが、最後までお読み頂けましたら恐縮です。
また、お気づきの方もきっといらっしゃいますでしょう、
今回は吹き出し文字を使いましたが、これはPNGやJPEG画像であれば
何でもパーティクルにして出せるということでもあります。
皆様がもっとパーティクルを気軽使えて、
もっとVRChatを楽しめたら嬉しい限りです。
次回は、
文字そのものをポリゴンにしてパーティクルにする方法
を解説しようと考えています。
それでは、よろしければVRChatでもお会いしましょう。
皆さんの素敵な個性を見せて頂けたらとても嬉しく思います。
では！
追記：
パーティクルを作ったは良いものの、
アニメーションオーバーライドで表示する方法に触れてませんでした。
うっかりです。万死に値する。
アニメーションオーバーライドとは何ぞやという方もいらっしゃるかと思いますが、
丁寧に解説されているサイトがたくさんありますので
そちらをご参照ください（他力本願）
例えば↑はアバターの導入といったより初歩的なことから、
VRChatのUnityバージョンが更新された場合のアバターアップロード環境の
適用方法といったクリティカルな内容まで解説してくれている
大変ありがたいサイトです。
今後特殊な設定が必要なものを紹介する機会がありましたら
その際はアニメーション周りの解説も挟むこととしましょう。
Comentarios