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

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:

I’m not sure if TopBar will ever get updated by HD again, as his last seen was beginning of this year.

2 Likes

If that’s the case maybe I’ll try updating it, idk… I’ll probably wait to see if he does something first though (or maybe wait till AB testing of the UI?)

Edit: nvm I’m trying today

EDIT: nvm i guess im not trying today

1 Like

it’s because of that offset value :face_with_peeking_eye:

i updated the code so I fixed hover effect and also now the background no longer changes its color when button is selected

3 Likes

I added an offset for a reason :man_facepalming:

2 Likes

oh sry i had my buttons in the center and now I saw that for some reason it uses that offset for buttons padding too if they are aligned on the left or right

edit_1 : I’m trying to fix that rn and if I make it work I will send the code

edit_2 : use this with the theme

I should try to add the image scale effect when the button is selected ?

6 Likes

It’s not really your problem. I had been testing with vCommand so I kinda forgot buttons could be selected in TopBarPlus. Also, it should be easy to add scaling for the icon in the theme.

1 Like

this is the best thing ever made