第04回 半透明表現と UV アニメーション
4 / 4 透明度と動きの調整
このステップの目的
透明度・密度・速度を一つずつ選んで、意図した動きを作ります。
流れ方の制作課題
半透明の模様をゆっくり流すMaterialを作ります。「模様を細かくする」「同じ密度で速くする」「流れを止める」の各指示に対し、TilingとSpeedのどちらを変えるか選びます。設定値と短い動画を残してください。
予測と結果の照合
密度はTiling、時間あたりの移動はSpeedです。停止はSpeed=(0,0)です。複数の値を同時に変えず、各変更の効果を比較します。
採用した速度を記録し、保存時はいったんSpeed=(0,0)へ戻します。
発展：コマを切り替えるFlipbook
フリップブックアニメーション
1枚のテクスチャーに複数コマを並べる
出典: highwizard, OpenGameArt.org, CC0。
フリップブックはいわゆるパラパラ漫画の意味 1枚のテクスチャーに複数コマを並べたものです。
シェーダーでは時間に応じて読み取るコマを切り替えます。
煙、炎、爆発のような形が変わる表現でよく使われます。
UV スクロールが連続的に読む場所をずらす表現フリップブックは読む絵を切り替える表現です。
全体UVをコマ単位のUVに変換する
Flipbook ノードの適用例。
例えば横 5、縦 5 に並んだテクスチャーなら 1コマは 1 / 5 の幅と 1 / 5 の高さになります。
現在のフレーム番号から読むコマの行と列を計算します。
元の UV を 1コマ分に縮小し読みたいコマの位置へオフセットします。
専用のノードがありますので通常はそちらを使いますが内部で上記の計算が行われています。
コマ番号から読む範囲を決める
text
columns = 横のコマ数
rows = 縦のコマ数
frame = floor(Time * fps) % (columns * rows)
cellX = frame % columns
cellY = floor(frame / columns)
flipbookUV = (UV + float2(cellX, cellY)) / float2(columns, rows)実際の Shader Graph では専用ノードや Floor、Modulo、Divide などを使って組み立てます。
実習5：フリップブック表現を作る
- 横と縦にコマを並べたテクスチャーを用意する
Columns、Rows、FPSのプロパティを追加するTime * FPSから現在のフレーム番号を作る- フレーム番号から読むコマの位置を計算する
- UV を 1コマ分に縮小し、対象コマへオフセットする
連続スクロール用のGraphを複製して作業します。横5・縦5の画像は、コマの並び方向も画像とノードで合わせてください。
使用画像と出典
- grass blades alpha card texture (side view) para, CC0, via OpenGameArt.org
https://opengameart.org/content/grass-blades-alpha-card-texture-side-view - Animated flame / Fire sprite Sheet highwizard, CC0, via OpenGameArt.org
https://opengameart.org/content/flame-fire-sprite-sheet
チェックリスト
- 密度と速度を別々に調整し、選んだ理由を説明できる。
- 静止と動作を同じCameraで比較した。