How to make GUI elements fit screen?

I don’t know if this is the right place to ask this. But I am working on an optimized loading screen which is made by a script. The script creates all the GUI elements, but that leaves an issue. By creating the elements with the script, I find that the elements don’t fit most screens.

Is there any way I can constraint or make the GUI elements fit the screen without adding a constraint? Or, how can I constraint the GUI elements using the script?

Here is the code for the loading screen. There are no errors, but I thought it might help out somehow.

--[[
	|| Script Name: Loading
	|| Script Type: Executable
	|| Written by: @NolanCYT
	|| Version 1.0
	|| Description: Loads the game
	
	|| This LocalScript will create a ScreenGui to cover the game while all assets and data are loaded in.
	|| To disable script, simply change the boolean "LoadGame" to false.
	|| And vice versa to enable game loading.
]]

--[Data]
local t = true
local f = false
local LoadGame = t

--[Services]
local ContentProvider = game:GetService("ContentProvider")
local Players = game:GetService("Players")
local ReplicatedFirst = game:GetService("ReplicatedFirst")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local StarterGui = game:GetService("StarterGui")
local TweenService = game:GetService("TweenService")

--[Variables]
local Player = Players.LocalPlayer
local PlayerGui = Player:WaitForChild("PlayerGui")
local UserID = Player.UserId

local Assets = ReplicatedStorage:WaitForChild("Assets")
local Audio = require(Assets:WaitForChild("Audio"))
local DevProducts = require(Assets:WaitForChild("DevProducts"))
local Images = require(Assets:WaitForChild("Images"))
local Animations = require(Assets:WaitForChild("Animations"))
local Places = require(Assets:WaitForChild("Places"))

function create(instanceType)
	return function(data)
		local Object = Instance.new(instanceType)
		for a, b in pairs(data) do
			local c, d = pcall(function()
				if type(a) == 'number' then b.Parent = Object
				elseif type(b) == 'function' then Object[a]:connect(b)
				else Object[a] = b end
			end)
			if not c then
				error('ERROR: Applying property, '..a..', to '..instanceType..' failed! ('..d..')')
			end
		end
		return Object
	end
end

--[[
	||Checkpoint #1
	--
	||Creating Loading GUI, Preloading Images and Audio
--]]

if LoadGame ~= t then script:Destroy() end

local Gui = Instance.new("ScreenGui")
Gui.Name = "LoadingGui"
Gui.IgnoreGuiInset = t
Gui.Parent = PlayerGui

local Background = create 'Frame' {
	BackgroundColor3 = Color3.new(0.0,0.0,0.0),
	BorderSizePixel = 0,
	Size = UDim2.new(1.0,0,1.0,0),
	Position = UDim2.new(0.0,0,0.0,0),
	Parent = Gui
}

ReplicatedFirst:RemoveDefaultLoadingScreen()

--[Buffer]
task.wait(3)
StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.All,f)

local AssetNumber = create 'TextLabel' {
	BackgroundTransparency = 1.0,
	Size = UDim2.new(1.0,0,0.0,40),
	Position = UDim2.new(0.0,0,0.0,40),
	TextXAlignment = Enum.TextXAlignment.Left,
	Font = Enum.Font.Arcade,
	TextScaled = true,
	TextColor3 = Color3.new(1, 1, 1),
	ZIndex = 2,
	Parent = Background,
}

--[Counting the Assets/Buffer]
local a = 1
for _, assets in pairs(Images) do
	a = a + 1 AssetNumber.Text = ("("..a..")")
	task.wait(math.random(0.01,0.06))
end
AssetNumber:Remove()

--[Buffer]
task.wait(1)

--[Load Images]
local function PreloadFailed(contentId,Status)
	if Status == Enum.AssetFetchStatus.Failure then
		warn("Failed to load "..tostring(contentId))
	end
end

local StatusLabel = create 'TextLabel' {
	BackgroundTransparency = 1.0,
	Size = UDim2.new(1.0,0,0.0,40),
	Position = UDim2.new(0.0,0,0.0,40),
	TextXAlignment = Enum.TextXAlignment.Left,
	Font = Enum.Font.Arcade,
	TextScaled = true,
	TextColor3 = Color3.new(1.0,1.0,1.0),
	ZIndex = 2,
	Parent = Background,
}

--[Preload Images]
StatusLabel.Text = "Loading Images..."
for _, image in pairs(Images) do
	ContentProvider:PreloadAsync({image},PreloadFailed)
end

--[Preload Audio]
StatusLabel.Text = "Loading Audio..."
for _, audio in pairs(Audio) do
	ContentProvider:PreloadAsync({audio},PreloadFailed)
end

--[Preload Animations]
StatusLabel.Text = "Loading Animations..."
for _, animation in pairs(Animations) do
	ContentProvider:PreloadAsync({animation},PreloadFailed)
end

local LoadingIcon1 = create 'ImageLabel' {
	BackgroundTransparency = 1.0,
	Image = Images.LoadingCheckpoint,
	ImageColor3 = Color3.new(1.0,1.0,0.0),
	Size = UDim2.new(0.0,100,0.0,100),
	Position = UDim2.new(1.0-0.1,0,1.0-0.2,0),
	ZIndex = 1,
	Parent = Background,
}

This is what the gui elements look like in studio.


Here’s what it looks like with an emulator.

So it wouldn’t fit most screens. Any help will do. Thanks!

use scale for sizing (limit fffffffffffff)

The current sizing for the object is (0, 100, 0, 100), how would I convert that to scale? And what about the positioning?

To make GUI elements fit the screen in Roblox, you can use the Scale property of the GuiObject class. This property allows you to scale the size of the GUI element relative to its original size.

For example, if you have a Frame object with a size of 100x100 pixels, you can use the following code to scale it to fit the screen:

local screenSize = game.Workspace.CurrentCamera.ViewportSize
local frame = script.Parent
frame.Size = UDim2.new(0, screenSize.X / 2, 0, screenSize.Y / 2)
frame.Scale = 1

This will set the size of the Frame object to the size of the screen, scale it to its original size, and then position it in the center of the screen.

Use (1,0,1,0) for 100% screen width and 100% screen height.

The docs on UDim2 might help.

I am trying to fit the Roblox Icon to the screen, the background has no issues. I apologize for not specifying what I am trying to fit.

You could use AnchorPoint and set it to Vector2.new(1,1) and set the Position to UDim2.new(1,0,1,0)

If we set the AnchorPoint to Vector2.new(1,1), the position given will align to the bottom right of the element, then you can set the Position to UDim2.new(1,0,1,0), that should do it.

1 Like

there are a few plugins that do it for you, or just mess with scale until you find a right size for it

That worked beautifully! Thank you all for your help!

No problem, if anyone is interested in styling guis and more in-depth explanation, the docs have it here.

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.