妹でもわかるUnrealEngine4

毎日更新? 妹に説明するために書いてるけど、たまにわかってない場合もあるUnrealEngine4を中心としたゲーム制作の話。略すとイモリアル

毎日更新? 妹に説明するために書いてるけど、たまにわかってない場合もあるUnrealEngine4を中心としたゲーム制作の話。略すとイモリアル

2D的な波のマテリアル・適度に上下に動かす③ テクスチャを計算用に使って動かす

f:id:una_unagi:20180324001534g:plain

imoue.hatenablog.com
の続き

「昨日ので動くようにはなるんだけど、折角なのでもう1ネタ、動かし方の工夫についても書いておこうかと」

妹「直線じゃヤダっていう話?」

「そうなんだけど、直線にしろ曲線にしろ、自分の思い通りの動きをさせつつ、ブループリントがシンプルになる方法というか」

f:id:una_unagi:20180324001614p:plain

「ブループリントとしてはこういう感じになる。周期の数字に合わせて上下させてたところに、テクスチャを1つはさんでる。あと分岐も要らなくなった」

妹「このテクスチャというのは?」

「白黒で作る。テクスチャの色は、RGBで三原色で表現されて、0.0が暗くて1.0だと明るい。その数字はマテリアル内で取得できるので、これを高さの指定に使ってる」

f:id:una_unagi:20180324001925p:plain

「ちゃんと作るなら、グラデーション機能で塗って、レベル補正とかかければいいんだけど、今回は雑に動かすから、Kritaのブラシで適当に塗りたくった。一応白が高くて、黒が低くなるという前提で、ムラを残しつつ、適当に塗る」

f:id:una_unagi:20180324002047p:plain
「で、それを縦1ピクセルにすると完成。これをテクスチャアセットとして読み込んで、さっきのブループリントに組み込めば、色に合わせて動く仕組みになる」

妹「なんで縦1ピクセルなの?」

「普通に塗ると上下で色が違うから、どの色を高さにするのかスッキリしないから。ぼかすか何かで、縦全部同じ色にしてもいいんだけど、使わない部分は容量の無駄だし」

妹「じゃあ左右のサイズは?」

「それは適当に。大きさがどうあれ、UV値は左端が0.0で、右端が1.0だから、サイズが大きければ細かい変化をテクスチャに書き込めるけど、フレーム数より細かくしても意味ないから、秒間60フレームで2秒間隔なら120あれば足りる計算。それより小さくても隣同士の色の中間でそれなりに動作するんだけど」

妹「ちゃんと動いてるみたいだけど、なんとも不思議な」

「原理的には法線マップとかと同じで、本当は色じゃないんだけど色として記録してるデータ。自分で計算する分には使い方も自由。配列に近い使い方もできる。処理速度も複雑なノード組むよりも速いはず」