原カバンは鞄のお店ではありません。

Unityを使ったゲーム制作のあれこれを綴っていきます。

【Unity】公転させる、そしてカメラで追いかける

f:id:Karvan:20200211210306p:plain

 

4連休にした

月曜日に有休を取得して4連休となったは良いものの、時間を持て余してサッカーゲームFIFA20でプレミアリーグを1シーズン過ごした皆さんこんにちは。「休みは休むためにあるんだから別に良い」と心の中で言い訳してたら最終日の夕方になってた。

 

公転

それほど頻繁ではないのですが、ゲームを制作しているとオブジェクトを「別のオブジェクトを中心にして」周るような移動をさせたいケースが出てきます。公転運動ってやつですね。

Unityでは標準でTransformに公転移動のメソッドが用意されています。

 

RotateAround(Vector3 中心座標, Vector3 回転軸, float 回転角度)

中心座標にはWorld座標を指定します。
回転軸はVector3で指定しますが、Y軸周りに回すならVector3.up、Z軸周りに回すならVector3.forwardを指定すれば良いです。
回転角度にはdegreeの値で指定します。

 

これをUpdate関数内で実行すれば指定した回転軸周りを回り続けてくれます。

 

f:id:Karvan:20200211203417g:plain

こんな感じ、上の動画ではRotateAroundの公転と同時にtransform.LookAtを使用してカーソルの向きが中心のオブジェクトを向くようにしています。 

// 公転原点オブジェクトのWorld座標取得
Vector3 orbitOrigin = OriginObj.transform.position;

// 公転
transform.RotateAround(orbitOrigin, Vector3.up, Angle*Time.deltatime);

// 公転原点オブジェクトの方を向く
transform.LookAt(OriginObj.transform);

 

このようにオブジェクトを公転させるだけなら簡単に実装できますが、公転しているオブジェクトをカメラで追従させる場合はちょっと工夫が必要です。

 

カメラで追従する

通常、アクションゲームやTPSなどではPlayerの後方(上方)にカメラが設置されていて、Playerの移動に合わせてカメラも移動していきます。

 

この追従処理の簡単な実装方法として、最初にカメラの座標と目標となるオブジェクトの座標の差分(ベクトルの差分)を求めて、

f:id:Karvan:20200211204003p:plain

 

目標オブジェクトが移動するたびに、目標オブジェクトの座標にベクトルの差分を加えてカメラの座標を求める方法があります。

f:id:Karvan:20200211204032p:plain

 

しかしこの方法はあくまで目標オブジェクトが平面上を平行移動する場合のみで、今回のように目標オブジェクトが公転するような場合ではカメラの座標を求めることができません。

何故なら、最初に求めたベクトルの差分はWorld空間での座標系(World座標)でのベクトル差分ですが、公転するオブジェクトを中心に考えた場合、カメラがあるべき位置は公転原点を原点としたLocal空間での座標系(Local座標)での後方(上方)となるので、ベクトルの和算をする前に「ベクトルの差分」の座標を変換する必要があるからです。

 

f:id:Karvan:20200211204146p:plain

90度ぐらい公転した後のカメラ位置、目標オブジェクトのほぼ真横にある。

 

座標の変換

このWorld空間、Local空間での座標の変換(ベクトルの変換)についてもUnityの標準でTransformVectorというメソッドが用意されています。
今回の場合は目標オブジェクトのLocal空間でのベクトル差分をWorld空間のベクトルに変換します。 

Transform Target;

// ベクトル差分をWorld空間のベクトルに変換 Vector3 distance = Target.TransformVector(deltaVector);

 

これを目標オブジェクトの座標に加えたものがカメラの座標となります。

CameraObj.transform.position = Target.position + Target.TransformVector(deltaVector);


後は絶えずカメラが公転原点の方を向くように回転させておけば公転運動するオブジェクトを追従するカメラの動作処理が実装できます。

 

f:id:Karvan:20200211205120g:plain

目標のオブジェクトの公転運動に合わせて、また、前後に移動してもそれに合わせてカメラが追従できていることが分かります。


ちなみに公転運動は原点となるオブジェクトが移動してもそれに合わせて公転することができます。

 

f:id:Karvan:20200211205735g:plain

 

