その2の23日目の記事のちょっと細かい編https://qiita.com/advent-calendar/2019/ue4_deuxStarWarsを見てきました!乙女的に悶えるがあまり叫びたくなったAquariaです。いう事で、続き続きー。前回は導入編として、Lerpを使用した基本的な変化のシェーダをご紹介しました。次はその肉付けと捉えてください。テクスチャを削ってどこまでいけるかギリギリまでやってやろうぜ、編です。概要は前と変わりありません。やる事はマテリアル、テクスチャ、フォント、ブループリントを使ったテキストの形状変化です。フォント用のマテリアルを用意し、そのマテリアル内で疑似的な立体感を付けたテクスチャAとBを任意の値で変化させ、その制御をブループリントで行います。今回は疑似的な立体に使うノーマルマップも無理矢理フォントテクスチャから作ります。その分ノードが増えるので煩雑にはなりますから、許されるならノーマルマップテクスチャは作る方が良いと思いますが、これも一つのアイディアとして読んでみてください。0.おさらいまずはフォントを用意し、フォントのテクスチャを作成します。その後、各文字に合わさるように石のテクスチャを作成し、これをUE4に取り込みます。マテリアルとブループリントを作成し、ブループリントは前回同様、"VertexColor"の値を使ってアニメーション出来る状態にタイムラインを用意しておきます。マスクを作るまずはフォントサンプルと石のテクスチャを形状変化させます。"Lerp"のAとBにそれぞれの値を繋ぎ、"VertexColor"のRを変化用の値としてAlphaに入力します。Mask"に繋ぎます。ここで、ただ2つのテクスチャ間を行き来するだけでは物足りないので、ノイズ用のテクスチャをフォントサンプルのテクスチャと合わせて形状をさらに変化させます。下画面内の場合、"Add"の先にノイズテクスチャが繋がっています。その強度を調整する値として"VertexColor"のGをここでは使用します。表面の見た目を作るR・G・Bにそれぞれ違うノイズを割り当てたテクスチャを使って、表面を作ります。このままでは白黒の情報なので、色ノードを足して後で調整できるようにします。石の中を表現するParallaxを利用して石の中間層を表現します。疑似的に奥行きを見せる事の出来るBumpOffsetを使い、結果をノイズテクスチャに繋げます。傾きに応じた色の変化を作る見る角度に応じて色が変化するように、"Fresnel"から出力された情報を元に色を振り分け、先に作成した表面の色と掛け合わせます。色を付ける2で作成した表面と3で作成した内部、4の角度に応じた色のノードをここで合わせ、その結果を"BaseColor"に繋げます。今回はフォントと石の色をそれぞれ変えたいので、フォントの明色・フォントの暗色・石の明色・石の暗色、この四つの色を用意し、それをなめらかに変化させる為に”Lerp”で繋ぎます。石の中にある光を表現するもう1つParallaxを利用して石の内部で光が揺らめいているような表現を作ります。"Panner"を使います。この計算された結果は"EmissiveColor"に繋げるのですが、まずは次の工程で色を加えます。色を付ける先に作成した光の揺らめきに色を加え、強度を調整します。角度によって光の強弱を変化させ、傾きが大きいと光が見えないようにします。形状に応じて光の強度を変化させる為、値を入力して調子出来るようにします。角度による光の調整は"Fresnel"を用いて、テクスチャがカメラに直面している時は白を返し、傾きが大きい時は黒を返すようにします。"Multiply"の先は"EmissiveColor"に繋げます。立体感を作るこのままではぺらっぺらの平面にしか見えないので、ここで疑似的な立体感をノーマルマップで作ります。出来るならノーマルマップテクスチャを用意した方が良いのですが、ここは限界にチャレンジして、マスク用のテクスチャを利用します。"NormalFromHeightmap"にそれぞれのテクスチャを繋げ、これも"Lerp"で切り替えられるようにします。ブループリントで最終結果を確認するブループリントでテキストを確認します。作成したマテリアルを割り当てて、"TextRenderColor"の数値を変化させると、形状が変化するはずです。以上、フォントシェーダの作り方でした。今回は、ハガレンやりたいな、エリクシルっぽいのが良いなあ、血っぽい石もいいな、なんて妄想から石とテキストの形状変化にしましたが、もちろん工夫次第で石ではなく水や金属も出来るはずです。ノイズを使ったディゾルブを含めたりすると、もっと心躍る魔法的表現が出来ると思います。テキストなんてシンプルで読みやすければイイ!なんて言わず、これを機に色々試してみてくださいね。その2の23日目の記事です。https://qiita.com/advent-calendar/2019/ue4_deux休日じゃない人も休日の人もいかがお過ごしでしょうか。アドベントカレンダー23日目の記事担当、Aquariaです!実は最近ガンダムを見始めて、泥濘にハマった足が抜けなくなり、今回のお題もミノフスキー粒子シェーダにするか結構真剣に悩んだのですが、今日は元のお題通りGUIネタでちゃんと記事を書きます。いうわけで、いきまーす。今回は、石の形をテキストに変える物質変化系シェーダの作り方をご紹介します。Houdiniなどを使用すれば豪華に美しいものが出来るでしょう。状況に応じてもっとチープにしたい事もあるかと思います。今回は疑似的な立体表現を用いてテキストの演出を作る練習をします。必要なのはマテリアル、テクスチャ、フォント、制御するためのブループリントです。フォントテクスチャ”A”と石のテクスチャ”B”を作成し、マテリアルで、AB間の表示を変更できるようにします。この変化をヌルりとさせる為に、グラデーションの幅のあるテクスチャ2種を掛け合わせ、定めた閾値を境に白黒分け、それをマスクとします。魔法石は紙ではなく石ですので、立体的な表現が必要になります。これをノーマルマップを用いてドッキリテクスチャー的に疑似的な立体感や質感を与えます。あとは石の内部で光る物質を疑似的な奥行きで見せ、魔法的な要素を盛り込みます。最後に詠唱を唱える感じでブループリントを使ってテキストを呼び出せば完成です。順を追って説明しなくていいから、具体的な作成方法が見たい、という方はAdvanceへ。field"を利用したテクスチャを使用します。自分の好きなフォントの規約を確認した後、コンテンツブラウザ内にフォントを作成します。field"テクスチャとして出力します。コンテンツブラウザにフォントデータをドロップする。"Offline"に変更。導かれるがままに進むと画面にテクスチャが表示される。