ローディングスクリーン | 文書 - Roblox クリエーターハブ

Robloxはユーザーがゲームに接続する際にデフォルトのローディングスクリーンを表示しますが、静的またはアニメーションコンテンツを含むカスタムローディングスクリーンでゲームを個別化することができます。

この記事では、ユーザーがゲームに初めて参加する際に表示されるローディングスクリーンについて説明します。ユーザーが場所間をテレポートする際に表示されるローディングスクリーンをカスタマイズする方法については、場所間のテレポートを参照してください。

実装

カスタムローディングスクリーンを表示するには、ScreenGui インスタンスを LocalScript 内で直接設計するか、または場所階層内の ScreenGui オブジェクトを参照することができます。どちらのオプションも ReplicatedFirst を利用し、このサービスはインスタンスをクライアントに他のものが複製される前に複製します。これにより、ユーザーがゲームに入るときに最初に表示されるものがローディングスクリーンになります。

スクリプトから

LocalScript から完全にカスタムローディングスクリーンを設計して表示するには：

ReplicatedFirst に LocalScript を作成します。
以下のコードサンプルを貼り付けて、ScreenGui オブジェクトを作成しカスタマイズします。このコードを自分の値に変更してデザインを作成できます。

スクリプト作成のローディングスクリーン
local Players = game:GetService("Players")
local ReplicatedFirst = game:GetService("ReplicatedFirst")

local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

local loadingScreen = Instance.new("ScreenGui")
loadingScreen.IgnoreGuiInset = true
loadingScreen.Parent = playerGui

-- ScreenGuiの値を自分のものに置き換えます
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 1, 0)
textLabel.BackgroundColor3 = Color3.fromRGB(0, 20, 40)
textLabel.Font = Enum.Font.DenkOne
textLabel.TextColor3 = Color3.new(0.8, 0.8, 0.8)
textLabel.Text = "読み込み中"
textLabel.TextSize = 32
textLabel.Parent = loadingScreen

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

task.wait(5)  -- カスタムローディングスクリーンが最低限の時間表示されるよう強制

if not game:IsLoaded() then
    game.Loaded:Wait()
end

loadingScreen:Destroy()

既存のGUIから

LocalScript を通じて完全にローディングスクリーン ScreenGui を作成するのではなく、場所階層内の既存の ScreenGui を参照することもできます。ゲームに参照された ScreenGui が ReplicatedFirst に含まれていること、および ScreenGui に TextLabels や ImageLabels などのUI要素が含まれていることを確認してください。

このプロセスを示すために、以下の LocalScript は ReplicatedFirst 内の LoadingScreen という名前の ScreenGui を参照し、デフォルトのローディングスクリーンを削除して、プレイヤーが見ることができるローディングスクリーンが自分のカスタムローディングスクリーンだけになるようにします。

ローディングスクリーン ScreenGui を設計する際には、まず StarterGui コンテナ内でプレビューできるように設計し、結果に満足したら ReplicatedFirst に移動することを忘れないでください。

既存のローディングスクリーンの参照
local Players = game:GetService("Players")
local ReplicatedFirst = game:GetService("ReplicatedFirst")

local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

local loadingScreen = ReplicatedFirst:FindFirstChild("LoadingScreen")
if loadingScreen then
    loadingScreen.IgnoreGuiInset = true
    loadingScreen.Parent = playerGui

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

    task.wait(5)  -- スクリーンが最低限の秒数表示されるよう強制

    if not game:IsLoaded() then
        game.Loaded:Wait()
    end

    loadingScreen:Destroy()
end

アニメーションの追加

静的なカスタムローディングスクリーンに加え、ローディングスクリーンにアニメーションを追加して読み込み進行状況を示すことができます。これを行う最も簡単な方法は、TextLabel または ImageLabel などのUI要素を作成し、それを TweenService を使用してアニメーション化することです。例えば、以下のコードサンプルは、新しい ScreenGui を作成し、子として ImageLabel を追加し、デフォルトのローディングスクリーンを削除し、次に TweenService が中央の要素をフェードインさせて回転させ、ゲームが読み込まれるまで表示します。

スクリプト作成のローディングスクリーン（アニメーション化）
local Players = game:GetService("Players")
local ReplicatedFirst = game:GetService("ReplicatedFirst")
local TweenService = game:GetService("TweenService")

local player = Players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

local loadingScreen = Instance.new("ScreenGui")
loadingScreen.IgnoreGuiInset = true
loadingScreen.Parent = playerGui

local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 1, 0)
textLabel.BackgroundColor3 = Color3.fromRGB(0, 20, 40)
textLabel.Font = Enum.Font.DenkOne
textLabel.TextColor3 = Color3.new(0.8, 0.8, 0.8)
textLabel.Text = "読み込み中"
textLabel.TextSize = 32
textLabel.TextTransparency = 1
textLabel.Parent = loadingScreen

local loadingRing = Instance.new("ImageLabel")
loadingRing.Size = UDim2.new(0, 256, 0, 256)
loadingRing.BackgroundTransparency = 1
loadingRing.Image = "rbxassetid://4965945816"
loadingRing.AnchorPoint = Vector2.new(0.5, 0.5)
loadingRing.Position = UDim2.new(0.5, 0, 0.5, 0)
loadingRing.ImageTransparency = 1
loadingRing.Parent = loadingScreen

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

-- フェードインのツイーンを初期化し開始
local fadeTweenInfo = TweenInfo.new(1, Enum.EasingStyle.Quad, Enum.EasingDirection.Out, 0, false, 2)
local fadeTween1 = TweenService:Create(textLabel, fadeTweenInfo, {TextTransparency = 0})
local fadeTween2 = TweenService:Create(loadingRing, fadeTweenInfo, {ImageTransparency = 0})
fadeTween1:Play()
fadeTween2:Play()

-- 回転ツイーンを初期化し開始
local tweenInfo = TweenInfo.new(4, Enum.EasingStyle.Linear, Enum.EasingDirection.In, -1)
local tween = TweenService:Create(loadingRing, tweenInfo, {Rotation = 360})
tween:Play()

task.wait(5)  -- スクリーンが最低限の秒数表示されるよう強制

if not game:IsLoaded() then
    game.Loaded:Wait()
end

loadingScreen:Destroy()