【UEFN】canvas_slot structとは？メンバーやデータなど徹底解説

こんなお悩みを解決します。

　本記事の内容 　本記事の信頼性

今回は、canvas_slot構造体について解説します。

なお、当記事はEpicGames公式ドキュメントを参考に解説しているため、気になる方は以下から確認してみてください。

>> 公式ドキュメントを見る

canvas_slot structとは

なお、以下のコードの解説文は、プログラミング初心者の主がなんとか調べて記述したものです。

誤りがありましたら恐縮ですm(_ _)m

canvas_slot構造体は、キャンバスウィジェットのスロットを表すためのデータ構造です。

以下に、canvas_slot構造体のメンバーについて詳しく説明します。

canvas_slot構造体は、キャンバスパネル内でウィジェットの配置やサイズ、リサイズ方法、描画順序などを指定するために使用されます。

canvas_slot structのメンバー

公式サイトによると、「この構造体はデータメンバーを持っていますが、関数は持っていません」とのこと。

canvas_slot structのデータ

先述のとおり、データは以下の6つ。

1つずつ解説していきますね。

①：Anchors

1つ目は、Anchors。

Anchors（アンカー）は、canvas_slot構造体のメンバーであり、ウィジェットのマージンと親要素に対するリサイズ方法を定義する値です。

※マージンとは、ウィジェットとその周囲のスペースです。

ウィジェットは、通常、UI（ユーザーインターフェース）を構成する要素のことで、ボタン、テキストボックス、画像などの表示要素を指しますよね。

そのウィジェットを配置する際に、ウィンドウやパネル内での位置やサイズを指定する必要があります。

Anchorsは、ウィジェットが配置される場所と親要素のリサイズ方法を制御する手段です。

アンカーポイントは、ウィジェットが所属している親要素（通常はコンテナやパネル）の四隅に相対的に配置される点のことです。

左上を原点として、水平方向と垂直方向の位置を0.0から1.0の間の値で指定します。

　4つの値を深堀ると

もう一つの例として、Anchorsの値が（0.5, 0.5, 0.5, 0.5）であるとすると、ウィジェットは親要素の中央に配置されます。

この場合、親要素がリサイズされてもウィジェットは拡大縮小されず、中央に位置を維持します。

Anchorsを使用することで、ウィンドウやパネル内でのウィジェットの配置やリサイズが柔軟に行えます。

ウィジェットのアンカーポイントを適切に設定することで、画面サイズの変更に対してウィジェットが適切にリサイズされるようにすることができます。

②：Offsets

2つ目は、Offsets。

Offsetsは、親要素（通常はコンテナやパネル）に対してウィジェットの位置を指定するための値です。

水平方向と垂直方向の2つの値で構成されます。

水平方向のオフセット値は、親要素の左端からウィジェットの左端までのピクセル数を示し、垂直方向のオフセット値は、親要素の上端からウィジェットの上端までのピクセル数を示します。

Offsetsを使用することで、ウィジェットを任意の位置に配置することができます。ウィジェットのオフセット値を適切に設定することで、画面上の特定の場所にウィジェットを配置することができますね。

また、オフセット値の相対性によって、親要素の移動やリサイズに柔軟に対応することもできます。

③：SizeToContent

3つ目は、SizeToContent。

SizeToContent（コンテンツに合わせてサイズを調整する）は、ウィンドウやコンテナなどの要素のサイズを内部のコンテンツに応じて自動的に調整する機能です。

通常、ウィンドウやコンテナには固定のサイズが設定されますが、コンテンツの内容によってはサイズが合わなくなったり、コンテンツが表示しきれなくなったりすることがあります。

このような場合、SizeToContentを使用することで、コンテンツの大きさに合わせて要素のサイズを自動的に調整することができます。

SizeToContentを有効にすると、要素は内部のコンテンツに合わせてサイズが調整されます。

例えば、テキストを含むボタンがある場合、ボタンのサイズはテキストの長さに応じて自動的に調整されます。テキストの内容が変わると、ボタンのサイズも自動的に変わる感じですね。

この機能は、UIデザインの柔軟性を高めるのに役立ちます。

コンテンツのサイズに応じて要素のサイズを自動調整することで、必要なスペースを最小限にすることができ、さらにはコンテンツが追加されたり変更されたりした場合にも、手動でサイズを調整する必要がなくなります。

④：Alignment

4つ目は、Alignment。

Alignment（配置）は、要素やコンテンツを表示領域内でどのように配置するかを指定する機能です。

要素やコンテンツを表示する際には、それらをどの位置や方向に配置するかを指定する必要があります。

Alignmentを使用すると、要素を親要素内で中央揃え、左揃え、右揃えなどの具体的な位置に配置することができますね。

Alignmentの値は主に次のようなものがあります。

　Alignmentの値

これらの値を適切に設定することで、要素やコンテンツをウィンドウやコンテナ内で所望の位置に配置することができます。例えば、ボタンを中央揃えにすると、ボタンは親要素の中央に配置されます。

Alignmentは、UIデザインの柔軟性と一貫性を確保するために重要な役割を果たします。

さらに進んだAlignmentの機能として、要素の水平方向の配置と垂直方向の配置を個別に指定することができます。たとえば、要素を水平方向には中央揃え、垂直方向には上揃えとすることもできます。

⑤：ZOrder

5つ目は、ZOrder。

ZOrder（Zオーダー）は、オブジェクトや要素の表示順序を定義するための概念です。

ウェブページやアプリケーションの画面には、複数の要素やオブジェクトが含まれます。

※これらの要素は、重なり合って表示されることがあります

通常、オブジェクトの「重なり順」を指定するために使用されます。これは、前景と背景のように、複数の要素が重なった場合に、一番手前に表示される要素や、一番奥に表示される要素を指定することができるということです。

ZOrderでは数値が大きいほど要素は前面に表示され、数値が小さいほど要素は背面に表示されます。たとえば、ZOrderが1の要素はZOrderが2の要素の前に表示されます。

重要な点としては、ZOrderは要素やオブジェクトに対して個別に設定され、その値によって表示順序が決まるということです。また、ZOrderは親要素ごとに管理されることもあります。

親要素のZOrderが設定されている場合、その要素内の子要素の表示順序も親要素のZOrderに影響を受けます。

⑥：Widget

そして最後の6つ目は、Widget。

canvas_slot構造体のWidgetは、スロット（場所）に配置されるウィジェットを指します。

ウィジェットは、グラフィカルユーザーインターフェース（GUI）内で要素を表示するために使用されます。GUIは、ユーザーがアプリケーションと対話するための視覚的なインターフェースを提供します。

例えば、あるスロットに「ボタン」ウィジェットが割り当てられている場合、そのボタンをクリックしたり、表示されるラベルを変更したりすることができます。

canvas_slotを介してウィジェットにアクセスすることで、特定のスロット内のウィジェットを制御することができますね。

よくある質問

canvas_slot structに関するよくある質問をまとめてみました。

気になるQ＆Aがあれば上記をクリックすると該当箇所にジャンプします。

①：キャンバス・スロット・ウィジェットについて教えてほしい

②：AnchorsとOffsetsの違いは？

③：AnchorsとAlignmentの違いは？

④：Widgetについてわかりやすく教えてほしい

まとめ

今回は、canvas_slot structについて解説しました。

canvas_slot structのデータのまとめを以下に再掲しておきます。

　canvas_slot structのデータ

以上、今日はここらへんで。

お疲れさまでした🍵