みつまめ杏仁

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

キャラセレを作ってみる おまけ編

続きです。

シンプルな作りですが、キャラセレ画面としてある程度必要と思われる内容まで用意できました。今回はキャラを選ぶにあたっての能力値をグラフで表現したものを作って追加します。

f:id:hiyokosabrey:20170701213921j:plain

 

まずはテクスチャ。

f:id:hiyokosabrey:20170701081134p:plain

40x40 のグレースケールアルファチャンネルは無しです。

今回のゲージはマテリアルを使わずに増減させます。が、テクスチャ容量を節約したいので、ちょっぴりマテリアルの助けを借ります。

テクスチャのフォーマットをグレースケールにしてしまうとテクスチャのメモリ消費量は 1/4 に減らせられるのですが、UMGで扱えません。そこで下図のようなマテリアルを用意します。

f:id:hiyokosabrey:20170701214129p:plain

グレースケールなので、Rチャンネル(G、Bのピンでも結果は同じ)のピンをOpacityにつなぐことで、テクスチャをアルファチャンネルとして使えます。

TextureSampleノードの設定が変わります。

f:id:hiyokosabrey:20170701214335p:plain

(テクスチャ設定の sRGB のチェックを外すとLinearGrayscale になります)

マテリアルができたら、次はグラフ用のWidgetブループリントを新しく作ります。

 

作ったマテリアルを張り付けるImageパーツをキャンバスに配置します。

f:id:hiyokosabrey:20170701214909p:plain

このImageパーツにマテリアルをセットしたらヨコに伸ばして使うので設定をいじります。

f:id:hiyokosabrey:20170701215413p:plain

ひとまず横の長さは400にします。

このパーツは下敷きにするので、適当に暗めのカラーにします。

f:id:hiyokosabrey:20170701220458p:plain

このImageパーツを複製します。

複製したらカラーを明るくして上に重なるように移動して、さらにZOrderの数値を調整します。

f:id:hiyokosabrey:20170701220713p:plain

ゲージ部分のパーツが完成です。次にテキストブロックを左横に配置します。

f:id:hiyokosabrey:20170701220923p:plain

このテキストブロックはブループリントから内容を書き換えるので、 Is Variable にチェックを付けておきます。

f:id:hiyokosabrey:20170701221138p:plain

さて、肝心のゲージが増減するしくみですが、アニメーションを使います。

新しくアニメーションを作成して、ゲージのサイズをアニメーションさせます。

キーフレームは1秒刻みで、0.0~9.0 にキーを打ちます。動かすのは Slot のSize

f:id:hiyokosabrey:20170701222352p:plain  → f:id:hiyokosabrey:20170701222413p:plain

1秒あたり 40ずつ サイズを大きくしていきます。

f:id:hiyokosabrey:20170701222424p:plain

キーを打ち終えたら、

トラックのキーを全てConstantに変えます。マウスドラッグでアニメーションのキーを一気に選択したら、右クリックするとサブメニューが出てくるのでConstantを選択します。Constantはキーとキーの間を補間しません。

f:id:hiyokosabrey:20170701222741p:plain

Sizeの値をキーセーブしてるのに、トラックには Offset と書かれるのはちょっと混乱しそうです。

f:id:hiyokosabrey:20170701224351g:plain

 

アニメーションができたら、あとは、Widgetブループリントでコントロールします。

必要な関数は2つです。

 

名前をセットする関数

引数でテキストを受け取ってキャンバスに置いたテキストブロックにセットしてやります。

f:id:hiyokosabrey:20170701224735p:plain

 

 

 グラフの長さをセットする関数

引数でグラフの長さに対する値を受け取ってアニメーションのキーフレームに変換します。アニメーションの再生は Play Animation To を使います。

f:id:hiyokosabrey:20170701225008p:plain

このノードは再生する場所を指定できます。↑の Volume はUMGで作ったアニメーションコンポーネントの名前です。

StartとEndの値が同じ場合、アニメーションは動き続けるので、再生したらすぐに止めます。

この、指定した時間で止めてグラフの長さを調整する方法は Flash でアニメーションを制作したことがある方は、すでにお馴染みの方法だろうと思いますがいかがでしょうか?

 

2つの関数ができたところで、このゲージアセットは完成です。

 

 

実装してみる

セレクト画面のメインWidgeを開いて、できたゲージのWidgetをキャンバスに並べます。今回は4つ。ちょっと大きめの枠線は親のキャンバスパネルです。

f:id:hiyokosabrey:20170701230255j:plain

キャンバスパネルに子供として並べておくと、まとめて移動したり、表示のON・OFFが簡単にできるのでオススメです。キャンバスは親子構造にできるので便利ですが階層が深過ぎると処理負荷があがるのでほどほどに。

 キャンバスに並べたら、扱いやすくするために配列にしてしまいます。

Initialize関数を編集します。

f:id:hiyokosabrey:20170701231309p:plain

先に配列変数を用意しても問題ないですが、オススメの方法をご紹介します。

