UE4初心者が頑張ってるブログ

Unreal Engine4を使用した開発メモ、及びそれに関連することについて不定期に書いています。

UE4 MaterialのFlipBookノードについて

今回はUE4標準のMaterial Function

「FlipBook」について書いていきます。

f:id:MozPaca:20181108134005p:plain

 

このノードはテクスチャアニメーションを

簡単に行うことができます。

 

Paper2DにもFlipBookコンポーネントがありますが、

そちらとは別物になりますので注意してください。

 

公式ドキュメントはこちら

Unreal Engine | フリップブック アニメーションをレンダリングする

 

FlipBookノードについて

引数

Animation Phase(0~1)

アニメーションの速度を設定します。

デフォルトにはTimeノードが

設定されています。

Number of Rows

テクスチャの行(横)の数です。

今回の場合は3ですね。

Number of Columns

テクスチャの列(縦)の数です。

こちらも今回は3です。

Texture

Resultピンを使用する場合は

テクスチャオブジェクトを接続する必要があります。

今回は使いません。

UVs

UVの指定を行えます。

MipBias/Level

テクスチャを鮮明にしたり、ぼかしたり出来ます。

Textureピンに接続されているもののみに影響を及ぼします。

Use Mip Bias(T)Level(F)

BiasとLevelの切り替え処理です。

True...バイアス , False...Levelになります。

デフォルトはTrueになっています。

Clamp Anim(see tooltip)

Trueにするとアニメーションフェーズにfrac演算が適応されます。

デフォルトはFlaseです。

 

返り値

Result

Textureピンで入力されたテクスチャ情報を返します。

Alpha

Textureピンで入力されたテクスチャのアルファ値を返します。

UVs

UVの値を返します。

 

 

検証にはUE4 4.21.0を使用しています。

f:id:MozPaca:20181108134440p:plain

 

準備

事前にこのような画像を用意しました。

エンジンの中にも似たような画像がありますが、

この画像を作ったあとに気づいたので

今回はこの画像を使用します。

f:id:MozPaca:20181108134604p:plain

 

新規に空のプロジェクトを作成します。

f:id:MozPaca:20181108134455p:plain

 

コンテンツブラウザに先程の画像をインポートします。

f:id:MozPaca:20181108134922p:plain

 

マテリアルを作成する

コンテンツブラウザを右クリックから

マテリアルを選択します。

f:id:MozPaca:20181108141511p:plain

 

名前をつけましょう。

f:id:MozPaca:20181108141554p:plain

 

作成したマテリアルを開き

Material DomainをUser Interafce、

Blend ModeをMaskedに変更します。

f:id:MozPaca:20181108141612p:plain

 

次にこのように処理を組みます。

Texture Sampleには先程インポートした画像を設定しています。

f:id:MozPaca:20181108141831p:plain

 

Widgetを作成する

マテリアルを組み終わったので

Widgetを作成します。

コンテンツブラウザを右クリックから

ユーザーインターフェースウィジェットブループリントを選択します。

f:id:MozPaca:20181108142526p:plain

 

名前をつけましょう。

f:id:MozPaca:20181108142901p:plain

 

Imageを配置します。

今回は表示したい領域が256のサイズなので、

サイズとImage Sizeを256に設定します。

f:id:MozPaca:20181108143926p:plain

 

先程作成したマテリアルをImageに適応します。

f:id:MozPaca:20181108144117p:plain

 

Widgetを描画する

作成したWidgetを描画していきます。

レベルブループリントを開きます。

f:id:MozPaca:20181108144318p:plain

 

Widgetを描画する処理を書きます。

f:id:MozPaca:20181108144346p:plain

 

確認してみる

 アニメーションしているのが確認できました。

www.youtube.com