テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

【Unity】Position as UV1…とは

f:id:tsubaki_t1:20170810212027j:plain

少し話題に登ったので、書いておきます。書かないと忘れる

Position as UV1とは何ぞや

f:id:tsubaki_t1:20170810212235j:plain

Position as UV1というコンポーネントがあります。この謎コンポーネントは太古の昔(UIが作られたUnity 4.6系)から存在し、我々を見守ってきました。

 

で、コレは要するに何かとマニュアルを見てみますが、今ひとつ要領を得ません。

(原文)This adds a simple Position as UV1 effect to text and image graphics.

(訳)Text や Image グラフィックにシンプルな Position as UV1 エフェクトを付加します。

Position as UV1は、UIに頂点情報を流し込むコンポーネント

で、Position as UV1とは何ぞやと言えば、要するにUIにUV1の情報を流し込むモノです。これに対応するシェーダーを使用すると、UVのサイズとは別に模様を使用したり出来ます。

例えば下のようなレイアウトのUIがあります。二つのUIがあり、大きさが異なります。このUIに一定間隔で穴を開けようと思います。

f:id:tsubaki_t1:20170810214409j:plain

これにUV0で穴を開けようと思った場合、大きさが異なるので穴の大きさも異なってしまいます。

f:id:tsubaki_t1:20170810214520j:plain

これをPosition as UV1を利用して模様を付けると、UIの大きさに関わらず一定の大きさ・間隔で穴を空けてくれる訳です。

f:id:tsubaki_t1:20170810214622j:plain

動かしてみると分かりやすいかもしれません。

f:id:tsubaki_t1:20170810214826g:plain

実際にやってみる

CanvasのAdd Shader ChannelでTexcoord1を追加します。

f:id:tsubaki_t1:20170810215140j:plain

シェーダーを用意して、Materialに設定します(今回はUV1Sample)

gist.github.com

f:id:tsubaki_t1:20170810215639j:plain

後はマテリアルをUIに登録して、Position as UV1を追加します。

f:id:tsubaki_t1:20170810215842j:plain

 

で、何の役に立つの?

知らん、そんな事は俺の管轄外だ

 

関連

実装

Unity-Technologies / UI / source / UnityEngine.UI / UI / Core / VertexModifiers / PositionAsUV1.cs — Bitbucket

【Unity】Cubeを跳ねさせる

f:id:tsubaki_t1:20170731002426g:plain

今回は小ネタというか、やってみたと言うか…豆腐を跳ねさせるという内容です。

Cubeだって跳ねる

ゲームの仮素材ランキングがあるとしたら、多分ブッチギリで人気No1はCubeでしょう。かのスプラトゥーンですらプロトタイプはCubeだったと聞きます。

つまりCubeには無限の可能性があります。ならば、Cubeは跳ねる事が可能なハズです。

とりあえず、跳ぶ!

とりあえずアニメーションでCubeを跳ねさせてみます。

初期値点から一定時間で最高高度へ、そして一定時間で初期値点へ。リニアな移動です。

f:id:tsubaki_t1:20170731002835g:plain

f:id:tsubaki_t1:20170731002922j:plain

か、硬い…!

跳ねてると言うより、上から吊るして持ち上げてると言った方がシックリくるレベルの動きです。

カーブを付ける

跳ねる動きを考えてみます。

基本的にジャンプする瞬間は最高速度で上へ移動し、段々と重力に引かれて減速、最終的に初期加速より重力が勝って落下を開始して、最後に着地…という流れです。

f:id:tsubaki_t1:20170731003448j:plain

f:id:tsubaki_t1:20170731004256g:plain

f:id:tsubaki_t1:20170731004112j:plain

大分ジャンプしてる感が出てきました。

通常のキャラクターならこれでも十分なのですが、Cubeでジャンプだとまだ十分ではありません。なぜならCubeにはモーションが無いからです。

豆腐はフルフルする

Cubeにモーションを設定してみます。

しかしCubeには関節はありません。ならばどうするか…Scaleを使います。

