RobloxStudioで「簡単なメニュー画面(簡単なGUI)」の作成メモになります。
はじめに
下記にて、チュートリアル的にRobloxでゲーム作成を行いました。今回は、「簡単なゲーム開始時のメニュー(GUI)」を作成していきます。ボタンを並べるだけのシンプルなもので、GUIの基本となるものです。
製作開始
「テンプレートを開く」の中から「Baseplate」を選択します。
エクスプローラ内の「StarterGui」配下に作成したGUIが各プレイヤーに追加されます。まずは配下に「ScreenGui」を追加します。

追加した「ScreenGui」配下に基本となる「TextLabelを1つ」と「TextButtonを2つ」追加します。

構成としては下記のような感じですね。「ScreenGui」の中にラベルやボタンがあります。

「TextLabel」は「Title」に名前を変更して、サイズを変更します。Offsetでラベルサイズを変更するとゲームの画面サイズ(PCやスマホ)によって意図した位置と違う場所に表示されます。

下記のようにスケールで値を指定してサイズを変更します。

また、背景色を薄くして、テキストのフォントなどを変更します。

下記のように表示されます。

同じようにButtonもサイズや色などを変更します。

ボタン感を付けていきます。ボタン配下に「UICorner」を追加します。

「UICorner」のプロパティ「CornerRadius」を好きな値に変更してボタン感を出します。

「PLAY」ボタンを押した時にラベルやボタンを消してみます。「PlayButton」の配下に「LocalScript」を追加します。

スクリプトの中身は下記に変更します。ボタンをクリックしたときに「ScreenGui」を破棄しています。
local gui = script.Parent.Parent script.Parent.MouseButton1Click:Connect(function(click) gui:Destroy() end)
「Frame」を追加して、ラベルとボタンを「Frame」の配下に移動します。「Frame」のプロパティを変更して半透明、全画面に変更します。

下記のように起動した時、背景がやや白みがかった色になり、playボタンを押すと消えます。

次回はオプションボタンを追加して、オプションボタンを押した時に別の画面を表示したり、スクリプトで動作を追加したりしていきます。
