読者です 読者をやめる 読者になる 読者になる

みつまめ杏仁

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

ちょっと遅れて減るダメージゲージ

最近UE4のマニュアルというかチュートリアルを書く機会があって、急いだせいかさすがに疲れました。でちょっとブログも休憩してました。

 

久しぶりに書きます。

f:id:hiyokosabrey:20160718230512p:plain

格闘ゲームの体力ゲージは、ダメージを受けた瞬間に減らします。これは遅延があるとゲージがまだ見た目に残ってるのにK.O.判定されてプレイヤーは納得いかないからです。一瞬で減ったら減ったで今度は、どれくらいのダメージを受けたのか(減ったのか)が気になります。今の技をもう一度受けられるのか否か・・・ガードしても結構削られるな・・・とか考えます。そこでいつのころからかダメージゲージが採用されるようになりました。仕組みは単純で赤色のゲージを下に重ねて少し遅らせて減らすというものです。

 

UMGとマテリアルでちゃっちゃと作ってみましょう。

ちょっとGateを試してみたかったというのも今回記事を書くきっかけの一つです。

ゲージは過去記事で書いてますが、

limesode.hatenablog.com

もう一度おさらいの意を込めて書いておきます。

まずマテリアルから。テクスチャはグラデーションだけでいいので 256x16。

f:id:hiyokosabrey:20160718204550p:plain  ← 実寸

これを下のようにつなぎます。

f:id:hiyokosabrey:20160718204237p:plain

右端のマテリアルドメインが UserInterfaceになってます。以前のバージョンだとSurfaceでした。

ValueStepというノードは、0~255諧調のグレースケールをパッキリと2諧調化してくれるノードです。そのしきい値を調整するのが、緑のスカラーパラメータです。ここではValueというパラメータ名にしました。あと、グレースケールを作り出してくれるのが左下の LinearGradientノードです。

これが、体力ゲージの本体です。

 

このマテリアルを複製してダメージ用のマテリアルを作ります。カラーが違うだけです。ここでつないでいるのは ConstantV3 ノードです。数字の[3]キーを押しながらクリック。

f:id:hiyokosabrey:20160718205410p:plain

今回左から右に減るので、OneMinusノード(1-x)は無しです。

 

これでマテリアルができたので、Widgetを作成します。

まずは Image パーツをキャンバスに2つ配置します。

f:id:hiyokosabrey:20160718210537p:plain

Anchorsは反転しやすいように中央上にしました。

f:id:hiyokosabrey:20160718211241p:plain

Imageパーツは、テクスチャを直接セットできるほか、マテリアルもセットが可能なので、作ったマテリアルをセットします。

Details > Appearance > Brush > Image

f:id:hiyokosabrey:20160718211022p:plain

ZOrderというパラメータで、重なり順を指定できるので、同じ位置にピッタリ重ねます。(下図はわざとずらしてます)

f:id:hiyokosabrey:20160718210739p:plain

 

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

マテリアルのパラメータに対してかなり頻繁にアクセスします。そのたびにいちいちGetDynamicMaterialするのは処理がちょっともったいないので、変数化しておきます。

f:id:hiyokosabrey:20160718211712p:plain

最初からWidgetに置かれている EventConstruct ノードは、ビューポートに置かれた瞬間に一度だけ処理されるので、ここにつなぎます。

 

Float型の変数を2つ用意して上図の続きにつなぎます。

ここで初期値 1.0 を入れておきます。

f:id:hiyokosabrey:20160718212715p:plain

 

次に関数を作ります。

UpdateVitalValue という名前にしました。

f:id:hiyokosabrey:20160718213403p:plain

 Set Scalar Parameter Valueノードは、マテリアルインスタンスダイナミック経由でマテリアルの中のパラメータにアクセスするノードです。

基本的にこの関数に対して体力値を受け取ってゲージに反映します。

 

次にこの関数を複製してダメージ用につなぎ替えます。

f:id:hiyokosabrey:20160718213814p:plain

UpdateDamageValueという名前にしました。

関数を使ってゲージが減るしくみができたところで、Gateノードの登場です。

