みつまめ杏仁

アンリアルエンジン(UE4)でGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。

オブジェクトをグリッド状に並べる

 毎日の暑さ辛いですね。近所で稲の葉先が黄色くなってる畑をいくつか見かけました。この熱エネルギーをやる気に変換するマシンか何かあれば、と思ったけど、やる気に溢れすぎて炎天下に飛び出したり、汗だくで何やら叫びつつ暴れたりする人のイメージが沸いてしまい、危険なマシンになりそうだったのでそのような妄想は忘れることにします。だれか早くクーラードリンク開発してください。

 さてさて、ぷちコンのお題が発表されましたね。今回は10回目ということで「ぷち」だそうです。私も何か作ってみようかと思い立ったので、いろいろ試していくことにしました。形になるかわかりませんが。

 

 

何となくタイルを並べてみることにしました。

プロジェクトのテンプレはThirdPersonです。

f:id:hiyokosabrey:20180812110240j:plain

いきなり動き回れて、カメラぐりぐり回せるので楽しいセットですよね。

このフロアをスッキリ片づけます。階段だけ残しました。

f:id:hiyokosabrey:20180812112657j:plain

最初から置かれているメッシュたちは、Mobility設定が、Static になっているので、ワールドから削除しても、床に影が焼き付いています。

f:id:hiyokosabrey:20180812111137p:plain

Buildツールの Build Lighting Only を実行すると、影が再計算されます。

f:id:hiyokosabrey:20180812112938j:plain

で、床のサイズと階段の場所とスタート位置を調整。

f:id:hiyokosabrey:20180812110708j:plain

レイマンの載ってる床はCubeを平たくして階段の下に置いています。そのままだと馴染まないので、階段と同じマテリアルをアサイン。

 

 

この床にブロックを並べてみようかと。

並べるブロックは生のStaticMesh だけだと面白くない(いろいろ遊びを仕込みたい)ので、Blueprint Actorにします。新しく Actorクラスのブループリントを作成。

f:id:hiyokosabrey:20180812114352j:plain

空っぽなので、AddComponent で StaticMesh を追加。

DetailタブにあるStaticMeshから、適当なキューブメッシュをセット。

f:id:hiyokosabrey:20180812114817j:plain

Viewportで確認しながら、サイズを調整したらひとまず完成。

f:id:hiyokosabrey:20180812114918j:plain

 

これを並べるためのブループリントを用意していきます。

新しく、Actorクラスのブループリントを作成。

並べるための関数を作ります。↓前半部分。

f:id:hiyokosabrey:20180812120535p:plain

引数(Inputピン)は Int型と、Float型の2つ。とりあえず 正方形に並べるので1辺ぶんの数と、配置間隔。

開始位置でいろいろ計算してるのは、センタリングするためです。

ForLoopで機械的に並べていくので、最初の起点となる座標さえ判ればあとは繰り返し処理だけでOKです。

例えば、ヨコに5個並ぶ場合、

f:id:hiyokosabrey:20180812135932p:plain

並べたい数 5 から 1つ減らした数が、オブジェクト間のスキマの数。これにスキマの距離を掛けると、端から端までの全体の距離になります。これの半分の距離を、中心から引いた場所が 起点 になるのです。

これでどんな数でもセンタリングできます。

 

 グリッド状に並べるのですが、引数は1辺の最大数を受け取って処理します。例えば5という数字を受け取ったら、 5x5 = 25 です。 UE4の ForLoopは LastIndexで指定した数字までカウントして処理します。0ゼロスタートだと、0~24 が正解。

f:id:hiyokosabrey:20180812141846p:plain

f:id:hiyokosabrey:20180812142022p:plain

コードで書くと

for ( int i = 0; i <= 24; i++ ) {   }

です。

 

for ( int i = 0; i < 25; i++ ) {   }

 だったらいいのに・・・

 

どうせ First Index のピンが空いてるんだから、 そこを 1 始まりにすればいいじゃん。

と思われるかもしれません。確かに回数的には問題ありません。(恐らくゼロ始まりに馴染みに無いノンプログラマ向けの仕様だと思います。Epicの優しさ?)

でも、このゼロ始まりの方が、この後のループ処理に便利なのです。

 

後半部分はこんな感じ。

f:id:hiyokosabrey:20180812143237p:plain

まずポジションの計算をするので、1 始まりだと、ズレたところから始まってしまうのです。

 

右端の Spawn Actor From Classノードのは、先に用意してあった、キューブの入ったブループリントをセットしています。

 

 

関数に並べる仕事をさせてみる。

関数にパラメータを渡して呼び出すと並べてくれます。

f:id:hiyokosabrey:20180812143649p:plain

Event Begin Play につないだら、コンパイルして保存。

ワールドにこのブループリントをドラッグ&ドロップします。

f:id:hiyokosabrey:20180812144305j:plain

再生してみます。

f:id:hiyokosabrey:20180812143954j:plain

成功です。

ファンクションキーの F8 を押して、それぞれのオブジェクトのポジションを確認してみると計算が間違ってないかどうか確認できます。

 

 

配置が完成したみたいだけど。

問題なく並ぶことが分かったので、もう少し数を増やして、あと上面にもう一枚板ポリを載せたりしてできたのがこれ。

f:id:hiyokosabrey:20180812144848j:plain

9x9=81個 並んでます。

上手に「ぷ」→「ち」の順に繰り返し踏んでいくアクションゲームに、なったらいいな。

f:id:hiyokosabrey:20180812145710j:plain

 

というわけで、今回はこれまで。

ではでは

ステキなセンタリングライフを!

 

 

 

 

 

 

テキストのフェード演出を作ってみる

OCTOPATH TRAVELER遊んでます。面白いですよ。「オクトパス」とカタカナで書くと「octopus」だと間違われるかもしれないので、あえてアルファベットで書きます。ということを語りたくなるくらいオススメしたくなるRPGです。

ゲーム中に挿入されるイントロ表現をUMGで作ってみたくなったので試してみることにしまた。4.20もインストールできたし。

 

構造としては、

1行分のWidgetを用意。フェードのアニメーション付き。

文字列を行ごとに分解して行ごとのWidgetに託してフェードを管理するWidgetを作る。

以上の2つでできそう。

フェードは、アルファチャンネルマスクをUVスクロールしようか迷ったけど、結局NoTextureでやってみることにしました。

 

 マテリアル

フェードのキモとなる部分です。テクスチャは使ってません。

f:id:hiyokosabrey:20180721193338p:plain

 左端のScalarParameterノードの値を -1.0 ~ 1.0 にするとグラデーションが動きます。

f:id:hiyokosabrey:20180721203248p:plain

左から白い部分が増えてきて最後は真っ白になります。1-x(OneMinus)ノードで左右の向きを逆にしています。Clampは 0.0 ~ 1.0 の範囲を越えた値をカットして揃えます。

マテリアルは完成です。

f:id:hiyokosabrey:20180721223655p:plain

 

1行分のWidget

まずはテキストブロックを一つ。左上に配置します。

f:id:hiyokosabrey:20180721195041p:plain

Is Variable と Size to Content にチェックを付けて、用意したマテリアルをフォントマテリアルとしてセットします。

f:id:hiyokosabrey:20180721195458p:plain

 

次にブループリント

f:id:hiyokosabrey:20180721215427p:plain

変数2つを初期化して、テキストブロックにセットしたマテリアルを、ダイナミック化します。このノードをつなぐと、テキストブロックにセットしてあったマテリアルが、マテリアル インスタンス ダイナミック に差し替わります。

マテリアルは通常スタティックなものとして扱われますが、ブループリントから動的にアクセスする場合は、ダイナミックな状態にする必要があるのです。

 

