Labo Aquaria

UE4 is my life style.
Here is the Labo I show my creation with UE4 and Oreo...
フォントシェーダーで遊ぼう
0

    Happy holiday! How's it going guys?

     

    この記事はUnreal Engine 4 (UE4) Advent Calendar 2019 その2の23日目の記事です。

    https://qiita.com/advent-calendar/2019/ue4_deux

     

    休日じゃない人も休日の人もいかがお過ごしでしょうか。

    アドベントカレンダー23日目の記事担当、Aquariaです!

    実は最近ガンダムを見始めて、泥濘にハマった足が抜けなくなり、今回のお題もミノフスキー粒子シェーダにするか結構真剣に悩んだのですが、今日は元のお題通りGUIネタでちゃんと記事を書きます。

    というわけで、いきまーす。

     


     

     

     

    「古の魔法石、契約の名の元に力を示せ!変幻!」

    「フォントシェーダーで遊ぼう」

    今回は、石の形をテキストに変える物質変化系シェーダの作り方をご紹介します。

    勿論Houdiniなどを使用すれば豪華に美しいものが出来るでしょう。

    ただ、状況に応じてもっとチープにしたい事もあるかと思います。今回は疑似的な立体表現を用いてテキストの演出を作る練習をします。

     

    必要なのはマテリアル、テクスチャ、フォント、制御するためのブループリントです。
    フォントテクスチャ”A”と石のテクスチャ”B”を作成し、マテリアルで、AB間の表示を変更できるようにします。この変化をヌルりとさせる為に、グラデーションの幅のあるテクスチャ2種を掛け合わせ、定めた閾値を境に白黒分け、それをマスクとします。

    さらに、魔法石は紙ではなく石ですので、立体的な表現が必要になります。これをノーマルマップを用いてドッキリテクスチャー的に疑似的な立体感や質感を与えます。あとは石の内部で光る物質を疑似的な奥行きで見せ、魔法的な要素を盛り込みます。最後に詠唱を唱える感じでブループリントを使ってテキストを呼び出せば完成です。

     

     

    順を追って説明しなくていいから、具体的な作成方法が見たい、という方はAdvanceへ

     


     

    1.フォントテクスチャを作る

    まずはフォントの中でも"A signed distance field"を利用したテクスチャを使用します。自分の好きなフォントの規約を確認した後、コンテンツブラウザ内にフォントを作成します。この時、フォントは"A signed distance field"テクスチャとして出力します。

     

    1. コンテンツブラウザにフォントデータをドロップする。
    2. "Details > Font > Font Cache Type" の "Runtime" を "Offline"に変更。導かれるがままに進むと画面にテクスチャが表示される。
    3. "Detail > Offline Font > Use Distance Field Alpha" をOnにする。
    4. Assetメニュー内の "Reimport NewFont" を選択する。
    5. ”Export”を選択して出力する。

     

     

    2.石のテクスチャを作る

    次に作成するのは石のテクスチャですが、それぞれの文字に応じた石を用意する為に、先に作成したフォントテクスチャを複製し、それを加工して石の形を作ります。UE4で表示されるテキストはフォントデータの ”Characters” のUVで設定された矩形で切り取られていますので、それぞれの絵はそれぞれの矩形内(下画像の黄線)に収める必要があります。

     

      >>

     

     

     

    3.フォントと石の切り替えの仕組みを作る

    マテリアルに移りましょう。先に作ったテクスチャを呼び出し、ノードを繋いでいきます。

    後にブループリントで値を調整する為に、"VertexColor"を利用します。フォントから石への変化はアニメーション出来るように”Lerp"を利用します。この結果を調整した後、マスクとして使用します。

     

     

    LerpのAlphaの数値を変えると形状変化を確認できるはずです。

     

     

     

    4.立体感を出す

    ノーマルマップも3と同じように"Lerp"を用いてアニメーションさせます。この時、入力される値を3と同じにし、ノーマルマップは3のマスクと連動させます。(VertexColorのR)

     

     

     

     

    5.パララックスで疑似的な奥行きを作る

    このままだと味気ない石にしか見えません。そこで石の内部を作成しましょう。平面に対し疑似的に奥行きを与えるにはパララックスマッピングが挙げられます。これは視線と法線ベクトルの変化に従ってテクスチャ座標のずれを生じさせます。疑似的に奥行きのある絵と表面の絵を重ねる事で厚みを出します。さらに、テクスチャに対しアニメーションを付けたいので、UVの移動を使います。

    今回はパララックスマッピングには"BumpOffset"を用いて奥行きを出し、"Panner"でUVを移動させます。この画像と任意の色を掛け合わせて、BaseColorに入力します。

     

     

    ノイズが少し奥の方に表示されているように見えます。

     

     

     

    6.テキストを確認する

    ブループリント上でテキストを表示し、先に作成したマテリアルを入れて、挙動を確認します。

    タイムラインを使ってキーフレームを作成し、任意のキーを押すとテキストレンダーカラーの値が動くようにノードを繋ぎます。

    1. "Add Components > TextRender"
    2. "Details > Text > TextMaterial" に作成したマテリアルを入れる。
    3. "Details > Font" に任意のフォントを設定する。
    4. "TextRenderColor"を操作して、テキストと石のテクスチャが移り変わるか確認する。
    5. "Timeline"を作成し、Colorの値を作成、0-1の値を行き来するようにキーフレームを打つ。
    6. "SetTextRenderColor"と"Timeline"を繋ぎ、アニメーションさせる。

     

    | UE4 | 14:42 | comments(0) | - |
    CALENDAR
    S M T W T F S
     123456
    78910111213
    14151617181920
    21222324252627
    282930    
    << June 2020 >>
    SELECTED ENTRIES
    CATEGORIES
    ARCHIVES
    モバイル
    qrcode
    PROFILE