Roblox UI size Troubles. [TOP BAR]

Help and Feedback Scripting Support
, ,
#1

I am trying to make a ui like this one:

image
image1910×767 313 KB

However my settings button wont optinize properly also i was wondering if anyone knew the size?

3 Likes
#2

What do you mean ‘optinize’? If you mean it doesn’t work (as in you can’t click it), that’s a Roblox thing where buttons above {0,0} won’t actually fire any events. You’ll need to hook onto the UserInputService click detector and manually check if the mouse is in the area.

Use the following code:

local UserInputService = game:GetService("UserInputService")
-- Put a button on screen for testing
local TextButton = Instance.new("TextButton", Instance.new("ScreenGui",game.Players.LocalPlayer.PlayerGui))
TextButton.Position = UDim2.new(0,100,0,-36)
TextButton.Text = "Test"
TextButton.Size = UDim2.new(0,100,0,36)

-- Check for all inputs detectable.
UserInputService.InputBegan:Connect(function(input,gameProcessed)
    -- Ignore non-touch or non-mouse events
    if not (input.UserInputType == Enum.UserInputType.Touch or input.UserInputType == Enum.UserInputType.MouseButton1) then return end
    -- Check the cursor was inside the button
    if input.Position.X >= TextButton.AbsolutePosition.X and input.Position.X <= TextButton.AbsolutePosition.X + TextButton.AbsoluteSize.X and
       input.Position.Y >= TextButton.AbsolutePosition.Y and input.Position.Y <= TextButton.AbsolutePosition.Y + TextButton.AbsoluteSize.Y then
        TextButton.Text = "🎉 🎉 🎉"
    end
end)
3 Likes
#3

The top bar in 36 pixels in height (except for on XBOX. However, as for widths I really don’t know as I think it’s based on device.

Edit: if you mean that it won’t fire, this was something that happened a long time ago as the top bar used to not be transparent.

#4

what i mean is what is the size in like ui scale or how do i make my own buttons like those?

1 Like
#5

Ah, use Topbar+:

#6

You want your button to have position of {0,101},{0,-32} (with IgnoreGuiInset off), and have a size of {0,32},{0,32}

To get the proper background, make it an image button with the image rbxasset://textures/ui/TopBar/iconBase@3x.png, with a ScaleType set to Slice and SliceCenter set to 48, 48, 48, 48

#7

Turn on IgnoreGuiInset on your ScreenGui.

#8

The developer used TopbarPlus v2 to achieve that:

local Icon = require(game.ReplicatedStorage.Icon)


-- Leftward icons
Icon.new()
	:setName("Emotes")
	:setImage(emoteImageId)

Icon.new()
	:setName("Refunds")
	:setImage(refundImageId)
	:setLabel("Refunds")

Icon.new()
	:setName("Booths")
	:setImage(boothsImageId)
	:setLabel("Booths")


-- Rightward icons
Icon.new()
	:setName("Codes")
	:setImage(codesImageId)
	:setLabel("Codes")
	:setRight()

Icon.new()
	:setName("Settings")
	:setImage(settingsImageId)
	:setRight()
7 Likes
#9

My hero! Was looking for exactly this! :slight_smile:

1 Like