64.Text,Image,Buttonのウィジェット解説

事前準備

先に何でも良いですがウィジェットブループリントを用意しておきます。

UIという名前のウィジェットブループリントのアセットを用意しておきます。

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

CanvasPanelを設置しておきます。

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

🐱ではまずTextウィジェットから紹介していきます。色々設定項目を紹介していくのですが、基本的に普段使いするものを中心に紹介していきます。

Text(テキスト)

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

Textウィジェットはテキストを表示させるウィジェットです。つまりテキスト表示させるUIですね。

Textウィジェットを追加しておきましょう。

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

Textウィジェットの主な設定項目を詳細の上から順に紹介していきます。

①スロット > Size To Content (枠組みを合わせる)

Size To Contentにチェックを入れると、テキストの緑の枠組みをテキストサイズに合わせてくれます。この緑の枠組みがこのウィジェットの範囲を表しています。

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

Size To Contentにチェックを入れると直感的にウィジェットが編集しやすくなるので必要であればチェックを入れましょう。

②スロット > ZOrder (UIの表示順)

ZOrderの値が大きいものほどウィジェットが手前に表示されます。例えば以下のようにTextとButtonが同じ階層で、Buttonの方が下にあるとButtonが手前に表示されています↓

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

階層はそのままでTextを選択した状態でZorderを1にするとテキストが手前に表示されます。

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

なのでUIの表示順を変更したい場合にはZOrderの数字を大きくしましょう。

③コンテンツ > Text

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

テキストの内容を変更できます。日本語のエディタだとテキストブロックが最初の文字になります。右のバインドでブループリントとこのテキストを紐づける事ができます。詳しくは後のページで紹介します。

④アピアレンス > Cololr and Opacity

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

テキストの色を変更できます。継承にチェックを入れると親ウィジェットで設定した色を子ウィジェットに引き継いで事ができます。基本的にチェック入れずにウィジェット毎に色は設定した方がわかりやすくて良いかと思います。

⑤アピアレンス > Font > Font Family

既存のアセットの中からフォントを変更する事ができます。以下フォントのダウンロード方法です。

例えばGoogleのNotoSansをダウンロードして解凍します。

フォントをコンテンツブラウザまでドラッグします。

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

以下の表示になったら「はい」を選択します。

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

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

これでフォントは簡単に使用する事ができます。

🐱なおフォントは商用利用オッケーでもゲームなどは駄目などたまにあるので、利用規約はちゃんとチェックしましょう。

⑥アピアレンス > Font > Size

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

文字の大きさを変更する事ができます。

⑦アピアレンス > Font > Letter Spacing

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

テキストの間隔の幅の大きさです。

⑧アピアレンス > Font > Font Material

フォントのマテリアルを変更して表面上の柄を変更できますが、フォント用の特別なマテリアルを用意する必要があります。

⑨アピアレンス > Font > Outline Settings

文字の輪郭の線の大きさと色を変更できます。

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

⑩アピアレンス > Strike Brush

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

Strike Brushは取り消し線です。Imageからテクスチャを選択する事で取り消し線が表示されます。上の画像ではデフォルトの127greyを選択します。

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

⑪アピアレンス > Shadow Offset & Color

テキストのドロップシャドウを表示する項目です。まず最初に影を表示させるためにShadowColorのAの数値を上げる必要があります。その後ShadowOffsetで距離を変更します。

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

こんな感じに影をつける事ができます↓

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

⑫アピアレンス > Justification (並び場所)

左だと左揃えになり、真ん中だと中央揃えになります↓

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

⑬ラップ > Auto Wrap Text (枠に合わせて改行)

チェックを入れるとテキストが枠に合わせて改行されます。

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

😺Textの基本設定はこのあたりをまずは覚えておけばよいでしょう。後のページで実践での使い方とブループリントからの変更方法などを紹介していきます。続いてImageウィジェットを紹介していきます。

Image (画像)

では次にImageウィジェットを紹介していきます。Imageは画像のUIです。基本的にただの画像UIとして使用する事が多いです。

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

主に使用する詳細の項目としてはBrush(画像変更)の項目のみになるのでここを紹介していきます。

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

🐱他の設定項目についてはTextウィジェットで既に紹介していたり、他のウィジェット解説時に紹介していきます。ではImageウィジェット詳細のBrushの項目を見ていきます。

①アピアレンス > Brush > Image

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

Imageでは画像を変更できます。既存のアセット(エンジンコンテンツ下参照)から例えばandroid_iconなどを選択すると上のように画像が適用されます。

②アピアレンス > Brush > Tint

