How can I make a ContextActionService button look the same across all devices?

Help and Feedback Scripting Support
#1

I have a script that makes a CAS button, this is it

ContextActionService:BindAction("Ability", AbilityFunc, true, Enum.KeyCode.E)
local AbilityButton = ContextActionService:GetButton("Ability")
AbilityButton.Image = "rbxassetid://5743593320"
AbilityButton.PressedImage = "rbxassetid://5743593320"
AbilityButton.ImageColor3 = Color3.new(0, 1, 0)
AbilityButton.Size = UDim2.new(0.3, 0, 0.25, 0)
AbilityButton.Position = UDim2.new(0.15, 0, 0.25, 0)

it looks great on some devices…


(what it looks like on a Ipad 2)

but not so much on others…


(what it looks like on an Iphone XR)

how can I make all the devices look the same? I tried using Offset instead of scale but for some reason that just makes the buttons disappear off of every device. thanks in advance!

1 Like
ContextActionService custom button image is being reverted back to default despite being explicitly set
#2

The problem is definitely the use of Scale.
UDim2.new(0.3, 0, 0.25, 0) looks like it was tailored to the aspect ratio of the top screenshot; when the screen becomes shorter, the button also becomes shorter, because its height is still 25% of the height of the screen.

You still should use Scale, but constrain the button’s aspect ratio.
Set the button’s size to UDim2.new(1, 0, 0.25, 0) and its SizeConstraint to RelativeXX, this should make the button’s height 25% of the screen’s height and its width the same as its height.

I intentionally set the X scale to a ridiculous 1 to make it obvious if I got it wrong. If I did, just set SizeConstraint to whatever works.

1 Like
#3 
ContextActionService:BindAction("Ability", AbilityFunc, true, Enum.KeyCode.E)
local AbilityButton = ContextActionService:GetButton("Ability")
AbilityButton.Image = "rbxassetid://5743593320"
AbilityButton.PressedImage = "rbxassetid://5743593320"
AbilityButton.ImageColor3 = Color3.new(0, 1, 0)
AbilityButton.Size = UDim2.new(0, 100, 0, 100)
AbilityButton.Position = UDim2.new(0.15, 0, 0.25, 0)

You could probably get away with using offset for the size of the button, stick to using scale for its position however.

#4

why should I not use offset for position? is it considered bad practice, or is it only for this 1 case?

#5

as far as I am aware there is no such thing as PositionConstraint, should I just let the button be in different positions, or can you fix it being in a annoying location?

edit: just tried relative XX. putting 1 as X glitches it out, but for some reason it works without it being set to 1? not gonna question it, just happy the button looks nice on all platforms.

image
(Ipad 2)

image
(Iphone XR)

thanks again!