アセットを作らずにWidgetを作る 《おまけ》
前回の記事でWidgetブループリントで、テキストWidgetを好きなだけ作ってキャンバスに置く方法を書きました。
これを使って遊んでみました。正直何の役にたつか謎なので、暇つぶし程度にしかならない気がする・・・
まず前回の記事で最後の乗せたノードたちをマクロにします。
まるっと選択して右クリック、Collapse to Macro を選択。
ダブルクリックして編集します。
Construct Text ノードの実行ピンからドラッグして、Inputsと書かれたノードの上にドロップします。
右の方の Outputs も同じようにつなぎます。
EventGraphに戻って確認してみると下のようになっています。
ここに引数と戻り値のピンを追加します。
再びマクロの編集に戻ります。
Inputsノードを選択した状態で、Detailタブの中にある Newボタンをクリック →①
変数のタイプは Integer (整数)を選択 → ②
適当な名前を付けます → ③
これが引数というやつです。
Inputsノードに引数のピンが追加されているので、そこからドラッグして To Text(Int) ノードを取り出します。
下のようにつなぎます。
次にOutputsの方。
Add Child to Canvas ノードの Return Value ピンからドラッグして、Outputsノードにドロップします。(ノードの真ん中付近にドロップ)
マクロ完成です。EventGraphに戻ってみると下のようになってます。
この辺で、マクロの名前を変えておきます。
たくさんテキストを作って動かすので、まず変数化します。
Promote to Variable を選択すると変数が作られますが、いったんノードを削除します。
グラフからノードを消しても、Variableリストには残っているので、選択します。
下のDetailタブで、名前を変更したら、配列化ボタンをクリック 。
配列化できたら、これをグラフにドロップしてGetのカタチにします。
そこから Add ノードを取り出してマクロとつなぎます。
Add ノードは、配列型の変数に対して行う処理で、配列にどんどん要素を積み込んでいきます。このままだと1回しか積まないので、ここに ForLoop ノードをつなぎます。
これで、カウント 0~99 までの繰り返し、全部で100回繰り返します。
配列には 100個の要素が積まれることになります。
Loop Body から白線が途切れるまでを繰り返します。
前回の記事の最後の方で 『適当なキャンバス』 というのが登場します。
マクロにも出てますが、CanvasPanel_31 はこんなやつです。
これをノードとして利用するので、 Is Variable のチェックを付けています。
このキャンバスパネルに対して子供として100個のテキストWidgetをマクロでくっつけますが、座標の指定をしないと同じ位置に重なってしまいます。そこでポジション設定。
Graphに戻ります。
キャンバスパネルの大きさを計算で利用したいので保持する変数を一つ用意します。
Box 2D 型です。
この変数にキャンバスパネルのサイズを取得して渡します。
まず変数をグラフにSetのカタチで ドロップ → ①
さっきマクロにつなげた ForLoop ノードと、EventConstructノードもつなげてしまいます。
左のピンから Make Box2D ノードを取り出す → ②
キャンバスパネルをドロップ → ③
そのノードからドラッグして Slot as Canvas Slot ノードを取り出す → ④
ReturnValueピンからドラッグして Get Sizeノードを取り出す → ⑤
基本的にキャンバスなどのWidgetパーツのサイズを取得するには、③→④→⑤ の流れになります。
次に、
座標をセットするために Set Position ノードをつなぎます。マクロの ReturnValue からドラッグすると、Set Position ノードが見つかります。ここにGetSizeの結果の1/2をつないでおきます。サイズの半分ということで、「真ん中」になります。
まだテキスト100個分の座標がコントロールできる感じじゃないので、配列変数を新しく追加します。今度は、Vector2D 型です。ここに100個分それぞれの値を入れて管理します。
この配列変数をForLoopの最後につなぎます。
最初の配列は、スロット型でテキストWidget100個分を動かすためのものです。で次ののVector2D型の配列は、テキストWidget100個分の移動速度と方向入れておくものです。
この配列にランダムな値を作って積んでいくようにします。ランダムと言っても一応計算して求めます。
真ん中にある COSd と SINd はサインとコサインを求めるノードです。
普通はラジアンで求めるというのを数学で習ったと思いますが、0~360の角度(Degree)からラジアン(Radien)を計算するのは、覚えていないと面倒です。ところがブループリントには 角度から サイン・コサインを求めるノードが用意されているのです。なんて便利!
この計算は角度を適当に決めて円周の点(x,y)をサイン・コサインで求めた後、適当な半径(2.0~8.0)をかけているだけです。ということで細かい説明はひとまず置いておきましょうか。
これで準備はできました。
あとは、動かすだけです。
Event Tick につないでいきます。
この状態で100個分のテキストWidgetが動くのですが、制限を付けていないのでバーンと移動してそのうち消えてしまいます。
そこで範囲を越えたら反射させます。
だいぶ説明が長くなってきたので、一気に載せてしまいます。
大きいので左右2枚にしました。
範囲をチェックするのですが、タテとヨコそれぞれの方向でチェックします。
まずヨコをチェックして範囲を越えていれば (-1, 1.0)を掛けます。次にタテをチェックして範囲を越えていれば今度は (1.0, -1.0) を掛けます。
-1 を掛けることで反転することになります。反転したら、配列の中身を更新します。
最後に今の位置を調べてあるので、そこに配列の中身を足して 新しいポジションにします。
これで一応完成です。
テストしてみると、100個の数字が飛び交います。
時間内にこの中から決められた数字をさがせ! というミニゲームができそうな・・・
作りはじめたときサイン・コサインを使わずに移動速度と方向を求めていたら、いい感じにならなかったので、サイン・コサインを使うことにしました。
これで問題があるかと言われれば、 0に近い数字が出てきてしまうことです。サイン・コサインを使うと、どんな角度でも一定の速度で移動できるメリットがあります。シューティングゲームでは必須です。
スピードをランダムにするのをやめて固定値を入れてみると・・・
これはこれでなかなかキレイです。弾幕シューティングを彷彿とさせます。
おまけのつもりが結構なボリュームになってしまった。
今回はこの辺にしておきます。
ではでは ステキなWidgetライフを!
アセットを作らずにWidgetを作る
Widgetで何か表示しようとすると、UMGでキャンバスにパーツを置いていきます。これはあらかじめ表示する数が分かっている場合ですが、数を必要に応じて動的に配置したいときは、別のWidgetブループリントをアセットとして用意しておいて、これをCreateWidgetノードを使って並べます。
テキストを表示する際に色をつけたり、ボールドにしたりしたくなった場合にいちいちアセットから用意するのもなんだかな~・・・ と常々思っていました。
ありました。
ブループリントだけで自由に作る方法が。
Create Widget ノードを取り出してよく見ると、Construct NONE と書かれています。
そうか!?
ということで、さっそく実践。
まず変数を用意します。といっても正しくはクラスです。
Variablesのところの追加ボタンをクリックして、"text" で検索すると出てきます。
上の図のように白い▲のところから Class を選択します。
Detailsタブから名前と初期値をセットするのですが、下のようになっているので焦らずにコンパイルします。
適当に名前を付けて、一番下のプルダウンを TextBlock に変更します。
これをグラフにドラッグ&ドロップします。
ドロップしたクラスのピンからドラッグしてConstruct Object from Class ノードを取り出します。
クラスからオブジェクトを作るぜ! というノードです。
ノードのキャプションが Construct Text になっています。似てますね。
Outerピンに何もつながないでいると、コンパイルエラーになるので、Selfノードをつないでおきます。
最後にReturnValueを適当なキャンバスパネルに Add Child to Canvas してやります。
これが基本のフローです。
色とかフォントを変えるのはこんな感じ。
端っこのAutoSizeは、有効にしておかないと、文字が欠けてしまってすべて表示されません。
この方法を使えば好きなだけ画面にテキストを表示できます。
ショットガンのヒットダメージ表示とかにも使えそうです。
Imageも同じ方法で大量生産できます。
ではでは
次回もうちょっと遊んでみます。
マテリアル操作で簡単アイコン切り替え
UMGのマテリアル操作でアイコンイメージを切り替える記事を前に書きました。
ちょっとだけラクする方法をひらめいたのでメモしておきます。
簡単といっても指定が楽になる程度ですが。
このときは、アイコンのUV値(テクスチャ内の場所)をそのまま配列にしていました。
小数点の扱いがちょっと・・・な感じです。
まず今回用に新しくテクスチャを用意しました。
512x256 の長方形です。
相変わらず、Webdingsという書体で構成しています。
↓RGBはこんな感じ。
↓アルファチャンネルはこんな感じ。
アイコン1個分の大きさは 80x80 です。今回長方形のテクスチャなのでTilingの値がUとVで異なります。
UV値を扱う場合、 値の範囲は 0.0 ~ 1.0 なので、
値を求めるときは ( 移動量もしくはサイズ ÷ テクスチャサイズ )で計算します。
Uの値は 80 / 512 で 0.15625
Vの値は 80 / 256 で 0.3125
になります。
半角のスラッシュは、プログラミングの世界では 『割り算』を意味します。
分数表記で 1/2 と書いたりしますが、そういうことです。
割り算のノードを取り出すときに使います。ちなみに掛け算は アスタリスクです。
3Dモデルを作る方々はこんなUVの計算なんか無縁なんですが、UIデザイナーは日々こんな小数点と闘っているのです。えへん。
で、この値をマテリアルに仕込んでいきます。
今回見た目に発光させたいので、Blend Mode を Additive にしました。
まずは色を付けるところから。色を変えるためにベクター型のパラメータを2つ。
つぎにUVを操作するとこ。
ベクター型の中身である4つのFloat型、RGBA のうち、RとGをTilingの値としています。BとAをOffestにしていますがTilingと掛けているところが今回のポイントです。
マテリアルは以上で完成です。
前回の記事と同様にしてキャンバスに並べてブループリントから変更してやるだけなのですが、配列の値を変えます。その前にアイコンの並びを確認。キレイに並んでいれば配列を使う必要はないのですが、削除したり追加したりしているうちに制作終盤で下図のように不規則になることもあります。
普通テクスチャ内でアイコンの場所が変わっても、アイコンを管理する番号(ID的な)は仕様的に変更することはしません。バグの元になります。なので、アイコンが順番通りに並んでいなくても、管理番号さえ変えなければ問題ないので配列が便利なのです。
今回、マテリアルに仕込んだ計算でこの場所の指定がラクになります。
左上のアイコンを(0,0)として右下のアイコンが(5,2) という形になります。
配列にするとこんな感じ。メンテナンスするならどちらが簡単か一目瞭然です。
アンリアルエンジンでは数値のフォームで四則演算が使えます。
左側の場合 一旦 0.15625 というベースの数字を [Ctrl] +[ C]キー でクリップボードに入れたら、あとは[Ctrl] +[ V]キーでペーストして、 *2 とか *5 を後ろに入力して[Enter]キーを押すと計算結果に変わります。
テクスチャが長方形の場合、UとVでベースの数字が違うのと、アイコンのサイズとテクスチャのサイズを忘れた頃に編集することになると思うので、それなりに面倒です。
テクスチャをパッと見て、左から何個目、上から何個目って数えた方が早いです。
で、表示テスト。
ちょっと遊んでみました。
カーソルキーでフォーカスを切り替えています。上下左右はループするすようにしています。
今回のマテリアル操作自体は、新しいテクニックではないです多分。単に自分で勝手に「そうかその手があったか」って盛り上がったので、記事にしてみました。
基本的な操作を習得するので問題ないですが、制作の工程を長い目で見ると、まだまだ効率化の余地はあるなぁ、と長年やってきて思うわけです。
ではでは、ステキなUVライフを!
UMGでリストボックスを作ってみる 《おまけ》
前回作ったリストボックスにもう少しだけおまけを追加してみようかと。
リストボックスは、全体の一部分しか見えていないので、「もうこれ以上ないよ」または「まだ続くよ」というのをユーザーに伝えてあげた方が良いと思います。
伝え方としてはいくつかの方法があります。
・スクロールバー
・分数表記
・矢印でスクロール可能である表示
・ちら見せ
スクロールバーは全体の総数が分かってさらに今この辺、という示し方ができるので最強の部類です。総数が分かって今どこ、というのが分かるという意味では分数表記もアリですが、リストタイプよりページ切り替えするタイプに向いています。簡単な表示でそんなにややこしくないのが、矢印で示すタイプ。総数が分からないのが難点ですが、小規模のリストであればデザインも軽くできてそんなに悪くないと思います。
あとはパーツを必要としない、ちら見せ。まだ先があるように一部分だけを見せます。簡単そうだけどちょっとだけ補正の計算がややこしいです。
というわけで、今回スクロールボックスを使わなかったので、意地でもスクロールバーに頼らない表示を実装してみます。
で矢印タイプを作ってみます。
まずは、矢印のテクスチャ。64x32。
テクスチャ容量節約のためMaskテクスチャにします。
アルファチャンネル無しの24bitのTarga形式です。
インポート設定は以下。
設定して保存したら、コンテンツブラウザのアイコン上で右クリックしてマテリアルを作成します。
UMGで使用するので、Material Domain(マテリアル属性)を Surface から Use rInterface に変更します。
↓↓↓ Blend Mode はOpacityを使いたいので、Translucent にします。
ノードはこのようにつなぎます。
マテリアルはこれで完成です。点滅させたりカラーを重ねたりしても面白いかもです。
前回作った『親』Widgetを編集します。
UMGで Image を2つキャンバスにレイアウトします。
Detailsタブの Appearance > Brush > Image のところに作ったマテリアルをセットします。矢印は上向きしか用意していないので、下側の矢印は回転させます。
Detailsタブの、Render Transform > Transform > Angle の値を -180 にしてます。
最初は消えていてほしいので、
Detailsタブの、Behavior >Visibility を Hidden にしておきます。
Widgetブループリントから触るので、IsVariableのチェックも確認。
編集モードをGraphに切り替えます。Event Tickにつないでいるところで空いているピンがあります。
ここに矢印を出したり消したりする処理をつなぎます。
表示範囲が一番上、もしくは一番下になって初めて消えて、それ以外では表示します。
配列のInde番号は 0 からスタートするので、個数を見ると、最後のIndex番号より1つ多い数字になります。(慣れないとよく混乱します)
ViewRange_Bottomも見た目の数(=ViewRange_Num)を素直に足しているので、値としては1多い状態です。こういった値を扱うとき困るのが判定部分だと思います。
つなぎ方次第で同じ結果になるものもあってややこしいのですが、AとBどちらのピンを基準に考えるかがポイントです。
なので、こうなります。
今回は ==(イコール)を選びましたが、他のものでも問題なく動作させることができます。たとえば↓
ViewRange_Top の値が、0 だったら Hidden(非表示) と、
ViewRange_Top の値が、0より大きかったら Visible(表示) は同じ結果になります。
というわけで再生してみると
いい感じになりました。
今回 あまり端折らないようにしようと心がけてみたのですがいかがだったでしょうか?
解らない部分などありましたらコメントいただければ、頑張ってお答えします。
ではでは
UMGでリストボックスを作ってみる 《続き》
前回でリストを表示するとこまでできました。
今回はカーソルの移動と、表示範囲の移動を作っていきます。
カーソルの移動とキー入力
カーソルを動かすためには、「いまここ」というのが分かっていれば
次に移動する場所が計算できます。そのための変数をInteger型で作って Event Construct ノードのすぐあとにつなぎます。FocusIndex と命名。
つながなくても初期値はセットできますが、「Set」の状態で初めの方につないでおくことで、初期値が分かりやすくなるのでオススメです。
カーソルの移動範囲はリストアイテムの先頭から最後までです。
先頭は0で問題ないとして、最後はどうやって調べる?
数があらかじめ決まっているわけではないし。
配列に好きなだけテキストを入れる仕様なので、その自由度を尊重して、Length ノードを使います。そしてその値を保持しておく変数を用意します。
カーソル用の変数が用意できたところで、キー入力を受け取れるようにします。
ポイントは get Player Controller ノードです。そして Was Input Key Just Pressed ノードです。
Keyのところに操作したいデバイスのボタン等をセットします。上の図はキーボードのカーソルキー「↑」と「↓」です。ゲームパッドだと、D-Pad の UpとDown になります。ちなみに D-Pad の D は Directional のDなので、方向キーのことです。
ReturnValueピンが赤いので、ブーリアンで値が出てきます。True か False です。ということで Branchノードをつなぎます。さらに Event Tick ノードともつなぎます。
キーボードとゲームパッド両方で操作したい場合は、こちらの記事を参考にしてみてください。
それぞれのBranchノードから、変数 FocusIndex の値を プラスマイナスするようにつなぎます。
VerticalBox にアイテムを追加すると、上から下に向かって足されていきます。なので上方向にカーソルを進めるには、FocusIndexの値を減らせばいいわけです。
一旦増やしたり減らしてみて、範囲を越えてないかチェックします。無事範囲に収まっていれば次に進みますが、越えていれば何もしません。
越えていなければ、+1、-1した値を、FocusIndexに入れます。これで変数がカウントアップまたはダウンしたことになります。
この新しくなった値で、配列に入れてある『子』Widgetのリストアイテムの関数を呼び出します。フォーカス状態にする関数です。
CreateWidgetした際に配列に積んでいった『子』WidgetをGetで指定してフォーカス状態にします。
この辺でテストしてみましょう。
動くには動きましたが動かすたびにフォーカス状態になっていきます。
デフォルトに戻す処理を入れていないのです。
で、入れる場所は2か所。まだFocusIndexの値が更新される直前です。
ゴチャついてきたので、マクロを作って差し込むことにします。setFocus関数につないだのと同じような形です。
setListItemDefault という名前にしました。
これでテストしてみましょう。
いい感じです。
ですが、下に動かすと表示範囲の外に行ってしまいます。
表示範囲の移動
表示範囲を越えたのかどうかを調べて、越えていれば表示範囲を動かせばいいのですが、表示範囲を管理する変数が必要です。Integer型を3つ用意します。
これを最初の方に仕込みます。仕込む場所は ↓
カーソル位置をセットしている直後に仕込みます。見えている範囲はカーソルが一番上にある状態でスタートしたいからです。
カーソルの位置を基準に変数の初期値を決めてセットしています。
見えている数 ViewRange_Num は見た目に見えている数を初期値として持たせています。今回は 8個見えているので、
としています。
カーソルの初期位置と違って、最初から最後まで変動しないのと、デザイナの都合なのとで、特に明示しなくても誰も困らないので明示しなくていいかなと。
こういうのを「定数」とか言います。
ちなみにカーソルの初期位置については、UX的に利用する場合があるので、あえてSetノードを置いているのも理由としてはあります。カーソル位置を覚えておく場合とか。
変数の関係と使用イメージを図にしてみました。見えている数が5個の場合です。
この4つの変数(うち1つは定数)を使って表示範囲をコントロールします。
必要な変数が用意できたので、カーソルの表示範囲チェックの部分を作ります。
また差し込んでいきます。
カーソル位置 FocusIndex の値が更新された直後に判定します。
あともう一息。
表示範囲を動かす処理です。
同じような内容が上と下につながるのでマクロにします。ListScrollと命名しました。
スクロールする方向を指定するためのパラメータ(Integer型)を受け取れるようにしています。
ではマクロの中身はこうなっています。
ScrollStepというFloat型の変数を作って置いています。これはスクロール移動量で、リストアイテムの高さと同じ値が入っています。これも定数になります。
VerticalBoxのポジションをGetとSetしているとこで、見慣れない状態になっていると思います。これはピンを分解している状態です。
Split Struct Pin を選択するとFloat型に分解されるのです。Breakeノードを使わないのでスッキリです。
こういった分解できるものは他にもたくさんあるので、気になったら右クリックしてみるのをオススメします。
テストしてみましょう。
ようやくらしくなりました。
あとは、矢印の表示くらいですが、長くなったので今回はこの辺で。
UMGでリストボックスを作ってみる
スクロール機能のついたリストボックスを作ろうと思って、ブループリントを触り始めたら思いのほか手間取ってしまいました。当たり前のように使ってるUIのしくみって作ってみないと分らないものですね。ちょっとボリュームがあるので、うまくまとまるか自信ないけど書いていきます。
ちなみに
UnityとかiPhone開発界隈ではスクロールビューとか呼ばれているみたいですね。
リストボックスで検索すると、Excelの画像がたくさん出てきます。
今回作ってみたのはこんな感じ。
UMGには ScrollBox というものが用意されていますが、今回は VerticalBox(バーティカルボックス) を使います。
さて、そもそものリストボックスについておさらい。
表示しきれない量の選択肢に対応するための仕組みで、表示範囲が移動するのがポイント。
今回ゲームパッド操作を考えているので、カーソルが存在します。カーソルが移動して表示範囲を越えようとしたときにようやく表示範囲が移動します。表示範囲内であればカーソルが動いても表示範囲は動きません。
つまり、カーソル移動と表示範囲の移動は完全には連動しません。
こんなとこでしょうか。
UMGでこれを再現するために、CanvasPanel で表示範囲を決めて、VerticalBox をその子供にします。VerticalBoxを動かせば、CanvasPanelの外は描画されないので、バッチリです。
リストアイテムを作る
リストとして並べるパーツを作ります。
コンテンツブラウザで Add New ボタンか、右クリックで User Interface > Widget Blueprint を選択。
とりあえず WD_ListItem と命名して編集開始。
シンプルに下敷きの板(Image)とテキストブロック(TextBlock)の2パーツです。
テキストブロックに g が入っているのは、ディセンダ(ベースラインより下の部分。小文字の g j p q y 用)の加減が分かるようにするためです。
さらにサイズを大きめに設定して、下敷きよりも下にハミ出させているのは、VerticalBoxで並べたときにスキマを作るためです。(VerticalBoxの設定でできそうなノードを見つけたのですが、まだできないっぽい)
テキストブロックは、内容を自由に書き変えたいので、変数化します。
Detailsタブの一番上にあるチェックボックスにチェックを付けます。
チェックボックス左のフォームは変数名として使われます。
このリストアイテムは、カーソルの乗った状態(=フォーカス)と、乗ってない状態(=デフォルト)の2つがあります。
これをアニメーションで作ります。
これで見た目は完成。編集モードを Graph に切り替えます。
さっそく関数を2つ用意します。うえの2つのアニメーションを再生するためのものです。関数にしておけば、自分以外のブループリントなどから呼び出してもらうことができます。関数は、My Blueprintタブの Functions にある +ボタンをクリックして追加します。
中身は以下のようにつなぎます。まずは setDefsult 関数。
ほぼ同じ内容で setFocus 関数。
両方とも同じカラーを変更するタイプのアニメーションなので、安全のためにいったん先に動いているであろうアニメーションをストップさせてから、再生するようにしています。
最後にテキストブロックの内容を変える仕組みを用意します。
以前の記事では関数を使っていましたが、今回は使いません。
代わりに変数を一つ用意します。タイプはテキスト型。
Editable と Expose on Spawn にチェックを付けます。
次に Event Graph を編集します。
初めから置いてあった、Event Construct ノードに変数化したテキストブロックをつなぎます。Set Textノードは、テキストブロックのGetノードから 「set」 と 「text」 で検索するとすぐに見つかると思います。
In Textピンにさきほど作った変数を接続。右端にデフォルトアニメーションを再生する関数をつないでおきます。UMGは最後に触った状態から表示を開始する仕様なので、強制的にデフォルト状態にしておけば安心です。
以上でリストアイテム完成です。保存して閉じます。
リストを並べる
作ったリストパーツを並べて表示するための『親』Widgetを作ります。
今度は WD_ListBox と名付けました。
まずはUMGでパネルをレイアウトします。
レイアウトしたのは3つ。
1.下敷き(Image)
2.表示範囲用(CanvasPanel)
3.リスト並べ用(VerticalBox)
3を2の子供にします。
VerticalBoxだけ太字になっているのですが、これは変数化しているという意味を表しています。ブループリントから触るのはVerticalBoxだけです。
追記: 2020/6/27
この記事を書いていた当時、CanvasPanel はデフォルトでクリッピング(キャンバスの外側にはみ出た部分は描画しない)してくれていましたが、最近は設定が変更になったようで、今回のような表示方法では、明示的にクリッピングするよう、設定を変更する必要があります。
CanvasPanel にこの Clip to Bounds を設定すると、子供にしたVerticalBox は CanvasPanelの中だけに描画されます。
<<<
ちょっと名前が長くなるのですが、なるべく何のパーツかわかるようにアンダースコアの前の部分は残すようにしています。
これでUMGのレイアウトは完了です。
編集モードを Graph に切り替えます。
まずリストパーツに表示するアイテム名を作ります。
実際にゲームなどで汎用的に使う場合、他からリストを受け取ることになると思いますが、今回はテスト用に自前で用意します。ブループリントをスッキリさせたいのと、後から取り外しがしやすいので、マクロにします。
My Blueprint > Macros の右端にある+ボタンをクリック。
Detailsタブの下の方にある Outputs のところにテキスト型の配列を追加します。
グラフのノードも変化しているので、ピンからドラッグしてMakeArray ノードを取り出します。
あとは Add pin+ を好きなだけクリックして、テキストを入力していきます。
できたら、このマクロを使ってリストを並べる処理を作ります。
タブを マクロから Event Graph に切り替えたら、作ったばかりのマクロを取り出します。このマクロは白いピンがないので、このままだとつながりません。
そこで ForEachLoop ノードの出番です。これは配列変数と相性抜群で、とても便利なノードです。配列の要素(中身とか引き出しのイメージ)の数に合わせて処理をしてくれます。要素が尽きると Completed ピンに流れます。
さらに便利なのが、ArrayElement ピンです。つないだ配列の要素を順番に取り出してくれるのです。
普通の ForLoop ノードだったらこうなります。
Loop Body は、繰り返し行う処理をつなぐためのピンです。
ここに CreateWidget ノードをつないで 『子』の リストパーツWidget を量産します。
Classの部分に 『子』のWidgetをセットしたとたん、ノードの下部分 に新しくピンが出現します。Expose on Spawn した変数がここに顔を出すので、ForEachLoopのArrayElementピンとつないでやります。
新たに『子』としてCreateWidgetされたパーツは、後から個別にデフォルトとフォーカスを切り替えるので、配列変数にしまい込んでいきます。
まず、Return Valueピンの上で右クリックして、Promote to Variable を選択します。
この操作で 『子』Widget型の変数が作られます。
これを配列変数に切り替えるのですが、このままやると警告が出てちょっとイヤな感じなので、いったんグラフ上で消してしまいます。Variablesリストには残っているのでそこで設定と名前を変更します。
この配列変数を、Addノードを使って CreateWidgetノードとつなぎます。
最後にVerticalBoxに追加します。Variablesリストからドラッグ&ドロップして、Getで配置したら、Add Child to VerticalBox ノードを取り出して、下図のようにつなぎます。
ループ処理が完成しました。
仕上げにカーソルを表現します。
ForEachLoopノードの Completed ピンに 『子』Widgetで用意した setFocus 関数をつなぎます。
この辺りで一度表示を確認してみます。
レベルブループリントを編集します。
再生してみると、
見た目はほぼ完成です。
今回はこの辺までにします。
次回ひき続き動かす部分を作っていきます。
ではでは
Widgetコンポーネントにマテリアル
4.13にアップデートしてみたら、うれしい機能が追加されてた。
多分VRでWidget使いたいという声が多く寄せられたんじゃないかと想像してみたり。
Widgetはそのままだと、2Dだけど、とWidgetコンポーネントとしてWorld空間に置くと3次元が表示できる。DeadSpaceが再現できる。
ブループリントアクターから、Widgetコンポーネント としてビューポートに追加するんだけど、4.13からここにマテリアルがセットできるようになった!
相変わらず Experimental(実験的)実装なまま・・・
マテリアル以外にも気になるパラメータがあるんだけど、とりあえずマテリアルで実験してみた。
適当な背景用画像を用意。
で、これを使ってマテリアルを作成。SceneDepthを利用。
Widgetに使うんだけど、コンポーネント用だとマテリアルドメイン(属性)は Surfaceでいいみたい。
ScreenDepth は、不透明モデルが描画されるタイミングで更新されるぽくて、そのDepth(深度)情報を元に if ノードで描くか描かないかを決めています。
次に、Widgetブループリントを作成。
といっても、上のマテリアルで適応するとWidget自身の描画がされないので、ひとまず四角い板を一つ。
サイズは 適当に 1920x1080 。
SaveしてWidget完成。
次にブループリントアクターを作成します。
+Add Component ボタンから、Widgetコンポーネントを追加します。
追加したら、エディタ右の Detailsタブを確認して、
Material という項目を探して用意したマテリアルをセット、
すぐ下の User Interface という項目の、Widget Class に作ったWidgeブループリントをセットします。
Draw Size に描画したい大きさを指定できるのですが、Widgetの中身に合わせてほしいので、Draw at Desired Sizeにチェックを付けておきます。
簡単なテストなんでブループリントはこのくらいで出来上がりです。
ではワールドに配置していきましょう。
適当なキューブとかスフィア(球)を置きます。ライトも適当に。
ブループリントもドラッグして配置します。右端がブループリントの中にいるWidgetコンポーネント。
これをWidget側に回り込むと・・・
手前にいるのに、モデルより奥に描画されています。SceneDepth情報がうまく利用できているということです。
カメラに貼り付けたりビルボード的に表示できれば面白い使い方ができそうです。
4.13いいですね。
まだまだ検証しないといけないですが、また何か発見があれば記事を書こうと思います。
今回はこの辺で。