Hello and today I will teach you how to make a choose team GUI.
I will guide you through every step. The tutorial is great for beginners.
This GUI will let players change teams.
So let’s begin:
Step 1: Adding teams.
To add teams simply go to the teams folder and click the plus button and select
“Team”. Do this twice. If you do not have the teams folder in your game look at this link here. Rename your teams to “Police” and “Prisoner”. Then change your team color to :
Police Really blue.
Prisoner Deep orange.
If you choose your own colors you will need to remember it later on.
And make “AutoAssignable” off for one of them.
Step 2: Designing.
add a ScreenGui into StarterGui,
Next add a frame into your screenGui and resize (The size depends on you) and position it to the center of your screen.
2.Go to the properties tab and change the frame’s background transparency to 1.
3.Then add two TextButtons and customize them as you like.
(You can resize, recolor, change fonts and add more).
You can also add a text between the TextButtons.
4.Next add a text button on the side of the screenGui (not the frame) and name it ChangeTeam.
Now you can customize it (Including adding text such as “Menu”).
5.Rename your buttons to Police and Prisoner
Step 3: Scripting Setup.
Add a LocalScript to your screenGui (Not in the frame) and delete the code inside it. Add a script in ServerScriptService and delete the code inside and then add two remote events in ReplicatedStorage.
Rename one remote event to “ChangeTeam” and the second to “PlayerEnter”.
Note: It is important to rename them exactly like this otherwise the script will not recognise these events.
Now we are ready to code!
Step 4: Scripting.
So first let’s make some variables in our local script (It is in our ScreenGui).
local RemoteEvent = game.ReplicatedStorage.ChangeTeam -- Remote event
local menuButton = script.Parent:WaitForChild("ChangeTeam") -- Menu
local frame = script.Parent:WaitForChild("Frame") --Frame that is where our buttons are
frame.Visible = false -- Make the frame invisible
local blur = Instance.new("BlurEffect") -- Create a blur effect
blur.Parent = game:GetService("Lighting")
blur.Enabled = false
--Team
local Police = "Really blue" -- Police team color it should the color of your team
local Prisoner = "Deep orange" -- Prisoner team color it should the color of your team
Great! now that we have some variables. let’s add some functions:
local function TeamChoose()
blur.Enabled = not blur.Enabled
frame.Visible = not frame.Visible
menuButton.Visible = not menuButton.Visible
end
local function choose()
blur.Enabled = false
frame.Visible = false
end
local function playerEnter()
menuButton.Visible = false
frame.Visible = true
blur.Enabled = true
end
It’s time to use the functions and variables we created.
frame.Prisoner.MouseButton1Click:Connect(function() -- When the player clicks the Prisoner team so Change team
RemoteEvent:FireServer(BrickColor.new(Prisoner))
choose()
end)
frame.Police.MouseButton1Click:Connect(function()-- When the player clicks the Police team so Change team
RemoteEvent:FireServer(BrickColor.new(Police))
choose()
end)
menuButton.MouseButton1Click:Connect(function() -- When the player clicks the menu button.
TeamChoose()
end)
game.ReplicatedStorage.PlayerEnter.OnClientEvent:Connect(function(player) -- When the player joins the game do this
playerEnter()
end)
Great! Now let’s go to our Script in ServerScriptService and code two events. One will change the team and the other will tell the local script when a player joins the game.
--Remote event
game.ReplicatedStorage.ChangeTeam.OnServerEvent:Connect(function(player, teamColor) -- Parameters to tell the script what team to switch to
player.TeamColor = teamColor -- Change team
player:LoadCharacter()
end)
local players = game:GetService("Players")
game.Players.PlayerAdded:Connect(function(players) -- When player joins
game.ReplicatedStorage.PlayerEnter:FireClient(players)
end)
Step 5 Explanation
So this is how the code works.
I will explain part by part.
Switching teams:
game.ReplicatedStorage.ChangeTeam.OnServerEvent:Connect(function(player, teamColor) -- Parameters to tell the script what team to switch to
player.TeamColor = teamColor – Change team
player:LoadCharacter()
end)
So when the player selects the team he wants to join. The script needs to know what team to switch to. That is why we are using these parameters:
function(player, teamColor)
Remote events: You probably saw lines of code that look like this: RemoteEvent:FireServer()
And RemoteEvent.OnServerEvent This is to tell the server to change teams.
Step 6: final adjustments.
Note: You do not have to do final adjustments but it does make your
Gui look better.
To do this process I used the feature drop shadow feature of the plugin UiDeisgn lite
So first we want to create shadows. To create a shadow you first must make sure your TextButtons have a z-index of at least 3. Now we must create a frame.
So click the plus button in your Police TextButton and create a frame.Your frame should appear behind your TextButton- resize and position it. Next color your frame to the color of your police button (just copy and paste it) and make it darker by going to the properties tab and clicking on the color icon
And then change this:
If you added a Ui corner then add one to your shadow.
Now change its position to be down and a bit on the right just light this:
Next do the same to the prisoner button but with different colors.
It should look like this:
If you want you can do the same to the menu Gui.
Now that we are done you might want to make more space between the buttons.
Here is the final Gui:
Last but not least let’s make sure that our main frame’s Visible value is false.
We need to do this so we will be able to 3D design without the Gui blocking the screen.
(It will still work ingame).
This is how it looks ingame:
Remember your Gui dosen’t have to look like mine.
The end!
Hope you all enjoyed the tuturial.
.