62.主なウィジェットを一覧で紹介

基本ウィジェットを紹介していきます

事前にウィジェットブループリントのアセットを用意して開いておきましょう。

https://scrapbox.io/files/65c8d55d5201e8002481253a.jpg

ウィジェットブループリントエディタのパレットウィンドウにある基本ウィジェットについて紹介していきます↓

https://scrapbox.io/files/65c9de364b587100241cf4b9.jpg

その後のページにて主に使用するウィジェットについてそれぞれ使い方と、実践としてHPバーやメニュー画面を作っていきます。

①一般 (Common)

まず一般のカテゴリですが、ここにはUI作成に必要なテキストやボタンなど基本ウィジェットが揃っています。主なものを順に紹介していきます。

https://scrapbox.io/files/65c9deb32af7590024032351.jpg

🐱なお、現時点で理解が難しいものもあるので、その場合は一旦無視してもらって後のページを進めていってください。

Border

Borderは境界線として使用されます。Borderの下にButtonウィジェットを配置した画像になります。

青色の部分がBorderでグレーの部分がButtonになっています。境界線のUIを用意したい場合、Borderというウィジェットを使用できるといった形になります。

Button

https://scrapbox.io/files/65c9df157a01bf002619fd17.jpg

Buttonのウィジェットは押した時や離した時に、ブループリントで何らかの処理を実行させる事ができます。例えばイベントのOnClickedではボタンをクリックした時にOnClickedノードが実行されるようになります。後のページでまた解説します。

CheckBox

https://scrapbox.io/files/65c9df4dbb617000252f9d2d.gif

チェックボックスは見ての通りチェックを入れる事ができます。これもブループリントにイベントを渡す事ができます。

NamedSlot

https://scrapbox.io/files/65c9dfb3ae7a8b00248d519a.jpg

NamedSlotは作成したウィジェットを他のウィジェットブループリントで使用したい時に使用します。作成したウィジェットブループリントは他のウィジェットブループリントでも配置できるのですが、上書きする事はできません。そこでこのNamedSlotウィジェットを使用すると流用先でウィジェットを上書きする事ができます。つまりウィジェットを使い回す時に流用先で上書きできるようにするのがNamedSlotです

ProgressBar

https://scrapbox.io/files/65c9e00a2f8015002575c09e.jpg

HPバーやスタミナのバーなどに使用します。他のページで解説しています。

Rich Text Block

Slider

https://scrapbox.io/files/65c9e0aa829ddb0024cf6ef9.jpg

ゲーム内の設定などに良く用いられます。例えば明るさだったり調整する用のスライダーとして使用します。

https://scrapbox.io/files/65c9e0ee33d35800250f0390.jpg

通常のテキストを表示します。フォントや大きさを変更できます。

🐱このように一般カテゴリには汎用的に使用するウィジェットがあります。特にText,Button,ProgressBarあたりが重要になってきます。それぞれ後に解説します。

②パネル (Panel)

パネルにはウィジェットをどのように配置するか決定するウィジェットがそろっています。

https://scrapbox.io/files/65c9e1ca2e7b2e00231f7191.jpg

Canvas Panel

https://scrapbox.io/files/65c9e1f447f23d002dfb26b0.jpg

CanvasはUIの枠組みとして使用するものです。詳しくは次ページで紹介しますが、子ウィジェットのアンカー設定を行うにも必要なものになります。一番最初にUIの枠組みとして配置するウィジェットと覚えておきましょう。

Grid Panel

https://scrapbox.io/files/65c9e20a96fba300253c948f.jpg

縦横にウィジェットを様々な配置で揃えるためのウィジェットです。これも後に解説します。

Horizontal Box

https://scrapbox.io/files/65c9e22b26f41c0026305f38.jpg

横一列にウィジェットを配置するためのウィジェットです。これも後に解説します。

Overlay

https://scrapbox.io/files/65c9e280bc534500242ed51a.gif

Overlayは複数の子ウィジェットを配置する事ができます。