まずVariablesのリストに並んでいるWidgetを4つドロップします。→①

つぎに一番上のノードのピンからドラッグして Make Array ノードを取り出します。→ ②

Add pin でピンを増やし、ノードを4つ全部つないだら、Make ArrayノードのArrayピンの上で右クリックして Promote to Variable を選択します。 → ③

ゲージWidgetの型の配列変数ができあがります。

 

次にテキスト型の配列変数を用意します。

f:id:hiyokosabrey:20170701232211p:plain

これは変数の型が Text なので、探すのが簡単です。配列変数にしたら、Setでグラフにドロップして、MakeArrayノードをつなぎます。テキストはゲージの横に表示する名前になります。

 

さっそくゲージに名前をセットしてしまいましょう。続きにForEachLoop ノードをつなぎます。(キーボードの[F] を押しながらクリック)

下のようにつなぎます。

f:id:hiyokosabrey:20170701232924p:plain

この状態で再生してみると、このようになります。

f:id:hiyokosabrey:20170701233016p:plain

 

 

データテーブルを用意する

次に、キャラクターの能力値をまとめたデータテーブルを作ります。

まず先に用意するのはStructure

コンテンツブラウザで、右クリック > Blueprints > Structure

f:id:hiyokosabrey:20170702143612p:plain

開いて編集します。中の New Variable ボタンを押すと変数が追加できるので、Integer型の変数を4つ追加します。

f:id:hiyokosabrey:20170702143834p:plain

 Default Value(初期値)は0で構いません。

できたら保存して閉じます。

次に DataTable を用意します。これもコンテンツブラウザで

右クリック > Miscellaneous > Data Table

を選択。

f:id:hiyokosabrey:20170702144348p:plain

Structureを選べと訊いてくるので、作ったStructureを選んでOKボタンを押します。

f:id:hiyokosabrey:20170702145017p:plain

ダブルクリックして編集します。下のようなエディタが開くので下段のRowEditorタブにある + ボタンをクリックします → ①

f:id:hiyokosabrey:20170702144841p:plain

クリックしたらRow Name を変更します。 → ②

この名前はキャラクターのIndex番号になります。後でブループリントから扱うときに数字を使うので 0~7 の半角の数字にしておきます。

f:id:hiyokosabrey:20170702145431p:plain

キャラクター全員のパラメータを入力できたら保存して閉じます。

 

再びメインのキャラセレWidgetに戻ります。

関数を一つ新しく追加します。

作ったデータテーブルを読み込んで必要なデータを取り出すために、

Get Data Table Row ノードを使います。

f:id:hiyokosabrey:20170702150022p:plain

Data Tableの青いピンのところに用意しておいたData Table をセットします。

Row Name No薄い紫のピンには、Integer型の引数からString型を経由してつなぎます。

f:id:hiyokosabrey:20170702145746p:plain

Integer型 → String型 → Name型

こういった型を変換することをキャストすると言います。私たち人間は「 1 」という文字を見た時、「字」なのか「数」なのかを周辺の情報をもとに判断します。コンピュータはある意味単純なので型を指定してやらないと意図通りに処理してくれません。キャストにはルールがあってキャストできないものがあります。Int型(Integerは省略すると Int)は いきなりName型にできないので、いったんString型にします。

 

これで、RowNameに該当するデータの有無で右の処理が分岐します。青いピンからは見つかった場合にデータが取り出せます。

データを取り出したらBreake ノードで分解することができます。

f:id:hiyokosabrey:20170702152230p:plain

Initialize関数で準備したゲージの配列変数をここで使います。Getノードで順番に取り出しながら、ゲージのWidgetに用意しておいた関数に値を渡してやります。

 

Return Node で戻り値(Success=Boolean型)を設定しているのはデータが取り出せなかったときのエラー対策をとるための準備なので、べつに無くても問題ありません。

 

関数は出来上がりです。

これをEventGraphにつなぎます。場所は2か所。

f:id:hiyokosabrey:20170702152801p:plain

f:id:hiyokosabrey:20170702152850p:plain

最初のカーソル位置とサムネイルにフォーカスをセットする部分と、キー入力を受け付けてフォーカスを切り替える部分です。

 

出来上がりです。

 

f:id:hiyokosabrey:20170702153417j:plain

f:id:hiyokosabrey:20170702153426j:plain

 

いかがでしたか?

結構なボリュームになりましたが、だいたいの構造と必要な処理が理解できれば、絵素材の制作を除くと1時間もあれば作れるようになります。今回のオマケ部分はいろんな作り方があるので時間の掛かり方はアイデア次第になりますが、ぜひイロイロ凝ったものを試してみたいですね。

今回の作ってみるシリーズはあまり集中して書く時間が取れなかったので、間があいてしまったのが残念です。前半に比べ後半は細かい説明は省略してますので、記事の内容で分からないとこや間違いの指摘等あれば、お気軽にコメントください。

 

ではでは

ステキなキャラセレライフを!