Onoty3D

Unityに関するメモとか

uGUIのテキストエフェクトを作ってみたりした

Unity Fukuoka 12に参加して、前回に引き続き登壇しました。

atnd.org

前回はShaderネタでしたが、今回はuGUIのテキストエフェクトネタ。
とりあえずやってみて覚えたことを発表してみました。

スライド内にAnimation GIFを盛り込んだため、SlideShare上で再生してもそこは動きません。
ちゃんと内容を見るにはダウンロードしたほうがいいかも…。

www.slideshare.net

 

本スライドで紹介したTypeface Animatorはとっても便利なアセットで、コードもとてもお勉強になるので、是非興味がある方は購入してみてください。

 

 

Particleの動きを制御して、Trailで文字を書く

Unity5.5から追加されたParticleのTrailsモジュールで遊んでいた時、
Particleの動きを制御すればTrailで文字が書けたりするかな?と思ったのでやってみました。
f:id:onoty3d:20161115195659g:plain

Particleの動きの制御はVelocityOverLifetimeモジュールで行えますが、事前にキーを打ってCurveを作るのは大変です。
そこで、まずマウスで手書きで文字を書き、その時のカーソルのXY座標の変化をVelocityOverLifetimeにセットして文字を書くことにしました。

VelocityOverLifetimeの制御の仕方は以下QAが参考になりました。
answers.unity3d.com

VelocityOverLifetimeでのX,Y各軸の速度変化はMinMaxCurveというクラスのインスタンスをセットすればいいみたいですが、
インスタンス生成時にAnimationCurveを渡してやれば、それがそのままCurveになります。

AnimationCurveのキー追加方などは以下Qiitaの記事が参考になりました。
qiita.com

とりあえず動かせるサンプルを作ってUnityPackageにしてみました。
UnityPackage

Unity5.5b11で作成しています。
新規にシーンを作ってPrefabを投げ込んで実行すれば確認できると思います(背景は暗くしたほうがいいかも)。
実用するにはカメラの位置、角度なんかも考慮する必要がありそうですが、今回は簡易な実装になっています。

ただ文字を書くだけならLineRendererなんかで十分ですが、Particleにすれば設定によっては複数発生させたり、
変形操作もできたりして楽しい気がします。
f:id:onoty3d:20161115200251g:plain

以下ソース

Shaderでゾワゾワ表現

ふと、アニメなんかでみるゾワゾワッとする表現がShaderで作ってみたくなったので試してみました。
まだ課題が残っていますがとりあえず一旦ここで一息。

結果から出すとこんな感じになりました。
f:id:onoty3d:20161109185553g:plain

UnityPackageはこちら
Unity5.5で作成したので、5.4以前で上手く動かないかもしれません。
ToonLit Shaderがベースなので、各バージョンのToonLit Shaderにパラメータと数式を移植すれば動くと思います。

またテッセレーションが有効な環境(DX11以上 / OpenGL Core)でないと動きません。

使い方

Shaderのパラメータはこんな感じ。
パラメータ名は雰囲気で付けました。
f:id:onoty3d:20161109190148p:plain
YBorder:ゾワゾワっとさせる中心となるY座標です。Materialをセットするメッシュでのローカル座標になります。

※ここを動かすとゾワゾワ位置が移動します。
上記動画はスクリプトでこのYBorderを変化させています。なのでShaderだけでゾワゾワが下から上に走るわけではありません。
あしからず。

YRange:YBorder±YRangeの範囲をゾワゾワっとさせます。
Volume:ゾワゾワの大きさです。
Pow:後述のGapを顕著にします
Gap:ゾワゾワの高低差を大きくします
Fineness:ゾワゾワの細かさです。
Edge:ゾワゾワを出す頂点とカメラの向きの関係です。0に近いほどカメラに対して横を向いている頂点(基本的にモデルの端っこ)からゾワゾワがでます。
Tessellationテッセレーションのパラメータ

とりあえず、適当に色々触ると色々動くので試してみてください。
f:id:onoty3d:20161109191625g:plain

うまくやればFur Shaderっぽくもなります。
f:id:onoty3d:20161109194744p:plain