問題発生の話

はじめ、この初期化処理を Event Pre Construct につないでいました。

 Event Pre Construct はコンパイルした際に、実行されるイベントです。

(Add to Viewport  した際も処理は走ります)なので、コンパイルした瞬間にフォントマテリアルは差し替わってしまうのです。

f:id:hiyokosabrey:20180721205046p:plain

これに気づかずに進めていて、ふと Font サイズを調整してコンパイルし、確認のため再生してみると、なんと、すべてのテキストが一斉にフェードするではありませんか。

一旦下図の状態でコンパイルしたあと、

f:id:hiyokosabrey:20180721210612p:plain

再び 戻してコンパイルすると。

f:id:hiyokosabrey:20180721210911p:plain

Before の状態に戻れば 問題ないのですが、Appearance の Fontセクションをいじってコンパイルしていると、最初にセットしたマテリアルに戻らなくなります

f:id:hiyokosabrey:20180721211307p:plain

まだ全部を作ってないので、確認するのは難しいですが、仕様のようなバグのような挙動だったので、一応書いておくことにしました。

 

とりあえず

Event Pre Construct につなぐのはやめました。

カスタムイベントを用意していきます。まずテキストを受け取るイベント。

f:id:hiyokosabrey:20180721212334p:plain

つぎに、フェードを開始するイベント。

f:id:hiyokosabrey:20180721212454p:plain

処理自体はTickで動かすのでフラグを立てるだけです。

で、Event Tick このブーリアンの値をチェックします。

f:id:hiyokosabrey:20180721213330p:plain

文章の長い短いに関係なくフェードの時間を均一にしてしまうと、見た目にとてもテンポが不自然になるので、テキストブロックの長さを元に速度調整用の値を作ってDeltaTimeに掛け算することでブーストすることにしました。短い文章ほど、値の変化が大きくなって短時間にフェードが完了するしくみです。

右の続きの部分はこちら。

f:id:hiyokosabrey:20180721215408p:plain

 フェードの最終値は -1.0 なので、それより大きい状態のときは、素直にフェードの値を更新。-1.0よりも小さくなったら終了なので、Tickの処理を止めるために最優先でフラグを折ります。そして-1.0以下の行き過ぎた値をなくすために、きっちり-1.0にします。

右の端は、イベントディスパッチャーです。

これを用意して呼び出してやることで、自身のフェード完了を親のWidgetに通知します。

f:id:hiyokosabrey:20180721215546p:plain

これで完成。

f:id:hiyokosabrey:20180721223633p:plain

 

全てを表示するWidget

キャンバスの中央にテキストを格納するVerticalBoxパネルを配置します。

f:id:hiyokosabrey:20180721223857p:plain

どんな行数でも上下方向にセンタリングさせたいので、アンカーは

f:id:hiyokosabrey:20180721224445p:plain

ひとまず幅は1280になるようにします。

f:id:hiyokosabrey:20180721225001p:plain

お試しならVerticalBoxがあればOKですが、見た目に雰囲気を出したいので、画面全体の下敷きとフェードインのアニメーションもつくりました。

f:id:hiyokosabrey:20180721225601g:plain

 

次にブループリントを編集します。

カスタムイベントを追加して、テキストを受け取って行ごとにバラす処理です。

f:id:hiyokosabrey:20180721231407p:plain

分解判定用文字列の『デリミタ』には 改行を示す 文字がひとつ入っています。

改行文字は Shift + Enter で入力できます。

配列に入れたら、その数ぶんループ処理を回します。

f:id:hiyokosabrey:20180721232212p:plain

 CreateWidget した結果をVerticalBoxの子供に追加。表示するテキストを渡します。

全ての行(Widget)を追加し終えたら、ForEachLoopノード Completeピンから伸ばして画面全体のフェードイン開始です。

f:id:hiyokosabrey:20180721232824p:plain

 フェードインのアニメーションが再生し終えてから、行ごとにフェードを開始するので、アニメーションの終了を待つ必要があります。そのためのノードが、Get End TimeSet Timer by Event ノードのコンビネーションです。

Set Timer by Event を使わずに アニメーションの Event Track を使う方法でも大丈夫ですが、個人的にSet Timer ~ を使う形のほうが、あとからブループリントを見たときに流れが追いやすいのでおススメです。 アニメの尺が変わっても自動で対応してくれます。

Event Track の方は尺が変わってもついてこないのと、呼び出す関数やイベントの名前を文字列で入力するのでタイプミスできないのが気を遣うのであまり好きになれません。このイベントいつ誰が呼んでるの?となった時も調べにくいです。

 

つぎに各行のフェード開始処理です。新しくカスタムイベントを追加して、Set Timer by Event ノードのEventピンとつなぎます。

f:id:hiyokosabrey:20180721235117p:plain

 VerticalBoxパネルに追加したWidgetはIndex番号で管理されていて、番号を指定して取り出すことができます。取り出したままでは使えないので、キャスト(型変換)してやります。追加したときのWidgetがその変換する型になります。

f:id:hiyokosabrey:20180721235709p:plain

「さぁフェードするのじゃ!」と関数を呼び出したあとで、「終わったら連絡するように」というのが右端のバインドノードです。イベントディスパッチャーを作っておけば、bind で検索すると出てきます。

で、終了の連絡を受けたら次の処理。

f:id:hiyokosabrey:20180722000622p:plain

順番にフェードするためのカウント用の変数を一つ加算して、次に進めるかどうかの判定をしています。まだ次があったら、アンバインド Unbind して、最初のイベントを呼びます。アンバインドは、終了通知が1回でいいのと、一度通知を受ければ連絡待機の処理が要らなくなるのが理由です。

f:id:hiyokosabrey:20180722002050p:plain

 

基本部分はこれでできたので、オマケの部分を作ります。

f:id:hiyokosabrey:20180722002014p:plain

せっかちな人向けの処理です。ゲームにも入ってました。

Wd_Sentence のGetノードは、キャストしたタイミングのやつが入ってるので、常にフェード中のWidget が格納されています。

 

次に、テキスト全部を消してVerticalBoxをキレイにするイベントです。

ただ消すだけだとかっこ悪いので、フェードアニメーションを付けます。

VerticalBoxパネルのビヘイビアにRender Opacity というとても嬉しいパラメータがあります。

f:id:hiyokosabrey:20180722002824p:plain

これを 1.0 から 0.0 に下げると簡単にフェードアニメーションが実装できます。

子供として追加した個々のWidgetにフェードアウトを用意しなくてもいいのでとても便利です。

このフェードアウトのアニメーションを作ったら、カスタムイベントで再生するようにします。

f:id:hiyokosabrey:20180722003346p:plain

再生が終わって画面から見た目に消えたら、真の消去を行います。Clear Children という物騒なノードが用意されています。

 

最後に変数リストを載せておきます。

f:id:hiyokosabrey:20180722003939p:plain

完成です。

f:id:hiyokosabrey:20180722004032p:plain

 

再生して確認

テスト再生なので、いつものように便利なレベルブループリントから行います。

レベルブループリントは以下。

f:id:hiyokosabrey:20180722004348p:plain

空行には半角のスペースが入れてあります。

 

では、いざ再生。

スペースキーで表示開始、[B]キーでフェード終了、 [N]キーで全消し。

 

f:id:hiyokosabrey:20180722005129j:plain

f:id:hiyokosabrey:20180722005142j:plain

f:id:hiyokosabrey:20180722005155j:plain

なんとか形になりました。

 

ブログに動画を直接貼れないので、あとでTwitterの方にアップしてみます。

(解像度が心配だけど・・・)

 

