[v3!] TopbarPlus v3.0.0 | Construct intuitive topbar icons; customise them with themes, dropdowns, captions, labels and much more

I want it like nicos nextbots backpack. when you die or reset, the script gets disabled and resets.

What if i want to change the size and position of topbar icons i make? How would i go and do that?

The only stuff that I have done is provided within my scripts, it performs the same way in a empty baseplate…

does anyone know how to disable the button you clicked on a dropdown right after you click it

Search for “Satchel” in the devforum, it supports TopbarPlus that is already integrated.

Here is the link to Satchel

but He wants to make his own system, not to use someone else’s

I am having trouble, How do I make the text to a different color? I wanted to make my FPS Counter’s text to become red when it reaches less than 30

here is the code:

local RunService = game:GetService("RunService")

local Icon = require(game.ReplicatedStorage.Icon)
local NumberSpinner = require(game.ReplicatedStorage.NumberSpinner)

local fps = 0

RunService.RenderStepped:Connect(function()
	fps += 1
end)

local icon = Icon.new()
icon:setRight()
icon:lock()
icon:setSize(75, 32)
icon:give(function(ic)
	local spinner = NumberSpinner.new()
	ic:convertLabelToNumberSpinner(spinner)
	spinner.Duration = 0.25
	spinner.Prefix = ""
	spinner.Suffix = " FPS"
	spinner.Decimals = 0
	coroutine.wrap(function() 
		while task.wait(1) do
			spinner.Value = fps
			fps = 0
		end
	end)()
end)
1 Like

hey @ForeverHD, i’m having an issue when a player respawns/dies, all the selected icons don’t unselect upon respawning, how would i fix this? is it possible to fix this without listening to .died function and unselecting all icons?

1 Like

@ForeverHD how do you make a emote selection icon?, heres my code.

-- Within a LocalScript in StarterPlayerScripts and assuming TopbarPlus is placed in ReplicatedStorage.
local Icon = require(game:GetService("ReplicatedStorage").Icon)
local icon = Icon.new()

local iconModule = game:GetService("ReplicatedStorage").Icon
local IconController = require(iconModule.IconController)
local Themes = require(iconModule.Themes)
IconController.setGameTheme(Themes["BlueGradient"])

icon:setImage(11163649936)-- This is the image for the icon.
icon:setLabel("Emotes")
icon:setTip("Emotes section.") -- Set a tip for understandings.
icon:setCaption("Emotes dont work, its in BETA.")

icon:set("dropdownSquareCorners", false)
icon:setDropdown({
	Icon.new()
		:setLabel("Clap") -- This ix emote 1
	,
	Icon.new()
		:setLabel("T-Pose") -- This is emote 2
	,
	Icon.new()
		:setLabel("Breakdance") -- This is emote 3
	,
	Icon.new()
		:setLabel("OOF!") -- This is emote 4
	,
	Icon.new()
		:setLabel("FASTERRR!") -- This is emote 5
	,
	Icon.new()
		:setLabel("???") -- This is emote 6
		:setName("questionmark_icon")
		:bindEvent("selected", function(self)
			print(("%s was selected!"):format(self.name))
		end)
		:bindEvent("deselected", function(self)
			print(("%s was deselected!"):format(self.name))
		end)
	,
})

I’ve been using Topbar recently for my game as the main player info UI, there’s only one issue, which is that I can’t seem to center the icons inside a dropdown that I have. How do I fix this?

I’m trying to do local Icon = require(game:GetService(“ReplicatedStorage”).Icon)
local LocalPlayer = game:GetService(“Players”).LocalPlayer
local leaderstats = game.Players.LocalPlayer.leaderstats
local Pointsdisplay = leaderstats:WaitForChild(“Points”)
local icon = Icon.new()

Pointsdisplay.Sync:Connect(function()
icon:setLabel(“Points:”… Pointsdisplay.Value)
end)
icon:set(“iconFont”, Enum.Font.ArialBold)
icon:setRight()
icon:setCornerRadius(1, 0)
icon:lock()
this but it dosen’t seem to work I get no errors I’m trying to smth like this:
image

1 Like

How to make UI animations with TopbarPlus?

@ForeverHD with the new Experience Controls update

Wil there be an update, so our icons fit within the new space?

23 Likes

I’m attempting to make it so only certain icons will appear while a player is on a particular team, however, due to my limited scripting abilities (in which i have none), I’m struggling to do so.

Is it possible to have icons that appear for everyone and particular icons that appear for those who are on certain teams? If so, please inform me on how.

You need to learn the basics before jumping into stuff.
https://create.roblox.com/docs/

1 Like

How do I change the UI spacing and offsets from a theme? I mean the distance between icons and distance from the original buttons as well as the top of the screen.

EDIT: maybe figured it out nvm

I have made some TopBarPlus themes to fit in with the new Roblox UI.

I do not recommend using right aligned buttons, as I have not modified TopBarPlus to support the size changing menu.

EDIT: use this

or use this

10 Likes

This is awesome, the only issue is the on hover effect doesn’t fit?

image

3 Likes

Don’t know how to fix that. Probably an issue with TopBarPlus (There’s only one offset value and it doesn’t affect the hover)

1 Like

Fair enough, it’s a good alternative until it gets a full update :slight_smile: