【第12回】マテリアル基礎
概要
この連載ではブループリントが主体ですが、ここでは番外編としてマテリアルの基礎を学習しておきます。
基本的にギミックの作成ではプロトタイプのメッシュを使うことが多く、最終的には他の担当者（アーティスト等）が仕上げることになるかもしれません。しかし、ここである程度マテリアルについて知っておけば、担当者にニュアンスを伝えやすくなって作業しやすくなるはずです。また、既存マテリアルを転用したいときなども、いくらか知識があると便利です。
マテリアルとは、メッシュなどに色を付けたり光沢の度合いや透過性などの外観を設定する素材です。
さっそく作成してみましょう。
マテリアルを作成する
コンテンツブラウザ上にマテリアル用のフォルダを作成します。
ここでは「Assets」>「Materials」フォルダという構成にしています。
「追加/インポート」→「マテリアル」を選びます。
作成したら任意の名前をつけておきます。
ダブルクリックしましょう。
マテリアルエディタが開きます。
図のようなマテリアルエディタが開いたでしょうか？
これがマテリアルエディタです。
ブループリントのようなノード形式のビジュアルスクリプトで構成されますが、ブループリントとは使うノードがまったく異なりますので、別のものと考えてください。
初期状態では「出力結果（を返す）」ノードのみが存在します。
この受け取りノードに向かって各種構成要素を接続していきます。
ベースカラー、メタリック、ラフネス
ベースカラー
基本となる「色味」を追加してみましょう。
カラーを定義する「ベースカラー」ピンで「Vector3（RGB値）」を受け取ることができます。
RGBがなんなのかという説明は省きます。RGBとは、色の表現法の一種で、赤 (Red)、緑 (Green)、青 (Blue) の三つの原色を混ぜて幅広い色を再現する加法混合の一種です。
グラフを右クリックして「Constant3 Vector」を検索して配置します。
キーボードの「３」を押しながら左クリックでも配置可能です。
エディタにパレットが表示されている方は、一覧から探しても構いません。
「Constant3 Vector」ノードをクリックして選択します。
詳細パネルを確認すると、RGBそれぞれの値を入力可能なことがわかります。
値を入力して色味を指定しましょう。
カラーピッカーを使って指定することも可能です。
好きな値を入れたら、ノードの出力ピンをベースカラーピンにつなげてください。
状態を確定するために、「適用」（コンパイル）ボタンを押しましょう。
プレビューウィンドウで出力結果を確認できるはずです。
なお、「保存」ボタンを押せば「適用」も同時に行います。
メタリック
続けて、「メタリック」ピンを使ってみましょう。
これは文字通りメタル感を制御するもので、表面を光沢に演出します。
定数ノードを配置します。「Constant」ノードを検索して配置しましょう。
指定値を与える定数のノードです。
（ショートカットで「１」キーを押しながら左クリックでも配置可能です）
出力ピンを「Metallic」ピンへ接続して「適用」を押します。
これでメタリック（光沢）が「０」の状態で適用されました。
このままでは、わかりづらいですね。
定数ピンを選択し詳細パネルからValueを「1」に設定して再度「適用」を押してみましょう。
プレビューのサーフェスがメタリック風に変わったことがわかりますね。
なおメタリックに指定する値は、0か1の振り切った値が多用されます。
ラフネス
つぎに「ラフネス」を変更してみます。
ラフネスは、マテリアルの粗さ度合いを制御します。
先ほどと同じように定数ノードを設置して「ラフネス」ピンに接続します。
なにもピンが接続されていない状態（デフォルト）のラフネス値は「0.5」です。
ピンが接続されたことで、定数で上書きされラフネスが０の状態になりました。
そのせいで、よりメタリック的な表現が強調されて見えますね。
好きに値を調整して、保存してください。
続いて、このマテリアルをメッシュへ適用してみましょう。
ちなみに、ブループリント同様、ノードや範囲指定でコメントをいれることも可能です。活用してみてください。
マテリアルをメッシュに反映する
テスト用のレベルと、スタティックメッシュを用意（配置）してください。
ジオメトリブラシからメッシュを作成しても、任意の既存メッシュを使っていただいて構いません。
スタティックメッシュエディタを開きます。
使用するスタティックメッシュをダブルクリックしてください。
エディタ内の、「Material Slots」項目からデフォルトのマテリアルを設定できます。
保存して、レベル上のメッシュを確認してみましょう。
反映されたことが確認できるはずです。
レベルにメッシュを複数個配置して、それぞれにドラッグ&ドロップして直接マテリアルを指定することも可能です。
詳細パネルからも指定できます。
もちろんレベル上にあるアクタのマテリアルを変更しても、オリジナル（大元のStaticMesh）に設定されたマテリアルが変更されたわけではありません。レベルに配置されたアクタはあくまでも設計図を元にしたコピーと考えておきましょう（以前学習した「インスタンス編集可能な変数」を設定したアクタと同じですね）。
同様に、ブループリントに設定したStatic Mesh コンポーネントに対してもマテリアルは適用できます。
確認してみましょう。テスト用のアクタを作成します。
開いてアクタにStatic Meshを設定してください。
この時点でさきほど設定したマテリアルが反映されているのがわかりますね。
詳細パネルの「Materials」項目から個別にマテリアルを設定することも可能です。
マテリアルインスタンス
ここまでで基礎的なマテリアルの作成と適用、置き換えることを覚えました。
新たにいくつか作成していきたいところですが、マテリアルは調整のたびコンパイルを行う必要があり確認に時間がかかり不便です。そこで、パラメータ調整時にコンパイルが不要な「マテリアルインスタンス」という特殊なマテリアルを学習しておきましょう。
名前は難しいですが、要はパラメータを調整できるマテリアルの「子」のようなものと考えてください。調整のしやすさから、レベルに配置されるメッシュはマテリアルインスタンスが使われることがほとんどです。
やってみましょう。
作成するには元になるマテリアルを用意して、変更したい値をパラメータに変更するという作業が必要になります。先ほど作成したマテリアルを使います。
マテリアルインスタンスで扱いたいパラメータはパラメータに変換する必要があります。
ベースカラーの値をパラメータに変換します。
Constant 3 Vectorノードを右クリックして「パラメータに変換」を選択してください。
パラメータは作成時にパラメータ名称をつけることができます。
任意ですがカラー系はしばしばわかりやすく「Color」などと名付けられますね。
同じように「メタリック」「ラフネス」に使っている定数を、右クリックからパラメータに変換してください。ひとまずパラメータ化が完了しました。
セーブしましょう。
コンテンツブラウザを表示してください。
作成したマテリアルを右クリックします。
「マテリアルインスタンスを作成」を選択します。
新たにマテリアルインスタンスが作成できるはずです。
サムネイルではマテリアルと区別しづらいので、わかりやすい接頭語（”MI_”）をつけておくことがしばしばです。名前を設定したらダブルクリックして開きましょう。
詳細パネルに、先ほど作成したパラメータが登録されていることがわかりますね。
また、一般項目の「Parent」には親となったマテリアルが設定されていることが確認できます。
チェックを入れて、パラメータを任意の値に変更してみましょう。
適用（コンパイル）をせずに外観を変更できました！
親（マテリアル）からいくつもの子（マテリアルインスタンス）を作ることも可能です。
もちろんマテリアルインスタンスはマテリアルと同じようにメッシュに反映できます。使用するメッシュにセットしたり、色々ためしてみましょう。
マテリアルインスタンスについては、ひとまずここまで。
マテリアルインスタンスは演出としても非常に使い勝手が良い機能です。たとえば「プレイヤーが近づいたらアクタの色を変える」といった演出も、ブループリント上でマテリアルインスタンスの値を動的に変更することで簡単に実装可能です。
連載第14回で「ブループリントを使ったマテリアル演出」を実装しています。
アクタとマテリアルを作成する
その他いくつかの機能を学習しながら、ゲームに使用するメッシュとマテリアルを作成してきます。
この項目は演出寄りですので、飛ばして次に進んでも構いません。
（飛ばしても問題ないように作成しています）
最初に、レベル内で取得する「鍵になるアイテム」メッシュとマテリアルを作ります。
クリアに必要なものなのでプロトタイプ段階でも目立たせたいメッシュですね。
「不思議な力を持った宝石」風に特徴づけます。
本来、プロトタイプで作り込んだマテリアルをあてる必要はあまりありませんが、プレイヤー誘導などレベルデザインの一因になることもあり、気になる部分や目立たせたいメッシュに、派手なマテリアルを使うのは効果的です。
図のジオメトリブラシを Static Mesh に変換しました。
コリジョンなども設定しておきます。
マテリアルを作成します。
ベースカラー用の値を設定します。
マテリアルインスタンス化して調整するため、パラメータ化しておきます。
初期値は少し赤めに変更しました。
メタリックとラフネスの値も設定しておきます。
こちらは今のところ定数（変わらない数）にしておきます。
なお、ビューポート上ではプレビューの形状を変更できます。
一番右側のポット型のアイコンは、コンテンツブラウザ上でメッシュを選択した後にクリックすると、プレビューがそのメッシュ形状になるという便利な機能です。
保存（コンパイル）して、マテリアルインスタンスを作成しておきます。
メッシュに設定してみます。
まだ味気ないので表面にざらつきのような表現を足してみることにします。
スターターコンテンツからテクスチャ（画像アセット）を追加してみましょう。
「Starter Contents」を持っていない場合は、「追加/インポート」項目から追加できます。
もちろん好きなテクスチャを使用していただいて構いません。
マテリアルエディタの任意の場所を右クリックします。
「Texture Sample」ノードを検索して配置してください。
詳細パネルから、表面表現に向いていそうなノーマルマップを指定します。
ここでは「T_Metal_Steel_N」を使いました。
「Texture Sample」ノードを選択して、詳細パネルからテクスチャを指定します。
テクスチャも後で変更調整できるようにパラメータ化しておきます。
ここでは使いませんが、Texture をベースカラーに設定すれば模様がついた見た目になります。ピンごとに設定できるテクスチャの種類が異なりますので注意しましょう。
テクスチャのUV（スケール）を調整する
テクスチャのUVスケーリングを変更するノードも追加しておきます。
「UV」について詳しい説明は省きますが（「テクスチャマッピング」「UV座標」などで検索してみましょう）、簡単に言えばテクスチャ１枚の「描かれている場所」を示す単位のようなものです。
サイコロの形状に紙を貼り付ける様子を想像するとわかりやすいかもしれませんね。
多くのスタティックメッシュには図のような１枚のテクスチャ（画像）が貼り付けられ、（どこにどんな色が塗られているかなどを）マッピングするのに使われます。
「Texture Coordinate」で検索して、配置してください。
「Texture Sample」ノードのUVs入力ピンに接続します。
必要があれば、詳細パネルの「U Tiling」「V Tiling」を調整して、テクスチャのスケールを調整してみましょう。上画像にもあるようにUは横方向、Vは縦方向の座標軸を示します。
テクスチャを動かす（Pannerさせる）
さて、（このアクタで必要かどうか怪しいところですが、）使われる頻度の高い「Panner」ノードを知っておきましょう。
「Panner」は指定方向に接続されたUVをパンする（動かす）ノードです。
よく使うシーンとしてはバリアや炎の揺らめきあたりでしょうか。
「Panner」と検索して配置します。図のようにつないでください。
「Panner」ノードを選択して、詳細パネルから動かしたい方向に値を入れてみましょう。
テクスチャが動き出すことを確認できたでしょうか。
動きが出て奇妙な雰囲気になりましたね……！
Panner の速度もパラメータ化して、インスタンス上で調整することも可能です。
以下のように組んでみましょう。
RがX方向、GがY方向への速度に対応するようになります。
マテリアルインスタンスで速度を変更できるはずです。
エミッシブ機能を使う
続けてもうひとつ、エミッシブカラーについても学習しておきましょう。
色味は基本的に「ベースカラー」を基調としますが、マテリアルには自身を発光させるための「エミッシブ（Emissive）」という機能があります。
これを使うと、輝くメッシュなどを簡単に作ることが可能です。
定数ノードを配置して（１を入力）、「エミッシブカラー」ピンに接続してみましょう。
若干わかりづらいですが、光りました。
値のみを指定した場合は、１に近づくほど白く光ります。
発光色を指定したい場合は「Multiply」というノードを使って組み合わせます。
以下のように接続しましょう。
この場合はベースカラーを使って、「Multiply」ノードで発光する量を調整します。
もちろん別のカラーを使えば異なる色で発光させることができます。
なお定数はパラメータ化しています。
図はマテリアルインスタンスで発光をテストしたものです。
のちのち、プレイヤーが近づいたら光りだすという処理を作るのも面白いかもしれませんね！
（補足）「Blend Mode」を変えてマテリアルを半透明にする
さて、基本的には問題なく見分けられるメッシュになったのではないでしょうか。
各種値を調整して保存しておきましょう。
以下では、もう少しだけ装飾的な要素を紹介します。
ここは余裕があれば実装する程度で問題ありません。
そういうのもあるのだな、くらいに読んでいただければ大丈夫です。
もう少し宝石感を出すために「Blend Mode」を変更して半透明にして雰囲気を足してみます。
最終出力ノードを選択状態にし、詳細パネルの「Blend Mode」を「Translucent」に変更します。
「Blend Mode」は、現在のマテリアルの出力と、既に描画されている背景のブレンド表現の設定です。これを「Translucent」にすると、メッシュを半透明にする機能を使うことができます。
この値を調整すると、マテリアル全体の設定が変わります。
最終出力に透過性を設定できる「オパシティ（Opacity）」ピンが有効になりましたね。
ためしに、「オパシティ」に値を設定してみましょう。
透過しましたね！
（反対側が見えるようになりました）
さらに、透過して見えるようになった「メッシュの裏側」も描画させる「Two Sided」というオプションも使ってみましょう。
……立体感が出るかと思いましたが、このままでは効果が薄そうです。
さらにガラス感を出すオプションがあるので、ためしてみましょう。
詳細パネルの「トランスルーセンシー」にある「Lighting Mode」を「Surface Translucency Volume」に変更します。
これですこし立体感が出てきたように感じますね。
（補足）屈折（リフラクション）の演出
つづけて、「屈折（リフラクション/Refraction）」機能を使って簡単に透過部分に屈折表現を与えてみます。リフラクションの詳細な説明は公式ドキュメントを読んでください。
まず「フレネル（Fresnel）」ノードを検索して配置します。
これはサーフェス法線とカメラとの角度によって出力する値が変化する機能を持つノードで、シルエットを際立たせたいときなどに多用します。
（リフラクション以外でも頻繁に使用するノードです）
Fresnelを使うと外側がハイライトされるような表現を簡単に作ることができます。
このノードをLerp（線形補間）ノードのAlphaに使って以下のように接続します。
図のように歪みが付与されてリアルさが増しました。
好きな値をパラメータにして、マテリアルインスタンス上で値を適宜調整します。
これで一旦完成としておきます。
値を適宜調整してメッシュに適用して確認してください。
興味があれば公式のプロジェクトなどを参考に改良してみましょう。
今回は以上です。
頻繁に使用するノードを中心に、基本を学習しましたね。
より詳しく知りたい方は、ぜひ公式ドキュメントを読んでみてくださいね。
公式から取得できるサンプル集のプロジェクトには勉強になるマテリアルが多数ありますので、余裕ができたら分析してみましょう。ちなみに、サンプル集にある「M_LayoutMat」というマテリアルはレベルデザインなどにオススメです。
移行して使ってみましょう。
レベルデザインの早期段階ではマテリアルを作り込むような機会が少ないかもしれません。とはいえ、作らないまでも「このマテリアルはどんな機能を持っているか」がわかっている状態であれば、アセット移行などで流用することも容易くなります。できれば、ブループリントと並行して学習を進めていきましょう。
正直なところ、マテリアルはその場で確認するのがムズかしく、習得には数学的な素養も必要なため、ロジックだけで（そこそこ）なんとかなるブループリントに比べると難易度は高めです。個人的に初めのうちは、他のプロジェクトのマテリアルを切り貼りして参考にするのがオススメです。他のマテリアルを使っているうちに「このノードを使うとこのような表現ができるんだな」とわかってくるようになるはず……。
お疲れさまでした！
プロジェクトのダウンロード
