UI Scaling Issues on Resolutions Other Than 1920x1080

Algrythm · May 1, 2024, 12:57am

Hey Developers,

I’ve been having an issue on my newest game, which is making ui not scale properly when in-game. When I look in studio using mobile screen resolutions, UI looks fine and is scaled properly. When in-game, one child of the Frame, which is a Frame, is scaling improperly and overlapping with other UI elements.

The Frame is scaled using only scale and not offset, using AutoScale Lite Constraints and AutoScale SmartScale.

I have some code that tweens the UI when the UI is cloned to PlayerGui.

for i = 1,25,1 do
		local Goal = {ImageColor3 = rarityThresholds[math.random(1,#rarityThresholds)].color}
		roller.Frame.RarityItem.Text = rarityThresholds[math.random(1,#rarityThresholds)].name
		roller.Frame.NameItem.Text = randomStrings[math.random(1,#randomStrings)]
		local Tween = game:GetService("TweenService"):Create(roller.Frame.backgroundcolor, TweenInfo.new(0.04), Goal)
		local Goal2 = {ImageTransparency = 0.36}
		local Tween = game:GetService("TweenService"):Create(roller.Frame.ImageLabel, TweenInfo.new(0.15), Goal2)
		last = 0
		if roller.Frame.Frame.Rotation == -9 then
			local Tween2 = game:GetService("TweenService"):Create(roller.Frame.Frame, TweenInfo.new(0.2), {Rotation = 9}):Play()
			local Tween2 = game:GetService("TweenService"):Create(roller.Frame.ImageLabel, TweenInfo.new(0.2), {Rotation = 9}):Play()
			last = 9
		elseif roller.Frame.Frame.Rotation == 9 then
			local Tween2 = game:GetService("TweenService"):Create(roller.Frame.Frame, TweenInfo.new(0.2), {Rotation = -9}):Play()
			local Tween2 = game:GetService("TweenService"):Create(roller.Frame.ImageLabel, TweenInfo.new(0.2), {Rotation = -9}):Play()
			last = -9
		end
		local randomSilhat=validHats[math.random(1,#validHats)]
		Tween:Play()
		roller.Frame.ImageLabel.Image = "rbxthumb://type=Asset&w=768&h=432&id="..randomSilhat
		roller.Frame.Frame:TweenSizeAndPosition(UDim2.new(0, 184,0, 176),UDim2.new(0.451, 0,0.368, 0),Enum.EasingDirection.Out,Enum.EasingStyle.Quad,0.02)
		roller.Frame.ImageLabel:TweenSizeAndPosition(UDim2.new(0, 192,0, 175),UDim2.new(0.448, 0,0.369, 0),Enum.EasingDirection.In,Enum.EasingStyle.Quad,0.02)
		wait(0.02)
		roller.Frame.Frame:TweenSizeAndPosition(UDim2.new(0, 168,0, 161),UDim2.new(0.456, 0,0.368, 0),Enum.EasingDirection.Out,Enum.EasingStyle.Quad,0.02)
		roller.Frame.ImageLabel:TweenSizeAndPosition(UDim2.new(0, 192,0, 159),UDim2.new(0.448, 0,0.369, 0),Enum.EasingDirection.In,Enum.EasingStyle.Quad,0.02)
		local Goal3 = {ImageTransparency = 1}
		local Tween = game:GetService("TweenService"):Create(roller.Frame.ImageLabel, TweenInfo.new(0.2), Goal3)
		wait(0.02)
		wait(0.065)
	end

After this for loop is completed, this tween is played, which works completely fine and scales the UI to a proper size for every device.

roller.Frame.Frame:TweenSizeAndPosition(UDim2.new(0.135, 0,0.23, 0),UDim2.new(0.432, 0,0.347, 0),Enum.EasingDirection.Out,Enum.EasingStyle.Quad,0.4)
	roller.Frame.itemimage:TweenSizeAndPosition(UDim2.new(0.135, 0,0.23, 0),UDim2.new(0.432, 0,0.347, 0),Enum.EasingDirection.Out,Enum.EasingStyle.Quad,0.4)

I’m not sure why it only is improperly scaled before being scaled down, even though in previews it looks fine.

Algrythm · May 1, 2024, 1:08am

Meant to attach photos of the UI, and here they are:

1920x1080 (preview):

736x414 (preview):

1920x1080 (in-game):

736x414 (in-game)

Algrythm · May 1, 2024, 4:27am

Bump since this is a high-priority, game-breaking issue in my game.

RobloxHasTalentR · May 1, 2024, 4:33am

-- Loop to tween UI elements
for i = 1, 25 do
    -- Set up goals for color and transparency tweens
    local colorGoal = { ImageColor3 = rarityThresholds[math.random(1, #rarityThresholds)].color }
    local transparencyGoal = { ImageTransparency = 0.36 }
    
    -- Update text and image properties
    roller.Frame.RarityItem.Text = rarityThresholds[math.random(1, #rarityThresholds)].name
    roller.Frame.NameItem.Text = randomStrings[math.random(1, #randomStrings)]
    roller.Frame.ImageLabel.Image = "rbxthumb://type=Asset&w=768&h=432&id="..validHats[math.random(1, #validHats)]
    
    -- Create and play the tweens
    local tweenService = game:GetService("TweenService")
    tweenService:Create(roller.Frame.backgroundcolor, TweenInfo.new(0.04), colorGoal):Play()
    tweenService:Create(roller.Frame.ImageLabel, TweenInfo.new(0.15), transparencyGoal):Play()
    
    -- Conditional rotation tweens
    local lastRotation = roller.Frame.Frame.Rotation
    local newRotation = lastRotation == 9 and -9 or 9
    tweenService:Create(roller.Frame.Frame, TweenInfo.new(0.2), { Rotation = newRotation }):Play()
    tweenService:Create(roller.Frame.ImageLabel, TweenInfo.new(0.2), { Rotation = newRotation }):Play()
    
    -- Size and position tweens
    roller.Frame.Frame:TweenSizeAndPosition(UDim2.new(0, 184, 0, 176), UDim2.new(0.451, 0, 0.368, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Quad, 0.02)
    roller.Frame.ImageLabel:TweenSizeAndPosition(UDim2.new(0, 192, 0, 175), UDim2.new(0.448, 0, 0.369, 0), Enum.EasingDirection.In, Enum.EasingStyle.Quad, 0.02)
    
    -- Wait and then apply final tweens
    wait(0.02)
    roller.Frame.Frame:TweenSizeAndPosition(UDim2.new(0, 168, 0, 161), UDim2.new(0.456, 0, 0.368, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Quad, 0.02)
    roller.Frame.ImageLabel:TweenSizeAndPosition(UDim2.new(0, 192, 0, 159), UDim2.new(0.448, 0, 0.369, 0), Enum.EasingDirection.In, Enum.EasingStyle.Quad, 0.02)
    
    -- Final transparency tween
    tweenService:Create(roller.Frame.ImageLabel, TweenInfo.new(0.2), { ImageTransparency = 1 }):Play()
    wait(0.085) -- Combined wait time
end

Algrythm · May 1, 2024, 4:35am

I just tried this and nothing changed at all. Could you elaborate on what you changed here?

RobloxHasTalentR · May 1, 2024, 4:36am

It is just a simplified version of your code basically. You can implement more here

Algrythm · May 1, 2024, 4:38am

Thought so, thanks anyways. Still not sure how to fix the scaling issue since this is just a simplification of my code. I’m assuming it might be a problem with my UI properties, which I will attach here:

RobloxHasTalentR · May 1, 2024, 4:41am

Try checking the absolute position and size and also anchor points

Algrythm · May 1, 2024, 4:50am

Sorry, I’m not too experienced with UI Design. What should I be doing with these values?

Algrythm · May 1, 2024, 3:17pm

Bumping again since I haven’t received a valuable response.

Algrythm · May 2, 2024, 4:38pm

Bumping since I need a fix for this to release my game.

Fan_Len4ika1Tvink123 · May 2, 2024, 5:26pm

Is there a UI Aspect Ratio in Object? Try to change AnchorPoint to 0.5,0.5

Algrythm · May 2, 2024, 5:27pm

There is a UI Aspect Ratio Component, but I haven’t set the anchor point. I’ll try that in a bit here.

Fan_Len4ika1Tvink123 · May 2, 2024, 5:28pm

UI Aspect Ratio is really maters from AnchorPoint. This should fix the problem. And I see UICorner is set to Offset. Try changing to Scale.

Algrythm · May 2, 2024, 9:18pm

I changed the AnchorPoint and modified it to work with the new anchorpoint it still doesn’t scale properly, and I changed the UICorner, which did make the corners look way nicer on other resolutions. I don’t understand what is making it look fine in studio when previewed on other resolutions, and then in playtest, it looks completely off center and huge. Nothing changes scale or position when the UI is first loaded, so the fact that it is completely different in-game makes 0 sense to me.

RobloxHasTalentR · May 3, 2024, 12:42am

Try this now:

for i = 1, 25, 1 do
	local Goal = {ImageColor3 = rarityThresholds[math.random(1, #rarityThresholds)].color}
	roller.Frame.RarityItem.Text = rarityThresholds[math.random(1, #rarityThresholds)].name
	roller.Frame.NameItem.Text = randomStrings[math.random(1, #randomStrings)]
	
	local Tween = game:GetService("TweenService"):Create(roller.Frame.backgroundcolor, TweenInfo.new(0.04), Goal)
	local Goal2 = {ImageTransparency = 0.36}
	Tween = game:GetService("TweenService"):Create(roller.Frame.ImageLabel, TweenInfo.new(0.15), Goal2)
	Tween:Play()

	local rotationGoal = {Rotation = roller.Frame.Frame.Rotation == -9 and 9 or -9}
	game:GetService("TweenService"):Create(roller.Frame.Frame, TweenInfo.new(0.2), rotationGoal):Play()
	game:GetService("TweenService"):Create(roller.Frame.ImageLabel, TweenInfo.new(0.2), rotationGoal):Play()

	local randomSilhat = validHats[math.random(1, #validHats)]
	roller.Frame.ImageLabel.Image = "rbxthumb://type=Asset&w=768&h=432&id="..randomSilhat
	
	-- Adjusting to use scale for responsive design
	roller.Frame.Frame:TweenSizeAndPosition(UDim2.new(0, 0, 0, 0), UDim2.fromScale(0.451, 0.368), Enum.EasingDirection.Out, Enum.EasingStyle.Quad, 0.02, true)
	roller.Frame.ImageLabel:TweenSizeAndPosition(UDim2.new(0, 0, 0, 0), UDim2.fromScale(0.448, 0.369), Enum.EasingDirection.In, Enum.EasingStyle.Quad, 0.02, true)

	wait(0.02)

	-- Using scale values to maintain UI responsiveness
	roller.Frame.Frame:TweenSizeAndPosition(UDim2.fromScale(0.456, 0.368), UDim2.fromScale(0.451, 0.368), Enum.EasingDirection.Out, Enum.EasingStyle.Quad, 0.02, true)
	roller.Frame.ImageLabel:TweenSizeAndPosition(UDim2.fromScale(0.448, 0.369), UDim2.fromScale(0.448, 0.369), Enum.EasingDirection.In, Enum.EasingStyle.Quad, 0.02, true)

	local Goal3 = {ImageTransparency = 1}
	Tween = game:GetService("TweenService"):Create(roller.Frame.ImageLabel, TweenInfo.new(0.2), Goal3)
	Tween:Play()

	wait(0.085) -- Adjusting wait times for tween completion
end

Algrythm · May 3, 2024, 2:26am

Algrythm · May 3, 2024, 3:19am

Hey there everyone! Thanks for all your help, and I’ve found the solution. I made an error in my tweening code by putting the wrong position and size, and then forgot to remove it .

system · May 17, 2024, 3:19am

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