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

When using the v3 along with HD Admin, the HD Admin commands will bugged
Hoping it will be fixed
like when you do ;cmds the list of commands won’t show up but the commands still works
i’m using LegacyChat though

@ForeverHD I still seem to be running into this issue using the most up to date version from the v3 playground place. I have the selected and deselected events bound, and I want to select the button by default. Calling icon:select() immediately after creating the icon fires the deselected event the first time.

I did the following to fix it but it’d be better to not have to do this and allow a way to set the default state as either selected or deselected when the button is created.

local hasBeenDeselected = false

local topbarIcon = Icon.new()
topbarIcon:setName("TestIcon")
topbarIcon:align("Right")
topbarIcon:bindEvent("selected", function()
    print("selected")
end)
topbarIcon:bindEvent("deselected", function()
    if not hasBeenDeselected then
        hasBeenDeselected = true
        topbarIcon:select()
        return
    end

    -- ... the actual deselect code
end)

topbarIcon:select() -- this will fire the deselected event
1 Like

Hi Ben!

I use TopbarPlus on all my games; its a very useful system - I appreciate your creation! I am looking forward to its release.

2 Likes

hey i want to know if anyone is experiencing similar issues, this completely breaks mobile experience as they cant access the shop, characters, etc

hey, is there way to change debounce interval on click menu? and get a menu property like name/label?

i suggest add :setProperty, :getProperties & :getProperty function.

function Icon:setProperty(property: string, value: any)
	self.properties[property] = value
	return self
end

function Icon:getProperties()
	return self.properties
end

function Icon:getProperty(property: string)
	return self.properties[property] or nil
end

help me i need make timezome with topbar

I wasn’t aware of this. I’ve updated my code – thanks.

Question can we like change the text font and icon size? i dont really like the size it is by default

Is there anyway we can get the latest patches of V3 since packages aren’t publicized yet?

yes! you can do both.

use :setImageScale to change icon size(0.5 is default)
use IconModule.modifyBaseTheme({"IconLabel", "FontFace", the font})

1 Like

i’ll say the place is the latest one.

its updated 12 minutes ago.

The Place Link: TopbarPlus v3 - Roblox

oh wow, it was just updated on 29, after i said this it was updated few mins after!

sometimes happens at the start of the studio play testing or even live game, but the buttons seem to be working fine regardless:

how do i make an open shop button for the topbar+ module

Hello there,

To make a shop with Topbar Plus, I invite you to follow these steps:

1. Go to the Topbar Plus playground and select “Edit in Studio”.

2. In studio, take TopbarPlus in Replicated Storage and paste it into your game, put it in Replicated Storage, you can then add a local script into Replicated Storage and paste the following code:

-- SETUP
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Players = game:GetService("Players")
local localPlayer = game:GetService("Players").LocalPlayer
local playerGui = localPlayer.PlayerGui
local iconModule = ReplicatedStorage:FindFirstChild("Icon", true)
local Icon = require(iconModule)
local gui = playerGui:WaitForChild("TestGUIs")
local menuIcon, dropdownIcon

-- FUNCTIONS
local IMAGE_SCALE_DROPDOWN = 0.655
local IMAGE_SCALE_NORMAL = 1.04
local function applyImageSet(icon, setId, offsetX, offsetY)
	local setId = setId or 6
	-- rbxasset://LuaPackages/Packages/_Index/UIBlox/UIBlox/AppImageAtlas/img_set_1x_7.png
	local imageSet = `rbxasset://LuaPackages/Packages/_Index/UIBlox/UIBlox/AppImageAtlas/img_set_1x_{setId}.png`
	icon:setImage(imageSet)
	icon:modifyTheme({"IconImage", "ImageRectOffset", Vector2.new(offsetX, offsetY)})
	icon:modifyTheme({"IconImage", "ImageRectSize", Vector2.new(36, 36)})
	icon:oneClick()
	icon:setImageScale(IMAGE_SCALE_DROPDOWN)
end

local function onClickRelocate(icon)
	icon:setLabel(icon.name)
	icon:setCaption(icon.name)
	icon.selected:Connect(function()
		if icon.parentIconUID == dropdownIcon.UID then
			icon:joinMenu(menuIcon)
			icon:setLabel("")
			icon:setImageScale(IMAGE_SCALE_NORMAL)
		else
			icon:joinDropdown(dropdownIcon)
			icon:setLabel(icon.name)
			icon:setImageScale(IMAGE_SCALE_DROPDOWN)
		end
	end)
end

Icon.new()
	:setImage(4882429582)	
	:setCaption("Shop")
	:bindToggleItem(gui.Shop)
	:setImageScale(0.725)
	:call(function(icon)
		gui.Shop.CloseButton.MouseButton1Click:Connect(function()
			icon:deselect()
		end)
		while true do
		task.wait(3)
		icon:notify()
	end
	end)

You can modify :setImage() and put the asset ID of your image and modify other settings. To make it opens a frame, in your case, a shop, change :bindToogleItem() and place your ScreenGui’s variable and the frame you want to be opened or closed. For example I want it to open the frame “Shop” as shown below.

image

In order to make it work, you can simply write :bindToggleItem(gui.Shop) but make sure “gui” has been referenced has a variable there:

-- SETUP
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Players = game:GetService("Players")
local localPlayer = game:GetService("Players").LocalPlayer
local playerGui = localPlayer.PlayerGui
local iconModule = ReplicatedStorage:FindFirstChild("Icon", true)
local Icon = require(iconModule)
local gui = playerGui:WaitForChild("TestGUIs") -- Replace this with the current name of your ScreenGui.
local menuIcon, dropdownIcon

If you want to make a button that closes the frame like in this image,

image

Use this code and make sure to replace with your frames and buttons.

:call(function(icon)
	gui.Shop.CloseButton.MouseButton1Click:Connect(function() -- Replace with your GUIs
		icon:deselect()
	end)

3. To make an actual shop, just remember that this is a Gamepass shop (which will cost robux to the users) and may not be exactly the type of shop you expected. Simply add a local script under the button you want to trigger the purchase and add the following code:

local button = script.Parent
local player = game.Players.LocalPlayer
local gamePassId = 1234567890 -- Replace with your Gamepass ID
local marketplaceService = game:GetService("MarketplaceService")

button.MouseButton1Click:connect(function()
	if player then
		marketplaceService:PromptGamePassPurchase(player, gamePassId)
	end
end)

Here is what you should have when finished:

1 Like

you can fix this by modifying the HD Admin module

wait how do i get that circular one for mobile AND PC? @ForeverHD

does anyone know how to make a money counter widget in the right corner of my screen? @ForeverHD

It’s nice that oblivious is updating the module without telling us!

1 Like

His name isn’t even oblivious, so yeah, its nice

1 Like