Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

UMGでXmasイルミネーション

More than 1 year has passed since last update.

今年も参加させていただきます。コードは一切出てきません。すみません。
RenderTargetについて調べているうちに、CanvasRenderTargetの使い方なるブログを見かけて、ちょっと遊んでいるうちに小ネタを思いつきました。ほとんど参考にならないですが、そこは季節感の演出ということで。

絵素材を3つほど用意します。
1.クリスマス感のある写真とか絵 : 背景に使います。
2.できれば天使とか★ のようなシンボル : クリック対象のボタンとして使います。
3.キラキラ用のテクスチャ : イルミネーション用です。

とりあえずエディタで動けばOKという雑な内容ですみません。

 

CanvasRenderTarget

コンテンツブラウザ内でアセットとして作ります。
fig00.png
fig02.png
テクスチャアセットができたら設定を一部変更します。
fig05.png
Size が小さいと低解像度の絵を引き延ばすことになるのでドットが見えてしまいますが、レンダーターゲットテクスチャは非圧縮でメモリを結構占有するのでほどほどに。とりあえず 1920x1080に少し近いアスペクト比で1024x512にしました。今回フォーマットについては色は重要ではないので、R8 を選択。同じ解像度で RGBA8 を選択すると4倍の 2MBになります。(8x4 と 8x1の差ですね)

次はマテリアル。
アセットアイコンを右クリックしてコンテキストメニューの一番上、Create Material するとマテリアル作成がちょっとだけラクになります。
fig01.png
fig03.png
このマテリアルを編集してUMGで使えるようにします。
fig04.png
フォーマットが R8 なので RチャンネルをOpacityにつなぎます。
(Detailsで見るとテクスチャフォーマットが Color になってて、GrayScaleとかにするとErrorになる。謎)

CanvasRenderTargetの準備はひとまずここまで。
次は、Widgetブループリントを作っていきます。

 
 

Widgetブループリント

fig06.png
キャンバスに パレットから Image を配置して画面いっぱいに拡げます。
fig07.png
このImageに、CanvasRenderTargetのマテリアルをセットします。
さらに追加でボタンにする Image を配置します。中央ポジションを維持したいのでAnchorは画面上端中央。
fig09.png
★的なテクスチャをセットしておきます。
tex_Star.png

必須ではないけど TextBlock をAlignment XとY それぞれ 0.5 にして一つ配置。
fig10.png
isVariable を有効にしておきます。

仕上げに、もう 一枚イルミネーションランプ用のキャンバスパネルを重ねておきます。
fig07.png

背景は適当なやつを敷きます。ちょっと明度を落としておくとキレイかも。

UMGの構成は以下のようになってます。特に問題は無さそうなので ZOrderは すべて0のまま。
fig23.png

キャンバスは一旦終了。グラフ編集に移ります。

まずは Event Pre Constructから。
fig08.png
Widgetで設定されている解像度を取得しようとしたけど、結局方法が見つけられなくて、初期設定値の1920x1080を定数にして扱うことにしました。いろいろ調べてたら初期値自体を変える方法は見つけられたけど、また別の機会にしてみたいと思うので今回はひとまずこれで進めます。CanvasRenderTargetテクスチャに設定したサイズも後で計算に使うので定数化。これは取得するノードが用意されてますが直値です。

ここでマウスカーソルの座標(1920x1080内)を、CanvasRenderTargetテクスチャ(1024x512内)にマッピングする関数も作っておきます。
fig17.png

 
次は、Event Construct。
ここでは初期化を行っています。
fig12.png
下段一番左のGetノードは、CanvasRenderTargetテクスチャにアクセスするための Texture Render Target 2D型の変数です。
fig11.png
この変数には先に用意してあった CanvasRenderTargetのテクスチャを初期値としてセットしておきます。

 
次は、Event Tick。
ここではマウスカーソルのポジションを拾ってラインを描画します。下図は前半部。
fig13.png
描き始めの Begin Draw~ノード から 描き終わりの End Draw~ノード へ Contextピンをつなぐ必要があるのですが、Sequenceノードを使ってます。
@tamfoi さんの書かれている記事 [UE4]ミニマップ的なものを作ってみよう を参考にさせていただきました。このSequenceノードの使い方気に入ってます。

描画するラインの数をカウントするので、マウスが動いてない場合と、ウィンドウの外にカーソルが出た場合は描画をキャンセルしたくて、チェック用の関数を用意しました。上図の checkMousePosition です。
fig14.png

Begin Draw Canvas to Render Targetノード以降の後半部。
fig15.png

描画数カウンタを増やして描画します。この処理で取得したマウスポジションを保持しておくことで、次に来た時に連続したラインを描くことができます。

