はじめに
いきなりですがUI制作ってめちゃくちゃ面倒ですよね。特にRobloxに関しては様々なデバイスに対応しているので、それらすべてのデバイスでUIが崩れないように調整しなければなりませんね。
今回は完全我流ですが個人的にいつもやっていることを紹介していきます。
前準備
いつもこのプラグインにお世話になっています。大体600円くらい？
複雑なアンカーの調整がボタン一発で済むのでとても重宝しています。
順序
- テストタブを押して実際のデバイスと同じ画面の比率にする
- StarterGuiにScreenUIを配置
- スクリーン全体を覆うFrameを配置
- そのFrame内にUiオブジェクトを配置していく
- 配置したUiオブジェクトを選択してプラグイン
Transformパートにを Size に変更してScaleを押す - 別のデバイスの比率を確かめる
終了！！！
実践！！
ゲームのウィンドウの比率を実際のデバイスに合わせる
今回は1920 × 1080の比率を基準にしていきます。
UI系のベースオブジェクトを配置
ScreenGuiをStarterGuiに設置しその中にFrameを配置する
プラグインを開きAnchorの設定をします。
画像左下のSetAnchorボタンを押してアンカーを中央に設定します。
続いてPropertiesを押しFitParentボタンとRemoveBackgroundボタンを押します。
これでベースの設定が完了です！
自分の好きなようにUIを配置していく
今回は適当に配置しました。
配置したUIオブジェクトをレスポンシブにしていく
Transformの項目のタイトル横のジャンルをSizeに変更します。
先ほど配置したUIオブジェクトを選択します。
プラグインのTransformの項目にあるScaleボタンを押します。
様々なデバイスでの表示を確認する
iPhone7
Samsung Galaxy S7
iPad Pro 第三世代
PS4
確認した感じ大丈夫そうです！完成！！
Discussion