ROBLOXで設定画面(toggleとslider)を作成|Robloxゲーム制作

RobloxStudioで「簡単な設定画面(トグルとスライド)のGUI」作成メモになります。

はじめに

下記にて、簡単なゲーム開始時のメニュー作成を行いました。今回は延長として「設定画面（トグルとスライド）」を作成していきます。

製作開始

エクスプローラ内の「StarterGui」配下に「ScreenGui」を追加、その下に「Frame」を追加して名前を「SettingmenuFrame」に変更します。

背景色、位置とサイズを変更します。

下記のような感じにフレームを調整します。

フレームの配下に「TectLabel」を追加、名前を「Title」に変更してテキストを「SETTINGS」に変更します。

「SettingmenuFrame」の配下にFrameを追加して、背景色、位置、サイズを変更します。

トグルボタンの作成

更にFrame、ボタン、ラベルを追加します。名称を変更、位置、サイズも変更して下記のような構成にします。

枠内にあるのがボタンで、クリックすると切り替わるトグルボタンにしていきます。下記のような画面にしていきます。ラベル、ボタン配置などは前回の「ゲーム開始時のメニュー作成」で詳しく書いています。

Frameの配下に「LocalScript」を追加します。

スクリプトの中身を下記に変更します。ボタンのＯＮ／ＯＦＦでフレームの色、ボタン位置と色を変更しています。

local toggleFrame = script.Parent.ToggleFrame
local toggleButton = toggleFrame.TextButton

local isButtonOn = false

local function toggle()
	
	isButtonOn = not isButtonOn

	if isButtonOn then
		toggleFrame.BackgroundColor3 = Color3.fromRGB(0,100,0)
		toggleButton.BackgroundColor3 = Color3.fromRGB(0,255,0)
		toggleButton.Position = UDim2.new(0.5,0,0.05,0)
	else
		toggleFrame.BackgroundColor3 = Color3.fromRGB(50,50,50)
		toggleButton.BackgroundColor3 = Color3.fromRGB(150,150,150)
		toggleButton.Position = UDim2.new(0.05,0,0.05,0)
	end

end

toggleButton.MouseButton1Click:Connect(toggle)

試しに動かしてみて、下記のように動作すればトグルボタンは完成です。

スライドの作成

Frameの配下にFrameを追加して、名前を「SlideFrame」に変更します。下記のような見た目にします。

「SlideFrame」の配下に「CanvasGroup」を追加、その配下に「Frame」と「TextButton」を追加します。それぞれ、名前を「Fill」、「Button」に変更します。

Fillのプロパティは下記のような感じに緑色にしておきます。（好きな色でOK）

Buttonは見えなくするので「BackgroundTransform」を1にして、テキストを消しておきます。

SlideFrameの配下に「LocalScript」を追加します。

スクリプトの中身を下記に変更します。

local Mouse = game.Players.LocalPlayer:GetMouse()

local SlideFrame = script.Parent
local Fill = SlideFrame.CanvasGroup.Fill
local Button = Fill.Parent.Button

local sliding = false

local function sliding()
	
	sliding = true

	while sliding do
		local Xscale = math.clamp(
                (Mouse.X - SlideFrame.AbsolutePosition.X) / SlideFrame.AbsoluteSize.X, 0, 1)
		
		Fill.Size = UDim2.new(Xscale,0,1,0)
		Button.Text = math.floor(Fill.Size.X.Scale * 100)
		task.wait(0)
		
		if Fill.Size.X.Scale <=0 or Fill.Size.X.Scale >= 1 then
			sliding = false
			return
		end

	end

end

Button.MouseButton1Down:Connect(sliding)

Button.MouseButton1Up:Connect(function()
	sliding = false
end)

下記の部分でマウスの位置とスライダーの位置（スケール）を合わせています。

math.clamp((Mouse.X - SlideFrame.AbsolutePosition.X) / SlideFrame.AbsoluteSize.X, 0, 1)

試しに動かしてみて、下記のようにマウスで調整出来たらOKです。

実際にはボタンがONの時にスライドバーを表示する。BGM以外の項目も追加、セットした内容を反映させるというのが必要になりますね。