RotateAroundで簡単に公転運動が実装できることは分かりましたが、DOTweenには用意されてないんだよなぁ・・・。

 

【Unity】アセット「Trails Fx」で右往左往

f:id:Karvan:20200204200936p:plain

マスク

何故かマスクが大流行らしくてコンビニでも薬局でもドラッグストアでも売り切ればかりです。あんなものお忍びの芸能人か80年代ヤンキーぐらいしか好んで使用しないと思うのですが「社内校内ではマスク必須で」と強要するぐらいなら、いっその事休みにすれば良いのに、と思っている皆さんこんにちは。

市販のマスクではウィルスの侵入は防げないことぐらい誰でも知っているのに、「予防してます」の体裁のためにマスク付けされるのは止めて下さい。

 

Trails Fx

UnityではTrail Rendererというコンポーネントが用意されているので、例えば弾丸の軌道とか、剣技の軌跡みたいなものを画面に表示することは簡単にできます。

 

とはいえ、自分の好みのエフェクトに調整するのはちょっと面倒くさいし、少し凝ったことをしようと思えば骨が折れる作業となります。なので、それっぽいアセットがないかなぁ、とアセットストアを漁ってみたら発見しました。

 

assetstore.unity.com

紹介ページの動画見ると種類こそ少ないものの、そこそこ面白そうなエフェクトを付けられそうな感じ。

レビューの評価も悪くないし、何よりアセット「Beautify」と同じパブリッシャーだし問題ないはず、と判断して購入しました。

 

www.youtube.comこのアセットでこんな事ができるらしい

 

 困惑

このアセット、使い方は簡単でTrailを表示させたいオブジェクトに対して「TrailEffect」のスクリプトをアタッチするだけで動かすことができます。

用意されているパラメータはTrailの動作条件や、Trailの種類、維持時間や色等々、様々な種類のパラメータがあります。

 

f:id:Karvan:20200204201222p:plain

ざっとこれだけある。

 

これだけの数のパラメータがありますがドキュメントは用意されていません。

上のInspectorには「Help」のボタンがありますがHelpボタンを押しても

 

f:id:Karvan:20200204201259p:plain

 

「プロパティのラベル部分にマウスカーソルをあてるとTipsが表示されるよ。何かあったら連絡してね」とダイアログが表示されるのみでHelpの意味を成してません。要はサンプル見ながら自力で何とかするしかない。

各パラメータも自分で触ってみて効果を確かめる以外に手がありませんでした。なんせ「マウスカーソルをあてると表示されるTips」も英語で一言二言書かれているだけなのでね、もう探り探りですよ。

 

自分なりのパラメータ説明

なので以下に紹介する説明は自分なりに動かしてみて確認できたパラメータの説明となります。

・Profile欄

f:id:Karvan:20200204201446p:plain

Profile:TrailEffectの設定はProfileファイルに保存、読み込みができます。そのファイル指定を行います。新規作成時には「Create」ボタンを押下する

 

Target:Trailを表示させたいオブジェクトのTransformを指定します。ここで指定できるオブジェクトはRendererの数が1となるオブジェクトのみで、複数個のRendererから構成されるオブジェクトは指定できません。要は子オブジェクトを持っていたりするオブジェクトは不可、とういうこと。

 

・Trigger欄

f:id:Karvan:20200204201607p:plain

Active:このTrailsFxのエフェクトの有効無効設定。スクリプトでこのパラメータをfalseにするとTrailsFxのエフェクトは表示させなくなる。

 

Igonore First Frames:動作開始後からTrailの表示まで無視するフレーム数

 

これより以下はTrailを表示するトリガーについての設定になります。

 

Continuous:アクティブである限りTrailを表示する

World Position Change:オブジェクトのWorldポジションが一定距離以上変更されるとTrailを表示されるようにする

Screen Position Change:Screenに対してオブジェクトのポジションが一定距離以上変更されるとTrailを表示されるようにする。このScreenとはCamera欄で指定したCameraから写されたScreenのこと、Camera欄が空の場合は「MainCamera」が自動的に設定される。

 

Time Interval:Trailの表示を一定時間間隔を開けたい際に使用する

 

・Appearance欄

f:id:Karvan:20200204201804p:plain

TrailEffect:表示するTrailEffectを選択する。動画で紹介されていたEffectはこの項目で決定する