Cubeのような物がジャンプするには、どんなモーションが必要か。

  • 平べったくなり力を溜める
  • 反動で上に跳ねる(縦に伸びる)
  • 縦に伸びた反動でフルフルする
  • 落下開始
  • 地面に着地した衝撃でぺたんこになる

f:id:tsubaki_t1:20170731004828j:plain

f:id:tsubaki_t1:20170731004842j:plain

これで跳ねます。
単純なScaleですが、タイミングを調整することで何というか見ていて気持ちのよい感じの動きになったんじゃないかなと思います。

f:id:tsubaki_t1:20170731005119g:plain

頂点単位でモーフしたい?うるせぇ豆腐ぶつけんぞ

 

という事で、異世界転生したらCubeだって勇者を目指せる話でした。

…言語チート欲しい。英語に対応してるやつ

関連

www.youtube.com

【Unity】SpriteMaskでSpriteにマスクを掛ける演出が色々と面白い

Unity 2017.1より追加されたSpriteMaskの機能が意外と面白いので、少しメモします。

SpriteMask

SpriteMaskはSpriteを利用してSpriteRendererにマスクをかける機能です。
画像をSpriteの形にくり抜いたり、逆にSpriteをくり抜いたり出来ます。

f:id:tsubaki_t1:20170721003252j:plain

機能的には現状存在するSpriteに対してマスクを掛ける…程度の機能ではありますが、意外とコレは利用の幅が広そうです。

 

操作方法

使い方に関しては正直マニュアルが詳しいです。

docs.unity3d.com

壁に穴を開ける

壁に穴を空けてみます。これはUnityTipsに上がっていたものを自分なりに解釈したものです。

f:id:tsubaki_t1:20170721003328g:plain

まず最初の状態がコレです。

SpriteMask等は何も設定していないので、キャラクターの前面に地面が表示されています。

f:id:tsubaki_t1:20170721003954j:plain

次にSpriteMaskをキャラクターの子GameObjectに追加し、キャラクターの前面の地面のSpriteRendererにはMaskIntaraction Visible Outside Masksを設定します。

SpriteMaskをキャラクターの子GameObjectに設定するのは、そのほうが柔軟にマスクする範囲を決められるからです。

f:id:tsubaki_t1:20170721004310j:plain

f:id:tsubaki_t1:20170721004301j:plain

 

後はマスクで抜いた先の背景も設定しておきます。
背景はキャラクターよりOrderInLayerが奥のSpriteを用意しておき、そのMask Interactionはnoneに設定しているだけです。

これでマスクでくり抜いたら背景がいきなり空…みたいな事は回避出来ます。

f:id:tsubaki_t1:20170721004558j:plain

同様に、SpriteMaskを使用してシルエットを表示させる事も可能といえば可能です。ただしシルエット色を変えられる以外のメリットが無いので、ソレをするならStencilでやった方が良いんじゃないかなという気はします。

Spriteの消滅演出をSpriteMaskで

マスクはアルファのカットアウト(アルファブレンドではない!)で、SpriteMaskのα値を変えればスプライトの消滅演出を追加したり出来ます。

例えば下の場合、簡単なルール画像を用意すれば実現出来ます。

f:id:tsubaki_t1:20170721010817g:plain

For You さんのページよりルール画像を入手して、ルール画像の透明度ルールはFrom Grayscaleに変更。

後はSpriteMaskのAlpha Cutoutを設定すれば、うまい感じに切り抜いてくれます。

ただ、ルール画像によっては最後まで綺麗に切り抜いてくれない事があるので、そのあたりが出たらルール画像を調整する必要があるかもしれません。

f:id:tsubaki_t1:20170721011116j:plain

実はパーティクルのマスクも出来る

もう一つ面白いのが、実はSpriteだけではなくParticleSystemにもマスクが使えるという点です。例えば下のように、パーティクルの生成をマスクの形でカットしています。

f:id:tsubaki_t1:20170721010048g:plain

f:id:tsubaki_t1:20170721011935j:plain

