はじめに
今回はUnreal Engine5で、マテリアルにテクスチャを読み込む方法を紹介します。
このような平面にマテリアルが割り当てられた状態でスタートします。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-24-3.jpg)
平面とマテリアルの作り方~割り当て方はこちらをご覧ください。
![](https://signyamo.blog/wp-content/uploads/2023/06/dc3ee87ef36f8aef46a0fe859f673171-6-320x180.jpg)
テクスチャ素材の用意
何でもいいのですが画像を用意します。
ここでは512×512pxでこのような画像を作成。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-01-10.jpg)
.pngなどの形式で画像を保存。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-02-10.jpg)
↓必要な方はこちらの素材をDLして使ってください。(右クリック→保存など)
![](https://signyamo.blog/wp-content/uploads/2023/06/sozai.png)
UE5を立ち上げ。
コンテンツドロワーに画像をドラッグ&ドロップ。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-03-10.jpg)
これで、テクスチャ素材の用意が完了です。
マテリアルに割り当てる
マテリアルをダブルクリック。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-04-10.jpg)
ノード編集画面を開きます。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-05-10.jpg)
何も無いところを右クリック。
「テクスチャ」→「TextureSample」を追加。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-06-12.jpg)
制作した、TextureSampleをクリック。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-07-10.jpg)
「詳細」を見ます。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-08-10.jpg)
マテリアルエクスプレッションテクスチャベースを開きます。
Texture右側にある「虫眼鏡+フォルダ」マークをクリック。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-09-10.jpg)
コンテンツドロワーから読み込んた画像素材を選択。
1クリックで”選択”するだけで大丈夫です。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-10-10.jpg)
元の画面に戻ります。
Textureの左矢印ボタンを選択。
これで、テクスチャを読み込めます。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-11-9.jpg)
Texture SampleのRGBを、New Materialのベースカラーに繋げます。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-12-9.jpg)
これで、マテリアルにテクスチャが反映されます。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-13-9.jpg)
Crtl+Sで保存。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-14-10.jpg)
これで、UE5の3Dビューに変更が反映されます。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-15-14.jpg)
これで、テクスチャをマテリアルに割り当てる処理が完了です。
色味の調整
板は環境光の影響を受けてます。
なので、平面を回転すると色味が変わります。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-16-9.jpg)
この色味を、できるだけ元のテクスチャの色に近づけていきます。
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
私も100%分かってないので、色味調整で使えそうな対処法だけ書き残します。
New Materialを選択。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-18-6.jpg)
詳細のところを確認。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-19-6.jpg)
マテリアル → Shadeing Modelで「Translucent」を選択。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-20-6.jpg)
これで回転角度による、光の影響が軽減されます。
![](https://signyamo.blog/wp-content/uploads/2023/06/gif_1-4.gif)
あとは、Directional Lightの向きを調整。
昼間の光にしてオレンジっぽさを取ります。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-17-6.jpg)
以上が色味の調整方法です。
環境光を消して光らせる
マテリアルのShadeing Modelを「Translucent」のままにします。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-20-7.jpg)
Texture SampleのRGBをエミッシブカラーに接続。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-21-6.jpg)
Lightingを全て消して背景を黒くします。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-22-8.jpg)
すると… 元の色に近くなります。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-23-6.jpg)
若干くすんでるのは、おそらくカメラ関係のフィルターが入ってるからだと思います。
原因が分かりましたら、まとめます。
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
たぶん、UEの強みのリアルなライティングを使わないなら…
Blenderで作ってしまった方が早そうです。
これで、環境光を消して光らせる処理が完了です。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-24-4.jpg)
そのほかのテクスチャ設定
他にも、Blende Modeを加算などにすると面白い効果が得られます。
![](https://signyamo.blog/wp-content/uploads/2023/06/image-25-4-568x1024.jpg)
不要なノードはテクスチャを選択。
Ctrl+Xで切り取り → Ctrl+Vで貼り付けで初期化。
これで、再配線できます。
![](https://signyamo.blog/wp-content/uploads/2023/06/gif_2-3.gif)
また、透過要素のあるテクスチャはこちらを見て設定してください。
![](https://signyamo.blog/wp-content/uploads/2023/06/dc3ee87ef36f8aef46a0fe859f673171-15-320x180.jpg)
まとめ
今回はUE5で、マテリアルにテクスチャを読み込む方法を紹介しました。
・テクスチャはコンテンツドロワーに画像をドラッグ&ドロップで読み込み
・マテリアルへの設定は「Texture Sample」を使う
・マテリアルエクスプレッションテクスチャベースのTextureで画像を使えるようにする。
・あとは、Shadeing Modelやノードの配線を変えて色味を調整
また、他にもUE5について解説してます。
![](https://signyamo.blog/wp-content/uploads/2023/06/dc3ee87ef36f8aef46a0fe859f673171-16-320x180.jpg)
![](https://signyamo.blog/wp-content/uploads/2023/06/dc3ee87ef36f8aef46a0fe859f673171-12-320x180.jpg)
ぜひ、こちらもご覧ください。
コメント