【Roblox Studio】走ると歩くを切り替えるボタンの作り方

完成動画

はじめに

Roblox Studioで、走ると歩くを切り替えるボタンを作成する方法を紹介します。

使用する機能

ScreenGui（画面上にUIを表示するためのコンテナ）
Frame（UI要素をまとめたり装飾するための枠）
ImageButton（画像付きのボタン、クリックで動作を実行できる）
UICorner（UIの角を丸くする装飾）
FindFirstChild（指定した名前の子オブジェクトを取得する）
FindFirstChildOfClass（指定したクラスの子オブジェクトを取得する）
MouseButton1Click（左クリック時に実行されるイベント）
game.Players.LocalPlayer（現在のクライアントのプレイヤーを取得する）

機能概要

このボタンを作成すると、以下のような動作ができます。

ImageButton_run をクリックすると：
- 走る速度が遅くなる（歩行モード）
- テキストラベルの表示が「歩行」に変わる
- ImageButton_walk が前面に出る
ImageButton_walk をクリックすると：
- 走る速度が速くなる（走行モード）
- テキストラベルの表示が「走行」に変わる
- ImageButton_run が前面に出る

エクスプローラ構成

エクスプローラの構成は以下の通りです。

StarterGui
└ScreenGui
　└Frame
　　└ImageButton_run
　　　└UICorner
　　　└LocalScript
　　└ImageButton_walk
　　　└UICorner
　　　└LocalScript
　　└TextLabel

UI作成の手順

1. ScreenGuiの追加

StarterGui を選択した状態で、ScreenGui を追加します。
名前を ScreenGui のままにするか、分かりやすい名前に変更してください。

2. Frameの追加

ScreenGui を選択し、Frame を追加します。
Frameのプロパティ を以下のように設定します。
- AnchorPoint: (1,1)
- BackgroundTransparency: 1（背景透明）
- Position: (1,0), (1,0)（画面右下）
- Size: (0,250), (0,200)

3. ImageButton_runの追加

Frame を選択し、ImageButton を追加。
名前を ImageButton_run に変更。
プロパティ を以下のように設定。
- AnchorPoint: (0.5,0.5)
- Position: (0.5,0), (0.5,0)（中央配置）
- Size: (0,100), (0,100)
- Image: 任意の走るボタン画像に変更

4. UICornerの追加

ImageButton_run を選択し、UICorner を追加。
CornerRadius: (1,0) に設定。

5. LocalScriptの追加（後編で使用）

ImageButton_run を選択し、LocalScript を追加。

6. ImageButton_walkの追加

Frame を選択し、ImageButton を追加。
名前を ImageButton_walk に変更。
プロパティ を以下のように設定。
- Visible: Off（最初は非表示）
- 他の設定は ImageButton_run と同じ
- 子要素も ImageButton_run と同じ

7. TextLabelの追加

Frame を選択し、TextLabel を追加。
プロパティ を以下のように設定。
- AnchorPoint: (0.5,0.5)
- BackgroundTransparency: 1（背景透明）
- Position: (0.5,0), (0.1,0)（中央上部）
- Size: (0,200), (0,50)
- Text: “走行”
- TextSize: 30
- BorderSizePixel: 0

コードの概要

本記事では、以下の2つのスクリプトを使用して、ImageButton_runとImageButton_walkを切り替えながらプレイヤーの移動速度を変更します。

ImageButton_runをクリックすると:
- 走る速度が遅くなる（歩行）
- テキストラベルが「歩行」に変わる
- ImageButton_walkが前面に出る
ImageButton_walkをクリックすると:
- 走る速度が速くなる（走行）
- テキストラベルが「走行」に変わる
- ImageButton_runが前面に出る

コードの実装

1. ImageButton_runのスクリプト

このスクリプトは、プレイヤーの移動速度を遅くし、UIの状態を変更します。

local button = script.Parent
local frame = button.Parent
local walkButton = frame:FindFirstChild("ImageButton_walk")
local textLabel = frame:FindFirstChild("TextLabel")
local player = game.Players.LocalPlayer

button.MouseButton1Click:Connect(function()
	local character = player.Character
	if character then
		local humanoid = character:FindFirstChildOfClass("Humanoid")
		if humanoid then
			humanoid.WalkSpeed = 10 -- 速度を遅くする（歩行）
			textLabel.Text = "歩行" -- UIのラベル変更
			button.Visible = false -- runボタンを非表示
			walkButton.Visible = true -- walkボタンを表示
		end
	end
end)

2. ImageButton_walkのスクリプト

このスクリプトは、プレイヤーの移動速度を速くし、UIの状態を変更します。

local button = script.Parent
local frame = button.Parent
local runButton = frame:FindFirstChild("ImageButton_run")
local textLabel = frame:FindFirstChild("TextLabel")
local player = game.Players.LocalPlayer

button.MouseButton1Click:Connect(function()
	local character = player.Character
	if character then
		local humanoid = character:FindFirstChildOfClass("Humanoid")
		if humanoid then
			humanoid.WalkSpeed = 16 -- 速度を速くする（走行）
			textLabel.Text = "走行" -- UIのラベル変更
			button.Visible = false -- walkボタンを非表示
			runButton.Visible = true -- runボタンを表示
		end
	end
end)