通常は一個のウィジェットに複数の子ウィジェットは配置できませんが、このウィジェットを使用すると複数の子ウィジェットを配置できるようになります。「ウィジェットを子ウィジェットにしたいのに配置できない..」と言った場合はこのOverlayウィジェットを使用しましょう。

SafeZone

モバイルなど色々な解像度がある場合にUIが見えなくなる事を防ぐために配置するウィジェットで、見えない場所に合わせて子ウィジェットの大きさを調整します。

https://scrapbox.io/files/65c9e384c84cda00252629f9.gif

上の画像のように子ウィジェットのテキストのサイズを変更に合わせて自動調整してくれます。

ScrollBox

https://scrapbox.io/files/65c9e3ac47f23d002dfb2f21.gif

スクロールできるボックスです。

SizeBox

https://scrapbox.io/files/65c9e419e734930024ebac21.gif

子ウィジェットを特定のサイズに変更します。最大や最小サイズも決定できます。

UniformGridPanel

https://scrapbox.io/files/65c9e494a8bd11002367cd4e.jpg

同じ形のウィジェットを縦横に配列させます。

VerticalBox

https://scrapbox.io/files/65c9e4d067a0890024e34cbe.jpg

縦一列にウィジェットを配置するためのウィジェットです。

Widget Swithcher

https://scrapbox.io/files/65c9e55e26f41c0026307170.gif

ウィジェットを簡単にスイッチ(切り替え)させるのがウィジェットスイッチャーです。

WrapBox

https://scrapbox.io/files/65c9e579df4d060027adda68.gif

WrapBoxは列をレイアウトに合わせて自動で改行を行ってくれます。

③インプット(Input)

入力情報(テキストなど)をインプットするためのウィジェットが揃っています。

https://scrapbox.io/files/65c9e63babf64d002336949e.jpg

ComboBox(String)

https://scrapbox.io/files/65c9e6d77cc71500243e7489.gif

ドロップ選択方式のUIを作成できます。

Editable Text

https://scrapbox.io/files/65c9e7101a8f610025ffb478.gif

テキストを入力できるウィジェットです。

SpinBox

https://scrapbox.io/files/65c9e885a8b9100025c9fc3b.gif

マウスをドラッグする事で数値を調整できるウィジェットです。

TextBox

https://scrapbox.io/files/65c9e8b354f0a20025f61c2c.gif

テキストの入力が出来るボックス付きのウィジェットで一行しか入力できません。

TextBox(Multi-Line)

https://scrapbox.io/files/65c9e8f6ae7a8b00248d95ff.gif

テキストを複数行にわたって入力できるボックス付きのウィジェットです。

④ユーザーが作成(USER CREATED)

「ユーザーが作成」項目では今までにそのプロジェクトで、自身で作成したウィジェットブループリント(UI)が表示されてそのウィジェットブループリントを再利用する事が可能です。

https://scrapbox.io/files/65c9e9d41279e4002456d8cb.jpg

使用する手順を簡単に紹介します↓

「UI」という名前でウィジェットブループリントを作ります。

https://scrapbox.io/files/65c9e9f7c84cda0025266ef5.jpg

中身は何でも良いですが以下のようなウィジェットを作ったとします。

https://scrapbox.io/files/65c9ea2f852fa20023717aa3.jpg

🐱このよう複雑なウィジェットを再度作成するのはめんどくさいですよね？UnrealEngineでは一度作ったウィジェット群は再利用する事ができます。

新しく「UI2」という名前でウィジェットブループリントを作ります。

https://scrapbox.io/files/65c9ea4f6e7ad800244d3483.jpg

UI2のウィジェットブループリントを開いて、「パネル > ユーザーを作成」項目を開きます。すると作成した「UI」という名前のウィジェットブループリントがユーザーが作成のカテゴリに表示されるのでドラッグで追加します。

https://scrapbox.io/files/65c9ea7228f6020025db5db6.jpg

つまり「ユーザーが作成」項目から一度作成したウィジェットブループリントを再利用できるという事になります