Color:文字通りTrailの色を決める

Duration:Trailの持続時間、ParticleSystemでの同名項目と同じ

MaxStepPerFrame,StepsBufferSize:ここら辺の値を増やすとTrailの量が多くなる

 

Positon,Scale:ここにデフォルト値以外の値を指定すると表示されるTrailの位置をずらしたり、大きさを変えたりできる・・・が、ランダムで変わる値の範囲が決められるだけなので、同じ大きさ・位置のTrailを表示できるわけではない。

 

使ってみて

Trailを表示させるだけなら非常に簡単で、Profileファイルで数種類のプリセットも用意されているのでそれで良ければ直ぐにでも使うことができます。ただ、自分好みのTrailにするにはちょっと骨が折れます。

 

特にPositon,Scaleの項目は上でも記載したようにランダムで変わる値の範囲が決められるだけなので、徐々に大きなるTrailとか、間隔が開いていくTrailなどは無理(おそらく)で、そこそこ凝ったものにするにはDurationやMaxStepPerFrame,StepsBufferSize辺りの項目と併せて調整する必要があります。

 

私が半日ぐらい掛けて色々調整した結果がコレ

 

f:id:Karvan:20200204202004g:plain

 

これでもTrigger欄の設定のみではTrail表示のON/OFFが奇麗にできなかったので、機体のダッシュ動作前後にスクリプト側でActive設定を変えてたりしています。

 

上手く使いこなすには時間が掛かりそうです

 

【Unity】DOTweenのChangeEndValueとアキレスと亀

風邪の季節

今年は暖冬なのですっかり忘れていたのですが、やっぱり風邪の季節には変わらないようで、私の周りでもインフルエンザに罹患したという報告が聞こえてくるようになってきました。

それに加えて新型コロナでパンデミックが起こるか起こらないのか心配になる話題も世間では広まっていますが、それでも通勤通学のスケジュールには変わりのない皆さんこんにちは。

たぶん日本ってアイアムアヒーローみたいなウィルスが蔓延しても朝は相変わらず満員電車になると思う。

 

例えば

ゲームを作っていると移動するプレイヤーをカメラで追い続けるとか、他のキャラクターを後ろに並べて後を追わせるとか、何かしらの追従処理が必要となる場面がでてきたりします。

今回は下の図ような、白い玉を追いかける黄色の玉の制御について考えてみます。

f:id:Karvan:20200128221118p:plain

 

白い玉の動きに合わせて一定距離の間隔をあけて黄色の玉が移動します、が、黄色の玉は白い玉の子オブジェクトではありません

なので、追従させるにはUpdate関数で白い玉が移動した距離分、黄色の玉も動かすという処理を行いますが、今回の場合はキーが押下されたタイミングで黄色の玉は白い玉との相対位置を変更する、という処理も加えます。

 

f:id:Karvan:20200128221520g:plain

キーを押すと黄色い玉が反対側のキューブの位置へ移動します。

各キューブは白い玉の子オブジェクトなので白い玉の動きに合わせて動いています。

 まぁ、上の動画ぐらいの動作なら実装は難しくないと思うのですが玉の位置が一瞬で変わってしまうのは味気ないので、白い玉と一緒に動きつつ、相対位置も変わるように一定時間を掛けて移動させてたい。

 

DOTweenを使う

オブジェクトを動かすと言えばDOTweenなのでDOTweenのDoMoveで動かしてみます。キーを押したタイミングで

 

yellowBall.transform.DOMove(目的のキューブの位置, 移動時間)

 

 上記のようにDOMoveを発行して移動を行います。目的地に達したら白い玉への追従を再開して一定距離の間隔をあけて移動するようにします。

 

f:id:Karvan:20200128222241g:plain

 

。。。まぁそうなるわなぁ、ってことで、DOMoveで移動中も白い玉は動いているので、移動を開始した時のキューブの位置からキューブの位置は随時変わっていきます。

そのため、指定した移動時間後にはあさっての位置へ黄色い玉が移動したように見えてしまいます。

 

これを解消するにはTween発行後に目的地を変える必要がある、というわけで、そのような趣旨の為の関数がChangeEndValueとなっています。

 

ChangeEndValue

