Charaticleを作る Part1
というものを作りました。
メインのコンテンツは文字でかたどられた天使の輪です。
無料版もあるので、ぜひ使っていただきたいです。
有料版はおかげさまで、じわじわと購入してただいた方が現れ、実際に使用してくださる方にも何人か会いました。光栄です。
ふわふわと追従する感じがかわいい天使の輪です。
この記事はこれをどうやって作ったのかを説明します。
構想
アイデア
実はこれ僕のアイデアではありません。
同僚が作ったパーティクルに着想を得ており、それは天井から文字やアイコンがランダムにパラパラと落ちてくるというパーティクルでした。
ポストプロセスによりちらちらと輝き、近づかないと文字に見えないという絶妙な美しさに心を奪われました。
これをとりあえず真似して作ってみたいから始まりました。
試作
模造に関しては簡単でした。製作方法については後述する内容に含まれているので省略しますが、簡単にいうと4分割した画像を用意し、Texture Sheet Animationモジュールでランダム範囲を取得、Main ModuleのGravity Modifierで落ちるというもので30分ほどで作りました。
簡単にできたため、もう少し踏み込んだものを作ろうと考え構想を練り始めました。
コンセプト決め
普段使用しているアバターがアングラの子だったので、「アングラ」「メンヘラ」「病みかわ」なものを作る方向に決めました。
病、悲、愛のような漢字がマッチするので、これを身につけられるようなもので、「メンヘラ」をかざすからには、周りの人に気づいて欲しいと思えるような要素が必要と考え、以下のコンセプトに決まりました。
綺麗で可愛くてちょっと怖い
アクセサリー
色々な感情を表せる
気づいて欲しいという思い
コンセプトが4つもあるのは欲張り過ぎですが、とりあえず確定したのでこの方針からブレずに作ることを決めました。
アクセサリーの形状としては天使の輪が一番わかりやすいと判断し、製作方針がきまりました。VRChatでは天使の輪人気なのもあります。
ちなみにこのあたりで同僚にアイデアパクっていいですか？と聞いて快諾を得ました。
制作 - 天使の輪編
使用ツール
Unity 2019.4.31f1
プロトタイプを作る
まず、天使の輪を作るので、シーンにパーティクルシステムを置くところから始めましょう。
パーティクルシステムはデフォルトでTransformのRotation Xが-90になっているので、0にしました。
形状はドーナツ形に整える必要があります。
Shape Moduleを開き、ShapeをConeからDonutにします。
これでパーティクルを放出する形がドーナツ形になります。
先ほどTransformのRotationを変更したため、それを相殺するためRotationのXに90を入れました。
ただ、残念ながらこれだけではとても天使の輪とは言えません。
パーティクルが大きくて、速度も速すぎるためです。また、このパーティクルはアバターに応じてサイズを調整する必要があるため、スケーリングをヒエラルキー準拠にする必要があります。
以下のように調整します。
天使の輪っぽくなってきましたが、まだスカスカで輪も太いです。
パーティクルの量と、シェイプを調整してみます。
少し詳しく説明します。
ー Main Module ー
Start Lifetime
値を増やし、パーティクルが消えるまでの時間を長くします。
ー Emission Module ー
Rate over Time
値を増やし、1秒ごとに出現するパーティクルの量を増やします。
ー Shape Module ー
Donut Radius
輪（チューブ）の半径下げ、輪を細くします。
Radius Thickness
値を下げ、輪の厚みを薄くして出現範囲を絞ります。
Spherize Direction
1を入れて、広がる方向に制限をいれます。
だいぶ天使の輪のようになってきましたが、各パーティクルの出現と消滅が非線形的でダサいです。
これをゆっくり現れゆっくり消えるようにします。その方が可愛いので。
これを実現するためには、Size over Lifetime Moduleを使います。
このモジュールは上で設定したStart Lifetimeを0% ~ 100%としたときに、その期間中のパーティクルサイズを線形的に指定することができます。
今回は12秒に設定してあるため、12秒中にどう変化するかを決めることになります。
0~15% サイズ0から最大サイズ(Start Size)に
15% ~ 85% 最大サイズを維持
85% ~ 100% サイズを0に
ざっくり上のような設定にしました。
これでいったん天使の輪のリング部分は出来ました。
ここまでの比較を見てみます。
次はコンセプトにあった気づいて欲しいという思いになる部分です。
こぼれ落ちたパーティクルがその場でしばらく漂うようにします。
"こぼれ落ちる"を表現するためにはGravity Modifierを利用しますが、すべてが落ちてほしいわけではないので、上で作った天使の輪を複製して子オブジェクトにします。
また、後でパーティクルに回転を入れたいため、右回転用と左回転用に二つ複製し、一つの空オブジェクトの子としてまとめます。
子にしたパーティクルはやることが多いので以下に設定を箇条書きします。
ー Main Module ー
Start Lifetime
時間を短くし、２値間でランダムな値をとるようにします。
右の逆三角形からRandom Between Two Constantsを選択することでこれを可能とします。
Start Speed
0にします。出現後、動かず自然落下をさせるためです。
Start Size
小さくします。落ちるパーティクルは小さいほうが可愛いと思ったためです。
Gravity Modifier
ほんのわずかに重力を加えることで、漂うように落下させます。
Simulation Space
Worldにします。これで、ワールド空間上に漂うようになります。
ー Emission Module ー
Rate over Time
量を減らし、少しだけ出現するようにします。
ー Shape Module ー
Donut Radius
半径を少し下げます。あまり落ちる場所が広いと輪からこぼれている感じがしないかと考えたためです。
Radius Thickness
1にします。ドーナツ内部の落下する空間を広げて、落下する距離などのランダム性を増やします。
Spherize Direction
0にします。Start Speedを0とした場合、この設定に意味がないためです。
ー Size over Lifetime Module ー
リング部分と異なりすぐに大きくなり、緩やかに小さくなるようにします。
設定としては以下です。
0% ~ 3% 0から最大サイズになる
3% ~ 38% 最大サイズを維持
38% ~ 100% 緩やかにサイズを0にする
やることが多かったですが、以下のような変更を左右に行います。
天使の輪のパーティクルと、そこからこぼれ落ちるパーティクルというところまで出来ました。
回転などを加えたいのですが、今の状態だとあまりわからないので、後回しにします。
漢字を増やす
試作段階では4分割していましたが、色々な感情を表せるというコンセプトにはとても足りないので増やしました。
何文字にするかで少し悩みました。「メンヘラ」や「病みかわ」を構成する感情はネガティブなものが全てではないというのは想像がつくと思います。可愛くてちょっと怖いを実現するためには、ネガティブだけでなく、ポジティブも入れる必要があり、そうなると25(5x5)字だと足りなかったので、36(6x6)字にしました。
これは友人と相談しつつ、漢字を考えました。
結果的に上のような並びを持った画像を作成しました。
作成にはAffinity Photo 2を使用しました。
この並びには意味があり、番号を振ると以下のようになります。
つまり、左上から右下にかけて、ポジティブな感情からネガティブな感情へのグラデーションを作ったことになります。(最後の二つは正直何も思いつかなかったスペース埋めになりました・・・)
これはパーティクルのTexture Sheet Animation Moduleを活用するための並びとなっており、詳細は後ほど説明します。
この画像は白い部分以外透過したpngとして出力します。
無料版のArialフォントで実際に使用している画像が以下です。
マテリアル作成
先程のテクスチャをインポートします。
上で出力したテクスチャをUnityに取り込み、取り込み設定のAlpha is Transparencyにチェックを入れます。
これをしないと透過された画像として取り込まれないためです。
また、VRChatの要件に対応するため、Streaming MipmapsにもチェックをいれApplyを押します。
次にシェーダーを用意します。
今回は皆さんご存じlilToonを用いました。
マテリアルを作成します。
設定は以下のようにします。
描画モード
カットアウトにします。
Cull Mode
Offにします。
デフォルトだと背面カリング(描画除去)がオンになっているため、Billboard(常にカメラに正面を向く)なパーティクルは鏡に映った際に背面が見えなくなってしまいます。
メインカラー
出力したテクスチャを挿します。
発光テクスチャ
出力したテクスチャを挿し、色を白にします。
メインカラーの強度を0.25にし、メインカラーの影響を受けるようにします。
これを設定することで、ポストプロセスの影響があるワールドで綺麗に輝くようになります。
漢字のパーティクルにする
作成したマテリアルをパーティクルに設定します。
Renderer ModuleのMaterialにセットします。
テクスチャがそのままパーティクルになるので、一文字にします。
これを実現するためにはTexture Sheet Animation Moduleを利用します。
Tiles
シートは6x6なのでXYそれぞれ6を入れます。
Frame over Time
右の三角からConstantを選択し、0を入力します
Start Frame
右の三角からRandom Between Two Constantsを選び左に0を右に35を入れます。
これでテクスチャを作る際に並べた番号の範囲からランダムで一つ選んで出現させるという設定にできます。
0 ~ 35なのですべての文字からランダムに出現するということになります。
これで文字でかたどられたパーティクルができました。
文字に回転を加える
アクセントとして回転を加えていきます。
リングと、左回転、右回転それぞれ設定を行います。
Rotation over Lifetime Moduleを変更していきます。
すべて右の三角からRandom Between Two Constantsを選びます。
リングは -2 ~ 2を設定します。
左回転のSeparate Axesにチェックを入れます。
Zに-25 ~ -45を入れます。
右回転のSeprate Axesにチェックを入れます。
Zに25 ~ 45を入れます。
これでリング部分は概ね完成です。
次回はパーティクルの文字を変更する仕組みを作ります。
気長に待っててください。
この記事が気に入ったらサポートをしてみませんか？