ということで今回はここまでです。

 

OCTOPATH TRAVELERUE4で開発されているので、UE4で真似できるはず。そう思いながらUIを触ってます。今のところ、「え?これどうやってるの?」というのは見つけてないですが、そのうち出会ったら、また目コピーに挑んでみるかもしれないです。

 

ではでは

すてきなテキスト演出ライフを!

 

UMGでコンパス表示を作ってみる

ふと気がつくと最後の更新から1ケ月が過ぎようとしててびっくりです。近所ではセミが鳴き始めました。ノートPCのファンに問題があるようでUE4を起動すると3秒と触れないくらい熱くなるため、ミニUSBファン(コンセント接続)と扇風機で冷やすのですが、マウスを握る腕の方が冷えすぎて辛い今日この頃です。

さてさて、今回はシーズン5も大好評の  Fortnite からネタをもらうことにしました。

f:id:hiyokosabrey:20180712230538j:plain

画面上部の方向計をUMGで作ってみます。UE4で作ってるのでUMGに違いない。はず。

f:id:hiyokosabrey:20180712230653j:plain

スクショを取って解析しました。1920x1080で取って、Photoshopでフォントと目盛りを合わせてみて、まずは N ~ S まで(360度分)を横幅2048pxの画像に並べてみた。

f:id:hiyokosabrey:20180712231757p:plain

コンパスは方向を指すので、ぐるぐるとループするようにWrap(ラップ:テクスチャが繰り返される)するはず。

残りの空白をみてピンときました。ループするので、重複部分が入りそう。

 

f:id:hiyokosabrey:20180713233822p:plain

 

そこは画面の表示サイズをみて確信しました。表示幅もだいたい 512pxの様子。

端がアルファで消えてるので確定はできませんけどね。

目盛りも360度分 でちょうど 1536px、 ということは 75% で残りの 25% は 512px と実にキリがいい。

そこでテクスチャサイズを、横 2048px、表示幅512px じゃないかと想定。

 

で、できたのがこれ。2048x32px

f:id:hiyokosabrey:20180712232241p:plain

左端から512pxの幅を表示した際に 0度(北)が真ん中に来るようにしています。

Nが左端から256pxの位置です。

ちなみにフォントは Yu Gothic UI (游ゴシック)にしたらピッタリな感じです。

 

あと、両端がフェードして消えているので、マスクテクスチャも用意します。

f:id:hiyokosabrey:20180712232803p:plain

 

これをUE4にインポートします。

UE4のプロジェクトはサードパーソンのテンプレで進めます。

 

2のべき乗でテクスチャ作ると自動でMipMap作られる設定になっているので、必ず、NoMipmapsにします。

 

マテリアルはシンプルです。横方向にスクロールするだけです。

f:id:hiyokosabrey:20180712233722p:plain

マスクテクスチャは、グレースケールで作っているので、Rチャンネルのピンから取り出して数字テクスチャのアルファチャンネルと乗算しています。

 

表示する大きさは横が512pxなので、TexCoord ノードの中の設定を変更します。

f:id:hiyokosabrey:20180712233922p:plain

 

このマテリアルを、UMGのImageパーツにセットします。

f:id:hiyokosabrey:20180712234526p:plain

ここまでは順調でしたが、ふと、どんな値を受け取るのか気になったので、チェック用のTextBlockを置くことにします。上部の◆は画面中央を示す目印。

f:id:hiyokosabrey:20180712235041p:plain

 編集モードをグラフに移して、カスタムイベントを用意します。

f:id:hiyokosabrey:20180712235359p:plain

受け取ったRotateをBreake Rotator で各軸毎にバラして、Z軸の回転値を表示するように チェック用のTextBlockに対して Set Text します。

Widgetの準備はできました。

 

つぎにThirdPersonCharacterのブループリントを開きます。

マネキン君を選択した状態で、

f:id:hiyokosabrey:20180713234916j:plain

ワールドアウトライナからハイライトされてるやつをチェック。

右端の Edit ~ をクリック。

f:id:hiyokosabrey:20180713235114p:plain

方向を変更している関連のイベントを探します。 

 

 キー入力を受けてカメラを回しているので、それっぽいやつ・・・

Movement inputのコメントを発見。Get Controll Rotaton ノード、そこからZ軸の値だけを取り出してる。

f:id:hiyokosabrey:20180713235501p:plain

よし、この値を確認してみようということで、PrintStringノードでチェックするとどうやら当たりのようです。

Widgetにこの値を流せばいけそうです。

 

HUDクラスのブループリント

ActorクラスのブループリントからHUD表示のWidgetに値を渡す場合、今回はHUDクラスのブループリントを作って対応します。

f:id:hiyokosabrey:20180719002358p:plain

HUDクラスのブループリントを作ったら、

ContentThirdPersonBPBlueprints の中にある

ThirdPersonGameMode を編集してセットします。

f:id:hiyokosabrey:20180719001950p:plain

f:id:hiyokosabrey:20180719001632p:plain

 

これでHUDクラスBPにアクセスが可能になります。

 

作ったHUDクラスBPを編集して、Widgetを表示するようにします。

さらにカスタムイベントを用意して、マネキン君からの呼び出しに応えます。

f:id:hiyokosabrey:20180714001710p:plain

HUDクラスBPの編集は以上です。

 

マネキン君のBPに戻ります。

ここで、HUDクラスBPを経由してコンパスのWidgetに値を送ります。

まず Event BeginPlayを取り出して、HUDクラスBPを変数化しておきます。キャストノードからPromote to Variable すると簡単です。

f:id:hiyokosabrey:20180714002541p:plain

あとは、Movement input 処理の最後にHUDクラスBPに用意したカスタムイベントをつないで値を渡します。

f:id:hiyokosabrey:20180714002938p:plain

ここで確認してみます。

f:id:hiyokosabrey:20180714072733j:plainf:id:hiyokosabrey:20180714072743j:plain

f:id:hiyokosabrey:20180714072759j:plainf:id:hiyokosabrey:20180714072808j:plain

マウスでカメラを回すと、0~360の範囲で値が変化しています。影の向きがひねくれていなければ南中で180°です。

方位 - Wikipedia で調べたら、360°式というやつですね。

 

これをテクスチャのUVオフセット値にしてやればよさそうです。

 

f:id:hiyokosabrey:20180714073520p:plain

 

受け取った値を 360で割ると 0.0 ~1.0 の値にできます。

UVの移動範囲は 0.0 ~ 0.75 なので、 Lerp ノードで線形補間します。

 

f:id:hiyokosabrey:20180714073854p:plain

これで確認します。

f:id:hiyokosabrey:20180714074421j:plainf:id:hiyokosabrey:20180714074429j:plain

うまくいってます。完成です。

 

f:id:hiyokosabrey:20180714080533g:plain

 

テクスチャのUVスクロールで表現してみましたがいかがでしょうか。

実際には 特定の対象の方角を示すマーカーも一緒に動いていることがあるので、テクスチャを使わない方法かもしれません。

 

 HUDクラスのブループリントを使うあたりはちょっと面倒かもしれないですが、GameModeがセットされていればレベル遷移しても安定してアクセスできるし、HUD周りの管理も集約できるので良いと思うのですが、他にもっといい方法やオススメなどありましたら、コメントやTwitterで教えていただけると嬉しいです。

 

 アクションゲームのHUDなので、なるべく負荷がかからないつくりにする必要があります。GPUの描画の負荷とCPUの負荷、それぞれどこまで許容するかはじっくり検討することになります。

 HUDで表示されているものは、ひとつひとつは小さくてすぐ作れそうに思われがちですが、ゲーム中のUI表示ほど難しいものはないと思います。世の中のアプリUI界隈では知見が共有されることも多くて楽しそうですが、あまりアクションゲームのHUDに関しては情報交換が活発じゃない気がします。 あくまでも想像ですが、HUDはデザインよりも機能性が重要視されるので、開発時はゲームプランナーやプログラマが主体となって実装されていくことが多いのがその理由かと思います。だいたいの仕様が見えてきてそろそろ体裁を整えてレビューしようとなった段階でデザイナーが呼ばれるのかなと。

 

 というわけでみなさん、どんどん目コピーしましょう!

