新しいこと、枯れたこと問わずサムザップ大庭が興味を持ったものを調査、生活の効率を求める完全趣味の技術ブログ。基礎を大事にしています。Sandboxを移植してイメージエフェクトを書いて遊んでいたのですが、あまり深く理解せず、とりあえず触っていただけでしたので、今年はじっくりと理解しながら書いていく年にしていきたいと今は思っています。渋谷ほととぎす通信とりあえず写経、写経、写経ゥ!!今回は私が尊敬するkeijiroさんのgithubリポジトリの中で比較的簡単そうな処理を勝手に選ばせて頂き勝手に写経。写経する中で、これならイケそうというものを見つけて始めています。※ハードルを下げて継続させることが大事とウメハラも言ってました今回のお題「画面をスクロールさせるイメージエフェクト」このようなイメージエフェクトを作ってみます。fracで小数点だけ残してUV座標を操作するシェーダのソースコードから見ていきます。frac関数を使うのがポイントで、0〜1の範囲でUV座標をオフセットすることでピクセル位置をずらし、スクロールしているように見せることが出来ます。resultの値は0.4578になります該当箇所の処理を見ていきます。i.uv.y;今回のスクロールは縦方向のみなので、↑のようにUV座標の縦方向にあたるuvのy要素に注目します。UV座標のVにあたるため変数名はvとしていますです。_ScrollValue);変数vに_ScrollValueを加算しfrac関数で処理します。frac関数は引数の小数点部分のみを残す関数です。よって変数vには0~0.99999....の値が入ります。v));tex2D関数はUV座標におけるピクセルの色(RGBA)を取得する関数です。tex2Dの第2引数にUV座標を代入するわけですが、ここに先程加算したv要素を含んだUV値を代入しています。することで縦方向のみ画像全体がオフセットされて移動していきます。先程のfrac関数で1以上の値にはならないため、繰り返しスクロールすることになります。※frac関数を外せば画像は繰り返さずに移動し続けますここまでの大事ポイントfrac関数を使用する余談イメージエフェクトは_MainTex変数にカメラが写したソースのRenderTextureが代入されます。いう名前を変更できないただし上記の2点を守る必要があります。続いてC#側のソースを見ていきます。(短いです)C#側はシンプルです。m_speed);このように毎フレームスクロールする値を渡しているだけです。その値を使ってShader側でスクロール処理をしています。最後にソースの画像(src)を、出力(dest)のRenderTextureにコピーして画面を更新します。m_mat);ちなみに最初にお見せした成果物は、Editorのインスペクタ上でm_speedの値を動的に変化させてスクロールスピードを早めたり向きを変えたりしています。まとめ今回非常に簡単な処理を大層な文章量でアウトプットしてみました。自分で考えて、書いて動かすというプロセスを踏むことが一番身につくし覚えるなということを再認識しました(加えてブログにも備忘録書いたから忘れてもOKです)。日をあまり置かず、コンスタントにそしてハードルを上げ過ぎずにアウトプットしていければと思います。www.youtube.comちなみに冒頭のウメハラの件はコチラです。長いですけど私にとってはとても刺激的な動画でした。09:00無限スクロールイメージエフェクトTweet読者になるボタンを押して貰えるととてもがんばれます。大庭俊介(bao_bao)渋谷のUnityエンジニア。スマホゲーム作って生活しています。設計、組み込み、演出一通りを自分1人で完結して作るのが得意です。よろしければTwitterフォローお願いします。(@ohbashunsuke)株式会社サムザップでUnityエンジニアとしてスマホゲーム作っています。(1)スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。