EventGraphに戻って、イベントノードの EventTickを使います。

[G]キーを押しながらクリックすると Gate ノードを取り出せます。

f:id:hiyokosabrey:20160718220931p:plain

ダメージを受けてダメージゲージを減らすアニメーションを処理している間だけこのゲート(門)を開くという作戦です。最初は閉じておきたいので、Start Closed にチェックを入れたままにしておきます。

で、ゲートを開くのはだれか?

ということで、Open のところにカスタムイベントをつなぎます。

じゃあ閉じるのは?

ということで、Close のところにもカスタムイベントをつなぎます。

f:id:hiyokosabrey:20160718221630p:plain

 

そして、このカスタムイベントを呼ぶのは体力ゲージを減らす関数です。

再び関数 UpdateVitalValueを編集します。

右端に、Set Timer by Event ノードをつなぎます。

f:id:hiyokosabrey:20160718222059p:plain

これは指定した時間が経過したらイベントを呼ぶというノードです。

JavaScriptの SetTimeOutメソッドみたいなものです)■Eventピンから左にドラッグして CreateEventノードを取り出します。クリエイトといいつつもプルダウンで既存のイベントを探して選択します。ここでは、さっきGateノードのOpenにつないだカスタムイベントを選択しています。Time のところに入力した値 0.5 が待ち時間です。単位は秒です。

同じようなノードに Delay があります。一定時間待つのはどちらも変わらないのですが、Delayと違って Set Timer~ は次のノードに処理がそのまま流れていくので、処理が滞らないのがありがたいのです。

ちなみに Delayノードは関数内に置くことができません。EventGraphのみです。

 これで、体力ゲージが変化したタイミングで、0.5秒待ってゲートがオープンするようになりました。

 

EventGraphに戻ります。

Gateノードの続き、門をくぐったあとの処理をつなぎます。

f:id:hiyokosabrey:20160718225251p:plain

 ダメージ用の変数は体力ゲージと同じか下回るまで、毎回 0.01 ずつ減らします。この値が減るスピードになります。減らしたらダメージゲージ更新用の関数を呼んで反映します。EventTickノードにつながっているので、門が開いている間、常にここの処理に流れてきます。

しばらく減らしていって体力ゲージに追いついたら、ここでようやくCloseにつないだカスタムイベントを呼びます。これで門が閉じます。

次に体力ゲージが更新されるまでは処理されることはありません。

これでWidgetは完成です。

レベルブループリントで試しに表示してみましょう。

とその前にオマケを。

ブーリアンの変数をひとつ用意します。

f:id:hiyokosabrey:20160718231953p:plain

EditableExpose on Spawn にチェックを付けます。

初期値は一応  falseにしておきましょうか。

EventConstructの右端に下のようなノードをつないでおきます。

f:id:hiyokosabrey:20160718232515p:plain

このブール値をチェックして反転するかしないかというものです。

Scale X にマイナスの値を入れると、左右が反転します。

 

では保存してレベルブループリントに移りましょう。

まずCreate Widget ノードを取り出して、できたWidgetをセットします。

f:id:hiyokosabrey:20160718233019p:plain

さっき作ったブーリアン変数の名前が追加されています。Expose on Spawnすると初期値がここでセットできるようになるので便利です。これを複製して2個にします。

最後にAdd to Viewport をつないでいったん確認してみましょう。

どちらかのチェックボックスにチェックを付けておきます。

f:id:hiyokosabrey:20160718233503p:plain

ゲージが左右に2つ出ればOK。

f:id:hiyokosabrey:20160718233801p:plain

あとは適当にゲージを減らすようにイベントをつなぎます。

f:id:hiyokosabrey:20160718234313p:plain

各CreateWidgetノードの右にある ReturnValue ピンからドラッグすると、中の関数を取り出すことができます。

Vキーを押すと強制的に 0.5 と 0.2 が入るようにしてみた。

 

 

f:id:hiyokosabrey:20160718231351g:plain

 

以外に簡単にできました。

 

 

次回、体力ゲージが短くなったら点滅させる処理を追加してみます。

ではでは

素敵なゲージライフを!