UE4はブループリントの触り方が分かってくれば、いろんなことが試せます。

いろいろ試して経験値が溜まってくればモックアップが自作できるようになります。それが動く指定書になって、プレゼンパワーが一気に上がります。うまくいけば実装に携われるようになります。そうなるとどんどんUIをアレンジしたり表現をリッチにできるかもしれません。

 

ではでは

今回はこの辺で

ステキなHUDライフを!

ちょっと変わった形のゲージをメッシュで作る《宿題編》

E3のトレーラーを見てて、ゲージの長さが可変していたのをみてしまったので、我流ですが対応してみました。

ここでいう可変とは、ゲージの物理的な見た目の長さのことです。成長段階やステータス変化を表現する方法の一つで、長さが比較しやすいゲージを使うタイプをよく見かけます。レイアウト的に余裕が無いとこの方法は使いにくいのですが、ゲージタイプのレイアウトを検討する際は、まず仕様として成長要素を反映するかどうかのコンセンサスを行ってからデザインを進めます。

 

 

まず可変するにあたって、検討したパターンは3つ。

 

①長さの違うゲージのメッシュを何個も用意する

 作るの大変そう。デザインの変更とか成長段階が変則でなければなんとかなるかも。

 

②メッシュそのものを計算でつくる

 動的生成(ロード中とか)とかだとプログラマさんに頼りたい。

 スタティックメッシュなら、MELとかPythonスクリプトで作ってもいいかも。

 

③同じ一つのメッシュで可変させる

 すでに作ったのがあるし、頂点シェーダーでなんとかできそう。

 

 

記事にしやすいという理由でに決定。は「よろしくお願いします!」か「オレガンバル!」かのどちらかになりそうなので。

 

③同じ一つのメッシュで可変させるということにしたので、すでに作ってあるやつを改造していきます。

 

全体の長さは前の記事で決めていますが、円周部分の5/4で作ったまま今回はいじらないようにします。

 

それなりに頂点数が多いのと、変な形をしているのですが、触りたい箇所は以下。

f:id:hiyokosabrey:20180616093311p:plain

ですが、

UVスクロールの増減速度を一定になるように一部のメッシュの形状を変えるのは、相当しんどいかと思われます。60fpsでアクションゲームとなると、UI表示で処理負荷が高くなるのは皆が幸せになれません。

なので、このゲージ本体は触らないことにします。

で、

出した結論が、「ゲージではなく後ろの枠を可変にする」です。

f:id:hiyokosabrey:20180616104130p:plain

 

この部分はUVを束ねてしまったとこなので、分離してやる必要があります。

f:id:hiyokosabrey:20180616114700p:plain

 

 というわけでBlender ゴー! (語感がいいので言いたいだけ)

f:id:hiyokosabrey:20180616111226p:plain

 

まず端っこの2頂点だけUVの頂点を移動させます。Gキーは押しながらではなく1回だけぽちっと押すだけです。そしてドラッグで移動したら左クリックで確定させます。

つづけて、

f:id:hiyokosabrey:20180616111854p:plain

 これでメッシュは編集完了。

FBXでエクスポートしてUE4Reimportします。

 

次に、テクスチャを改造します。

f:id:hiyokosabrey:20180616115447p:plain

これもUE4Reimportします。

 

見た目何も変わらなければ、BlenderでのUV編集は成功ということです。

f:id:hiyokosabrey:20180616115818p:plain

 

頂点を動かすためのマスクテクスチャを用意します。

f:id:hiyokosabrey:20180616120610p:plain

最小サイズ、4x4 pixelです。

これを圧縮ありで普通のカラーテクスチャとしてインポートします。

この場合はグレースケールにするより軽くなります。

 

この(頂点を)マスクするテクスチャをメッシュのUVポジションに重ねてみたイメージは下図のようになって、白い部分の頂点のみが可動対象になります。

f:id:hiyokosabrey:20180616134317p:plain

マテリアルを組んでみたのがこれ。

f:id:hiyokosabrey:20180616135039p:plain

長さは、Lengthという名前のScalarパラメータを仕込んでます。

マテリアルの改造は以上。

 

ConsructionScriptで、ゲージ同様にダイナミックマテリアルインスタンスを作って変数化しておきます。

f:id:hiyokosabrey:20180616140146p:plain

 

今回可変ゲージを扱うにあたり、仕様を変更することにします。

レベルBPから、ゲージの長さを 0.0~1.0 の値で受け取っていたのを、2000とか直接の数値で受け取るように変更。

 

そこで

受け取った値を割合に変換するマクロを用意します。getVitalRatioと命名。

f:id:hiyokosabrey:20180616232329p:plain

 Inverse Lerpノードを使うと、渡した値がどの辺にいるか、割合で返してくれます。

 

追記

この Inverse Lerp は Ver 4.19 から バグフィックスされて Normalize to Range に生まれ変わりました。

f:id:hiyokosabrey:20180712003932p:plain

 

次に

前回 Event BegnPlay につないでいた関数 initGauge をグラフから消します。

f:id:hiyokosabrey:20180616231657p:plain

そしてこの initGauge関数を編集します。

 外から呼び出してもらう形にします。

f:id:hiyokosabrey:20180616233114p:plain

初期化のタイミングはゲージの表示開始時か、ゲージの長さが変化したときになると思われるので、この関数内で枠の長さを変更するパラメータ Length に値を入れて枠の長さを確定させます。ここは仕様によりますが、いったんゲージ本体も満タンになるようにもらった値に合わせて長さを変えています。

 

枠の長さを変えるために、Length に入れる値として、 constFrameLengthというFloat型の変数を用意しています。

f:id:hiyokosabrey:20180617093625p:plain

定数(変化しない値)として扱うので、初期値(Default Value)をあらかじめセットしてあります。どんな値かというと・・・

 

枠のメッシュは、0 で一番長い状態です。右方向(X軸でプラス)に移動するようにマテリアルを組んでいるので、Length には正の数値が入ります。

実際のメッシュのサイズも関係してますが、直線部分をBlenderで引き延ばすときに計算した値がここで役立ちます。

f:id:hiyokosabrey:20180607234547p:plain

UE4で100倍スケールでインポートしていたのを思い出したので、

100倍して -1199.94。

右に動かすので マイナスの符号を消す感じで、パラメータにすると 1199.94。

f:id:hiyokosabrey:20180617085122p:plain

Float型なので入力すると勝手に若干のブレが出ますが、このまま進めてみます。(画面で確認して気になるようだったら改善を考えよう。)

 

ここまででプレビューしてみたいので、レベルブループリントも編集します。

f:id:hiyokosabrey:20180617093416p:plain

 

f:id:hiyokosabrey:20180616150248j:plain

いい感じです。

表示部分はなんとかできました。

レベルブループリントの 変数 PlayerVital の値を変えてみると、ゲージと枠がちゃんと連動しているのが分かります。

f:id:hiyokosabrey:20180617100413j:plain

 

 

あとは、受け取る値が変わったので、ゲージの減る動きを調整します。

f:id:hiyokosabrey:20180617100735p:plain

