UE4で"あつ森"再現！！ ～動く壁紙を作るだなも～
みなさ～ん！
今日は、アンリアルエンジンの日ですよ～！
なんつって。
皆さんは「あつまれ どうぶつの森」触りましたでしょうか？
さまざまな家具や壁紙で家の中のコーディネートを楽しめる素敵なゲーム、
それが「どうぶつの森」というシリーズですが・・・
なんと今作からは、動く壁紙や動く床が登場しています。どういう技術？
今回はそんな動く壁紙たちのひとつ、「すいちゅうのかべがみ」を
アンリアルエンジン４で再現してみます。
最後まで読んでもらえれば、UVスクロールの使い方を覚えられると思います。
ちなみに、再現元の実機動画はこれです。
エモーい！！！！ #どうぶつの森 #AnimalCrossing #ACNH #NintendoSwitch pic.twitter.com/euYWbxkMnF
— チモ㌠ (@albn_cm) June 27, 2020
１．必要なテクスチャのしたごしらえ
テクスチャサイズは1024*2048で、てきとうに目コピして用意します。
これはすべて統合した際のイメージですが、実際は動かす箇所ごとに分けて
テクスチャを用意する必要があります。
というわけで、レイヤーを４つに分けてこのような感じにしていきましょう。
下地になるテクスチャ以外の３つは、必ず透過情報を持たせたテクスチャにしてください。
テクスチャ側の準備はこれで終了です。
２．モデル側の準備
こんな感じのモデルを用意します。
ここがちょっとしたポイントなのですが、壁部分のUVは上図のように展開してください。
あれ？これじゃテクスチャ横に伸びるんじゃない？と思う方もいると思います。
今回はあとでマテリアル側からタイリング回数を変更できる作りにしますので、
ひとまずここではこのように作ってください。
３．ノードの組み方
マテリアルノード全体像はこんな感じです。
【タイリング調整部分について】
↑の状態は、UV座標に(22,1)を乗算していることを表しています。
（「Append」は、2つのパラメータを[A,B]の形式で１つのパラメータにまとめるノードです）
UVに乗算というのがイメージしにくいかと思いますので、ちょっと図で説明します。
ようするに、上図左側のようにモデル側のUVを0～1にそろえておけば、
任意の数で乗算することで右側のようにタイリング数を変えられるということです。
今回は、横に22回タイリングするので、パラメータ【Tiling_U】に22を入れています。
【Pannerについて】
UV座標を時間に応じてずらしていく、所謂UVスクロールをするためのノードです。
- Coodinate には動かしたい本来のUVを
- Time にはそのまんま「Time」ノードを
- Speed にはUとVそれぞれのスクロール速度
今回はV方向にスクロールする必要はないため、V方向には0を入れています。
基本的には上図の形のセットで使うことが多いので、覚えておくといいと思います。
先程切り分けて作ったテクスチャー3枚に、それぞれ違うスクロール速度を割り当てることで多重スクロール感を出します。
４．まとめ
【覚えたいこと】
- TexcoordにMultiplyでタイリング変更。
- PannerでUVスクロール。
こんな感じになりましたでしょうか？
じつは再現しきれてない部分（壁紙上部の光の揺らめき部分）があるのですが、
そこを再現する方法は長くなりそうなのでまた別の記事でとりあげられればと考えています。
テクスチャ配布についてですが、元ネタが版権なので今回はやめておきます・・・スミマセン。
