今年も参加させていただきます。コードは一切出てきません。すみません。
RenderTargetについて調べているうちに、CanvasRenderTargetの使い方なるブログを見かけて、ちょっと遊んでいるうちに小ネタを思いつきました。ほとんど参考にならないですが、そこは季節感の演出ということで。
絵素材を３つほど用意します。
１．クリスマス感のある写真とか絵 ： 背景に使います。
２．できれば天使とか★ のようなシンボル ： クリック対象のボタンとして使います。
３．キラキラ用のテクスチャ ： イルミネーション用です。
とりあえずエディタで動けばOKという雑な内容ですみません。
####CanvasRenderTarget
コンテンツブラウザ内でアセットとして作ります。
テクスチャアセットができたら設定を一部変更します。
Size が小さいと低解像度の絵を引き延ばすことになるのでドットが見えてしまいますが、レンダーターゲットテクスチャは非圧縮でメモリを結構占有するのでほどほどに。とりあえず 1920ｘ1080に少し近いアスペクト比で1024ｘ512にしました。今回フォーマットについては色は重要ではないので、R8 を選択。同じ解像度で RGBA8 を選択すると4倍の 2MBになります。（8ｘ4 と 8ｘ1の差ですね）
次はマテリアル。
アセットアイコンを右クリックしてコンテキストメニューの一番上、Create Material するとマテリアル作成がちょっとだけラクになります。
このマテリアルを編集してUMGで使えるようにします。
フォーマットが R8 なので RチャンネルをOpacityにつなぎます。
（Detailsで見るとテクスチャフォーマットが Color になってて、GrayScaleとかにするとErrorになる。謎）
CanvasRenderTargetの準備はひとまずここまで。
次は、Widgetブループリントを作っていきます。
####Widgetブループリント
キャンバスに パレットから Image を配置して画面いっぱいに拡げます。
このImageに、CanvasRenderTargetのマテリアルをセットします。
さらに追加でボタンにする Image を配置します。中央ポジションを維持したいのでAnchorは画面上端中央。
★的なテクスチャをセットしておきます。
必須ではないけど TextBlock をAlignment XとY それぞれ 0.5 にして一つ配置。
isVariable を有効にしておきます。
仕上げに、もう 一枚イルミネーションランプ用のキャンバスパネルを重ねておきます。
背景は適当なやつを敷きます。ちょっと明度を落としておくとキレイかも。
UMGの構成は以下のようになってます。特に問題は無さそうなので ZOrderは すべて０のまま。
キャンバスは一旦終了。グラフ編集に移ります。
まずは Event Pre Constructから。
Widgetで設定されている解像度を取得しようとしたけど、結局方法が見つけられなくて、初期設定値の1920ｘ1080を定数にして扱うことにしました。いろいろ調べてたら初期値自体を変える方法は見つけられたけど、また別の機会にしてみたいと思うので今回はひとまずこれで進めます。CanvasRenderTargetテクスチャに設定したサイズも後で計算に使うので定数化。これは取得するノードが用意されてますが直値です。
ここでマウスカーソルの座標（1920ｘ1080内）を、CanvasRenderTargetテクスチャ（1024ｘ512内）にマッピングする関数も作っておきます。
次は、Event Construct。
ここでは初期化を行っています。
下段一番左のGetノードは、CanvasRenderTargetテクスチャにアクセスするための Texture Render Target 2D型の変数です。
この変数には先に用意してあった CanvasRenderTargetのテクスチャを初期値としてセットしておきます。
次は、Event Tick。
ここではマウスカーソルのポジションを拾ってラインを描画します。下図は前半部。
描き始めの Begin Draw～ノード から 描き終わりの End Draw～ノード へ Contextピンをつなぐ必要があるのですが、Sequenceノードを使ってます。
@tamfoi さんの書かれている記事 [UE4]ミニマップ的なものを作ってみよう を参考にさせていただきました。このSequenceノードの使い方気に入ってます。
描画するラインの数をカウントするので、マウスが動いてない場合と、ウィンドウの外にカーソルが出た場合は描画をキャンセルしたくて、チェック用の関数を用意しました。上図の checkMousePosition です。
Begin Draw Canvas to Render Targetノード以降の後半部。
描画数カウンタを増やして描画します。この処理で取得したマウスポジションを保持しておくことで、次に来た時に連続したラインを描くことができます。
今どれだけラインを描画しているかのカウントを上図の showCounter 関数でTextBlockを更新。
「マウスのボタンを押したら」というイベントが用意されています。
My Blueprint ＞ Functions から On Mouse Button Down 関数をオーバーライドします。
これでマウスのボタンを押している間だけラインが描画されるようになりす。ドラッグして描く感じです。
続けて、マウスボタンを離したときのイベントもオーバーライドして用意します。
On Mouse Button Up 関数。
仕上げのイベント。イルミネーション開始イベント。前半部分。
配列に貯めておいたポジションをForEachLoopで利用するのですが、一定の間隔を開けたいので剰余を使って、０の時だけランプを生成するようにします。
後半部分。
Construct Object from Class ノードでUMGのImageを生成して、イルミネーションランプ用のキャンバスに子供として追加しています。
マテリアルをセットしている関数はこんな感じです。
引数（Inputs）の型はImage型。
ちょっと作る順番が前後しましたが、イルミネーション用のランプのテクスチャとマテリアルを用意します。
↑グレイスケール 128ｘ128
マテリアルはこんな感じ。光り物なので BlendMode は当然 Additive（加算）です。
サインカーブを使って -1.0 ～ 1.0 を遷移するうち、 0を境にして 点灯と消灯を繰り返すようにしています。
パラメータは Vector型で受け取ります。 RGBチャンネルがカラー。Aチャンネルが点滅速度の調整用として使っています。
Constantノード（ifノードのBのピンにつながってるやつ）の 値を変えると、点灯時間と消灯時間のバランスを調整することができます。マイナスの値にすると点灯時間が長くなります。
####Levelブループリント
これでだいたい用意できたので、テストしてみます。
レベルブループリントでViewportに追加します。
いざ。
ドラッグのスピードに応じて（結果的にマウスポジション取得の間隔が変わる）、ランプの密度に変化が生まれます。
####Widgetブループリント
ここに描き直しの仕様を追加します。
まずイルミネーション用のキャンバスをクリアする関数を用意します。
最初の方で書いた初期化のカスタムイベントに、この関数と配列をクリアするノードを追加します。
もう一つおまけ。
ランプの間隔を変更できるようにします。
####Levelブループリント
Widgetの準備は完了です。次はレベルブループリントにInputイベントを置きます。
キーボードの［R］キーで、ラインを消して描き直せます。カーソルキーの［←］/［→］でランプの間隔を調整します。
####マテリアルであそぶ
イルミネーションのパターンをいくつか考えてみました。
最初のは固定カラーでしたがこれは 滑らかにカラーが変化するタイプです。
Speed の値をランダムにすることで、キラキラした印象になります。
ノイズで瞬く
ノイズを使ってランダムな瞬きを作ります。TexCoord のタイリング設定は小さくします。0.001くらいです。点滅の速度はPannerとノイズのスケールで調整。点滅の間隔というか加減はノイズの座標で。座標をランダムに指定することで一斉に瞬かないようにします。
カラーをUVスクロールで
テクスチャは最初に小さい解像度で作ってノイズを乗せた後、ニアレストネイバーで拡大してます。
UE4にインポートしたあとのフィルタ設定でもNearestを選択すると、キリっとした変化になります。
この点滅パターンを切り替えられるようにしてしてもいいかも。
パターンごとの関数を用意したらSwitch on Intで切り替え。
ランプの間隔を変更したのと同じ要領で、カスタムイベント。
あとは、このカスタムイベントをレベルブループリントから、呼び出してやるだけ。
カスタムイベントを使わず、SwitchノードのIntをランダムにするとミックスにできます。
####おわりに
雑な記事になってしまって心苦しいですが、いかがでしたでしょうか？
マテリアルアニメーションのネタ開発に教材として使えたらいいなと記事を書きながら考えてました。
サンプルの動画も用意したかったんですけどね・・・。
分からないとこや、おかしいとこなどあればコメントとかTwitterとかでツッコミいただければと思います。
最後まで読んでいただいてありがとうございます。
みなさん良いクリスマスを！
明日は @nana_321321 さんの記事です。