Tintで画像の色合いを調整できます。

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

③アピアレンス > Brush > Draw As

DrawAsで画像の描画方法を選択できます。例えばDraw As > Image を選択して下のTilingをBothで画像を縦横方向に並ばせたりもできます。

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

😺画像の追加方法も簡単に紹介しておきます。

画像の追加方法は？

画像をインポートして追加する方法を簡単に紹介しておきます。

まずドラッグで画像をコンテンツブラウザに持っていきます。

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

ImageやButtonなど追加してImageから変更するだけで完了です。

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

😺Imageに関しては特に難しい設定などは無いかと思います。次にButtonですが以前のページで軽く使用しましたが、今回はButtonの基本的な設定を紹介します。

Button (ボタン)

次にButtonウィジェットですが、Buttonは押したらブループリントのイベントを発生させる事ができるウィジェットです。

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

例えば、ボタンを押したらゲーム開始するとか,アイテムを使用するとか実装したい時に使用していきます。Buttonに関してはStyleの設定が重要になってきます。見ていきましょう。

①アピアレンス > Style (ボタンの見た目)

このStyleではボタンの状態に合わせて見た目を変化させます。

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

例えばButtonに触れていない状態(Normal)の時の表示設定,Buttonをクリックした瞬間の表示設定(Pressed),Buttonに対してマウスカーソルをホバーした時の表示設定(Hoverd)などを決定します。

🐱なのでButtonウィジェットに関しては一個の画像を設定して見た目の設定は終わりではなく、クリックした時やマウスをホバーしている時など複数の見た目の設定を行う必要があります。

②Buttonの見た目を設定してみよう|実践

ではButtonに実際に画像を割り当てて、一連の設定の流れを掴んでもらおうと思います。

まずButtonに使用する画像を用意します。何でも構いませんが今回は以下の画像を利用させてもらうのでアクセスしてダウンロードしておきます。

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

UE側にドラッグ＆ドロップで追加します。

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

Buttonウィジェットを追加して、ウィジェットブループリントを以下の状態にしておきます。

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

Buttonウィジェットを選択した状態で、アピアランス > Style > Normal > Imageに先程の画像を設定します。

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

すると枠線が入ってしまっているので..

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

同じくアピアランス > Style > Normal > DrawAsをImageにします。

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

次に同じようにHoverd(マウスカーソルのホバー時)とPressed(ボタンを押した時)も、Imageを設定してDrawAsをImageにします。'

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

これでButtonの見た目の最低限の設定は完了です。

次にレベルブループリントにUIを表示させるノードを作ります。

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

これでプレイしてみると、ボタンの見た目は正しく設定されている事が確認できます↓

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

Styleの主な設定項目です↓

table:style

Normal ボタンにカーソルをかざしていない時の設定ができます。

Hovered ボタンにカーソルをかざした時の設定ができます。

Pressed ボタンが押された瞬間の設定ができます。

PressedSound ボタンが押された時の音を設定できます。

HoverdSound ボタンにカーソルがあわされた時の音を設定できます。

③Style > ColorAndOpacity

ボタンの子ウィジェットの色を変更できます。例えばButtonの子ウィジェットにテキストを配置してボタンのColorAndOpacityを変更するとテキストの色が変更されます。

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

④Style > BackgroundColor

Buttonの画像色を変更できます。

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

⑤イベント

ではイベントの項目ですが、ここではブループリントにボタンのイベントを追加する事ができます。

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

table:イベント

OnClicked ボタンがクリックされた時のイベント

OnPressed ボタンが押された瞬間のイベント

OnReleased ボタンが離された瞬間のイベント

OnHoverd ボタンにカーソルがあてられた瞬間のイベント

On Unhoverd ボタンからカーソルが離れた瞬間のイベントです。

🐱OnClickedは以前のページで既に作成したので、試しにOnReleasedでイベントを作成してみましょう↓

⑥OnReleasedのイベント作成方法|実践

ボタンを選択した状態で、OnReleasedを選択します。

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

PrintStringを追加して以下のように作成します。

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

レベルブループリントを開いた状態で、以下のウィジェット作成ノードを作成します。

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

プレイしてボタンを離した瞬間にテキストが表示されました。

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

ボタンを離したり,押した瞬間に実行する機能はこのように作っていきます。

😺シンプルなウィジェットにもこれだけ設定項目がある訳ですが、今回の設定項目を一通り目を通すだけで大体の編集はできるようになると思います。では続いて他のウィジェットの使い方も見ていきましょう!今回は以上です。お疲れ様でした。