今どれだけラインを描画しているかのカウントを上図の showCounter 関数でTextBlockを更新。
fig16.png

「マウスのボタンを押したら」というイベントが用意されています。
My Blueprint > Functions から On Mouse Button Down 関数をオーバーライドします。
fig19.png

これでマウスのボタンを押している間だけラインが描画されるようになりす。ドラッグして描く感じです。
続けて、マウスボタンを離したときのイベントもオーバーライドして用意します。
On Mouse Button Up 関数。
fig20.png

仕上げのイベント。イルミネーション開始イベント。前半部分。
fig21.png
配列に貯めておいたポジションをForEachLoopで利用するのですが、一定の間隔を開けたいので剰余を使って、0の時だけランプを生成するようにします。

後半部分。
fig22.png
Construct Object from Class ノードでUMGのImageを生成して、イルミネーションランプ用のキャンバスに子供として追加しています。

マテリアルをセットしている関数はこんな感じです。
fig24.png
引数(Inputs)の型はImage型。
fig25.png

ちょっと作る順番が前後しましたが、イルミネーション用のランプのテクスチャとマテリアルを用意します。
tex_Lamp.png
↑グレイスケール 128x128
マテリアルはこんな感じ。光り物なので BlendMode は当然 Additive(加算)です。
fig27.png
サインカーブを使って -1.0 ~ 1.0 を遷移するうち、 0を境にして 点灯と消灯を繰り返すようにしています。
パラメータは Vector型で受け取ります。 RGBチャンネルがカラー。Aチャンネルが点滅速度の調整用として使っています。
Constantノード(ifノードのBのピンにつながってるやつ)の 値を変えると、点灯時間と消灯時間のバランスを調整することができます。マイナスの値にすると点灯時間が長くなります。

 

Levelブループリント

これでだいたい用意できたので、テストしてみます。
レベルブループリントでViewportに追加します。
fig26.png

いざ。
draw1.gif
ドラッグのスピードに応じて(結果的にマウスポジション取得の間隔が変わる)、ランプの密度に変化が生まれます。

 

Widgetブループリント

ここに描き直しの仕様を追加します。
まずイルミネーション用のキャンバスをクリアする関数を用意します。
fig28.png
最初の方で書いた初期化のカスタムイベントに、この関数と配列をクリアするノードを追加します。
fig29.png

もう一つおまけ。
ランプの間隔を変更できるようにします。
fig30.png

 

Levelブループリント

Widgetの準備は完了です。次はレベルブループリントにInputイベントを置きます。
fig31.png

キーボードの[R]キーで、ラインを消して描き直せます。カーソルキーの[←]/[→]でランプの間隔を調整します。

draw2.gif

 

マテリアルであそぶ

イルミネーションのパターンをいくつか考えてみました。
fig32.png
最初のは固定カラーでしたがこれは 滑らかにカラーが変化するタイプです。
draw1.gif
Speed の値をランダムにすることで、キラキラした印象になります。
ss01.jpg

ノイズで瞬く
fig33.png
ノイズを使ってランダムな瞬きを作ります。TexCoord のタイリング設定は小さくします。0.001くらいです。点滅の速度はPannerとノイズのスケールで調整。点滅の間隔というか加減はノイズの座標で。座標をランダムに指定することで一斉に瞬かないようにします。
draw4.gif

カラーをUVスクロールで
テクスチャは最初に小さい解像度で作ってノイズを乗せた後、ニアレストネイバーで拡大してます。
fig34.png
fig35.png
UE4にインポートしたあとのフィルタ設定でもNearestを選択すると、キリっとした変化になります。
draw5.gif

この点滅パターンを切り替えられるようにしてしてもいいかも。
パターンごとの関数を用意したらSwitch on Intで切り替え。
fig37.png
ランプの間隔を変更したのと同じ要領で、カスタムイベント。
fig38.png
あとは、このカスタムイベントをレベルブループリントから、呼び出してやるだけ。
カスタムイベントを使わず、SwitchノードのIntをランダムにするとミックスにできます。
fig39.png

おわりに

雑な記事になってしまって心苦しいですが、いかがでしたでしょうか?
マテリアルアニメーションのネタ開発に教材として使えたらいいなと記事を書きながら考えてました。
サンプルの動画も用意したかったんですけどね・・・。
分からないとこや、おかしいとこなどあればコメントとかTwitterとかでツッコミいただければと思います。
最後まで読んでいただいてありがとうございます。

みなさん良いクリスマスを!

 
明日は @nana_321321 さんの記事です。

fukusuke8gou
UE4のBlueprintが好きなので
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away