この関数はその名前の通り、発行したTweenの最終的な値を変える関数なのですがDoMoveとは異なりtransformではなく、Tween発行した際の戻り値(Tweener)に対して呼び出すことのできる関数です。

 

ChangeEndValue(新しい目標地点, 現在地点を開始地点にする[true/false])

 

 この関数を使ってDOMove発行後、Update関数内で目的のキューブの位置を新しい目標地点としてフレーム毎に更新したら白い玉を追いかけながらキューブの位置へ移動する動きとなりそうです。

 

f:id:Karvan:20200128222757g:plain

 

んー・・・何故か目標地点近くまでは移動するものの、白い玉が止まらない限り目的点に達することができない。

色々と試行錯誤してみましたが、この現象は変わりませんでした。

 

原因を考える

 思うに、Update関数にて最初にDOMoveで目的地と移動時間を指定するわけですが、その後、フレーム毎にChangeEndValueで目的地を変更しても、そこからの移動時間は毎回同じなので、その間に目的地も前に移動してしまう、フレーム毎に目的地を変えてもその時間内に目的地が前に移動してしまうので、どんなにChangeEndValueを繰り返して目標地点を更新しても、その目的地点が前方に移動する限り延々と到着しないという、ちょっとした「アキレスと亀」みたいな状態に陥っているのではないかと推測されます。

 

分かりづらいですか?絵にかくとこんな感じ

f:id:Karvan:20200128223211p:plain

目標地点Bに辿り着くには毎回必ずX秒間掛かるので、結局辿り着けない

 

なのでChangeEndValueを使う場合は毎度対象との距離を確認して、一定距離以下になった場合はDOTween.KillでTweenerを停止するか、移動時間の指定を小さく(早く)して強引にでも目標地点に到着させる必要があるかと思います。

幸い、移動時間の指定の変更はChangeEndValueのオーバロードで第二引数で指定することができます。

 

ChangeEndValue(新しい目標地点, 新しい移動時間, 現在地点を開始地点にする[true/false])

 

 で、この対処を行った動作がこちら

f:id:Karvan:20200128223618g:plain

 

辿り着くことは辿り着きますが、やっぱり最後がぎこちないですね。んー・・・パラメータの設定の仕方もあるかもしれませんが

 

 

 

 

 

 

 

 

ちなみに今回の主旨とは離れるのですがDOTweenを使わず、Vector3.Lerpを使ってみたら・・・

f:id:Karvan:20200128224108g:plain

こちらの方が素直に移動します。
ようは、追従処理は無理にDOTweenを使わなくっても・・・という結論になりました。

 

【進捗報告】タイトル・メニュー画面

Indie Games Festival 2020

先週、携帯をチェックしていたらGoogleより通知が届いて「Indie Games Festival 2020 応募受付開始」だそうです。

これで3回目になりますね、私も初回、第2回と応募していたので、当然ながら第3回の大会を目標に現在もゲーム開発を行っています。

小規模インディ開発者には名を売り込むチャンスですし、なにより自作のゲームが世間に認めてもらえたという証になり、これは制作者にとってこれ以上ない喜びです。

なので、ゲーム制作には苦しい事が多く、挫折しかけることもあるのですが「Indie Games FestivalでTop3」に入りたい、というモチベーションがこれまでの私の背中を押してくれた、といっても過言ではありません。今年こそは、今年こそは・・・

 

「応募締め切りは 3月2日の23:00となります」

 

 

・・・

 

f:id:Karvan:20200121215941p:plain

 

 

 

 

間に合わねー。

早いよー、早いよー、締め切りが早すぎるよー。

前回は応募締め切り時期が5月上旬だったと記憶しているので、きっと今回もそのぐらいの時期になるんだろうと勝手に予想してスケジューリングしていた私のミスですね。今年の応募は諦めることになりそうです。

 

ま、まぁ、どうせ・・・

とはいえ、応募締め切りが前年同様だっとしても年末年始を使っても大して進捗を上げられなかったので、間に合わなかった可能性は高いと思います。

STGに必要な機能(自機、敵機の動作とか、弾の制御とか・・)は取り揃えることができたのですが、バランス調整などは行っていないし、未だに各ステージの構成をどうするのか未検討のままだし、ボス戦とかどうしよう、、、と悩んでいるし。

現在、とりあえず世間一般に公開できる部分と言えばタイトル・メニュー画面ぐらいでしょうか。

 