ただひとつ問題になるのがSpriteMaskが複数合った場合です。
例えば下の図では、右下の赤いパーティクルと左上の黄色いパーティクルが、お互いのマスク範囲内に混ざってしまっていることが確認出来ます。

f:id:tsubaki_t1:20170721011612j:plain

これはSortingGroupで解決出来るみたいです。てっきりSprite用かと思ってましたが、意外と使えるもんです。

親にSortingGroup、子にSpriteMaskとParticleを配置すると、上手い感じにパーティクルをマスクしてくれます。

f:id:tsubaki_t1:20170721011845g:plain

f:id:tsubaki_t1:20170721083548j:plain

tsubakit1.hateblo.jp

関連

tsubakit1.hateblo.jp

halcyonsystemblog.blog.fc2.com

tsubakit1.hateblo.jp

【Unity】ダッシュで移動した際の土煙っぽい表現

f:id:tsubaki_t1:20170719210027g:plain

今回はキャラクターが移動した時の土煙について、よく考え方を忘れるのでメモしておきます。

移動時の土煙

自分の好きな演出の一つに「移動時の土煙」という物があります。
これは漫画やアニメ等で良くあるダッシュで移動した事を表す記号で、キャラクターの移動速度や軌跡を上手く表してくれます。

f:id:tsubaki_t1:20170719210633g:plain

煙の表現ですが、以前は基本的にアルファブレンドで煙のテクスチャをばら撒いていましたが、最近はCubeをばら撒くのがマイブームです。

ので、Cubeをばら撒くアプローチの方法について書いておきます。

f:id:tsubaki_t1:20170719211225j:plain

土煙の表現

土煙の表現を行う際に一番手っ取り早いアプローチは、ParticleSystemを使う事でしょう。とりあえずこの4つのモジュールを使います。

f:id:tsubaki_t1:20170719210915j:plain

作ったパーティクルは、動くキャラの足元から少し上辺りにおいておくと良いです。

向きと大きさはランダム、座標はワールド

まず基本的な部分ですが、Simulation SpaceがWorldになってる事です。これで向きを変えた時もLocal座標ではなくWorld座標でParticleを生成してくれます。便利便利

f:id:tsubaki_t1:20170719211402j:plain

もう一つ、StartSizeとStart Rotationを操作して開始時の向きを切り替えておきます。

この項目は初期値と違って範囲指定出来るようにしてあります。これは、項目右の▼から設定できます。

回転やサイズは固定でもある程度見栄えは付きますが、やはりココはランダムであって欲しいという、コダワリポイントです。

f:id:tsubaki_t1:20170719212420j:plain

移動時の生成量

移動時の生成量を設定します。Rate over Distanceで移動に応じてパーティクルを出してくれるようになるので、コレを使ってキャラクターが移動したときに足元にパーティクルを出してもらいます。

f:id:tsubaki_t1:20170719211710j:plain

足元辺りに生成する

Shapeで出現位置を少しランダムにします。演出的には無くてもそれ程変わらないといえば変わらないのですが、合ったほうが多少は良い感じの見栄えになる印象です。

f:id:tsubaki_t1:20170719212540j:plain

範囲は足の範囲くらいが良いです。場合によってはEdgeやCircleでも良いかもしれません。

最初は小さく、一気に膨らんで、最後は縮んでく

Size Over Lifetimeで、最初は小さいが一気に膨らみ、段々小さくなるようにします。このさじ加減で演出が大体決まります。

f:id:tsubaki_t1:20170719212721j:plain

パーティクルとして生成するのはモデル

こんかいの演出ではCubeを生成しています。理由はそのほうがカッコイイからです。
一応、Meshのパーティクルはそこそこ重い部類に当たるので、注意して使ったほうが良いです。

モデルなのでStandardShaderも気にせず使います。頂点カラーが使えませんが、今は気にしません。

f:id:tsubaki_t1:20170719213002j:plain

後は影を落とし、かつ影を受ける設定です。

これで完成

関連

tsubakit1.hateblo.jp

tsubakit1.hateblo.jp

tsubakit1.hateblo.jp