LogoObsidian

Utility

Extra library features including draggable labels, custom cursors, and icon management.

Draggable Labels

watermark

Draggable Labels are compact, draggable overlays containing text. They are ideal for surfacing information such as FPS, ping, server info, etc. The feature is inspired by the LinoriaLib UI Library Watermark feature.

Methods

AddDraggableLabel

Adds a draggable label to the UI.

Library:AddDraggableLabel("Obsidian demo")
Arg IdxArgument DescriptionTypeDefault
1Text to display in the draggable labelstringnil

SetText

Sets the draggable label text.

local DraggableLabel = Library:AddDraggableLabel("Obsidian demo")
DraggableLabel:SetText("Obsidian demo v2")
Arg IdxArgument DescriptionTypeDefault
1Text to display in the draggable labelstringnil

SetVisible

Sets the draggable label visibility.

local DraggableLabel = Library:AddDraggableLabel("Obsidian demo")
DraggableLabel:SetVisible(false)
Arg IdxArgument DescriptionTypeDefault
1Whether to show the draggable labelbooleantrue

Example

-- Sets the draggable label visibility
local DraggableLabel = Library:AddDraggableLabel("Obsidian demo")
DraggableLabel:SetVisible(true)
 
-- Example of dynamically-updating draggable label with common traits (fps and ping)
local FrameTimer = tick()
local FrameCounter = 0;
local FPS = 60;
 
local WatermarkConnection = game:GetService('RunService').RenderStepped:Connect(function()
    FrameCounter += 1;
 
    if (tick() - FrameTimer) >= 1 then
        FPS = FrameCounter;
        FrameTimer = tick();
        FrameCounter = 0;
    end;
 
    DraggableLabel:SetText(('Obsidian demo | %s fps | %s ms'):format(
        math.floor(FPS),
        math.floor(game:GetService('Stats').Network.ServerStatsItem['Data Ping']:GetValue())
    ));
end);

Custom Cursor

custom cursor

Enable the custom cursor to render the Obsidian-styled pointer at your mouse position—handy for experiences that hide or replace Roblox's default cursor.

Library.ShowCustomCursor = true

These functions allow you to set your own image instead of the default custom cursor.

Library:ChangeCursorIcon(ImageId: string)
 
-- If you need to change the cursor icon size:
Library:ChangeCursorIconSize(Size: UDim2)
 
-- To reset it back, use this function:
Library:ResetCursorIcon()

Icons

Icons originate from the lucide icon pack. You can change the icon library so long as you call it before creating any UI elements and it follows the expected return data.

local Library = require(game:GetService("ReplicatedStorage"):WaitForChild("Obsidian"))
local Icons = require(game:GetService("ReplicatedStorage"):WaitForChild("Lucide"))
 
-- Set Library Icon Module
Library:SetIconModule(Icons)

The direct lucide module can be found here. (Our automation updates the icon spritesheet each month)

Custom Icon Registry

If you'd like to make your own custom Icon Module, make sure it follows these types:

type Icon = {
    Url: string,
    Id: number,
    IconName: string,
    ImageRectOffset: Vector2,
    ImageRectSize: Vector2,
}
 
type IconModule = {
    Icons: { string },
    GetAsset: (Name: string) -> Icon?,
}
 
local Icons: IconModule = {
    Icons: {}
}
 
function Icons.GetAsset(Name: string)
    return nil
end
 
return Icons

Obsidian is dependent on a few icons to be able to be displayed properly. Please make sure you have icons named: check (Toggles), chevron-up (Dropdowns), move-diagonal-2 (Window Resizing Icon bottom right of the window), key (Key System Tab Icon), search (Searchbar), move (Window movement Icon top right of the window)

Custom Asset Icons

If you'd like to use custom hosted images (like those on Github) with a Roblox Asset ID as a fallback, you can use the built-in ImageManager:

local ImageManager = Library.ImageManager

AddAsset

Adds a custom asset to the ImageManager

ImageManager.AddAsset("mspaint_logo", 95816097006870, "https://www.mspaint.cc/icon.png")
Arg IdxArgument DescriptionTypeDefault
1Asset Namestringnil
2Roblox Asset IDnumbernil
3Asset URLstringnil
4Force Redownloadboolean?nil

GetAsset

Retrieves the asset ID for the provided asset

local AssetID = ImageManager.GetAsset("mspaint_logo")
Arg IdxArgument DescriptionTypeDefault
1Asset Namestringnil

DownloadAsset

Downloads the asset image to the workspace folder

This runs automatically in AddAsset, so you don't need to call it separately (unless you want to redownload the asset image)

ImageManager.DownloadAsset("mspaint_logo")
Arg IdxArgument DescriptionTypeDefault
1Asset Namestringnil
2Force Redownloadboolean?nil

In Obsidian, there is a helper field that you can set that allows you to easily bind a Keybind to toggle the main window.

MenuGroup:AddLabel("Menu bind"):AddKeyPicker("MenuKeybind", {
    Default = "RightShift",
    NoUI = true,
    Text = "Menu keybind"
})
 
Library.ToggleKeybind = Options.MenuKeybind

Keybinds Menu

keybinds

The keybinds menu surfaces every registered keybind alongside its current state. When a keybind is configured in Toggle mode the menu also renders tap-friendly buttons, giving mobile players parity with keyboard users.

Library.ShowToggleFrameInKeybinds = true -- Show toggle state in keybind menu

Previous

Dialogs

Next

Tabs

On this page