f:id:Karvan:20200121220533g:plain

ひとまず出来たタイトル・メニュー画面
これでも一か月以上掛かっているのですよねー。STGの制作って意外に時間が掛かるんですね。

 

【Unity】DOTweenを使ったuGUIアニメーション

ピリピリ

「本当はやりたいんでしょ?ポケモン」とか「素直になりましょうよ。」とか余計なお世話に感じる今日この頃、「変わらずあなたを待ってますよ。」いやいや、誰もがポケモンで遊んだ事がある前提で話さないで下さい。こっちはメガドラ派なんで、ゲームギア派なんで。

そんな感じで、今週から突如やってきた寒波の影響か肌も心もピリつく日々を過ごしている皆さんこんにちは。私は一刻も早く潤いが欲しいです。いや、ホント。

 

みんな大好きDOTWeen

さて、DOTweenというアセットは無料版が存在することもあってUnity界隈では広く使われているアセットだと思います。
名前の通りTween系のアセットなので主にSpriteや3Dオブジェクトを移動・アニメ動作させる為に使用されますが、用意されている関数は非常に多くてイメージ画像やボタンなどのuGUIについての関数も用意されています。

 

dotween.demigiant.com

パネルのスライドIN/OUTやボタンをクリックした時のアニメ動作もDOTweenを使うことで比較的シンプルなコードで実装することができ、シーケンスと組み合わせればインパクトのあるUIを実現できる・・・かもしれません。

よって今回はuGUIアニメーションで使えるDOTweenの関数をご紹介。

 

前準備

前提としてuGUIを動かす場合はRectTransformに対してTweenを指定します。
この為、DOTweenを使う前にGetComponentでRectTransformを取り出しておく必要があります。

RectTransform ImageRect = ImageObj.GetComponent<RectTransform>();

別にDOTweenを使用する毎にGetComponentを行ってもよいのですが、性能を考えると上のように事前に動かしたいuGUIのRectTransformをキャッシュしておくのが良いかと思います。

 

DOAnchorPos

RectTransformを平行移動させるTweenにはDOAnchorPosを使用します。

DOAnchorPos(Vector2 目的位置, float 動作時間)

ここで目的位置に指定するPositionはInspectorのRectTransform欄にある[PosX][PosY]を指します

f:id:Karvan:20200114221403p:plain

 

今回はマスクとその子オブジェクトの画像を平行移動させることでボタンの画像が変わるアニメを作ります。


Hierarchy上の定義はこんな感じ、変わる前の画像が「NonSelectIamge」、変わった後の画像が「SelectImage」でMaskImageでマスクされています。

f:id:Karvan:20200114221451p:plain

 

Game空間上の配置はボタンの上に「NonSelectIamge」と「SelectImage」を重ねて置いてMaskImageをボタンの横に配置します。

f:id:Karvan:20200114221556p:plain

 

この状態でDOAnchorPosを使ってマスクを右にスライドさせるのと同時に、マスクの子画像であるSelectImageを逆方向(左)にスライドさせます。

SelectImageを逆方向にスライドさせるのは、これによりSelectImageのWorld空間での位置は変わらないので、マスクと重なった部分だけが浮かび上がってくるようなアニメになるためです。

MaskImageRect.DOAnchorPos(Vector2.zero, 0.8f);		// 元の位置(X=-162)からX=0の位置へ
SelectImageRect.DOAnchorPos(Vector2.zero, 0.8f);	// 元の位置(X=162)からX=0の位置へ

これを実行させるとこんな感じのアニメになります。

f:id:Karvan:20200114221821g:plain

 

DOSizeDelta

SelectImageはMaskImageの子オブジェクトなのでMaskImageのScaleを変えると当然影響を受けてSelectImageもScaleが変化します。


しかし、RectTransformのsizeDeltaを変えた場合はその限りではありません
sizeDeltaはInspectorのRectTransform欄にある[Width][Height]を指します。

f:id:Karvan:20200114221925p:plain

 

よって、MaskImageのHeightやWidthを変えることでもSelectImagが浮かび上がってくるようなアニメを作ることができます。
DOTweenでsizeDeltaを変えるにはDOSizeDeltaを使用します

DOSizeDelta(Vector2 目的サイズ, float 動作時間)

