1. Flex機能とは
本記事では、Roblox StudioのBeta機能であるFlex機能について紹介します。Flex機能は、UI要素のレイアウトを柔軟に、かつ、簡単に配置できる機能となります。
以下からは、このFlex機能の追加方法と機能についてみていきます。
2. 使用する機能
・UIListLayout
・Flex Feature
3. 手順
まず、Roblox Studioを起動します。今回は、テンプレート「Baseplate」を使用します。
Flex機能を追加する前に、追加されていない状態を確認します。
UIListLayoutを追加して、プロパティにFlexに関連する項目が存在しないことを確認します。
ここから、Flex機能を追加していきます。
画面左上の「FILE」をクリックして、「Beta Features」をクリックします。
画面をスクロールし、「UIListLayout Flex Features」にチェックマークをつけ、「Save」をクリックします。
「Restart」をクリックし、Roblox Studioを再起動させます。
再起動後、UIListLayoutのプロパティを確認すると、HorizontalFlexとVerticalFlexが追加されていることが分かります。
Flex機能を使用する準備をしていきます。
StarterGuiにScreenGuiを追加、ScreenGuiにFrameを追加し、その子要素にUIListLayoutと3つのTextLabelを追加します。UIListLayoutのFillDirectionをHorizontalにします。これで、TextLabelが横並びになります。また、今回は分かりやすくするために、TextLabelの背景色を変更しています。
上記の状態で、UIListLayoutのHorizontalFlexを変更していきます。
Fillに変更すると、TextLabelのサイズがFrameの横幅いっぱいに大きくなります。
SpaceAroundに変更すると、各TextLabelの間に等しいスペースを配置するようになりました。
SpaceBetweenに変更すると、両端にTextLabelを設置し、残ったスペースを各TextLabelに均等に配置するようになりました。
SpaceEventlyに変更すると、Frameの端とTextLabelのスペースも考慮して、すべてのスペースを均一に配置するようになりました。
以上は、水平方向のFlex機能を試してみました。同様に、垂直方向にも同じ機能を適用することができます。
UIListLayoutのFillDirectionをVerticalに変更します。すると、各TextLabelが縦並びになります。
同様に、VerticalFlexをFill、SpaceAround、SpaceBetween、SpaceEventlyに変更していきます。
以上のように、垂直方向の配置にもFlex機能を適用することができます。
また、このFlex機能は、UIListLayoutの親要素であるFrameの大きさを変更すると、それに合わせて、TextLabelの位置が柔軟に変化します。
このように、Flex機能を利用することで、UI要素のレイアウトを柔軟に調整し、さまざまな画面サイズやデバイスに対応したユーザーインターフェースを簡単に設計することができます。
コメント