61.ウィジェットブループリントエディタの基本と使い方
😺今回はUIを作成するウィジェットブループリントエディタの使い方について解説していきます。
ウィジェットブループリントエディタとは？
ウィジェットブループリントのアセットを作成してダブルクリックすると開きます。
https://scrapbox.io/files/65c8d55d5201e8002481253a.jpg
これがウィジェットブループリントエディタになります↓
https://scrapbox.io/files/65c8d5ac7cc7150024381194.jpg
ウィジェットブループリントエディタはUIを作成するエディタの事です。UIのパーツとなるテキストやボタンなどのウィジェットを組み合わせる事でUIを作成していきます。
😺ではウィジェットブループリントエディタを見ていきましょう!
エディタ全体図を確認してみよう
https://scrapbox.io/files/65c8d6009ade2a0026fb331e.jpg
table:エディタ
名称 解説
①ツールバー 一般的に使用する機能があります。このあたりはブループリントエディタと
同じでコンパイル、保存、プレイなどがあります。
②エディタモード UIのデザインを作成するデザイナーモードと、
UIのボタン処理などのブループリントを作成する時に使用するグラフモードを切り替える事ができます。
③ビジュアルデザイナ 現在作成しているUIのレイアウトを確認できる場所です。
ここにパレットパネルからウィジェットを追加させたり、位置や大きさを変更できます。
④パレット UIを作成するのに必要なウィジェット(例えばテキストやボタンなど)があり、
ここからウィジェットを中央のビジュアルデザイナに追加します。
パレットの横のライブラリにすると、ウィジェットが画像でわかいりやすく表示されます。
⑤階層 ビジュアルデザイナへ配置したウィジェットの親子関係を階層で表示しています。
このパネルからウィジェットを選択したり、親子関係を替えたりすることができます。
⑥詳細 選択しているウィジェットの設定が表示されます。
例えばTextの場合は色だったり、フォントの種類など変更できます。
⑦アニメーションパネルなど ここからコンテンツブラウザを開いたり、アニメーションパネルを開く事ができます。
アニメーションパネルでウィジェットのアニメーションを作成する事が可能です。
例えばボタンを押したらボタンが小さく縮むなどのアニメーションが作成できます。
エディタ使用時の流れとしては以下のようになります↓
①パレットパネルからウィジェットをビジュアルデザイナや階層パネルにドラッグ＆ドロップで追加します。
②ビジュアルデザイナで追加したウィジェットの位置や大きさなどを決めます。
③追加したウィジェットの設定を詳細パネルから行います。
④調整を繰り返してUIの作成は完了です。
あとはブループリントで呼んでプレイ中に出力するだけです。
😺ウィジェットをパレットから追加して、階層パネルや詳細で調整して最終的なUIを決定していきます。ではそれぞれのウィンドウの簡単な使い方について紹介していきます。
パレットの使い方
ではまずは使用するウィジェットが用意されているパレットから紹介していきます。
https://scrapbox.io/files/65c8dc1bc84cda0025206e60.jpg
①検索
基本的に検索した方が速いので一番上の検索タブを活用しましょう。
https://scrapbox.io/files/65c8dc663a39fc002553cbb9.jpg
②ライブラリ
ライブラリタブに変更すると画像表示になってどんなウィジェットかわかりやすくなります。
https://scrapbox.io/files/65c8dc968814480024e60d4f.jpg
③パレットから追加する方法
パレットからウィジェットを追加する方法は二つあってビジュアルデザイナにドラッグ＆ドロップで追加する方法と、階層パネルに追加する方法です。
https://scrapbox.io/files/65c8dcfd9a186b0025a4f678.jpg
どちらからでも構いません。
🐱ではここからは基本的な使い方について紹介していきます。
ビジュアルデザイナの基本的な使い方を紹介していきます
中央のUIの見た目を表示するビジュアルデザイナについて紹介していきます。この赤枠の部分になります↓
https://scrapbox.io/files/65c8dd42875f600025649fa6.jpg
①ウィジェットを選択した状態で矢印キー
https://scrapbox.io/files/65c8dd6e0f65320023c9599a.gif
ウィジェットを選択して上下左右の矢印キーで場所を変更する事ができ、微調整に便利です。
②ビジュアルデザイナの操作方法
ビジュアルデザイナは右クリックしたままドラッグで移動でき、スクロールで拡大縮小ができます。
https://scrapbox.io/files/65c8dda61279e400245091b0.gif
③ローカライズボタン
https://scrapbox.io/files/65c8ddcdef3f6700244cffb3.jpg
もしUIを多言語対応させたいゲームを作る場合、UIのプレビュー言語をここから切り替える事ができます。なしの部分を選択すると言語を切り替える事ができますが、言語は用意する必要があり、デフォルトではなししか選ぶことができません。左の地球のマークからプレビュー言語への切り替えを行えます。
④破線表示
https://scrapbox.io/files/65c8de2eab04cf002430939e.jpg
例えばキャンバスの枠線が破線で表示されていますが、切り替える事で破線の表示はなくなります。破線が非表示になります(右)
https://scrapbox.io/files/65c8de60fa1d490024978494.jpg
⑤レイアウトの移動
例えばCanvas > Button > Textという階層でこんな感じにUIを作成したとします↓
https://scrapbox.io/files/65c8dea67cc7150024384eb7.jpg
Textを移動させようとするとButtonと親子関係なので以下の様に自由に移動させる事はできません。
https://scrapbox.io/files/65c8ded0c969340025fed9b4.gif
そこでこのボタンを「R」に切り替えるとレイアウトを自由に移動させるようになります。
https://scrapbox.io/files/65c8def728f6020025d49bb1.jpg
これで親子関係に関係なくUIの移動ができるようになりました↓
https://scrapbox.io/files/65c8df2247f23d002df52392.gif
⑥スナップ
https://scrapbox.io/files/65c8df590f65320023c96d44.jpg
ビューポートでアクタを動かす際のスナップと一緒で、左の網のアイコンをオフにするとスナップが無効になり、右の4と書いてある場所でスナップする大きさを変更する事ができます。
⑦画面を中央に戻す
https://scrapbox.io/files/65c8df929a186b0025a5019e.gif
このボタンを押したらキャンバスがビジュアルデザイナの中央にセットされます。
https://scrapbox.io/files/65c8e01c7cc715002438574f.gif
⑧横画面と縦画面の切り替え
スクリーンサイズを例えば電話(Mobile) > Apple iphone XSなどに選択して、山のマークのボタンを押すと縦画面と横画面の切り替えができます(下のGif参考)。スマホなどの縦画面にしたい時は事前にここで切り替えておきましょう。
https://scrapbox.io/files/65c8e07a1279e40024509f28.gif
⑨スクリーンサイズ
スクリーンサイズでは、対応させたい機種に合わせて解像度を変更する事ができます。デフォルトはモニター > 21.5~24monitorです。
https://scrapbox.io/files/65c8e0accde84c0024fc055a.jpg
ビジュアルデザイナの左下に現在の解像度が表示されています。
https://scrapbox.io/files/65c8e0e25c1ba200242c1af7.jpg
⑩レイアウトの変更
https://scrapbox.io/files/65c8e101ab04cf002430a051.jpg
ここではレイアウトのサイズを変更する事ができます。基本的にデフォルトのFillScreenの状態で構いません。
・FillScreenではスクリーンサイズとレイアウトが同じサイズになります。
・Customではスクリーンサイズに関わらずレイアウトを自身で決める事ができます。
・CustomOnScreenではスクリーンサイズ内で大きさを変更する事ができます。
https://scrapbox.io/files/65c8e147dc3d230025949650.gif
・Desiredは既存のウィジェットの端に合わせてレイアウトの大きさを変更します。
・DesiredOnScreenはウィジェットの端に合わせてレイアウトの大きさを変更して、スクリーンサイズの端の線が見えるようになります。
https://scrapbox.io/files/65c8e16f2f801500256fff1f.gif
😺では最後の階層について解説していきます。
階層パネルの基本的な使い方を紹介していきます
階層は配置したウィジェットをテキストで表示している場所になります。
https://scrapbox.io/files/65c8e19054f0a20025ef8fc1.jpg
①親子関係
階層パネルではウィジェットを親子関係にする事ができます。
https://scrapbox.io/files/65c8e1da5d5ab5002678a48f.jpg
ワールドアウトライナの親子関係のように、ウィジェットを親子関係にすると位置を親となるウィジェットに固定する事ができます。例えば基本的な構成としては上の画像のような感じに最初にルートウィジェット(名前でいうとUI)、Canvas、Button、Textのような感じでCanvasの元にウィジェットを追加するのが一般的な方法になります。以下のように親ウィジェットを移動させると子ウィジェットも一緒に移動します。
https://scrapbox.io/files/65c8e1f6c969340025feeab2.gif
階層の移動は、ドラッグ＆ドロップで可能で、Ctrl+C,Vでコピペもできます。
https://scrapbox.io/files/65c8e2168b4303002314e8f6.gif
②ロック
https://scrapbox.io/files/65c8e23de31f6f002567e8cc.jpg
右側に鍵と目のアイコンがありますが、鍵をクリックしてロックした状態にするとそのウィジェットは選択できなくなり、位置が固定されます。
https://scrapbox.io/files/65c8e25fadc27900250922af.jpg
位置が確定したウィジェットはロックしておくと便利です。
鍵マークで全ロック無効にできる
https://scrapbox.io/files/65c8e2a0bb6170002529da1c.jpg
ビジュアルデザイナの上のこの鍵マークでウィジェットの全ロックを一時的に無効にする事ができます。このボタンをオフ(グレー)にすると階層でウィジェットがロックしてある状態であっても関係なくウィジェットを選択できるようになります。既にロック済みのウィジェットが複数ある場合にオフにすると全て選択できるようになり便利です。
③表示非表示
https://scrapbox.io/files/65c8e2f42f80150025700623.jpg
目のアイコンはウィジェットの表示非表示を切り替える事ができます。
④ルートウィジェットについて
ルートウィジェットとは、Root(根本にある)Widget(ウィジェット)の事で一番親となるウィジェットです(下の画像でいうとUIというウィジェット)。ルートウィジェットは自分でウィジェットブループリントに付けた名前で表示されています。
https://scrapbox.io/files/65c8e33d2f80150025700780.jpg
またこういった親のウィジェットは位置だけではなく、色などの設定も子ウィジェットに影響を及ぼす場合があります。例えばColorandOpacaityという項目では親で設定した色と、子で設定した色で組み合わせられて表示されます。
例えばこんな感じでUI→Canvas→Textと配置したとして、
https://scrapbox.io/files/65c8e389dfb11b0026c6e873.jpg
ルートウィジェットとなるUIを選択した状態で、アピアレンス > からColor and Opacaityの色を緑にします。
https://scrapbox.io/files/65c8e3c066b1dc00251b324d.jpg
今度は子ウィジェットのTextを選択した状態で、アピアレンス > からColor and Opacaityの色をオレンジにします。
https://scrapbox.io/files/65c8e417829ddb0024c9f966.jpg
そうするとさっきの緑色と設定した色が組み合わさった色が表示されます。
😺このように親ウィジェットの設定が子ウィジェットに位置以外でも影響を及ぼす可能性があるので注意が必要です。基本的には子ウィジェットで個別に色などの設定は行っていけばオッケーです。
⑤設定の継承
では一度設定した色は戻して貰って継承について解説します。ルートウィジェットを選択した状態で、アピアレンス > ForegroundColorの色を水色に変更します。 ForegroundColorは色を変更した所でそのままでは子ウィジェットのテキストには影響されません。
https://scrapbox.io/files/65c8e4958b4303002314f4d8.jpg
Textの子ウィジェットのColor and Opacaityで継承にチェックを入れます。すると親の設定が引き継がれてテキストが水色に変更されました。
https://scrapbox.io/files/65c8e4afc84cda002520945c.jpg
まとめ
ウィジェットブループリントエディタはウィジェットを組み合わせて作る場所になります。パネルからウィジェットを追加していって階層パネルで親子関係を調整したり詳細で設定を行ったりしてUIの見た目を決定します。ブループリントを編集する場所は右上の「デザイナー」「グラフ」から切り替える事ができます。