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

I’m having an issue with some simple Frame toggling using the following code:

local topScoresIcon = Icon.new()
:setLabel("Scores")
:setMid()
:bindToggleItem(scoresFrame)

What I’m seeing is that when I respawn the Frame no longer shows when I click on the button. I’m seeing this problem in all the games where I’m using TopbarPlus.

Does your gui have ResetOnSpawn set to false? Maybe check and see if that works

It has to be in ReplicatedStorage and 90% it has to be client

I have a problem so basically

Screenshot 2022-02-18 214221

I have this script it works but once I die the HealthChanged connection doesn’t work anymore and I don’t know how to fix it I’ve been trying for a long time.

It works fine if I turn off ResetOnSpawn. So thank you for the tip. :slight_smile:

I did have it turned on and now it works fine if I turn off ResetOnSpawn. So thank you for the tip. :slight_smile:

Where’s the script located, if it’s in StarterPlayerScripts, you have to re-define the character if it’s gets added, otherwise, it should work.

Example

local char = player.Character or player.CharacterAdded:Wait()
local humanoid = ..

player.CharacterAdded:Connect(function(newCharacter)
  char = newCharacter
  humanoid = char...
end)

ohhh thanks ive been trying for so long

Hey, I am having an issue whenever I reset/die the icon duplicates any solution?

I have already tried that… @Viindicate What do you mean?

my GUI doesn’t open when i use the keybind or click on it, it’s quite confusing, i even used the code for the shop in topbarplus playground

Complete RichText and localization support is a major update we’d like to accomplish for the next update.

Thanks for the rest of your feedback, we’ll explore these too!

2 Likes

Also to everyone else: thank you for your feedback, bug reports, and to people like @LordMerc @chilinalexandr and others for responding and helping other users out.

I’ll try to get back to as many people as possible, although likely less now-a-days as we work towards releasing more open source resources for the community.

5 Likes

That’s great! :slight_smile:

I just have one question. Is it possible to make a health bar using TopBarPlus?

Like having a Health Bar Gui, except on the Topbar.

Do you get what I mean or am I explaining things wrong? :sweat_smile:

Something like this?

If so it’s already a feature in the latest version of TopbarPlus. There have been a few reported bugs that may prevent it from appearing in certain place configurations which we’ll explore in the next release.

1 Like

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)
8 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:

2 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