🐙

【Roblox】ローディングスクリーンの作り方

2024/08/03に公開

はじめに

今回はゲーム開始時に表示されるローディング画面の作り方を共有します。

公式Reference

https://create.roblox.com/docs/ja-jp/reference/engine/classes/ReplicatedFirst#RemoveDefaultLoadingScreen

実装

適当に建物を配置してゲームを重くする(テストするため)

オブジェクト配置

ReplicatedFirstLocalScriptLoadingScriptという名前のコードを配置するだけで準備完了です。

コード配置

local Players = game:GetService("Players")
local ReplicatedFirst = game:GetService("ReplicatedFirst")
local contentProvider = game:GetService("ContentProvider")

-- ローディングスクリーンの作成
local screenGui = Instance.new("ScreenGui")
screenGui.IgnoreGuiInset = true

local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 1, 0)
textLabel.BackgroundColor3 = Color3.fromRGB(0, 20, 40)
textLabel.Font = Enum.Font.GothamMedium
textLabel.TextColor3 = Color3.new(0.8, 0.8, 0.8)
textLabel.Text = "Loading"
textLabel.TextSize = 28
textLabel.Parent = screenGui

-- デフォルトのローディングスクリーンを消す
ReplicatedFirst:RemoveDefaultLoadingScreen()

--ゲームがロードされるまで待つ
repeat wait() until game:IsLoaded()

--プレイヤーのGuiに作成したスクリーンを配置する
local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")
-- Parent entire screen GUI to player GUI
screenGui.Parent = playerGui

--パーセンテージの表示
local function updateLoadingPercentage(percentage)
	textLabel.Text = "Loading " .. percentage .. "%"
end

-- ゲームのロードに合わせてパーセンテージを更新
local assets = workspace:GetDescendants()
for i, asset in ipairs(assets) do
	wait(0.001)
	contentProvider:PreloadAsync({asset})
	local percentage = math.floor(i / #assets * 100)
	updateLoadingPercentage(percentage)
end

wait(1)

--ローディング画面を削除する
screenGui:Destroy()

今回はスクリプトでUIを作成しましたがあらかじめ作っておいたものをやるパターンが多いと思います。その場合はパーセント表示のTextLabelを参照して

local function updateLoadingPercentage(percentage)
	textLabel.Text = "Loading " .. percentage .. "%"
end

この部分で値を変更するようにしましょう。

実行

https://youtu.be/h3CgdddMdp0

Landelテックブログ

Discussion