前提

Unreal Academy の INTRODUCTION TO MATERIALS FOR DESIGN VISUALIZATION で習った項目です。
最近UE4を勉強し始めたので、他に良い方法あったらぜひ教えていただきたいですm(_ _)m

環境

Unreal Engine 4 4.20.3
Adobe Photoshop CC 2018

TL;DR

こんな感じに立方体のメッシュの各面にテキトーな画像を貼り付けることができました。

フォトショで作った画像を使ってマスクを作ることを覚えた！ pic.twitter.com/vJeuLDlOSg
— F.Shibusawa (@smartponzu) 2018年10月7日

実行手順／再現手順／詳細

冒頭で紹介した Anreal Academy の講座の 1.5 - Material Editor: Blend Modes というセクションで紹介されていました。 00:41 あたりから Blend Mode の Masked が出てきます。

詳しくはそちらを参照してもらった方が正確ですが、ここでは簡単に実装の流れを紹介します。

1. Photoshop でおもむろにロゴっぽい画像をつくる。

これは正直なんでも良いと思いますｗ。ただ、同じ講座の別のセクションで説明されていたんですが、UE4にインポートする画像のサイズは2の倍数じゃないとだめなようです。なので縦横の値がそれぞれ、 512px, 1024px, 2048px... といった値になっている必要があります。下の画像は 512px * 512px にして保存しました。

2. 画像をUE4にインポートする

Content Browser の Import ボタンで作った画像を取り込み、 Cmd + s で保存します。保存先フォルダは Textures などが良いんでしょうか。

3. おもむろに Cube をレベルに突っ込む

左にある Modes > Place > Basic から、 Cube という StaticMesh をレベルに投下します。

4. Material Editor を開く

右下にある Details に Materials という項目があるので、そこのアイコンをダブルクリックします。そうすると Material Editor が開きます。ここでメッシュに適用している色とかテクスチャ、光沢、反射なんかを調整します。

5. Blend Mode を Masked に変更する

左下にある Details > Material に Blend Mode という項目があるので、これを Opaque から Masked に変更してください。そうすると、 BasicShapeMaterial のグレーアウトしていた Opacity Mask というノードが使えるようになります。

5. Texture Sample に画像を紐づけ、 Opacity Mask につなぐ

キーボードの T を押しながら Blueprint 上をクリックすると、 Texture Sample が出てきます。このショートカット良い。
最後に、左下にある Details > Material Expression Texture Base という項目の Texture にロゴ画像を当てはめます。

これで、 Cmd + s で保存したらOKです。

参考文献

Unreal Academy の INTRODUCTION TO MATERIALS FOR DESIGN VISUALIZATION

P.S これ、WebGLでやったらどんだけコード書かなきゃいけないんだあー…と思うと、ゲームエンジンほんとにすごいなって思いました。