今回はHeightの値を0から本来の値へ変化させています。

f:id:Karvan:20200114222146g:plain

 

DORotate/DOLocalRotate

uGUIを回転をさせる場合は3Dオブジェクトと同じようにDORotate/DOLocalRotateを使用します。
こちらも上と同じようにRectTransformに対してTweenを使用します。

DOLocalRotate(Vector3 目的角度, float 動作時間)

今回はZ軸に対して180度回転させています。

f:id:Karvan:20200114222356g:plain

 

DOColor

uGUIのColorもTweenさせることができます。

ただしこの場合はRectTransformではなくImageコンポーネントに対してTweenさせるので事前にImageコンポーネントを取り出す必要があります。

FrameImage = ImageObj.GetComponent<Image>();
FrameImage.DOColor(Color 目的色, float 動作時間)

今回は六角形のフレーム画像と中央の三角アイコン画像の色を入れ替えるように変化させています。

f:id:Karvan:20200114222618g:plain

 

意外と簡単

通常、ボタンを動かす場合はボタンコンポーネントに用意されているTransitionの設定やAnimationを使うことが多いかと思うのですがDOTweenを使用しても意外に簡単に実装することができます。

また、DOTweenのPro版(有料版)になるとInspectorで値を入力してリアルタイムに動作を確認できるエディタも用意されているので、より簡単に複雑なアニメ動作を作ることができます。

 後はセンスの問題、ということで・・・

【Unity】ColorBox ShaderのOutline機能を使う

新年

年末年始の休暇が明けて、「家族で旅行に行って・・・」とか「帰省先で久しぶりに同級生とあって・・・」とか「コミケでボーナス吹き飛んだ・・・」などと、そこかしこから聞こえる土産話に一切加われずに受け流す一方の皆さんこんにちは。もしくは部屋に閉じこもり過ぎて休暇明けに声が出るか不安だった皆さんこんにちは。休暇期間中、コンビニで「温めますか?」の問いに「いいえ」と答える時しか声を発していなかったことに気づいた皆さんこんにちは。お仲間ですね、今年もよろしくお願いいたします。

 

例年通り年末年始は80%ぐらいはダラダラと無気力に過ごしていたのですが、残り20%を振り絞ってなんとかゲーム制作に試行錯誤した結果、いつの間にかこんな感じのシーンが出来ていました。

f:id:Karvan:20200107215556p:plain

 

漫画風画面

こういった画面を作る場合は主にポストエフェクトが使用されると思うのですが、今回の場合は以前このブログで紹介したColorBox Shaderを使って作っています。

assetstore.unity.com

www.karvan1230.com

ColorBox Shaderはテクスチャなしでモデルに色付けできるシェーダで、モデルの6方面(前後左右上下)それぞれに違う色を指定でき、フラットでカラフルな表現をしたい場合に有用なアセットです。

 

f:id:Karvan:20200107215856g:plain

 上の動画ではCubeの各面に違う色を指定していますが、当然ながらあえて(濃淡のみを変えた)同じ色を指定することもできます

 

f:id:Karvan:20200107215952p:plain

そして、これに加えてOutlineも設定することができます

 

f:id:Karvan:20200107220104p:plain

単一色のオブジェクトにOutlineを加えると3Dモデルなのにフラット感(2D感)が強くなったと思いませんか?

もうちょっと分かりやすく、シーン内のオブジェクト全てにColorBox Shaderで単一色のマテリアルに変更してみます。

  

f:id:Karvan:20200107220435p:plain

これが・・・

 

f:id:Karvan:20200107220310p:plain

こうなります。

オブジェクト全てが同じ色で塗りつぶされているのでOutlineが強調されて線画(漫画)っぽくなったと思います。

 

SkyBoxも同じ色に

ColorBox ShaderではSkyBox用のマテリアルも作ることができるので、背景となるSkyBoxもオブジェクトと同じ色にするとさらに漫画風味が増します。

 これを利用してちょっと動きのある動画を作ってみました。

 

f:id:Karvan:20200107220739g:plain

 

カメラが動いてもそれに合わせてOutlineも変更してくれるので違和感はありません。
もうちょっと工夫すればインパクトのある画面が作れそうですね。


 

 

【Unity】スプライト画像を3Dオブジェクトに映して・・・いるように見せる

