63.CanvasPanelとアンカーについて

Canvas Panelとは？

CanavasはUIの枠組みで、ウィジェットを自由に並べられるパネルになります。Canvas Panelを追加すると子のウィジェットはアンカー(下で解説)を設定できるようになります。UIを作成する場合は基本的に最初に追加するものになります。

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

😺なのでウィジェットブループリントを作成したらこのCanvasウィジェットを追加して、Canvasの元に様々なウィジェットを配置していくというのが基本の流れになります。

アンカーとは？

😸ちなみにアンカーは英語で「錨(いかり)」の事を指します。イメージとしては海底のある場所にアンカーを置いて、船を固定しておくという感じに近いかなと思います。

アンカーを正しく設置していない場合↓

アンカーを正しく設置していないと比率や解像度を変更した時にボタンが見切れてしまいます。

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

画面の比率によってボタンを押す事ができない状況が発生します。なので必ずアンカーは正しく設定しなければなりません。

アンカーを正しく設置した場合↓

アンカーを正しく設置した場合は以下gifのようにボタンが常に画面内に表示されています。

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

😺このようにアンカーは正しく設置して必ずゲーム画面内にウィジェットが収まるようにしなければいけません。という訳でアンカーを設置していきましょう。

①アンカーを設定してみよう|実践

ではアンカーを試しに設定してみましょう。

右クリック > ユーザーインターフェース > ウィジェットブループリント > UserWidgetを選択 > 名前をUIにします。

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

まずCanvasPanelを追加します。

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

ButtonウィジェットをCanvas下に配置します。

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

🐱このようにCanvas下にウィジェットを配置するとそのウィジェットでアンカーが設置できるようになります。

わかりやすくなるように少しButtonウィジェットの位置を変えておきます。

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

Buttonを選択すると花のようなアイコン(画像左上)が表示されます。これがアンカーの位置を表示しています。

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

さらにButtonを選択した状態で詳細 > アンカーをクリックします。するとアンカーが設定できる項目が開かれます。現在はアンカー(花っぽいアイコン)は左上になっているので、アンカーは左上に設定されている事になります。アンカーは現時点ではそのまま(左上)で良いです。

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

ではアンカーの位置XとYを0にしてみましょう。Buttonがアンカーの位置に合わせられました。

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

ここでいう位置X,Yとは？

位置XとYはアンカーの位置によって決定されます。なので0,0にするとアンカーの地点にウィジェットが配置されます。

またアンカーのAlignmentの項目ではウィジェットの中心点を変更でき、例えば0.5,0.5にするとアンカーの中心とウィジェットの中心が同じ位置になります。

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

🐱このAlignmentの項目も移動させる時に使用するので覚えておきましょう。では今度はButtonが常に画面中央に来るように設定していきます。

Buttonを選択した状態でアンカーをクリックして中央にします。アンカーのアイコンが中央に移動しました。

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

位置XとYを0にします。

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

🐱こんな感じにアンカーは設定していきます。ではこのUIを表示させてみましょう。

レベルブループリントを開いて以下のノードを記載します。BeginPlayから「Create widget」と検索してウィジェット作成ノードを追加します。Classには作成したUIを選択します。AddtoViewportノードを追加します。

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

プレイ前にウィンドウを調整しやすいように新規エディタウィンドウでプレイします。

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

プレイしてみてウィンドウの大きさを変更してみましょう。常にButtonウィジェットが画面中央に表示されるようになりました。

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

🐱アンカーを設置するとこんな感じに画面中央にウィジェット位置が固定されるようになります。船の錨(アンカー)を中央に配置するイメージです。

ちなみにわざわざプレイしなくてもウィジェットブループリント上で以下のように、画面端をドラッグすると解像度や比率が変更した際のUIをチェックできます。

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

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

モバイルであればスクリーンサイズ > 電話 > iPhone Xなどに選択すると表示できます。

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

縦横はこちらのアイコンから切り替えられます。またスクリーン内には茶色がかった場所がありますがそこはスマホで表示されない場所を表しています。

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

スマホは機種毎に解像度や比率が違うので特にアンカーを正しく設置してあげる必要があります。色々な解像度で試してみましょう。

またアンカーのこれら↓に設定するとウィジェットは伸縮するようになります。例えば一番右下の右端に設定すると...

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

ウィジェットは画面サイズに応じて伸縮するようになります。

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

これでアンカーの基礎知識については以上になります。