メモ

はじめは単純に頂点を動かすだけだったんですが、ボコボコとした三角形が出来るだけでした。
f:id:onoty3d:20161109190612g:plain
この時点でもっとハイポリゴンなメッシュじゃないと無理かな、と思ってやめようと思ったのですが、
Twitterテッセレーション使いなされとアドバイスを貰ったのでテッセレーション処理も入れてみるとうまく行きました。
とりあえず固定量テッセレーション

課題

球体など完全に凸なメッシュの場合はEdgeを0近くにすれば端からしかゾワゾワは出ませんが、凹凸のあるメッシュの場合は意図せぬ部分からもゾワゾワが出ます。
例えばプロ生ちゃんの髪だと、前髪からも出ます。
f:id:onoty3d:20161109190934p:plain
ステンシルバッファを使ってマスク処理するとか、Z座標の位置も判定に入れるとか、そのへんで調整すればいいかもしれません。

ソース

メッシュの頂点を動かして、プロ生ちゃんの舌を操作する

プロ生ちゃんの舌をスクリプトで動かせるようにしてみました。


舌ネタは以前にもやりました。
onoty3d.hatenablog.com
この投稿では、ニコニ立体ちゃんの舌を拝借してプロ生ちゃんに舌を足しました。
また、以下の投稿で公開したスクリプトを使えば、ニコニ立体ちゃんの舌でなくても、プロ生ちゃん自身の舌を切り出して利用することができます。
onoty3d.hatenablog.com

しかし今回はメッシュの舌部分の頂点を移動させることで制御してみました。
(はじめはシェーダでの擬似的な頂点移動も考えましたが、その場合自分が使いたいシェーダ毎に実装する必要があるため面倒になった。)

Unity Editor上で表情なんかを楽しむ分には問題ないはずです。
UnityPackageはこちら。(ソースは末尾。)

TongueMorph

使い方

UnityPackageを任意のプロジェクトにインポートしたら、追加されるTongueMorphというスクリプトをプロ生ちゃんにセットしてください。
セットすると、インスペクタ上の表示はこのようになります。
f:id:onoty3d:20161021135110p:plain

TongueIndex

セットするモデルによって変更してください。
ノーマルモデル:21
Tシャツモデル:17
SDモデル:19
TongueIndexの値を間違うと、エラーになったり他の部位が動いたりするので気をつけてください。
なお実行中に値を変更しても効果はありません。

SkinnedMeshRenderer

プロ生ちゃんのSkinnedMeshRendererです。
基本的には実行時に勝手に見つけてきますが、プロ生ちゃん内部に他にSkinnedMeshRendererを持つオブジェクトを持たせたりしている場合は、手動で正しいSkinnedMeshRendererをセットしておいてください。

Width,MoveForward,MoveUp

Width:舌の幅を調整します。
MoveForward:舌を前方に移動させます。
MoveUp:舌を上方に移動させます。
f:id:onoty3d:20161021135209g:plain

VertucalRotationCenter,VertucalRotation

VertucalRotation:舌を縦方向に回転させます。
VertucalRotationCenter:縦方向回転の中心を移動させます。中心より先の部分だけが回転します。
0が舌の根元、1が舌の先端になります。
f:id:onoty3d:20161021135419g:plain

HorizontalRotation,Inclination

HorizontalRotation:舌を水平方向に回転させます。
Inclination:舌を傾斜させます。
f:id:onoty3d:20161021135457g:plain

以上を組み合わせて、いろいろな表情を作ってみてください。
f:id:onoty3d:20161021135553p:plain

ソース

ToonLit ShaderにPhong Tessellation機能を追加する。

f:id:onoty3d:20161006205756g:plain

Phong Tessellationとはなんぞや?って人はまず公式のリファレンスを見てみてください。

docs.unity3d.com

これをToonShaderで実現するには、既存のコードにリファレンスを参考にPhong Tessellationに必要な記述を移植します。
それだけ~。

…で、終わらせたかったんですが、OutLineが上手くいかなかったんです。
標準のToonShaderではOutLineは頂点とフラグメントシェーダで記述されているんですが、そこで上手く書くやり方がわからぬ。