NewVital からは 0.5 とかではなく 1250 のような値になったので、マクロを介してマテリアルに値を渡します。

f:id:hiyokosabrey:20180617101421p:plain

ゲージのブループリントはこれでOKです。

 

テスト用にレベルブループリントも少し改造します。

f:id:hiyokosabrey:20180617101717p:plain

 乱数が0.01 ~ 0.1 だったのを 変えているだけです。

テスト用なのでここは好みで。

 

Vitalの 初期設定を 2000 にして試してみます。

f:id:hiyokosabrey:20180617102430g:plain

 

なんとかできた感じです。

 

Twitterで「ゲージの長さ対応は、またそのうち・・・」とつぶやいて宿題にしていたのですが、思っていたより記事の反響があったので、勢いつけてやってみました。

 

「ゲームの数だけゲージがある。ゲージの数だけ仕様がある。」

 

ではでは

まだ見ぬゲージを求めて

ステキなゲージライフを!

 

 

 

 

ちょっと変わった形のゲージをメッシュで作る《おまけ編》

やっぱり下敷きとか枠が無いと完成した感じがしないので作ってみます。

 とその前に、前回の記事で満タンを 1.0 に、空っぽを 0.0 という仕様にしていたので、見た目にゲージが見えないのに、まだ「ある」状態が起こる仕様になっていました。いわゆる「表示バグ」というやつで、プログラマにとって迷惑極まりないやつです。

 修正方法は以下。

f:id:hiyokosabrey:20180610165946p:plain

 テクスチャの端から端までスクロールさせない場合はLerpノードが便利。

f:id:hiyokosabrey:20180610195911p:plain

Lerpノードを使うと受け取る値の範囲は0~1で変わらないので、プログラマに気づかれる前に直せればセーフ!プログラムの修正は不要!

 

Lerpノードの Bのピンにつながっているのは、0.99609375 という値です。(丸められてすべての桁が表示されていません)どこから来た数字かといえば、テクスチャの中のゲージ自身の長さが 510px で、移動量も510px動くと見えなくなるからで、

f:id:hiyokosabrey:20180610194904p:plain

(ちょっと見にくいですが上図の赤い枠がUV頂点の範囲です。)

510をテクスチャのサイズで割るので、 510 ÷ 512 = 0.99609375 というわけです。

なぜ 510 かは、前々回の記事にて書いています。

 

ちなみに、ゲージの長さが 510pxでテクスチャサイズが 1024pxだったりすると、

512 ÷ 1024 になるので、 スクロール範囲は 0.0 ~ 0.498046875 になります。

 

0.0 で満タン、 0.99609375 で消える

これを Lerpノードにセットして、Alapha ピンに入ってくる 0.0 ~ 1.0 によって線形補間の結果が出てくるという訳です。

 

 

 表示バグも直ったので、

まずは簡単な下敷きとして、テクスチャを2枚使う方法を紹介しておきます。

こちらの方が解像度に対してエッジのアルファを調整しやすいのとゲージが無い部分も表示されるのでオススメなんですが、下敷きと合わせたり別のゲージを重ねるのは難しくなります。 

f:id:hiyokosabrey:20180610162441p:plain  ← 8x32pxのグレースケールテクスチャを用意。

Tiling Method は Wrap です。

 

マテリアルの Opacity ピンにつなぐだけです。

f:id:hiyokosabrey:20180610163618p:plain

このようになります。

f:id:hiyokosabrey:20180610163753j:plain

 

背景に来る色によっては見えにくくなるので、やっぱり枠はあった方がいいよねってことで、 ゲージの下敷きと兼用で外側に枠をつけます。 

今回は ゲージのメッシュからフチドリを生成します。

ではさっそく Blender  ゴー!

 

まずゲージのメッシュを複製します。

そして ぐるっと辺を選択したら、

f:id:hiyokosabrey:20180610224012p:plain

選択 > 辺ループ を使うと楽です。あとはShiftキーを押しながら右クリックで追加選択できます。

1周選択できたら「個々で押し出し」します。

f:id:hiyokosabrey:20180610223319p:plain

カメラを斜めから見下ろす感じにしてから、実行すると押し出す方向がよく見えます。押し出し中(指を離すまでの間)に Ctrl キーを押すと押し出す方向をある程度拘束できるのでまっすぐ下に伸ばしやすくなるのですが、見る角度によっては斜めになってたりします。

そこでおすすめの方法がこれ。

押し出し実行直後、勝手にマウスドラッグに追随するので、いったん右クリックで切り離します(移動が無かったことになるだけ)、そのままビューの中の青矢印(Z軸)をドラッグするとまっすぐ移動ができます。

(この辺の不思議オペレーションがBlenderから人を遠ざけている気がする・・・)

 

いくらか押し出したら、エッジの選択は解除しないままで、ビューを戻します。 テンキーの[7]と[5]で「トップ・平行投影」にします。

そして、トランスフォームの中にある、収縮/膨張を実行します。

f:id:hiyokosabrey:20180610210626p:plain

f:id:hiyokosabrey:20180610223529p:plain

最初は少し歪んでいるので、ツールのオプション設定にある均一オフセットのチェックを付けて有効にすると上図のようになります。

f:id:hiyokosabrey:20180610211157p:plain

この操作は平面ポリゴンの外側にベベルを付けたいときに使えます。

オフセットの値をフチドリの幅に合うように調整します。

 

オブジェクトモードに切り替えて、

f:id:hiyokosabrey:20180610211844p:plain

Z軸スケールを0にしてつぶします。

f:id:hiyokosabrey:20180610211951p:plain

ぺちゃんこですが法線を維持しているので不思議な見た目です。

オブジェクト > 適用 > 拡大縮小

で形状はそのままに スケールを 1.0に戻します。

f:id:hiyokosabrey:20180610212141p:plain

 

 メッシュの状態はこのようなってます。

f:id:hiyokosabrey:20180610224206p:plain

 これに貼るテクスチャを用意します。

f:id:hiyokosabrey:20180610230620p:plain ← 32x32px

これをBlenderに持って行っていきます。

新しくマテリアルとテクスチャを作ってセットしたらUV編集するのですが、フチドリの部分のUV頂点が重なっているので、まずこれをほぐします。

 

レイアウトをUVEditingに切り替えたら、

右側のビューで、Ctrlキー押しながら左ドラッグで頂点をいくつかまとめて選択しつつ、左側のビューで[W]キーを押して 「溶接」 を選択します。

f:id:hiyokosabrey:20180610231844j:plain

f:id:hiyokosabrey:20180610232001p:plain

すると UVの頂点が1か所に束ねられるので、今度は[G]キーを押して移動させます。ちなみに選択解除は[A]キーでできます。

これを繰り返してざっくりとまとめます。

f:id:hiyokosabrey:20180610233043j:plain

 ゲージの端を整えるために辺を増やします。

「ナイフ」ツールを使います。

f:id:hiyokosabrey:20180610234347g:plain

一つ目は既存の頂点をクリックして、あとは適当にメッシュの外でクリックしたら、[Enter]キーで確定。

まっすぐにしたいので、最初に選んだ頂点とX軸の値をコピペで合わせます。

f:id:hiyokosabrey:20180610234937p:plain

ちょっと面倒だけど、テクスチャのサイスがとても小さく済むので頑張ります。

f:id:hiyokosabrey:20180610234828p:plain

切ると言っても、頂点と辺を増やしているだけです。

f:id:hiyokosabrey:20180610235358p:plain

もう一方の端も同様に処理したいのですが、辺が斜めなので、コピペが使えません。

ナイフツールで2か所目のクリックでなるべく水平になるようにします。

