はじめに
今回はBeta機能だったUIListLayoutのFlex機能が正式にリリースされたのでまとめます。
Robloxバージョン：0.638.1.6380615
参考にした記事・サイト
UIListLayoutとは
UIListLayoutはUIをリスト状に並べることができる便利なオブジェクトです。
下記のように配置することで効果を発揮します。
UIListLayoutの配置
ScrollingFrameの要素がリスト状に並んだ
フレックス機能について
ここからフレックス機能について紹介します。
まずはプロパティ内から設定できるものです。
UIListLayoutのプロパティ
1. Wraps
UIListLayoutと同じ階層のアイテムがはみ出た際に折り返すかどうかを設定できます。
| ▼ Wrapsオフ | ▼ Wrapsオン |
|---|---|
 |
 |
2. HorizontalFlex,VerticalFlex
それぞれ水平、垂直方向の要素同士のスペースを管理します。
これに関しては公式リファレンスの画像が分かりやすいので貼らせていただきます。
| ▼ HorizontalFlex | ▼ VerticalFlex |
|---|---|
 |
 |
3. ItemLineAlignment
フレックスレイアウトでの行内の要素の配置を定義します。
こちらも公式リファレンスの画像が分かりやすいです。
UIFlexItem
さてここでUIFlexItemを紹介します。
UIListLayoutと同じ階層の要素の子にUIFlexItemを追加します。
これにより、UIFlexItemがコンテナ内の隙間を埋める働きを行います。
エクスプローラーの配置
下記は黄色のTextLabelにUIFlexItemを追加し、FlexMode=Fillに設定したものです。
本来のサイズを無視して隙間を埋めるように拡大縮小しているのが分かると思います。
これによりデバイスや画面比率が変わった際に、リスト状のUIを柔軟に対応させることができます。
注意点
フレックスの機能を使用する場合、通常とは別に演算が入るためパフォーマンスに影響がある場合があります。
ScrollingFrameなど要素を大量に追加する場合は個数に注意が必要そうです。
またAutomaticSizeとUIFlexItem間では、スケールされたパッティングやTextScaledなどサポートされていない場合があります。
これは今後のアップデートで対応されていくみたいなので楽しみに待ちましょう！
まとめ
- UIListLayoutのFlex機能を使うことで要素同士の隙間の埋め方を管理することができる。
- UIListLayoutとUIFlexItemを使用することで、コンテナ内の隙間を埋めることができる。
→ デバイスや画面比率の変更に柔軟に対応できる。
かゆいところに手が届くような便利な機能なので、ぜひフレックス機能を使って
UIをカスタマイズしてみてください！！
当社ではRobloxを活用したゲームの開発、 また企業の商品やサービスの認知度拡大に寄与する3Dワールドの制作など、 Robloxにおける様々な活用支援を行っております。 Robloxのコンテンツ開発をご検討されている企業様は、お気軽にご相談ください。 landho.co.jp/
Discussion