環境：UE5.4
作成マテリアル：M_FirstShader
前書き
こちらのチャプターではUVとテクスチャの使い方を紹介します。
2DデザイナーはUVに慣れていないことも多いため、UVの概要もしっかり解説したいと思います。
最初にノードの繋げ方を説明した後、UVの解説を行いますのでUVについてご存知の方はチャプターの解説を飛ばして頂いても構いまえん。
ノードの繋げ方
まず、テクスチャを用意します。実例としてこちらのワンコを描きました。自由に保存してシェーダーの実験に試してみてください。
UEのコンテンツブラウザーにドラッグ＆ドロップすると、テクスチャのアセットが作成されます。次に、テクスチャをダブルクリックで開いて以下のように設定します。
| 概要 | 用途 |
|---|---|
| MipMaps | 「NoMipMap」の設定にします。有効にすると、複数の解像度を持ったテクスチャにできます。基本的にこの設定は３D環境で有利ですが、UIではほとんど使われません。 |
| Texture Group | 常にUIに設定します。 |
| NeverStream | この設定を適用しないと、テクスチャがゲーム内でぼやけるおそれがあります。有効にすると、テクスチャが表示されるまでのロード時間がわずかに長くなりますが、ぼやけることはありません。 |
| sRGB | カラーのテクスチャならば、適用します。マスク用のテクスチャの場合は無効にすることがあります。 |
他にも圧縮方式などの設定がありますが、現時点ではこれで十分です。
マテリアルに戻り、右クリックから「TexCoord」ノードと「TextureSample」を検索して選択します。
TexCoordとTextureSampleノードを検索します
「TexCoord」はUVに該当します。「TextureSample」はテクスチャ情報を持つノードです。
「TextureSample」を選択して、詳細パネルよりワンコを選択し割り当てます。
テクスチャサンプラーにワンコを割り当てます
最後に、このようにノード同士を繋げます。ノードに表示されているパラメーターの白い丸を左クリックで押しっぱなしにしてドラッグすると、白いワイヤーが出ます。ノード間を繋ぐことで、GPUへの命令の順序が決まります。
ノード間の繋げ方
FinalColorにはRGBを繋げ、Opacityには「A」（アルファ情報）を繋げます。PNGでもアルファ情報とRGB情報は分かれているため、それぞれ別々に対応する必要があります。
これでは以上となります。以下はUVの基礎知識の解説に入ります。
UVとは
TexCoordノードの「▼」を押すとプレビューが表示されます。緑と赤、黄色が混ざったカラフルなプレビューが表示されます。さらに「▼」を押すと、いくつかのパラメーターもあります。
UVというのはゲームに関わる方ならだれでも少なくとも一度は聞いたことがあると思います。基本的には３Dで利用されますが、シェーダーでは大きな役割を持っているので基礎をしっかり押さえておかないと、その先に進むのが難しくなります。しっかりUVについて学びましょう。
UVはマップのようなもので、縦横に座標情報を持ちます。
U（横）は赤色、V（縦）は緑色で表示されます。加算ブレンドのように重なれば黄色になります。赤みが強ければVの座標が低く、緑が強ければUの座標が低いことを示します。左上の黒い角は、UとVの座標が両方とも低いことを意味しています。
UV全領域は基本的に0～1間に表示を抑えます。
「じゃ、サイズ1px以上の画像（例えば120px）がUVのマップに入らないの？はみ出る？」と思う方が少なくないでしょう。
しかし、どんなテクスチャでも正確なサイズで表示できます。UVには単位がないため、1は100%を意味します。 つまり、120pxの画像も適切なサイズで表示されます。
テクスチャがどんなサイズでもUVの座標範囲が変わらないです。1024x1024にせよ2048x2048にせよ、UVの座標範囲が常に「0～1」になります。
解説は以上です。
次のセクションでは、テクスチャを移動させたり拡大したりするための計算について解説していきます。