Hi All,
I’m Infinite_Visions, developer of Visions Games.
It’s been a while since one of these tutorials were made, so I thought I’d give it a shot. This tutorial is recommended for people who know a small bit of scripting - it is easy, commonly-used, and efficient. We will be covering making a gamepass shop in Roblox Studio, where the players can spend money to buy a gamepass.
- This tutorial assumes you already have your gamepass created in Roblox
-
Plugins (Not needed, but Recommended to Make this easier):
AutoScale Lite (by ZacBytes) AutoScale Lite - Roblox
Step 1
-
First, lets create the base gui. Go into StarterGui, and insert a ScreenGui. Name this “ShopGui”. Inside of that, put a basic Frame. Name this “Background”.
-
Before moving on, let me clarify One thing. When it comes to a gui’s size and position, there are two values - X and Y (coordinates). Inside those coordinates, there are two more values - scale and offset. Scale represents how the gui scales, and offset determines how far it is offset by the screen. Learn more: Intro to GUIs
-
Now for perhaps the hardest part (in my humble opinion) - positioning the frame, so it scales correctly on all devices. The easiest way to do this is to start by setting the frame’s AnchorPoint to .5,.5. This will ensure it scales in the middle of the screen. Next, position it where you would like it. If you have AutoScale Plugin, do this: Open the plugin, press “Unit Conversion”. Change the Position/Size to SCALE. This will allow it to scale up/down, according to the screen size. If you do not have the plugin, do this: Go into the properties of the Frame, and manually change the Position and Size to Scale. Note: You can use offset too, but for the simplicity of this tutorial, I am just using scale.
-
Next, customize the frame however you want (change its transparency, background color, etc)
-
Now, add a textlabel into the Frame, and change the scale/offset to correctly fit inside the Frame. Position it at the top of the frame, and change the text to “Shop”. Check TextScaled (so the text scales with its parent), and change the Font to whatever you want. You should have something like this:
-
Now, add a Text Buttons to the Frame, and scale/position it correctly (as described above). Name it “GamepassOne”. Customize it, and change the text accordingly.
-
Inside GamepassOne, add a local script with the following code:
--In a local script
local ID = 13376596 -- Replace This with your gamepass ID
script.Parent.Activated:Connect(function()
game:GetService("MarketplaceService"):PromptGamePassPurchase(game.Players.LocalPlayer,ID) -- Prompts the purchase
end)
Now, find your gamepass ID by going onto it on Roblox. The ID is the numbers enclosed in /s. EX:
Once you find your ID, past it into the local script, where it says
local ID = --Replace This with your gamepass ID
Now, if you go into studio and test it, it will prompt the purchase.
-
Time for the last part - Making an open/close gui.
-
Next, we have to manage the opening and closing of the Gui. We can do it one of two ways: The EASY way, and the FANCY way.
For The EASY way, all we are going to do is toggle the Gui visibility on and off. For the FANCY way, we are going to tween the gui, which basically means animating it so it slides across the screen, into position.
The EASY Way
As stated above, we are just toggling the gui visibility. Insert a local script into the Open button with the following code:
--In a local script
local frame = script.Parent.Parent. Background -- the background frame
script.Parent.Activated:Connect(function() -- when the button is clicked
frame.Visible = not frame.Visible --Reverses the frame visibility.
end)
The FANCY Way
For this, we are tweening the gui position. For more info on tweening, you can check out This Article. Insert a local script into the Open button with the following code:
--In a local script
local frame = script.Parent.Parent. Background -- the background frame
script.Parent.Activated:Connect(function() -- when the button is clicked
if frame.Visible == true then -- Checks if the frame is already open
frame:TweenPosition(UDim2.new(0.5, 0, 2, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Quint,.5)-- Now tween the frame off the screen
wait(.5)
frame.Visible = false -- if it is, "close" it
else -- if the frame is closed
frame.Visible = true -- open the frame
frame:TweenPosition(UDim2.new(0.5, 0, 0.5, 0), Enum.EasingDirection.Out, Enum.EasingStyle.Quint,.5)-- Now tween the frame onto the screen
end
end)
Keep in mind, you can change the values above to better fit your position. The first value after :Tween() is the Udim2 value, which is the position it will move to. Then, the easing direction. Next is the easing style, which is what type of animation will be played (how the animation looks. Feel free to experiment!). Finally, the number is how long the tween takes.
To wrap things up, go into ShopGui, and uncheck ResetOnSpawn. Also, Check IgnoreGuiInset (so the frame remains in the same place). Finally, Set Background.Visible to false. Now, it should all work!
robloxapp-20210108-0956337.wmv (388.2 KB)
To allow third party purchases in studio, access game settings, and check allow third party purchases (so you can prompt the purchase on click).
This is a finished model (Fancy/Tweening Version): ShopGui - Fancy Version - Roblox
This is a finished model (Simple Version): Gamepass Shop Gui - Roblox
Anyways, thanks for reading! I hope you got what you wanted from this extremely basic tutorial. You can modify the codes, frames, and everything else in whatever ways you want! Questions, comments, or concerns? Just let me know! Have any other tutorials you want to see? Just message me!
For other helpful tutorials/articles on developing:
What Makes A Top Roblox Game? (Advice from top Devs)
Is Finding Investors For My Game Worth It Anymore?
Want to support my work (It helps a lot!)?
Support Infinite_Visions (Game)
Best of luck in developing,
