はじめに
こんにちは、まつさこ です。
Roblox Studio でゲームを開発する際、UIのサイズを調整したり、デバイスの画面サイズに応じて位置を調整するのに手間取ったことはありませんか？今回は、UI要素を自動調整してくれるプラグイン「AutoScale Lite」を紹介します。このプラグインを使うことで、様々な解像度に対応したゲームを開発する際に、UIのサイズを自動調整することができます。
AutoScale Lite とは
AutoScale Lite は、UI要素を自動でスケーリングしてくれるプラグインです。UI要素のサイズや位置を自動調整することで、様々な解像度に対応したゲームを開発する際に便利です。
▼ プラグインのページはこちら
▼ チュートリアル動画
使い方①
例えば、ScreenGui内に配置したFrame要素について考えます。Frameを追加してそのままの設定だと画面左上に配置されると思うので、この位置での表示が各デバイスで妥当になるかどうかを確認します。
このままの状態だと、Frameの Size プロパティは {0,100},{0,100} となっていると思います。これは、Frameのサイズが縦横ともに100pxであることを示しています。これだと、画面サイズが変わるとFrameのサイズが固定されてしまい、UIが小さすぎたり大きすぎたりしてしまいます。
Studioの通常の編集画面
テストモードで iPhone 14 Pro の画面サイズにしたとき 明らかに比率が変わってしまっている
この時、AutoScale Lite を使うことで、Studioの編集画面における比率に合わせて、FrameのSizeを自動調整することができます。
まず、こちらからプラグインを入手します。Roblox StudioでToolboxを開き、 My Plugins タブを選択すると AutoScale Lite があることが確認できるので、インストールします。
インストールが完了したら、Studioの Plugins メニューから AutoScale Lite 枠の Unit Conversion を選択します。すると、Unit Conversion のウィンドウが開きます。
そうしたら、 ScreenGui 内のUI要素を選択して、 Unit Conversion ウィンドウ内の Size > Scale ボタンを押すだけです。現在の画面サイズに合わせて、UI要素のサイズがピクセル基準から比率基準に変更されます。
これで実際に再度テストモードで画面サイズを変更してみると、UI要素が画面サイズに合わせて自動調整されることが確認できます。
{0, 100}, {0, 100} から {0.09, 0}, {0.173, 0} に変更された
使い方②
しかし、この設定のまま iPad2 の画面サイズにしたときに、UI要素の縦横比が変わってしまっているのが分かります。（iPhone Pro 14 の時点でもピクセルサイズは 66x67 になっており、微妙に正方形ではないことが一つ前の画像でもわかります）
これを一発で解決するのが、 Add Constraint ボタンです。このボタンを押すことで、UI要素の縦横比を固定することができます。
調整したいUI要素を選択した状態で、AutoScale Lite の Add Constraint ボタンを押します。すると、UI要素の子要素に UIAspectRatioConstraint が追加されます。
これによって、UI要素の縦横比が固定され、すべての解像度で元の正方形の比率のまま表示されるようになりました。
iPad2 の画面サイズにしたときも正方形の比率が保たれている
まとめ
今回は、AutoScale Lite プラグインを使って、UI要素を自動調整する方法を紹介しました。このプラグインを使うこによって、様々な解像度に対応したゲームを開発する際に、UIのサイズを自動調整することができます。
ぜひ、AutoScale Lite プラグインを使って、Roblox Studio でのゲーム開発を効率化してみてください。
読んでくださりありがとうございました🤗
Discussion