Help making a gui to try clothing

Help and Feedback Scripting Support
#1

So basically i’m working on a homestore and i feel like the commun free try on tool model is a bit complicated to use for people who don’t have experience with it. So I’am trying to make a try on gui, I don’t have much experience with making GUI’s so if any can recommend or help me out with the gui i’am trying to make, if you have any tutorials that could help please link them.

The GUI I’m trying to make is similar to this:

Screenshot%20(2)
Screenshot%20(2)1920×1080 2.13 MB

4 Likes
#2

You’re going to be looking more at the UserInputService.

The basic idea is:

  • When the player selects a shirt (mouse? standing near? however you decide) display the help UI that shows them what buttons to hit.
  • Listen on the UserInputService for the input.
  • Apply the item to the character when they hit try, call an attempt to purchase when they hit buy.

If you’re looking for more help with some part of this in specific call it out, otherwise if you’re just not sure how to use the UserInputService the DevHub is the place to go to learn more.

2 Likes
#3

This can be done pretty simply using UserInputService and CollectionService yet also MarketplaceService for prompting the purchase.

Before doing anything to do with the scripting side of things, make sure to have a NumberValue or IntValue in each block and set it’s Value to the shirt’s ID. Also make sure to use this plugin to add CollectionService tags.

Now firstly, inside your LocalScript which is inside the ScreenGui that contains the two UIs define your dependencies - these will be our services:

-- // Dependencies 
local UIS = game:GetService("UserInputService")
local CS = game:GetService("CollectionService")
local MPS = game:GetService("MarketplaceService")
local PLAYERS = game:GetService("Players")

Secondly, define your variables - it’d be a good idea to define the tagged blocks yet also the smallest distance they’ll need to be.

-- // Variables
local TAGGED = CS:GetTagged("TheNameYouTaggedTheBlocks")
local DISTANCE = 2

Thirdly, you’ll need to create the base function to handle the input and compute to wear a shirt or Prompt a purchase of it also the function to loop through and get the nearest shirt if there even is one:

-- // Functions
function searchForClosest()
    local closest
    for _, block in pairs(TAGGED) do
        local magnitude = player.Character and (block.Position - player.Character.HumanoidRootPart.Position).Magnitude or math.huge
        if magnitude >= DISTANCE then
            DISTANCE = magnitude
            closest = block
        end
    end
    return closest
end

function onInput(input, gameProcessedEvent) 
    if gameProcessedEvent then return end --If they're typing in a TextBox or anything similar then return

    if input.KeyCode == Enum.KeyCode.E then
        local closest = searchForClosest()
        if closest then
            player.Character.Shirt.ShirtTemplate = "rbxassetid://" .. closest.NumberValue.Value
        end
    elseif input.KeyCode == Enum.KeyCode.R then
        local closest = searchForClosest()
        if closest then
            MPS:PromptPurchase(PLAYERS.LocalPlayer, closest.NumberValue.Value)
        end
    end
end

Forth and finally, connect on InputBegan:

-- // Connections
UIS.InputBegan:Connect(onInput)

You can revise more about these services and magnitude on the developer hub:

If you have any questions or need some more help, be sure to ask!

4 Likes
#4

This sounds great and is very helpful do you think there is a way to make a GUI that appears when you click the shirt/pants you want to try.

1 Like
#5

Add a ClickDetector Instance to your block and :Connect on MouseClick of the ClickDetector.
The parameter is the player who clicked so this’ll be simple as you can just access their PlayerGui:

-- // Variables
local CD = script.Parent

-- // Functions
function onClick(player)
    local plrGui = player.PlayerGui
    -- Now change any gui!
end

-- // Connections
CD.MouseClick:Connect(onClick)

I would recommend integrating a RemoteEvent into this however that’s just overcomplicating a small task.

1 Like
#6

Okay so basically I write the script to try the shirt in that function right?

1 Like
#7

If you want it to be equipped when clicked then yeah!

1 Like