あぁ?

会社にて・・

「やっべぇ、今月全然忙しいわぁー、飲み会多すぎだよー」

「で、今週はクリスマスもあるでしょ?厳しいわぁー、もう、イベント多すぎだろ!」

「みんな誘ってくれるのはいいけどさぁ、俺の体は一つだっての!」

 

 

 

・・・

 

 

 

 

f:id:Karvan:20191224233849p:plain

 

今回のお題

さて気を取り直して、今回はこんな感じのギミックを作ります

f:id:Karvan:20191224233941p:plain

 

穴の空いた壁に文字が貼り付ているように見えませんか?

通常、こういうオブジェクトを作ろうと思うと"デカール"という手法を使うので、Unityの場合はそれ専用のアセットを使ったりするのですが、今回はその"デカール"は使用せず、文字の画像を3Dオブジェクトに映して・・・いるように見せています。

 

窓シェーダー

まず以前紹介した窓シェーダーを使用します。

窓シェーダーとは「窓越しに見たときだけオブジェクトが現れる」シェーダーで、それ以外の範囲ではマスク(非表示化)されるため、ちょっと驚くような演出に使えます。

styly.cc

上記のサイトでは窓のギミックは「窓」と「窓の向こうに置くオブジェクト」のそれぞれに専用のシェーダーをアタッチすることで成立しています。

 

その中で「窓の向こうに置くSprite用のシェーダー」が記載されていますが、どうやらこのシェーダーはUnity標準のImage用マスクでもマスク(非表示化)されるようで、窓オブジェクトから覗き込んでもImage用マスクが見える範囲ではその部分が非表示化されます。

 

「窓」と「マスク」で挟み込む

「Image用マスクが見える範囲」と書いたのはその文字通りで、例えば3Dオブジェクトで遮られるとその部分はマスクされません、つまりその部分だけ表示されて見えます

なので、この性質を利用してオブジェクトをこんな風に配置しました。

 

f:id:Karvan:20191224234806p:plain

 

「窓」と「Image用マスク」でSprite画像と3Dオブジェクトを挟み込むように配置しています。
(「Image用マスク」を設置するCanvasはRender Modeに"Screen Space - Camera"を指定)

 

この配置を取ると、カメラは窓越しにSprite画像を映しますが、「Image用マスク」は3Dオブジェクトによって一部が遮られる形となります。

 そのため3Dオブジェクトの形でSprite画像はくり抜かれて表示され、一番最初に紹介したように3DオブジェクトにSprite画像が貼り付て見える映像となります。

 

"デカール"のように実際は貼り付てはいないので、よく見ると壁オブジェクトの形状に沿っていなかったり、壁のオブジェクトを回転させたりすると見た目が変わってしまうのですが、利点としてSpriteを使用するので映し出す画像の方を簡単に動かすことができます。

例えばSpriteを移動させることで、壁に貼り付ている文字がスクロールしているように見せることも簡単にできます。

  

f:id:Karvan:20191224235044g:plain


こういうギミックもゲーム内の演出の一つとして使えるのではないでしょうか。


 

◇プライバシーポリシー

●個人情報の利用目的

当ブログでは、メールでのお問い合わせ、メールマガジンへの登録などの際に、名前(ハンドルネーム)、メールアドレス等の個人情報をご登録いただく場合がございます。

これらの個人情報は質問に対する回答や必要な情報を電子メールなどをでご連絡する場合に利用させていただくものであり、個人情報をご提供いただく際の目的以外では利用いたしません。

●個人情報の第三者への開示

当サイトでは、個人情報は適切に管理し、以下に該当する場合を除いて第三者に開示することはありません。

・本人のご了解がある場合
・法令等への協力のため、開示が必要となる場合

個人情報の開示、訂正、追加、削除、利用停止
ご本人からの個人データの開示、訂正、追加、削除、利用停止のご希望の場合には、ご本人であることを確認させていただいた上、速やかに対応させていただきます。

アクセス解析ツールについて

当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。

このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。
この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。

●免責事項

当サイトからリンクやバナーなどによって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いません。

当サイトのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、誤情報が入り込んだり、情報が古くなっていることもございます。

当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。

●プライバシーポリシーの変更について

当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。

修正された最新のプライバシーポリシーは常に本ページにて開示されます。