1

Hi there! This is a simple tutorial on how to make a GUI for a code that can be redeemed! Thank you for reading this tutorial!
With that being saidlet’s begin!

Step 1: Create a GUI

In order for players to redeem your codeyou have to add text boxes and buttons! To do sodo the following:

  1. Insert a ScreenGui inside of StarterGui. You can do this by opening the Explorer in the View tab and clicking the + on StarterGui.

image_2022-03-24_152710

  1. Insert a Frame inside of the ScreenGui.
  2. Inside the Frameinsert the following into it:

1 TextButton (for submitting a code)
2 TextLabels (for title and description)
1 TextBox (to enter the code)

Optional:
1 UICorner (for a neat-looking frame)

  1. Open the Properties tab in Viewand make all listed elements’ (except the UICorner) sizes 0.100.10. to make it scale correctly on most devices. You can then make it as big as you want (but don’t edit the 2nd and 4th values).
  2. Change the properties of the UI elements and the text as you wish! Here is an example of a finished product:
    image_2022-03-24_154308
  3. In the ScreenGuiinsert a TextButton and name it CodesButton. Edit the text as you wish.

Step 2. Leaderstats

Before you can redeem a codewe need a type of currency to set up! To do thiswe need to:

  1. Insert a Script inside of ServerScriptService (MAKE SURE IT IS A REGULAR SCRIPT OR IT WONT WORK)
  2. Double-click the scriptand it will have some code that would say print("Hello world!"). Delete thatand inside of it paste the following code:
game.Players.PlayerAdded:Connect(function(player)
	
	local leaderstats = Instance.new("Folder")
	leaderstats.Name = "leaderstats"
	leaderstats.Parent = player
	
	local coins = Instance.new("IntValue")
	coins.Name = "Coins" -- Name it whatever you want
	coins.Value = 0
	coins.Parent = leaderstats
end)

Step 3. Scripting

Now it is time to begin scripting the main UI! To do all of thisdo:

  1. Name the title “Title” and the description “Description”. Name the Frame “Background”.
  2. Insert a LocalScriptopen it upand delete print("Hello world!").
  3. Before we start codingwe need to make one last preparation. Insert a RemoteFunction in ReplicatedStorage and name it “SubmitCode”.
  4. Insert another Script into ServerScriptService. In that same scriptinsert a ModuleScript into it. Delete all the default code in the scripts. Name the ModuleScript “CodeList” and the Script “Codes”.
  5. In the ModuleScriptpaste the following code:
return {
	["test"] = 100; -- The name of the code and the number of currency it will reward the player
	["test2"] = 101; -- The name of the code and the number of currency it will reward the player
}
  1. In the Script named “Codes”paste the following code:
local codesList = require(script.CodeList) -- Getting the CodeList script

game.Players.PlayerAdded:Connect(function(player)
	local codesFolder = Instance.new("Folder"player) -- Making a folder for the codes
	codesFolder.Name = "Codes"
end)

game.ReplicatedStorage.SubmitCode.OnServerInvoke = function(playercode) -- When the button is pressedwe will check to see if the code is real or not.
	if codesList[code] ~= nil then
		if player.Codes:FindFirstChild(code) == nil then
			local temp = Instance.new("BoolValue"player.Codes)
			temp.Name = code
			player.leaderstats.Coins.Value += codesList[code]
			return "Valid code"
		end
		
		return "Already redeemed"
	end
	
	return "Incorrect code"
end
  1. We are almost done! To finish our GUIpaste the following code into the LocalScript:
local UI = script.Parent
local background = UI.Background
local submit = background.TextButton
local textBox = background.TextBox

local button = UI.CodesButton

button.MouseButton1Click:Connect(function() -- Makes the gui visible and invisibe
	background.Visible = not background.Visible
end)

submit.MouseButton1Click:Connect(function() -- When the Submit button is clickedwe use the RemoteEvent to run code from the Codes script
	textBox.TextEditable = false
	local message = game.ReplicatedStorage.SubmitCode:InvokeServer(textBox.Text)
	
	textBox.Text = message
	wait(2)
	textBox.Text = ""
	textBox.TextEditable = true
end)

The end!

Congratulations! You have just made a Code GUI! If the code does not workfeel free to message me or make a reply!

21 Likes
2

Great job!

I would add a DataStore to check if the player has/not already redeemed the code already.

5 Likes
3

That is currently integratedbut it isn’t saved across multiple sessions. Thanks for the wonderful suggestion! Did this tutorial work for you?

3 Likes
4

Thank you for sharingwill definitely help newer scripters.

2 Likes
5

Personally I already know how to make onebut your tutorial will definitely be useful to beginners

4 Likes
6

Hey! Did you do itcuz i wanna add a datstore toobut i don’t know how? Could you help me @Valkyrop