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

Actually sir, I don’t mean the Core Health Gui. :sweat_smile:

I was thinking something along the lines of this:

You would create a new and long Topbar Icon that’s filled with green inside it.

The green inside the long Topbar icon would depend on the amount of health you have. (Like how a custom health bar would look like).

I apologize if I’m still being unclear sir. I’m trying my best to explain :sweat_smile:

That healthbar’s actually a TopbarPlus icon disguised as the CoreGui:

If you’d like to make your own, this is the source code behind it:

Icon.new()
	:setProperty("internalIcon", true)
	:setName("_FakeHealthbar")
	:setRight()
	:setOrder(-420)
	:setSize(80, 32)
	:lock()
	:set("iconBackgroundTransparency", 1)
	:give(function(icon)

		local healthContainer = Instance.new("Frame")
		healthContainer.Name = "HealthContainer"
		healthContainer.BackgroundColor3 = Color3.fromRGB(0, 0, 0)
		healthContainer.BorderSizePixel = 0
		healthContainer.AnchorPoint = Vector2.new(0, 0.5)
		healthContainer.Position = UDim2.new(0, 0, 0.5, 0)
		healthContainer.Size = UDim2.new(1, 0, 0.2, 0)
		healthContainer.Visible = true
		healthContainer.ZIndex = 11
		healthContainer.Parent = icon.instances.iconButton

		local corner = Instance.new("UICorner")
		corner.CornerRadius = UDim.new(1, 0)
		corner.Parent = healthContainer

		local healthFrame = healthContainer:Clone()
		healthFrame.Name = "HealthFrame"
		healthFrame.BackgroundColor3 = Color3.fromRGB(167, 167, 167)
		healthFrame.BorderSizePixel = 0
		healthFrame.AnchorPoint = Vector2.new(0.5, 0.5)
		healthFrame.Position = UDim2.new(0.5, 0, 0.5, 0)
		healthFrame.Size = UDim2.new(1, -2, 1, -2)
		healthFrame.Visible = true
		healthFrame.ZIndex = 12
		healthFrame.Parent = healthContainer

		local healthBar = healthFrame:Clone()
		healthBar.Name = "HealthBar"
		healthBar.BackgroundColor3 = Color3.fromRGB(255, 255, 255)
		healthBar.BorderSizePixel = 0
		healthBar.AnchorPoint = Vector2.new(0, 0.5)
		healthBar.Position = UDim2.new(0, 0, 0.5, 0)
		healthBar.Size = UDim2.new(0.5, 0, 1, 0)
		healthBar.Visible = true
		healthBar.ZIndex = 13
		healthBar.Parent = healthFrame

		local START_HEALTHBAR_COLOR = Color3.fromRGB(27, 252, 107)
		local MID_HEALTHBAR_COLOR = Color3.fromRGB(250, 235, 0)
		local END_HEALTHBAR_COLOR = Color3.fromRGB(255, 28, 0)

		local function powColor3(color, pow)
			return Color3.new(
				math.pow(color.R, pow),
				math.pow(color.G, pow),
				math.pow(color.B, pow)
			)
		end

		local function lerpColor(colorA, colorB, frac, gamma)
			gamma = gamma or 2.0
			local CA = powColor3(colorA, gamma)
			local CB = powColor3(colorB, gamma)
			return powColor3(CA:Lerp(CB, frac), 1/gamma)
		end

		local firstTimeEnabling = true
		local function listenToHealth(character)
			if not character then
				return
			end
			local humanoid = character:WaitForChild("Humanoid", 10)
			if not humanoid then
				return
			end

			local function updateHealthBar()
				local realHealthbarEnabled = starterGui:GetCoreGuiEnabled(Enum.CoreGuiType.Health)
				local healthInterval = humanoid.Health / humanoid.MaxHealth
				if healthInterval == 1 or IconController.healthbarDisabled or (firstTimeEnabling and realHealthbarEnabled == false) then
					if icon.enabled then
						icon:setEnabled(false)
					end
					return
				elseif healthInterval < 1 then
					if not icon.enabled then
						icon:setEnabled(true)
					end
					firstTimeEnabling = false
					if realHealthbarEnabled then
						starterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)
					end
				end
				local startInterval = 0.9
				local endInterval = 0.1
				local m = 1/(startInterval - endInterval)
				local c = -m*endInterval
				local colorIntervalAbsolute = (m*healthInterval) + c
				local colorInterval = (colorIntervalAbsolute > 1 and 1) or (colorIntervalAbsolute < 0 and 0) or colorIntervalAbsolute
				local firstColor = (healthInterval > 0.5 and START_HEALTHBAR_COLOR) or MID_HEALTHBAR_COLOR
				local lastColor = (healthInterval > 0.5 and MID_HEALTHBAR_COLOR) or END_HEALTHBAR_COLOR
				local doubleSubtractor = (1-colorInterval)*2
				local modifiedColorInterval = (healthInterval > 0.5 and (1-doubleSubtractor)) or (2-doubleSubtractor)
				local newHealthFillColor = lerpColor(lastColor, firstColor, modifiedColorInterval)
				local newHealthFillSize = UDim2.new(healthInterval, 0, 1, 0)
				healthBar.BackgroundColor3 = newHealthFillColor
				healthBar.Size = newHealthFillSize
			end

			humanoid.HealthChanged:Connect(updateHealthBar)
			IconController.healthbarDisabledSignal:Connect(updateHealthBar)
			updateHealthBar()
		end
		localPlayer.CharacterAdded:Connect(function(character)
			listenToHealth(character)
		end)
		task.spawn(listenToHealth, localPlayer.Character)
	end)
