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

みつまめ杏仁

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

わりと本気のコンボカウンター 《準備編》

UE4 UI マテリアル UMG Widget

ちょっとガチなコンボカウンターを作ってみようと思い立って始めてみたら、意外に時間がかかってしまった。まぁほとんど寝落ちが原因だけど・・・

f:id:hiyokosabrey:20161008005130p:plain

コンボカウンターは格ゲーではお馴染みの表示です。アクションゲームやシューティングゲームでも見かけます。ただ数字でカウントするヤツですが、いざ作ってみると奥が深いんです。

今回作ったカウンターの機能は以下。

・登場と退場の演出

・最後の更新から一定時間待って更新されなかったら消える

・一定のヒット数毎で文字の色を変える

・999までカウント表示可能

f:id:hiyokosabrey:20161008010219p:plain

 

 

おおまかな処理の流れは以下。

 

①常駐系の表示物なので、まずは CreateWidget してBindだけ済ませておく。

このBind(バインド)は表示終了の通知を受け取ってViewportから削除するため。

 

②ゲームが始まって、いざ表示開始になったら、ここでAdd to Viewport 。

 

③変数をカウントアップしつつ、同時にWidgetの中の関数に渡して数字を更新。

 

④一定時間更新が無かったら、終了通知を送ってViewportから消しカウント用の変数をリセット。

 

あとはプレイ終了まで必要に応じて、②~④を繰り返します。

 

わりとボリュームがあるので、数回に分けて書いていこうと思います。

 

テクスチャの準備

主役となる数字。

サイズは 512x256

f:id:hiyokosabrey:20161008114046p:plain

↓はアルファチャンネル。

f:id:hiyokosabrey:20161008011513p:plain

インポート設定で、Clampにします。

 

f:id:hiyokosabrey:20161008114035p:plain

 

 ↓カラーチェンジ用  1024x32

f:id:hiyokosabrey:20161008012353p:plain

ちょっとサイズが大きめ(=256x128)ですが、色と範囲の調整がデザイナー的にものすごくラクチンです。色の境界がシャープになるようにインポート設定を調整します。

 

機能的にはこれで足りるのですが、視認性を上げるために下敷きを用意しました。

左がRGB、右がアルファチャンネルです。上部にあるグラデーションはオマケです。

f:id:hiyokosabrey:20161008123546p:plain

 

数字のテクスチャには仕掛けがあります。

まずはUVの範囲とサイズ。

f:id:hiyokosabrey:20161008102306p:plain

ピクセルの座標をUV値に変換する場合は、テクスチャのサイズで割ってやります。

タテならタテ、ヨコならヨコです。例えば ↑の図で128pxが2か所あります。

数字のタテは 128÷256 で 0.5、 HITs のヨコは 128÷512で 0.25 という具合です。

(いつもこの辺りを教えるとき、小数点で渋い顔をされる方がほとんどです)

左上を基準として、ピクセルの量をイメージすると分りやすくなると思います。UV値は左上が(0,0)で右下が(1,1)です。ようするにタテとヨコそれぞれで、場所やサイズを割合(%)で指定する感じです。

私はいつでも手元にソーラー電池で動く電卓を置いております。

 

さてさて

仕掛けというのは各文字の左と上に余白を空けていることです。

f:id:hiyokosabrey:20161008103845p:plain

8px分をキープ。この余白を使ってドロップシャドウを再現します。

 

マテリアルの準備

 インポートしたテクスチャから、マテリアルを作成します。

UMGで使用するので、MaterialDomain(マテリアル属性)はUserInterfaceを選択。

ちょっとゴチャっとしてますがこんな感じになります。

f:id:hiyokosabrey:20161008115943p:plain

テクスチャサンプルノードが3つありますが、一番上が、カラーチェンジ用で下2つが数字のテクスチャです。

真ん中ちょっと上の Constant2Vectorノード(キーボードの2を押しながらクリック)がドロップシャドウ用の数値です。8pxずらすので、UとVそれぞれで

8÷512= 0.015625、 8÷256= 0.03125 になります。

一番上の Tex Coordinate ノード(赤いやつ)のパラメータは、U方向に動かすのでかなり小さい値にしてます。とりあえず1ピクセル分以下です。『Tiling』はテクスチャの中から切り出すサイズだと思ってもらって問題ないと思います。1以上の値が入ると見た目に繰り返します(これぞタイリング)。

 

 次に「HITs」のマテリアル。

文字が固定でUVが変化したりしないので、少しだけシンプルになります。↑のマテリアルと共通する部分をコピペすると楽です。

f:id:hiyokosabrey:20161008122130p:plain

 

下敷きのマテリアルも用意します。

f:id:hiyokosabrey:20161008124336p:plain

テクスチャサンプルノードは2つもの同じものです。テクスチャの上の方にグラデーションを入れているので、その分ずらしたりしています。

 

 

テクスチャとマテリアルアセットの準備は以上です。

次回UMGでレイアウトするところを書いていきます。

ではでは