f:id:hiyokosabrey:20180610235643p:plain

たまたま、X軸のラインがあるので分かりやすいです。

 

再びUV編集です。

頂点が増えているので、また束ねます。

f:id:hiyokosabrey:20180611000022p:plain

最終的にこうします。

f:id:hiyokosabrey:20180616114318p:plain

さらに反対側の端のUVも

f:id:hiyokosabrey:20180616114400p:plain

重ねて

f:id:hiyokosabrey:20180616114258p:plain

出来上がり。

 

さっそくUE4に持っていきます。

テクスチャもインポートして、マテリアルを作ったらメッシュにセットします。

f:id:hiyokosabrey:20180611002149j:plain

問題なさそうなので、前回のブループリントに追加します。

f:id:hiyokosabrey:20180611003358p:plain

同じようにスタティックメッシュコンポーネントを追加して、Detailsタブから用意したメッシュをセットします。

f:id:hiyokosabrey:20180611003701j:plain

おっと、表示順がおかしいので、設定を変更します。

半透明のオブジェクトは専用の優先順位で管理します。

Detailsタブから sort で検索します。

f:id:hiyokosabrey:20180611004006p:plain

Translucency Sort Priority は数値の大きい方が後に描かれます。また体力のような常に手前に描かれるものは、エフェクトなどの半透明に負けないように大きな値を入れます。シーン内で干渉し合わないように注意が必要です。

f:id:hiyokosabrey:20180611004430j:plain

いい感じになりました。

 

一応完成ですがせっかくなんで、もう少し遊んでみます。

 

テクスチャを改造します。

f:id:hiyokosabrey:20180608214046p:plain

これをグレースケールにしてサイズもタテ方向だけ小さくします。

f:id:hiyokosabrey:20180611234609p:plain

512x8 です。(↑白い部分がこのページの背景に溶けるので枠線を付けてます)

右端はそのまま 2px の黒い部分があります。アルファチャンネルは無しのグレイスケールです。

 

これとカラーのテクスチャ。

f:id:hiyokosabrey:20180611234900p:plain ← 16x32 (実寸)

これもアルファチャンネルは無しです。

あとは、先の説明で使ったアルファ用のテクスチャ。

f:id:hiyokosabrey:20180611235226p:plain  ← 8x32 (実寸)

(↑白い部分がこのページの背景に溶けるので枠線を付けてます)

テクスチャは以上。

これをインポートしてマテリアルに持っていきます。

 

f:id:hiyokosabrey:20180612000320p:plain

TexCoordinate ノードが2つありますが、上の方は設定値を変更しています。

f:id:hiyokosabrey:20180612000541p:plain

左上の Static Switch Parameter ノードはこのままだと固定された状態(初期値一択)ですが、マテリアルインスタンスにすると、値を変更することができます。

f:id:hiyokosabrey:20180612001141p:plain

名前に Static が付いている通り、動的に変化させることはできません。

このマテリアルの初期状態は緑色になるように値をつないでおきます。

マテリアルができたのでマテリアルインスタンスを作ります。

コンテンツブラウザからこのマテリアルのアイコンで右クリックすると一番上にある Create Material Instance を選択。

f:id:hiyokosabrey:20180612002250p:plain

ダブルクリックすると、パラメータが触れるようになってます。

f:id:hiyokosabrey:20180612002429p:plain

 

マテリアルは一式揃ったので、ゲージのブループリントにゲージのスタティックメッシュコンポーネントをもう一個追加します。

f:id:hiyokosabrey:20180612002754p:plain

ゲージのメッシュと、できたばかりのマテリアルインスタンスをセットします。

全部同じ位置で重なってるので、Translucency Sort Priority で表示優先を調整します。

↓重なり順のイメージ。

f:id:hiyokosabrey:20180612003150p:plain

メッシュがセットできたら、

Construction Script で、赤いゲージ用の ダイナミックマテリアルインスタンス MID_Damage を準備しておきます。

f:id:hiyokosabrey:20180612003653p:plain

 

新しくゲージを初期化する関数を用意します。

f:id:hiyokosabrey:20180612003856p:plain

この関数を、Event Begin Play につなぎます。

f:id:hiyokosabrey:20180612004044p:plain

満タンでスタートしたいので 1.0 を引数として与えています。

 

Event Tick につないでいた部分を改造します。

f:id:hiyokosabrey:20180612004632p:plain

ScalarParameterValueノードにつないでいた MID_Vital は MID_Damageに入れ替えています。

 

値を受け取っていたイベントも改造します。

f:id:hiyokosabrey:20180612005035p:plain

ゲージのブループリントはこれで完成です。

 

レベルブループリントも改造します。

f:id:hiyokosabrey:20180612005304p:plain

スペースキーを押すたびに、0.01~0.1 の範囲のランダムな値でゲージを減らしていくようにしました。

 

では再生してみます。

f:id:hiyokosabrey:20180612010026g:plain

よしよし。

メッシュの頂点数は結構使ってるので、テクスチャはものすごく節約しました。

 

一応 Inverse Lerpノードを説明しておきます。

f:id:hiyokosabrey:20180612010926p:plain

 これは Lerp とは逆に作用するノードで、「今どのへん?」というのを割合で返してくれます。

上の場合0~2500 の中で、 2200はどの辺に位置しているのか、が分かります。

 

上限や下限が変動するような場合などに特に効果を発揮します。

 

オマケなのになかなかのボリュームになってしまいましたけど、いかがだったでしょうか?

テクスチャの節約ができるので、テクスチャ容量が厳しいときは、メッシュで作れるといいのですが、UMGのようにポストプロセスから切り離した描画が難しいので、カラーの調整が悩ましいところです。

 

今回はこの辺で

ではでは

ステキなゲージライフを!

 

 

 

 

ちょっと変わった形のゲージをメッシュで作る《後編》

前回の続き。

f:id:hiyokosabrey:20180608002318p:plain

カーブを描いたゲージを作る場合、できるだけ細かいメッシュで作らないと、テクスチャが歪みます。細かいメッシュは頂点数が多くなるのでUV編集が地獄です。キレイに比率を維持してまっすぐなUV展開をしてくれるスクリプトでも書ければいいのですが、労力の割に使用する機会がが少なそうなのもあって、今までほとんど力業で作ってきました。

今回 Blenderのモディファイア『細分割曲面』を使ってみるとローポリからいい感じのカーブができたので作業時間が大幅に短縮できました。Mayaが手元にないので説明できないですが、Mayaでも同様の操作ができるのは確認しています。

 

さてさて

完成したメッシュにテクスチャが貼れたのでFBXの形式でエクスポートします。

FBXのエクスポートについては、過去記事を貼っておきます。 

limesode.hatenablog.com

UE4でインポートしてみました。

f:id:hiyokosabrey:20180608194123j:plain

無事エクスポートできたようなので、Blenderを落として今度はテクスチャを仕上げます。

f:id:hiyokosabrey:20180606225153p:plain

Blenderに持っていったテクスチャを本番用にします。

f:id:hiyokosabrey:20180608214046p:plain

アルファチャンネルは、上下に黒とグレーを1ピクセルずつ。

f:id:hiyokosabrey:20180608214140p:plain

右端の部分を拡大するとこんな感じ。

f:id:hiyokosabrey:20180608214338p:plain

これはポリゴンのエッジをマイルドにする効果があります。

f:id:hiyokosabrey:20180608214758j:plain

このアルファチャンネルを使った余白がないとポリゴンのエッジがクッキリでます。

f:id:hiyokosabrey:20180608215144j:plain

拡大している状態だと目立たないですが、解像度が低かったり、頂点数が少ないとエッジのクオリティが悪目立ちすることがあります。

