How to make a team switch gui on roblox



Learn how to make a team change GUI on Roblox Studio with this scripting tutorial. This team select GUI lets players choose between teams in your game such as Criminal & Police. Works with FilteringEnabled (FE) and looks awesome too.

Visit AlvinBlox on YouTube For More Tutorials

Log in to vote

2

Asked by

I am trying to make a GUI that is exclusive for a team. Like a GUI that become visible if a player is on a certain team. Here what I thought to do:

local Players = game:GetService("Players") local Teams = game:GetService("Teams") if Players.LocalPlayer.Teams == BrickColor.new("New Yeller")then game.StarterGui.Buttons.Host.Visible = true else game.StarterGui.Buttons.Host.Visible = false end

No result in input but nothing happened. I also tried putting it in both types of script with again, no result. I also experimented with at least an error

local team = game.Teams.Host local Players = game:GetService("Players") if Players.LocalPlayer.team == game.team then --Error here (Workspace.Script:4: attempt to index field 'LocalPlayer' (a nil value))-- game.StarterGui.Buttons.Host.Visible = true else game.StarterGui.Buttons.Host.Visible = false end

What am I doing wrong?

Log in to vote

0

Answered by

insert screen gui in starterGui and call it TeamGUI then add a frame and two text or image buttons in that frame then put a script in both of those buttons script: ``local p = script.Parent.Parent.Parent.Parent.Parent.Name

script.Parent.MouseButton1Click:Connect(function() game.Players[p].TeamColor = BrickColor.new("Really blue") game.Workspace[p].Humanoid.Health = 0 script.Parent.Parent.Parent.Enabled = false end)

script.Parent.MouseButton1Click:Connect(function() script.Parent.Parent.Parent.Background.Visible = true wait(5) script.Parent.Parent.Parent.Background.Visible = false end)`~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~ `

What’s up everyone welcome to buzzygames, my name is BuzzyGamesBeth and today I’ll be teaching you how to make team changing GUI!

• Inside of starter GUI, let’s go ahead and add a screen GUI. I’m renaming it to Team Changers just so I know what this GUI is, and then I’m gonna add a frame inside of that screen GUI. I want this entire frame to take up my entire screen, the entirety of my workspace. To do so, head over to size in the frame properties and then just change it to [1,0] [1,0] I’m just gonna go ahead and change the background transparency of that to 1.
• We’re going to add a text button for however many teams you have. Since I have two teams, the red team and the blue team, I’m gonna make sure to add two text buttons for that.
• Now I’m gonna add a UI corner to get that rounded corner on my text button, just for aesthetic reasons. Resize, reposition to however you want, change the color of our gui. Make sure that we scale our text and then change the text to red team.
• For our text button, I also renamed it to red team. Then, I’m going to be renaming the blue text button to blue team. Ill be referencing that inside of our script in just a second. Now, inside of our two text buttons, we’re going to go ahead and add a script now.
• Both scripts are going to be pretty similar to each other with just one small difference. Delete our print statement for both of them. Inside of our blue team button in our script, we have a function where any time a player clicks on this button, then the player is going to restart to their desired team which is the blue team.
• One thing to note where brickcolor.new is that this is going to be the color of your spawn location that you set. Make sure it matches that. I’m going to set it as really blue. Anytime a player restarts inside of a new team, their health is going to reach zero. Then they’re just gonna go ahead and respawn to wherever they chose.
• Go ahead and copy this script and paste it inside of our red team script. The only thing we’re changing is the brickcolor.new. Since my spawn location is really red, I’m gonna go ahead and change it to that. One more thing, go ahead and click on our team changer screen GUI, and make sure to untick reset on spawn so that when a player chooses their team, they won’t be able to pick again. Unless you want to do that, you can keep it ticked.

Resources Community Tutorials

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.

35 Likes

It has been a nice and useful topic

3 Likes

Thanks for the positive feedback!

The UI is so classic, ive seen that in probably over 1M tutorials. You would show how to make a good UI next time

3 Likes

Thanks for the feedback. I wanted to make this a basic tutorial

.

2 Likes

nice tutorial keep up the good work

1 Like

UI is absolutely terrible in this tutorial, also may I add that using your guide, on some devices the UI is off-centered since you do not use Scale for the UI.

This was not about the UI. It’s about how to make the change team screen.

Let me ask you this. What do you want to see in a game more? Good gameplay or graphics?

2 Likes

Good gameplay but the exact reasons I’ve mentioned can RUIN gameplay.

Please, give me one good way UI could ruin gameplay without searching reasons on google.

And your really not getting my point. It’s nice to criticize for them to get better at a hobby but do remember this was a tutorial. Not something he entered into a contest for a prize.
He could have left all small devs/starting devs in the blue of where to start making a good UI. He made that section as a nice extra thing.

GamersInternational:

on some devices the UI is off-centered since you do not use Scale

Mobile UIS can be affected by this.

9h60:

This was not about the UI.

The formatting on these scripts are… odd. Why is every other line blank? Also, while I don’t think the UI as a whole is terrible… the Menu button’s gradient is not the best. Finally,

superfoose5:

local players = game:GetService("Players") game.Players.PlayerAdded:Connect(function(players) -- When player joins game.ReplicatedStorage.PlayerEnter:FireClient(players) end)

Why not make the LocalScript run as soon as possible locally? Also, why did you define players as game:GetService(“Players”) but then proceed to use game.Players in the next line?

All in all, not a terrible tutorial but could have used a bit more thought in planning. Certainly gets the job done, however.

1 Like

Ty_Scripts:

Why is every other line blank?

I believe that’s just DevForum’s way of importing some text like this. I added only 1 indent to this but this did 4.

print("Hello world!") local plrgui = script.parent.parent local plr = plrgui.Parent -- Above is the only indent script.Parent.Text = 'xd'

1 Like

They most likely expected you to have a GUI already made. And I’m saying this again. GUI was not a big part as there was a small tutorial on how to make one. This was about the scripts for builders or etc like me who don’t know how to script that well.

1 Like

Good for a basic team change GUI! Not the best frankly, but gets the job done and shouldn’t have terrible if any affects on gameplay. Love to see devs helping out the community!

its more about the scripting than the ui.

1 Like

Thanks for everyone sharing there feedbck!

I’m sorry if the UI is bad but I wanted this to be a basic tutorial.

4 Likes

the guy posted this to help the players make a team changing UI and 90% of it is about the scripts not the UIs

3 Likes

Note: Remember that you do not have to do the Gui that did.

next page →