Roblox StudioのGUIが、また少し楽しくなりそうです

Roblox StudioのGUIは、これまでも少しずつ作りやすくなってきましたが、今回の更新はかなりうれしい部類です。新しく追加されたのは、ネイティブの影と角ごとの丸み設定です。
今回のStudio Betaの新機能としてdrop shadows(影)とper-corner rounding for UICorner(個別角丸)が案内されています。

たとえばショップ画面やランキング画面を作っていると、「もう少しカードが浮いて見えてほしい」「角の形に少し変化を付けたい」と感じることがあります。
今までは画像を使ったり、Frameを重ねて工夫したりする場面もありましたが、今回の機能はそういう“あと少し”を、もっと素直に作りやすくしてくれそうです。


ロブロックスのGUI新機能の追加されたのはこの2つです

1つ目は UIShadow(影)です。これは親のUIの下に影を描画する機能で、BlurRadiusでぼかし、カラーと Transparencyで色や濃さ、OffsetとSpreadで位置や広がりを調整できます。
公式ドキュメントでも、UIShadowは親UIの下にドロップシャドウを描画するものとして説明されています。

2つ目は UICorner(個別角丸)です。これまでのCornerRadiusのは4つの角をまとめて丸める使い方が中心でしたが、今回は TopLeftRadius / TopRightRadius / BottomLeftRadius / BottomRightRadius を個別に設定できます。
しかもCornerRadiusは、4つの個別半径をまとめて設定するショートハンドとして説明されています。


GUIの影と個別角丸は何がうれしいのか

この更新の良いところは、見た目が少し豪華になるだけではありません。
大きいのは、画像に頼らなくてもUIに立体感や個性を出しやすくなることです。
影が入るだけでも、カードUIやポップアップはかなり見やすくなりますし、角を個別に丸められると、同じ四角いパネルでも雰囲気を変えやすくなります。

個人的には、ショップ、デイリー報酬、通知、プロフィールカードあたりでかなり効きそうです。
ほんの少し影を入れるだけで背景からUIが浮いて見えますし、上だけ丸いヘッダーなども作りやすくなるので、Robloxっぽい今風のUIにかなり寄せやすくなりそうです。
これは公式ドキュメント上でも、UIの見た目を調整する新機能として整理されています。


ロブロックスUIShadowをStudioで試す方法

試すには、まず Studio で
[ File → Beta Features → New UI Capabilities ]
をオンにします。公式の UI appearance modifiers ページでも、この手順で有効化するよう案内されています。

オンにしたら、あとはいつものUIと同じでFrameやTextButtonの子としてUIShadowやUICornerを追加していきます。
影を試したいなら UIShadow、角を調整したいなら UICorner です。最初は、

  • UIShadow のTransparency
  • UIShadow のBlurRadius
  • UIShadow のOffset
  • UICorner の TopLeftRadiusなど

このあたりを少しずつ触ると、違いがかなりわかりやすいです。

最初の練習としておすすめなのは、小さなカードGUIを1枚作ることです。
中央にFrameを置いて、そこに軽い影を付けるだけでも、かなり印象が変わります。
さらに上2つの角だけ大きく丸めると、「ただの四角」だったものが一気に今っぽく見えてきます。こういう小さな変化は、ショップや設定画面など、実際のゲームUIでもかなり使いやすいと思います。


ただし最初はまだベータです

ここはかなり大事です。
この機能が使える最初はStudio Betaで、公式ドキュメントでは、「このベータ期間中は個別角丸や影を使った公開ゲームはできない」と案内されています。つまり、今は「先に試せる段階」であって、すぐ本番ゲームへ入れる前提ではありません。

なのでこの機能が出現した初期では、完成版を一気に作り込むというより、今後のためにデザイン案を試すくらいの使い方がちょうど良さそうです。
ショップ画面の一部だけ、通知パネルだけ、という感じで触っておくと、正式に使えるようになった時にかなり動きやすいと思います。これは今の段階だからこそできる、先取りの楽しさでもあります。


まとめ

今回のアップデートは、単に「影が付いた」「角が増えた」という小さな話ではなく、GUIをもう少し細かくデザインできる方向に進める更新だと感じます。
影で立体感を出し、角ごとの丸みで表情を変えられるようになるだけで、UIの見え方はかなり変わりそうです。

まだベータなので本番投入はできませんが、だからこそ今のうちに触っておく価値があります。
正式実装された時、ショップや通知、ランキング画面の作り方が今よりかなり楽しくなりそうです。


合わせて読みたい

プライバシーや制限

– お子様が安心してご利用するための設定

– 子供が勝手に課金をしない為に

– ロブロックスのギフトカードを贈ろう

– 嫌がらせ行為があった場合の報告


設定や操作方法

– ゲームの操作方法

– アバターの設定、変更方法

– Robloxゲーム言語設定

– フレンドが遊んでいるゲームに参加する方法

用語集

– obby(オビー)とは

– tycoon(タイクーン)とは

– story(ストーリー)とは

– フリーUGCとは

– Noob(ヌーブ)とは

アバター

– ROBLOX アバターウェア&アイテム

– Roblox[コレクタブル]アイテムとは/リミッテッドやUの意味

– ROBLOXオリジナルアイテムをゲットできるゲーム集

– アバターアイテムをえらぶ

– プロフィール画像にポーズをつけよう

ロブロックススタジオ(ゲーム制作)

– ロブロックスアバターに着せるTシャツや服の作り方

– ロブロックスのTシャツや服の公開、販売の方法

【AIで自作】Robloxで3Dアクセサリを販売する方法

エモートの作成方法と販売方法

ロブロックス公式案内