テクスチャにアルファチャンネルが使えない場合は頂点カラーでアルファを仕込むこともあります。Blenderは頂点カラーにアルファ使えないのでちょっと工夫が必要です。

 

さてさて

テクスチャーのインポート設定ですが、デフォルトのままだとうまくいかないので変更します。

f:id:hiyokosabrey:20180608232553p:plain

ピクセルが荒れてほしくないのでリッチな User Interface2D を選択。

UIでミップマップは不要なので、 No MipMaps

 

今回テクスチャを目いっぱい使ってて、UVスクロールする範囲がテクスチャの外まではみ出しているので、タイリングメソッドを Clamp にしておく必要があります。

 

 

テクスチャをインポートできたら、マテリアルを作っていきます。

コンテンツブラウザのテクスチャアセットのアイコンの上で、右クリックしてCreate Material するとラクチンです。出来立てホヤホヤはこんな状態。

f:id:hiyokosabrey:20180608225408p:plain

UI用に設定を変更します。

f:id:hiyokosabrey:20180608230116p:plain

半透明を使用するので、Blend Mode を Translucent に、

光源計算しないので、 Shading Model を Unlit にします。

あと、忘れがちなのが、Apply Fogging。

f:id:hiyokosabrey:20180608230239p:plain

フォグもいらないので外します。

 

設定が変わると、マテリアルのピン構成が変化するのでつなぎ直します。

f:id:hiyokosabrey:20180608230534p:plain

この状態でメッシュにセットしてみます。

先にインポートしてあったメッシュのエディタを開いてセットします。

f:id:hiyokosabrey:20180608231425j:plain

こんな感じになりました。

f:id:hiyokosabrey:20180608231704j:plain

これをゲージらしく増減できるようにします。

マテリアルを以下のように組みます。

f:id:hiyokosabrey:20180608232012p:plain

左端のノードが、Scalar Parameter Value ノードです。ブループリントから値を受け取ることができます。

OneMinus(1-x)ノードで値を反転しています。これは、0 の時にゲージが満タンで、1.0 の時に空っぽになるのを逆にするためです。

AppendノードのAとBは、それぞれ UとV で、Uが水平方向、Vが垂直方向です。

 

では、ブループリントを作ります。

f:id:hiyokosabrey:20180608233932p:plain

まずは、メッシュをコンポーネントとして追加します。

緑の Add Component ボタンを押して、Static Mesh を選択します。

f:id:hiyokosabrey:20180608234215p:plain

そのままだと空っぽなので、

Detailsタブから、作ったメッシュをセットします。

f:id:hiyokosabrey:20180609074235p:plain

マテリアルをここで付けることもできます。

今回は Dynamic  Material Instance にするので、マテリアルの有無は無視できます。

 

グラフのタブを Constuction Script に切り替えて、以下のようにつなぎます。

f:id:hiyokosabrey:20180609075340p:plain

上図は Dynamic化するマテリアルを直接セットしてますが、すでにメッシュにマテリアルがセットされている場合はGet Material ノードを使うこともできます。

 

ちなみに Dynamic Material Instance の語順が気になるところですが、公式のドキュメントには括弧書きで MID としているので、右端の変数名 は MIDで始めてます。

以下キャプチャして抜粋。

f:id:hiyokosabrey:20180609080345p:plain

Instanced Materials | Unreal Engine

 

グラフのタブを EventGraph にして、新しく Float型の変数を2つ用意します。

一つはカスタムイベントにつないで、外から受け取るようにします。

f:id:hiyokosabrey:20180609082533p:plain

このブループリントでは「UI表示」が主な仕事としているので、ゲージの長さを計算するようなものはありません。値を受け取って素直に表示するだけにします。

ひとまず受け取る値は 0.0 ~ 1.0 を想定。1.0=100%で満タンという仕様です。

 

ゲーム開発ではゲームバランスの調整が理由で体力の上限はよく変動します。成長要素があればプレイ中に変動します。なので、そのあたりはゲームシステムの方でプログラマに集約、管理してもらうのが無難です。

 

で、受け取った値をゲージに反映する部分はこうなります。

f:id:hiyokosabrey:20180609083815p:plain

素直に反映するだけだと面白くないので動きを入れてます。簡単なイージングです。

 

処理負荷的に渋い顔されたら、さっきのカスタムイベントでこうすればOKです。

f:id:hiyokosabrey:20180609084033p:plain

 

ブループリントは完成です。

ワールドで確認します。簡単な方法は ゲージのBPをワールドにドロップして直接置いてしまう方法です。UIなので実際には誰かに Spawn してもらう方法になるかと思います。

今回は直接置きました。

f:id:hiyokosabrey:20180609084814j:plain

 

レベルブループリントを開いて編集します。エディタのBlueprintsボタンから選択。

f:id:hiyokosabrey:20180609085149j:plain

 

ワールドアウトライナからゲージのBPをドラッグ&ドロップします。

f:id:hiyokosabrey:20180609085421p:plain

 

この青いピンからドラッグして、中のカスタムイベントを探します。

f:id:hiyokosabrey:20180609085715p:plain

検索フォームで、call ってすると、関数とイベントを候補として絞り込むことができます。実はエンジンの言語設定を英語にしている最大の理由がこれです。検索キーワードを1個覚えるだけです。

日本語環境だとこれができないので結構ストレスに感じるのは私だけ?

f:id:hiyokosabrey:20180609090446p:plain

f:id:hiyokosabrey:20180609090921p:plain

ショートカットキーも使うからいちいち入力モード切り替えるの面倒だし・・・

 

で、関数を取り出してつないだら、Input ノードをつなぎます。

f:id:hiyokosabrey:20180609090906p:plain

Random Float in Range ノードは処理が走るたびに、指定した範囲で乱数を発生させてくれます。

 

コンパイルして、再生してみましょう。

f:id:hiyokosabrey:20180609091425j:plain

しーん・・・

カメラに映るように調整したはずなのに・・・。

実はこれ変数の初期値が 0.0 になっているからです。

ゲージが満タンから開始するには、変数に初期値を入れておきます。

いろんな入れ方があるのですが今回は、レベルBPの方で入れることにします。

f:id:hiyokosabrey:20180609091847p:plain

再生してみると、

f:id:hiyokosabrey:20180609091959j:plain

ちゃんと出てきました。

スペースキーを叩いてみましょう。

f:id:hiyokosabrey:20180609092605g:plain

うまくいったようです。

30fpsでGIF化したのでちょっとぎこちないけど、実際はもう少し滑らかに動きます。

 

以上で完成、といっても毎度のことながら、モックアップ的な作りですみません。

《後編》はここまでにしようと思いますが、このままだとちょっと物足りないので、次回《おまけ編》を書こうと思います。

 

ではでは

ステキなゲージライフを!

 

ちょっと変わった形のゲージをメッシュで作る《前編》

キングダムハーツIIIのトレーラーを見てて急に作ってみたくなったのでメモメモ。

 3/4の円形部分と直線部分が合わさったゲージで、スクショから割り出した直線部分の長さは円周のおよそ1/2。全部で円周の5/4な長さっぽいです。

f:id:hiyokosabrey:20180605223758p:plain

UVスクロールを使うのでこの辺りをアバウトに設計するとゲージの増減速度が不自然になるので慎重に進めます。円形部分のUV編集をエコに作りたいので、円周の5/4に決めます。

 

メッシュはBlenderで作っていきます。

まだまだ操作に詳しくないので手探り状態ですが、なるべく細かく手順を書くようにします。

 

まずは作業するビューをテンキーの[7]と[5]を押してトップ・平行投影に切り替えます。