9 Likes

Wow! This is exactly what I was looking for! Thank you so much sir!
I have no reason to doubt you’re the best programmer on Roblox :grin:

I would heart your reply but I’m on like cooldown :sweat_smile:

3 Likes

Question, @ForeverHD . Can this work on a VR game? I am working on a VR game called VR Zombies and I was wondering if I can use this for it. It seems very useful for it.

  • Jake

TopbarPlus doesn’t officially support VR (in terms of shortcuts, keybindings, etc), although it may still be usable. Maybe you can confirm this with your VR headset?

3 Likes

Alright. I’ll get on my VR Headset to see if this works.

how to Press topbar doesn’t toggle

Here’s a code sample for you:

Put this in a local script in StarterPlayerScripts

local iconModule = game:GetService("ReplicatedStorage").Icon
local icon = Icon.new()

icon.selected:Connect(function()
    print("The icon was selected")
end)

icon.deselected:Connect(function()
    print("The icon was deselected")
end)

--

How do I make a icon that cannot be selected?

1 Like

You would use

icon:lock()
1 Like

First, let me say that I’ve been very satisfied with TopBarPlus. Thank you for such a great resource.

My question is whether or not there is a way to change the font used in the text label icons?

Appreciate that!

You sure can, either create and apply a theme or apply individual settings by doing: icon:set(settingName, value).

To change the text font for example:

icon:set("iconFont", Enum.Font.GothamSemibold)
3 Likes

um why icon not working?it look like this (i get icon from Interface Tool Pro - Kenney Icons
截圖 2022-03-13 下午8.27.32

interface tools is using a spritesheet of icons, so if you tried to set a topbar button icon as an “icon” it would show the entire spritesheet

you should probably download the icons from the Kenney website (Board Game Icons, Onscreen controls, Game Icons (and Game Icons Expansion))

3 Likes

You can’t use RBXScriptConnections with modules.

Incorrect. The TopbarPlus API Documentation says you can. Please research before posting

2 Likes

Is there a way to force a icon not closing other icons? This is an issue because I have an Icon that toggles a custom player list, and another Icon that opens a separate GUI. When I toggle the separate GUI using the Icon, it force closes the other custom player list Icon, and vice versa.

EDIT: If you’d like I can provide a video

I’ve went over the entire documentation, and seems as though there’s no option to do this at the moment. I’m not sure if it’ll work but, for example you have Icon1 and Icon2. Whenever you click any one of these, check if the other one is enabled. If it is, then force enable the icon you clicked and the other icon’s visibility to true using icon:setEnabled(true).

This should help @cegberry @AridFights1 :

5 Likes

Well, it does not anymore. Or do I need to call it after I require the TopBar+ module?
Like, I use Services.StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.All, false) (Services is my custom variable containing StarterGui service) inside ReplicatedFirst, so it does hide the Gui before TopBar+ module could start.
But maybe when I think about it, it cannot hide them because the module isn’t required :joy:. I … I will try to require it first and then I will tell the result.

Edit: So yeah, now it does hide. This was absolutely ridiculous mistake. Sorry that I’m annoying!

For anyone else searching for this, if you use :SetCoreGuiEnabled(Enum.CoreGuiType.All, false) in ReplicatedFirst's scripts and your TopBar+ icons are still present, require the TopBar+ module first :smile:.

1 Like