妹でもわかるUnrealEngine4

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

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

2D的な波のマテリアル・適度に上下に動かす①

f:id:una_unagi:20180320231411g:plain

imoue.hatenablog.com

「昨日のやつの続きだけど、ちょっとマテリアルを改造して、上下に動くようにしてみた。波の画像の上の方は透明だから、ある程度までは上に動かしても、波がはみでないし、下にもループしてこない」

妹「たしかに上下には動いてるけど、これだと下の方が透明になってない?」

「なってる。そこは固定の青い画像を置いといてもいいんだけど、それだともうちょっとこった絵にした時にこまる。その点はいい方法がわかったので明日やるとして、今日はとりあえず上下の動きの説明」

f:id:una_unagi:20180320231718p:plain
Pannerの代わりにTextureCoordinateをつなぐと、動かない状態になる

f:id:una_unagi:20180320231728p:plain
BitMaskで横(R)と縦(G)の分離をして、別々のFloatとして計算して、あとでAppendでFloat2に戻す
(上から順に横・縦の順番でAppendする)

f:id:una_unagi:20180320231737p:plain
0.4%ほど上昇した時点で一番下まで戻る。繰り返し
あと、よく考えたらTextureCoordinate使わなくてもいいことに気付いた
Pannerの縦の動きを0にしておいて、数字をそこからもってくる

f:id:una_unagi:20180320231709p:plain
今日の完成形。
だんだん上に動いていって、だんだん下に戻ってくる

「まず今回のテクスチャの場合、上に40%ほど動かしても、波が上からはみ出ないというのがわかった。下方向にはちょっとでもずらすと上に青い帯が出ちゃうか。ということで、周期的に上方向に0.0~0.4動かすという仕組みにした。計算的としては、本来のテクスチャの座標にその分足せばいい」

妹「Pannerは使わないの?」

「今回の場合、横方向の動きはいいけど、縦に使うとどうしても一方通行の動きになって往復してくれない。もっといいノードがあるかもしれないけど、とりあえずTimeノードが時間に応じて変わるから、それを利用して動かす仕組みにした。これだと直線的に動くから、あまりかっこよくはないんだけど」

f:id:una_unagi:20180320233031p:plain

「Timeにはゲーム開始時点からの経過秒数が入る。その秒数を割った余りを使うことで、一定周期で動かすというわりとよくある仕組み」

妹「横はあんなに簡単だったのに、縦はむずかしい……」

「Pannerノードと似たようなことを自力でやる必要があるからね。本当はもっとカーブをえがくように、途中で加速したり減速したりした方が見た目がいいけど、タイムライン系のノードがマテリアルでは使えなかった。ブループリントからパラメータを渡すか、テクスチャに埋め込んでしまうか、何かしらの工夫が必要」