VFXアーティストブログ

VFXアーティストが気になったことを好きに書いていくブログ

【UE4】UMGを使わずに残弾数表示(AmmoCounter Without UMG)

はじめまして
ゲーム会社でエフェクトアーティストやってます

今までYOUTUBEでたくさん勉強になったのでこれからは自分からも情報を発信していこうかと思います。(たぶん・・・っ!

 

まず第一弾として

FPSでよくある銃の残弾数の表示をマテリアルとBPでやってみようというものです

UMGには制限が多くマテリアルで遊ぶことがなかなかできません

ならもうマテリアルで表現してしまおうというものです

最終的にこんな感じになります

youtu.be

 

では始めましょう

とても長いですがお付き合いください

まず新規でFPSのテンプレートから始めた状態で解説します

初期弾数を30発の設定で今回はいきます

いきなりすんごい縦長の画像で申し訳ないですが

128x2048で好きなフォントでこのようにテクスチャーを作ります

0からはじめると後々楽です

しっかりガイドを引いて数字の中心を合わせることが大切です

f:id:kapunn:20170904001420j:plain

そしてマテリアルパラメーターコレクションを作成してこのように設定します

f:id:kapunn:20170904010849j:plain

次にマテリアルを新規で作成してこのようにノードを組みます

f:id:kapunn:20170904000851j:plain

わかんねぇよって人に拡大画像を

まず10の位の画像

f:id:kapunn:20170904000719j:plain

・Ten_X_TillingSource

テクスチャーのX方向のタイリングです 今回は使用していません

・Ten_Y_TillingSource

テクスチャーのY方向のタイリングです

数字が10個あるので0.1にすると画像が拡大されて数字が1つだけの状態になります

・X_Tilling

残弾数の数字の横幅を調節できます

・Whole_X_Offset

残弾数の数字全体のX方向のオフセット値です

・Whole_Y_Offset

残弾数の数字全体のY方向のオフセット値です

・Ten_X _Offset

10の位の数字のオフセット値です

'Ten_Y_Offset'

ここに先程つくったマテリアルパラメーターコレクションを置いて

このように設定します

f:id:kapunn:20170904011124j:plain

 

次に1の位

f:id:kapunn:20170904000758j:plain

10の位とほぼ同じで

マテリアルパラメーターコレクションの違いだけです

このように設定します 

f:id:kapunn:20170904011309j:plain

 

あとはそれぞれLerpで数字をアルファ抜きして

Lerpで合成します

水色入っているのはちゃんと抜けているか確認するためのテストです

f:id:kapunn:20170904000816j:plain

マテリアルの設定ができましたので

そのマテリアルからインスタンスマテリアルを作成します

そしてこのように設定します

まぁここは個人の好きなように調整してもらったらいいです

f:id:kapunn:20170904011755j:plain

 

さぁBPに行きましょう

FPSのテンプレートから始めているのなら

このFirstPersonCharacterを開きましょう

f:id:kapunn:20170904011951j:plain

ビューポートの画面です

コンポーネントのタブでFP-Gunの子供に平面を追加してこのように配置します

マテリアルには先程作ったインスタンスを置いておきます

f:id:kapunn:20170904015549j:plain

 

次にイベントグラフで変数を2つ追加します

まずFloatの型で名前を「MaxAmmo」にします

これは初期弾数である30発を設定しましょう

もう1つもFloatの型で名前を「CurrentAmmo」にします

これは1発ずつ減っていったときの弾数を取得する用のものです

f:id:kapunn:20170904012313j:plain

マウスをクリックするたびに弾が減るようにしたいので

Fireのインプットからこのようにします

f:id:kapunn:20170904001919j:plain

AutoFireのマクロが挟まれているけどなくても動くので気にしないでください

(Tickノードを挟まずにクリックしている間連続で発射されるようにしているマクロです)

CurrentAmmoをゲットし引き算で1を引きます

そしてそれを再びCurrentAmmoにセットします

これは現在の残弾数にクリックごとに1を引きその結果を残弾数に設定するということです

そのあとに「カスタムイベントを追加」し名前を「Ammo Calculate」とします

これはクリックしてこのイベント先に処理が飛ぶようにしています

これは後に解説します

 

次にBeginPlayのノードからプレイ開始時の弾数の設定をさせます

 青色のノードは

Create Dynamic Material Instanceを配置して先程作ったインスタンスマテリアルを

SourceMaterialに設定し一番右にSetScalarParameterValueをつなぎパラメーターコレクションを設定してパラメーター名を設定します

するとBPでマテリアルの数値をいじれます

f:id:kapunn:20170904013619j:plain

SequenceのThen0では初期弾数設定をしています

MaxAmmoをCurrentAmmoとして数値を代入させます

Then1のところは10の位を取得する計算をしています

ここからめんどくさい数学の時間です

 

10の位を初めの方で作ったマテリアルパラメーターコレクションに数値を代入させるよう計算します

0.1では数字の1が表示されます

 

例えば27発では10の位の2だけを取りたいので

まずCurrentAmmoを10で割り算します

すると2.7になりますね

ここで0.7が邪魔なので最小の整数を取得するFloorを使います

すると2.7→2.0になります

それで最終的に0.2という数字がほしいので10で割ります

しかし残弾数が1桁担った場合の10の位は常に0にしないといけません

その処理も組む必要があるので

不等号で0より上の場合はTrueになり数値が代入され

0より下の場合はFalseで0の数値が代入されるようにブランチで処理します

 

これで10の位の初期設定が完了です

次は1の位です

1の位はもっとややこしくて

先程の例で行くと27発の場合

1の位は7ですね

まず残弾数を100で割ります

すると0.27になります

 

次に10の位の2の部分をなくしたいので

27を10で割ります

すると2.7になります

最小の整数を取得するためFloorを使います

それをさらに10で割ると0.2になります

 

先程の0.27から0.2を引くと0.07が残ります

7を表示させるには0.7にしないと行けないので10をかけます

また1の位が0の場合の処理も組まないといけないので

不等号とブランチで10の位と同じように処理をさせます

 

これで初期設定は完了です

上の方で作ったカスタムイベントを受け取りさきの処理を設定します

右クリックを押してカスタムイベントでつけた名前で検索するとAmmoCalculateがあるのでそれを配置します

f:id:kapunn:20170904001758j:plain

Then0の処理ですが

クリックごとにAmmoCalculateのイベントが発生するようになっていますので

1発減るごとに数値を取得するように組んでいます

処理的には初期設定のときに使った処理と同じです

 

これでBPの設定は完了です

プレイボタンを押して撃ってみましょう

数字が1つずつ減っているはずです

今回の処理では弾が0になってもマイナスの数値が入っていくので

クリックするたびまた数字が増えていくようになっています

それはCurrentAmmoが0以下になると撃てなくなる処理をブランチで組むことで解決します

 

あとはマテリアルでいろいろ遊んでみてください

1発目から超長い記事になりましたがまたいいネタがあれば更新します

ではー