【Roblox Studio】UIオブジェクトをページのようにレイアウトする【UIPageLayout】

GUI

1. Roblox StudioのUIPageLayoutとは

Roblox Studioには、UIPageLayoutというGUIの機能があります。UIPageLayoutを使うことで、UIオブジェクトに複数ページを実装することができます。

以下では、実際にUIPageLayoutを使用してみます。

2. 使用する機能

・UIPageLayout

3. UIPageLayoutの簡単な使い方

まず、Roblox Studioを起動します。今回は、テンプレート「Baseplate」を使用します。

今回使用するUIPageLayoutは、Explorerのプラスボタンから追加することができます。

UIPageLayoutを使用するための準備をしていきます。
まず、HOMEタブにあるUIをクリックします。

次に、ScreenGUIをクリックします。

次に、Frameをクリックします。

Frameを画面全体に表示されるようにします。

Frameの中にUIPageLayoutを追加します。

UIPageLayoutと同じ階層にTextLabelを2つ追加します。
現状、1つのTextLabelしか見えていません。

2つのTextLabelを見分けるために、色を変更します。

この状態で、ゲームをプレイし、スクロールしてみます。

スクロールすると2つ目のTextLabelが現れました。このように、UIが2つのページで構成されていることが分かります。

UIPageLayoutのプロパティを変更してみます。
まず、FillDirectionをVerticalに変更して、ゲームをプレイしてみます。

すると、先ほどとは違い、ページが縦方向に構成されています。

次は、HorizontalAlignmentをCenterに変更してみます。すると、TextLabelの横の位置が真ん中になりました。

次は、VerticalAlignmentをCenterに変更してみます。すると、TextLabelの縦の位置が真ん中になりました。

次は、TweenTimeを2から5に変更してみます。

すると、ページ移動が遅くなりました。

最後に、EasingStyleをBounceに変更してみます。

すると、ページ移動した際にバウンドするようなアニメーションに変更されました。EasingStyleには他にも複数の項目(アニメーション)が用意されています。

チュートリアル系電子書籍の紹介
Roblox Studioでゲーム制作を始めてみませんか?
日本語版 ※英語版あり 「10時間でできる Roblox Studio アクションゲーム制作入門」では、Roblox Studioでのゲーム制作の基本から応用までを短時間で効率的に学びます。この一冊で、初心者でも簡単にアクションゲームを制作できるようになり、ゲーム制作の面白さと達成感を存分に味わうことができます。Roblox Studioの世界への扉を開き、あなたのクリエイティブな旅を始めましょう。
Luaに関する電子書籍の紹介
Roblox Studioで使用するLua言語の基本を学ぼう!
日本語版 ※英語版あり 「5時間でできる Roblox Studio を使ったLuaの基本」では、Roblox Studioで使用するプログラミング言語Luaの基本をRoblox Studio上で学びます。また、学んだ知識を活かして、Roblox StudioでLuaを使用する応用部分も一部盛り込まれています。この一冊でLuaの基本を学ぶことで、よりRoblox Studioでのゲーム制作を楽しめるようになります。
アニメーション制作系電子書籍の紹介
Roblox Studioでアニメーションを作ってみよう!
「5時間でできる Roblox Studio アニメーション制作入門」では、Roblox Studioでのアニメーション制作の基本から実際に作るところまでを短時間で効率的に学びます。この一冊で、アニメーション制作の第一歩を踏み出すことができます。Roblox Studioで自由自在にアニメーションを作成し、よりクリエイティブなゲームを作りましょう!
GUI
シェアする
hideをフォローする
Roblox Studio 制作tips

コメント

タイトルとURLをコピーしました