いろいろ錯誤してみたんですが、全て徒労に終わりました。

ググったら同じように悩んでいる人を発見しましたが、この人は最終的にSurfaceシェーダでアウトラインも書くことで解決していました。

community.unity.com

というわけで自分も同じ感じの実装にしました。
ただし元々のToonLit ShaderのOutLineは透過が可能なので、その機能も追加しています。

Unity5.3-5.4で動きます。

TessellationToon

 

ちなみに画像はクエリちゃんです。

クエリちゃん公式サイト

f:id:onoty3d:20161006210504p:plain

 

プロ生ちゃんのスパッツ・靴下・靴以外も切り替えられるようにする

プロ生ちゃん新モデルに含まれているプレハブで
PronamaChan_dynamic_base
という名前のものには、EquipmentsChangerというスクリプトがつけてあります。
このスクリプトは、靴下・靴・スパッツの表示切り替えが出来るスクリプトです。
f:id:onoty3d:20160927195758g:plain

ですが場合によってはもっとスポーティに見える画も作りたかったりするじゃないですか。
こんな。
f:id:onoty3d:20160927200136p:plain
なのでEquipmentsChangerをもう少し改良してスカート・時計の表示切り替えも出来るようにしてみました。
おまけでブルマモードも作ったよ。

ソースこちら。

これをプロ生ちゃんに適用させれば、スカート・時計の表示切り替えとパンツ・スパッツ・ブルマの表示切り替えができるようになります。
マテリアルのインデックスはTシャツモデルのものに併せているので、他モデルでも使いたい場合はEquipmentsChangerの設定値を参考にセットしてみてください。
SDモデルはスカートのマテリアルがひとつなので、同じインデックスを指定すればいいと思います(試してないけど)。
なおブルマ表示モードのときはスパッツ・パンツの切り替えが出来ない仕様になってるのでご注意ください。

プロ生ちゃんのTシャツに絵を重ねてみよう

プロ生ちゃんの新モデルが公開されています。

pronama.azurewebsites.net

MMD版が先行しておりますが、Unity版も近日中に公開されることと思います。
この記事は、そのUnity版を対象とした内容になります。

さて、新モデルですが、Tシャツモデルが登場しています。

f:id:onoty3d:20160927190154p:plain

デフォルトでは無地の真っ白なTシャツを着ておりますが、マテリアルを調整して色を変えたり、テクスチャを編集したりして任意の柄を付けたりすることが可能です。

テクスチャに手をいれるのは少々手間ですが、デカールシェーダのようなシェーダを利用すれば、元のテクスチャはそのままに、その上に任意の絵を重ねる事ができます。

f:id:onoty3d:20160927185638p:plain

f:id:onoty3d:20160927185702p:plain

また、そのような機能のないシェーダでもかんたんに絵を重ねる方法を見つけたので、今回はその方法を紹介します。

絵を用意する

まずは重ねたい絵を用意し、それをUnityに取り込みます。

f:id:onoty3d:20160927185746p:plain

f:id:onoty3d:20160927185823p:plain
絵のタイプによって背景を透過にする設定を行ったりしてください。
また、WrapModeをClampにすると、絵がリピートすることが無くなります。

マテリアルを作る

絵が用意できたら、それを表示させるマテリアルを作ります。f:id:onoty3d:20160927185846p:plain
背景を透過にする場合は、透過が出来るシェーダーを選んでください。

SkinnedMeshRendererにセットする

マテリアルが出来たら、それをプロ生ちゃんのSkinnedMeshRendererのMaterialsの29番目のマテリアルとしてセットしてください。f:id:onoty3d:20160927185919p:plain
※MaterialsのSizeを29に変更すると、マテリアルの枠が1枠増える(デフォルトで28番目のマテリアルと同じマテリアルがセットされる)ので、そこに作成したマテリアルをセットしてください。

これでTシャツの上に絵が重ねられます。

f:id:onoty3d:20160927190032p:plain

そのままだと位置やサイズがおかしかったりするので、マテリアルのTilingやOffsetを調整して、いい具合にしてみてください。