f:id:hiyokosabrey:20180605224321p:plain

円柱を生成します。設定値は以下。

f:id:hiyokosabrey:20180605225331p:plain

半径は計算しやすいように 5 にしています。今は大きさではなく頂点の形状が重要なのでいったんサイズのことは忘れても大丈夫。

 

モードを 編集モードに切り替えます。

f:id:hiyokosabrey:20180605231612p:plain

手前(Z軸プラス側)のフタだけが欲しいので、オブジェクトを回しながら、フタ以外の他のメッシュを選択して削除(Deleteキー)します。

f:id:hiyokosabrey:20180605230450g:plain

フタだけになったら、オブジェクトモードに戻します。

f:id:hiyokosabrey:20180605231732p:plain

円柱から作り始めて少し浮いている状態なので、スケールでつぶします。

f:id:hiyokosabrey:20180605231227g:plain

拡大縮小のZ軸に 0 を入力するとペシャンコになります。

続けて、このつぶれた状態を適用してスケールを 1倍に戻します。

オブジェクトモード左のオブジェクトメニューをクリックして、

適用 > 拡大縮小 を選択。

f:id:hiyokosabrey:20180605232322p:plain

これをやっておかないと、画面に表示する際に扱いにくくなります。

 

次に中を抜きます。

編集モードに切り替えます。

f:id:hiyokosabrey:20180605231612p:plain

まず放射状のエッジを8本選んでおいて、 ツールにある 「細分化」 を掛けます。

f:id:hiyokosabrey:20180605233538g:plain

 

細分化で分割できたら、中央のメッシュを削除して穴の大きさを調整します。

f:id:hiyokosabrey:20180605234901p:plain

 

このへんでテクスチャを用意します。

f:id:hiyokosabrey:20180606230752p:plain

サイズは 512x32 、UVを当てやすくするために 51x32で色分けします。

右端に 2px 余りが出ます。

 

Blenderに戻ってマテリアルをセットします。

編集モードでメッシュを全て選択した状態で、マテリアル設定に切り替えて、新規マテリアルを作ります。

f:id:hiyokosabrey:20180606224659p:plain

シェーディング設定にある陰影無しにチェックを付けると作業しやすくなります。

f:id:hiyokosabrey:20180606225053p:plain

次にテクスチャをセットします。

f:id:hiyokosabrey:20180606225614p:plain

新規ボタンを押したら、用意しておいたテクスチャをセットします。

f:id:hiyokosabrey:20180606225818p:plain

 

テクスチャをセットできたら UVを編集します。

 まずエディタのレイアウトを UVEditing に切り替えます。

f:id:hiyokosabrey:20180606230032p:plain

最初は適当なテクスチャが当たっているので、今回用意したテクスチャをセットします。

f:id:hiyokosabrey:20180606231416p:plain

すると以下のようになります。

f:id:hiyokosabrey:20180606231532p:plain

メッシュのワイヤーが表示されていない場合は、右側のビューからメッシュを選択すると表示されるようになります。

 

UVを動かす際に、UV編集対象のメッシュを選択しながら編集を進めるのですが、以下のスイッチを変えると、メッシュの選択方法が変わります。

f:id:hiyokosabrey:20180606232923p:plain

まずは上段のスイッチで進めます。

Blenderの初期設定では、UVEditingレイアウトにすると2分割されます。

右のビューで編集対象のメッシュを選択状態にします。

f:id:hiyokosabrey:20180606235540p:plain

すると、下のようになるので、

f:id:hiyokosabrey:20180606235637p:plain

まっすぐにします。UVメニューにある ピクセルに吸着 を使うと正確です。

f:id:hiyokosabrey:20180606235735p:plain

メッシュとUVの位置関係はこんな感じ。

f:id:hiyokosabrey:20180607000401p:plain

ここでモディファイアを使います。

エディタのレイアウトを Default に戻します。

モディファイア設定に切り替えて、下のプルダウンリストをクリックします。

f:id:hiyokosabrey:20180607224514p:plain

細分割曲面 を選択。

f:id:hiyokosabrey:20180607224913p:plain

詳細設定ができるようになるので、ビュー の値を 3 にします。

f:id:hiyokosabrey:20180607225317p:plain

 カーブしたゲージはなるべく細かい方がテクスチャの歪みが少なくなります。

f:id:hiyokosabrey:20180607225515p:plain

一旦オブジェクトモードにして、「適用」します。

f:id:hiyokosabrey:20180607225924p:plain

編集モードにして左下 1/4 のメッシュを削除します。

選択が残っていれば、選択メニューから 反転 を選ぶとラクです。

f:id:hiyokosabrey:20180607230258p:plain

かなり細かいので、いくつかのエッジを溶かします。

 

f:id:hiyokosabrey:20180607230527p:plain

辺をひとつ選んで、選択メニューから 辺ループ を選択。

f:id:hiyokosabrey:20180607230736p:plain

続けて、Deleleキーを押したらコンテキストメニューがポップするので、辺を溶解 を選択します。

f:id:hiyokosabrey:20180607231106p:plain

最終的にこうなりました。

f:id:hiyokosabrey:20180607231723p:plain

直線部分を作るので、延ばす部分の辺を選択します。

f:id:hiyokosabrey:20180607232033p:plain

ツールメニューから、個々に押し出し を選択。

クリックした瞬間に、マウスカーソルにくっついてくるので・・・

f:id:hiyokosabrey:20180607232608p:plain

慌てずに、Ctrl キーを押して移動方向を水平にしたら指を離します。

f:id:hiyokosabrey:20180607232953p:plain

長さを求めるために、再び辺を選択します。

f:id:hiyokosabrey:20180607233600p:plain

辺の中点の座標を確認します。中点は上の図だと 緑と赤の矢印の交点です。

f:id:hiyokosabrey:20180607233817p:plain

この値を半径とします。円周の長さは 2πR なので、

半径 × 2 × 3.14159  になります。

その半分ということでさらに 2で割ると直線部分の長さが判明します。

直線部分の先端の辺を選択して、長さを入力します。

f:id:hiyokosabrey:20180607234547p:plain

f:id:hiyokosabrey:20180607234401p:plain

メッシュは完成です。あとは直線部分のUVを編集します。

ぺしゃんこになってるので広げます。

f:id:hiyokosabrey:20180607234832p:plain

マウスの右ボタンでドラッグすると頂点を1つずつ移動できます。

(ちょっとだけ右ボタンドラッグすると、指を離してもマウスについてきます。これややこしい。)

四角く広げたら面のつながりがおかしくなってないか確認します。

f:id:hiyokosabrey:20180607235906p:plain

選択タイプを変えると確認がラクです。

f:id:hiyokosabrey:20180608000232p:plain

一見うまくつながっているように見えますが、一か所だけ 頂点 を選択すると・・・

f:id:hiyokosabrey:20180608001006p:plain

この場合は、直線部分のメッシュを選んだ状態で、メッシュメニューの 面 > UVの反転 を選ぶと解決します。

で、いい感じなのがこれ。

f:id:hiyokosabrey:20180608001709p:plain

 

モデルを確認します。エディタのレイアウトを Defaultに戻します。

f:id:hiyokosabrey:20180608002135p:plain

ビューを テクスチャー に切り替えてみると・・・

f:id:hiyokosabrey:20180608002318p:plain

いい感じにUVが当たっています。

これで完成です。あとは FBXで書き出すだけです。

 

さすがに長くなってきたので、続きは後編で。

UE4に持って行って、マテリアルを作って、テクスチャを整えて、ブループリントからいじれるようにします。

 

ではでは

ステキなゲージライフを!