Screen GUI Aesthetic Issues

Help and Feedback Scripting Support
, , , ,
#1

What do you want to achieve?
I want to make aesthetically pleasing GUIs. One way in which I am trying to do this is to make button animations for when a mouse starts and stops hovering over a button (also, does sizing GUIs using only their offsets make them square on some screens, but not on others? I’m worried my GUIs be misshapen sometimes).

What is the issue?
I keep getting the error “Unable to cast value to Object” which directs me to the Goals tables.

What solutions have you tried so far?
I tried being more specific with what I wanted to be tweened (for example, the script.Parent.Size.X used to be script.Parent.Size, but then I had to do X.Offset instead of just Offset in the Goals tables, which got rejected).

This is the script that produces the error. I was making this while watching [PART 1] Roblox Scripting - Character Customization! FILTERING ENABLED! - YouTube

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local TweenService = game:GetService("TweenService")
local Folder = ReplicatedStorage.Events -- Folder (not is use yet)
local Event = Folder.ColorEvent1 -- Remote event (not in use yet)

local function onMouseEntered()
	local Information = TweenInfo.new(0.7, Enum.EasingStyle.Sine, Enum.EasingDirection.Out, 0, false, 0)
	local Goals = {Offset = 30}
	local Tween1 = TweenService:Create(script.Parent.Size.X, Information, Goals)
	local Tween2 = TweenService:Create(script.Parent.Size.Y, Information, Goals)
	Tween1:Play()
	Tween2:Play()
end

local function onMouseLeft()
	local Information = TweenInfo.new(0.7, Enum.EasingStyle.Sine, Enum.EasingDirection.Out, 0, false, 0)
	local Goals = {Offset = 50}
	local Tween1 = TweenService:Create(script.Parent.Size.X, Information, Goals)
	local Tween2 = TweenService:Create(script.Parent.Size.Y, Information, Goals)
	Tween1:Play()
	Tween2:Play()
end

script.Parent.MouseEnter:Connect(onMouseEntered)
script.Parent.MouseLeave:Connect(onMouseLeft)
1 Like
#2

✓ Solution

You can’t change X/Y/Z alone of objects or UI you can only read them. To change only X/Y/Z of objects you must add a Vector3 or UDim2.

In your case for UI you must use:

local Goals = {Size = UDim2.new(script.Parent.Size.X.Scale, 30, script.Parent.Size.Y.Scale, 30}

TweenService:Create(script.Parent, Information, Goals)

Information about this script:

This script will keep the same scale but set offset to 30 for both X and Y, you don’t need separate tweens to scale X and Y.

• Beginner Friendly Version

local ScaleX = script.Parent.Scale.X,
local OffsetX = 30

local ScaleY = script.Parent.Scale.Y,
local OffsetY = 30

local Goals = {Size = UDim2.new(ScaleX, OffsetX, ScaleY, OffsetY)}

TweenService:Create(script.Parent, Information, Goals)

Hope this helps!

#3

I still got the same error:

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local TweenService = game:GetService("TweenService")
local Folder = ReplicatedStorage.Events
local Event = Folder.ColorEvent1

local function onMouseEntered()
	local Information = TweenInfo.new(0.7, Enum.EasingStyle.Sine, Enum.EasingDirection.Out, 0, false, 0)
	local Goals = UDim2.new{script.Parent.Size.X.Scale, 30, script.Parent.Size.Y.Scale, 30}
	local Tween1 = TweenService:Create(script.Parent, Information, Goals)
	Tween1:Play()
end

local function onMouseLeft()
	local Information = TweenInfo.new(0.7, Enum.EasingStyle.Sine, Enum.EasingDirection.Out, 0, false, 0)
	local Goals = UDim2.new{script.Parent.Size.X.Scale, 50, script.Parent.Size.Y.Scale, 50}
	local Tween1 = TweenService:Create(script.Parent, Information, Goals)
	Tween1:Play()
end

script.Parent.MouseEnter:Connect(onMouseEntered)
script.Parent.MouseLeave:Connect(onMouseLeft)
#4

What is the parent of the script?

#5

The parent of the script is a Text Button (parent of that is a frame, then a screen gui, then the starter gui).

#6

image
image720×35 11.2 KB

Found your problem:

  1. It’s UDim2.new() not UDim2.new{}
  2. You forgot to say {Size = UDim2.new()}
1 Like
#7

Fixed your code for you so you can copy paste :slight_smile:

local ReplicatedStorage = game:GetService("ReplicatedStorage")

local TweenService = game:GetService("TweenService")

local Folder = ReplicatedStorage.Events

local Event = Folder.ColorEvent1

local function onMouseEntered()

local Information = TweenInfo.new(0.7, Enum.EasingStyle.Sine, Enum.EasingDirection.Out, 0, false, 0)

local Goals = {Size = UDim2.new(script.Parent.Size.X.Scale, 30, script.Parent.Size.Y.Scale, 30)}

local Tween1 = TweenService:Create(script.Parent, Information, Goals)

Tween1:Play()

end

local function onMouseLeft()

local Information = TweenInfo.new(0.7, Enum.EasingStyle.Sine, Enum.EasingDirection.Out, 0, false, 0)

local Goals = {Size = UDim2.new(script.Parent.Size.X.Scale, 50, script.Parent.Size.Y.Scale, 50)}

local Tween1 = TweenService:Create(script.Parent, Information, Goals)

Tween1:Play()

end

script.Parent.MouseEnter:Connect(onMouseEntered)

script.Parent.MouseLeave:Connect(onMouseLeft)
1 Like
#8

Thanks for the help! Also, I was also wondering if resizing GUIs using offsets only make the proportions different on screens with different size rations. Does it produce that issue?

#9

I would suggest using scale and barely using offset.

Offset

Sized by the pixels of a device meaning some devices will have the UI bigger than their screen and other smaller than their mouse.

Scale

Sized by the percentage of their screen meaning it will fit all screens but will change width/height. This is easily fixed with UIAspectRatio which locks the size and just sizes it with both X and Y.

#10

Would keeping the GUIs square if necessary be unusually difficult? Also, where can the UI Aspect Ratio property be found (for example, can it be found in Text Buttons)?

#11

UI Aspect Ratio

UIAspectRatio is an object which you must add like any other object and can only be used for any UI object, not 3D. This object must be placed in the object that you wish to lock its size from being changed on 1 axis.

Though sometimes you must tweak the aspect value which can be difficult so I suggest using a plugin that automatically does this for you.

Helpful Plugin

https://create.roblox.com/marketplace/asset/1496745047/AutoScale-Lite

Select the object and press Add Constraint to lock its Axis to size only on all axis.

This plugin also helps convert Offset to Scale and Scale to Offset.

1 Like