前回の続き。
カーブを描いたゲージを作る場合、できるだけ細かいメッシュで作らないと、テクスチャが歪みます。細かいメッシュは頂点数が多くなるのでUV編集が地獄です。キレイに比率を維持してまっすぐなUV展開をしてくれるスクリプトでも書ければいいのですが、労力の割に使用する機会がが少なそうなのもあって、今までほとんど力業で作ってきました。
今回 Blenderのモディファイア『細分割曲面』を使ってみるとローポリからいい感じのカーブができたので作業時間が大幅に短縮できました。Mayaが手元にないので説明できないですが、Mayaでも同様の操作ができるのは確認しています。
さてさて
完成したメッシュにテクスチャが貼れたのでFBXの形式でエクスポートします。
FBXのエクスポートについては、過去記事を貼っておきます。
UE4でインポートしてみました。
無事エクスポートできたようなので、Blenderを落として今度はテクスチャを仕上げます。
Blenderに持っていったテクスチャを本番用にします。
アルファチャンネルは、上下に黒とグレーを１ピクセルずつ。
右端の部分を拡大するとこんな感じ。
これはポリゴンのエッジをマイルドにする効果があります。
このアルファチャンネルを使った余白がないとポリゴンのエッジがクッキリでます。
拡大している状態だと目立たないですが、解像度が低かったり、頂点数が少ないとエッジのクオリティが悪目立ちすることがあります。
テクスチャにアルファチャンネルが使えない場合は頂点カラーでアルファを仕込むこともあります。Blenderは頂点カラーにアルファ使えないのでちょっと工夫が必要です。
さてさて
テクスチャーのインポート設定ですが、デフォルトのままだとうまくいかないので変更します。
ピクセルが荒れてほしくないのでリッチな User Interface2D を選択。
UIでミップマップは不要なので、 No MipMaps
今回テクスチャを目いっぱい使ってて、UVスクロールする範囲がテクスチャの外まではみ出しているので、タイリングメソッドを Clamp にしておく必要があります。
テクスチャをインポートできたら、マテリアルを作っていきます。
コンテンツブラウザのテクスチャアセットのアイコンの上で、右クリックしてCreate Material するとラクチンです。出来立てホヤホヤはこんな状態。
UI用に設定を変更します。
半透明を使用するので、Blend Mode を Translucent に、
光源計算しないので、 Shading Model を Unlit にします。
あと、忘れがちなのが、Apply Fogging。
フォグもいらないので外します。
設定が変わると、マテリアルのピン構成が変化するのでつなぎ直します。
この状態でメッシュにセットしてみます。
先にインポートしてあったメッシュのエディタを開いてセットします。
こんな感じになりました。
これをゲージらしく増減できるようにします。
マテリアルを以下のように組みます。
左端のノードが、Scalar Parameter Value ノードです。ブループリントから値を受け取ることができます。
OneMinus（1-x）ノードで値を反転しています。これは、0 の時にゲージが満タンで、1.0 の時に空っぽになるのを逆にするためです。
AppendノードのAとBは、それぞれ UとV で、Uが水平方向、Vが垂直方向です。
では、ブループリントを作ります。
まずは、メッシュをコンポーネントとして追加します。
緑の Add Component ボタンを押して、Static Mesh を選択します。
そのままだと空っぽなので、
Detailsタブから、作ったメッシュをセットします。
マテリアルをここで付けることもできます。
今回は Dynamic Material Instance にするので、マテリアルの有無は無視できます。
グラフのタブを Constuction Script に切り替えて、以下のようにつなぎます。
上図は Dynamic化するマテリアルを直接セットしてますが、すでにメッシュにマテリアルがセットされている場合はGet Material ノードを使うこともできます。
ちなみに Dynamic Material Instance の語順が気になるところですが、公式のドキュメントには括弧書きで MID としているので、右端の変数名 は MIDで始めてます。
以下キャプチャして抜粋。
Instanced Materials | Unreal Engine
グラフのタブを EventGraph にして、新しく Float型の変数を２つ用意します。
一つはカスタムイベントにつないで、外から受け取るようにします。
このブループリントでは「UI表示」が主な仕事としているので、ゲージの長さを計算するようなものはありません。値を受け取って素直に表示するだけにします。
ひとまず受け取る値は 0.0 ～ 1.0 を想定。1.0＝100%で満タンという仕様です。
ゲーム開発ではゲームバランスの調整が理由で体力の上限はよく変動します。成長要素があればプレイ中に変動します。なので、そのあたりはゲームシステムの方でプログラマに集約、管理してもらうのが無難です。
で、受け取った値をゲージに反映する部分はこうなります。
素直に反映するだけだと面白くないので動きを入れてます。簡単なイージングです。
処理負荷的に渋い顔されたら、さっきのカスタムイベントでこうすればOKです。
ブループリントは完成です。
ワールドで確認します。簡単な方法は ゲージのBPをワールドにドロップして直接置いてしまう方法です。UIなので実際には誰かに Spawn してもらう方法になるかと思います。
今回は直接置きました。
レベルブループリントを開いて編集します。エディタのBlueprintsボタンから選択。
ワールドアウトライナからゲージのBPをドラッグ＆ドロップします。
この青いピンからドラッグして、中のカスタムイベントを探します。
検索フォームで、call ってすると、関数とイベントを候補として絞り込むことができます。実はエンジンの言語設定を英語にしている最大の理由がこれです。検索キーワードを１個覚えるだけです。
日本語環境だとこれができないので結構ストレスに感じるのは私だけ？
ショートカットキーも使うからいちいち入力モード切り替えるの面倒だし・・・
で、関数を取り出してつないだら、Input ノードをつなぎます。
Random Float in Range ノードは処理が走るたびに、指定した範囲で乱数を発生させてくれます。
コンパイルして、再生してみましょう。
しーん・・・
カメラに映るように調整したはずなのに・・・。
実はこれ変数の初期値が 0.0 になっているからです。
ゲージが満タンから開始するには、変数に初期値を入れておきます。
いろんな入れ方があるのですが今回は、レベルBPの方で入れることにします。
再生してみると、
ちゃんと出てきました。
スペースキーを叩いてみましょう。
うまくいったようです。
30fpsでGIF化したのでちょっとぎこちないけど、実際はもう少し滑らかに動きます。
以上で完成、といっても毎度のことながら、モックアップ的な作りですみません。
《後編》はここまでにしようと思いますが、このままだとちょっと物足りないので、次回《おまけ編》を書こうと思います。
ではでは
ステキなゲージライフを！
