(This is my first tutorial)
Alright. I’ll start this off simple enough. You want to know how to make a plugin?
I got you.
There are 3 basic types of plugins, 2 of which are in the same category:
- Toolbar Button Click Plugins (Single Click Button)
- DockWidgetUI (GUI)
- CoreGui UI (GUI)
I’ll explain how to make each one of them in detail.
Toolbar Button Click (Easiest)
Okay. This one’s pretty simple. I don’t want you to copy and paste my code, but rather understand it.
So first of all, you need a ServerScript. Preferably parented to ServerScriptService.
Once you have the Script, you’ll need to delete the already existing code and put some new one. Now what we’re going to do, is to make a toolbar in the Plugins section of the user. Quite simple.
Here’s how it will go.
local toolbar = plugin:CreateToolbar("Your toolbar name here")
What this does, is create a little section in the plugins tab for your button/buttons.
Now, we’ll add a button to this toolbar.
local toolbar = plugin:CreateToolbar("Your toolbar name here")
local newButton = toolbar:CreateButton("Button Name", "Button description on hover", "rbxassetid://numberhere") -- the number here part represents the imageid (not decal id)
You can create multiple buttons just like that, just add new variables for each of them.
Example:
local button1 = toolbar:CreateButton("Button1", "The first button", "rbxassetid://blahblah")
local button2 = toolbar:CreateButton("Button2", "The second button", "rbxassetid://blahblah")
Now how do you get the image id for the images? You’ll realize that decal id’s don’t work. Easiest way to do this, is to insert an ImageLabel in a Gui located in StarterGui and paste the decal id in the ImageLabel's ImageId property, which will return the ImageId which you’ll copy and use in the “rbxassetid://imageidhere” part of the buttons.
We’re almost done! All we gotta do is make the Button actually do something.
We’ll use the .Click Event for this.
local toolbar = plugin:CreateToolbar("Your toolbar name here")
local newButton = toolbar:CreateButton("Button Name", "Button description on hover", "rbxassetid://numberhere") -- the number here part represents the imageid (not decal id)
newButton.Click:Connect(function()
-- Run whatever code you want here, like insert a new script, change the lighting or whatever.
end)
CoreGui UI (Most used)
Okay. If you’ve come to this and not read the Toolbar Button Click explanation, you won’t understand this code unless you’re a well scripter. I highly advise you to read and understand that code first, because we’ll be using it in this type.
Assuming you’ve read the Toolbar Button Click explanation, let’s begin.
This is very similar, but instead of using a simple button click to do all our work, we’ll be using a UI. UI’s are generally better for more customizability, user experience and more specific and user input based plugins, such as maybe a lighting changer, which takes user input then changes the lighting to that.
We’ll be using our already built ServerScript that was used for Toolbar Button for our UI too.
local toolbar = plugin:CreateToolbar("Your toolbar name here")
local newButton = toolbar:CreateButton("Button Name", "Button description on hover", "rbxassetid://numberhere") -- the number here part represents the imageid (not decal id)
newButton.Click:Connect(function()
end)
Now that we have our ServerScript, let’s get started.
We’ll need a UI that works and is scalable on all devices, Tutorial linked in the post.
I already have mine, but once you’re done with yours, you want to make a Folder in preferably ServerScriptService. You can call that Folder anything you want, but I call it my plugin’s name. Now take your ServerScript and place it under that folder. You’ll also need your Gui and place it under that folder just like the script.
We’ll make minor edits to our ServerScript to make it use the UI as we want it.
We’ll first make the toolbar button have a toggle and make the UI appear on the screen.
local toolbar = plugin:CreateToolbar("Your toolbar name here")
local newButton = toolbar:CreateButton("Button Name", "Button description on hover", "rbxassetid://numberhere") -- the number here part represents the imageid (not decal id)
local UI = script.Parent:WaitForChild("YourUINameHere") -- The UI we're going to use
local active = false -- This is our toggle
newButton.Click:Connect(function()
active = not active -- Make the toggle's value change to the opposite (true to false)
if active == true then -- Check if the plugin is currently on and if so, make it appear
UI.Parent = game:GetService("CoreGui") -- Make it appear on the screen
elseif active == false then -- Check if plugin is currently off and if so make it gone
UI.Parent = script.Parent -- Make disappear from the screen and parent to folder
end
end)
That is it for the CoreGui UI plugin type!
DockWidgetUI (What roblox recommends)
Alright. Before you make a plugin using this type, consider reading both, the Toolbar Button Click type, and the CoreGui UI type. Trust me, it’ll help.
I myself haven’t perfected this kind of plugin. It’s really hard to design this right way, but oh when you do… It’s so satisfying. There’s a ton of benefits to using this:
- It’s supported by roblox (will be consistently updated)
- Is very user friendly
- Has in-built latch-to-studio capabilities.
Well then. Let’s start!
We need to start organizing our stuff, to make it easier to work with it.
Insert a new Folder into preferably ServerScriptService, then name it whatever you like. I call it my plugin’s name. Then add a new ServerScript inside that folder, and call it whatever you want (better to be professional) and delete the already existing code.
Now take your working and rescalable on all devices Gui, and parent it to the Folder too.
Now we’re going to need our Toolbar Click script, which you should paste into the ServerScript we made earlier first, then we are going to make some edits to it to make our DockWidgetUI appear.
local toolbar = plugin:CreateToolbar("Your toolbar name here")
local newButton = toolbar:CreateButton("Button Name", "Button description on hover", "rbxassetid://numberhere") -- the number here part represents the imageid (not decal id)
newButton.Click:Connect(function()
end)
Now we have our base script, let’s make the edits.
We’ll first add our DockWidget, then it’s configuration for the UI. We’re going to use :CreateDockWidgetGui() and DockWidgetGuiInfo.new() function for this. Then, we’ll add the toggle.
local toolbar = plugin:CreateToolbar("Your toolbar name here")
local newButton = toolbar:CreateButton("Button Name", "Button description on hover", "rbxassetid://numberhere") -- the number here part represents the imageid (not decal id)
local active = false -- This is our toggle
local DockWidgetInfo = DockWidgetPluginGuiInfo.new(
Enum.InitialDockState.Float, -- It'll be unlatched at first, user may latch it by their will
true, -- Widget when opened, should be enabled? (true or false)
false, -- Don't override the "when widget opened property" (true or false)
250, -- Default width of the currently floating/unlatched window
400, -- Default height of the currently floating/unlatched window
200, -- Minimum width of the currently floating/unlatched window (optional)
325, -- Minimum height of the currently floating/unlatched window (optional)
)
local newDockWidget = plugin:CreateDockWidgetGui(
"UniquePluginId", -- Your plugin name should be here, but can be different.
DockWidgetInfo -- Our info that we already made.
)
newDockWidget.Title = "DockWidget's Title Text" -- What shows up at the top of it.
newButton.Click:Connect(function()
active = not active -- Change to the opposite value (true to false) (false to true)
if active == true then -- If our plugin is active
newDockWidget.Enabled = true -- Make it visible!
elseif active == false then -- If our plugin is not active
newDockWidget.Enabled = false -- Make it invisible.
end
end)
Now we have our DockWidget all configured and ready to go, we just need our working Gui and it should be rescalable on all devices (tutorial linked in this post) to add to our DockWidget!
We can do this easily by using this simple line of code in our ServerScript:
local Gui = script.Parent:WaitForChild("YourGuiNameHere")
Gui.Parent = DockWidget
I believe you probably don’t know where to add this piece of code.
I’ll show you the completed version, but only if you promise me to not just copy and paste it, without learning a single thing.
Here it is. I’ve marked where this should be.
local toolbar = plugin:CreateToolbar("Your toolbar name here")
local newButton = toolbar:CreateButton("Button Name", "Button description on hover", "rbxassetid://numberhere") -- the number here part represents the imageid (not decal id)
local active = false -- This is our toggle
local DockWidgetInfo = DockWidgetPluginGuiInfo.new(
Enum.InitialDockState.Float, -- It'll be unlatched at first, user may latch it by their will
true, -- Widget when opened, should be enabled? (true or false)
false, -- Don't override the "when widget opened property" (true or false)
250, -- Default width of the currently floating/unlatched window
400, -- Default height of the currently floating/unlatched window
200, -- Minimum width of the currently floating/unlatched window (optional)
325, -- Minimum height of the currently floating/unlatched window (optional)
)
local newDockWidget = plugin:CreateDockWidgetGui(
"UniquePluginId", -- Your plugin name should be here, but can be different.
DockWidgetInfo -- Our info that we already made.
)
local Gui = script.Parent:WaitForChild("YourGuiNameHere") -- Hey! LOOK!
Gui.Parent = DockWidget -- Look here!
newDockWidget.Title = "DockWidget's Title Text" -- What shows up at the top of it.
newButton.Click:Connect(function()
active = not active -- Change to the opposite value (true to false) (false to true)
if active == true then -- If our plugin is active
newDockWidget.Enabled = true -- Make it visible!
elseif active == false then -- If our plugin is not active
newDockWidget.Enabled = false -- Make it invisible.
end
end)
That is it for the DockWidgetUI plugin.
How to test your plugin before you publish it:
Of course, everyone wants to test their plugin before they publish it! It helps to find bugs and know the final product before it’s released!
Depending on the type, it’ll pretty much be like this.
Step 1. Select Item (depends but it may be a ServerScript or a Folder)
Step 2. Right Click Item
Step 3. Click “Save as Local Plugin”
It should now show up in the Plugins tab!
Rescaling UI Tutorial: UI Scalability: All Devices (No Plugins)
Bonus Tip: You should keep backups of your plugin. To do this, complete Step 2, but instead of saving as a local plugin, click “Save to File” and choose your location to save. In order to load, just right click in the Explorer Window and click “Import from File”
Thank you for reading this Tutorial.