How am I going to start with character customization menu?

Help and Feedback Art Design Support
#1

Hello.

I’m working on my project these days and I want to make my own character customization menu using low-poly Rthro rig. I’ve been searching all around DevForum and YouTube and I couldn’t find any good tutorial how would I start with the character customization.

I would like to my character plays an idle animation while customizing him. There would be some clothes, hairs, hats and skin editor.
How am I going to load that character in the game and when the player leaves the game and joins back he will have that same character again?

So, how am I going to start with character customization menu?

Thanks for help!

#2

You’d need a table to hold information about your current customization and table for storing items themselves:

local Current = {
  Hair = 1;
};
local Hair = game:GetService('ReplicatedStorage').Hair:GetChildren()

When “right” button gets clicked, you’ll probably want to get next child:

  if Hair[Current.Hair+1] then
    Current.Hair = Current.Hair + 1
    -- Change hair model on character
  end

Same logic goes for “left” button, except it goes to other side, meaning you’d change Current.Hair by -1.

Once your character clicks done, you send that data to server and store it in the datastores and load when player enters game.

*Note: This is really simplified version.

3 Likes
#3

Alright. So I would place all hair, hats, and clothes in ReplicatedStorage, but what does means if I change the Current.Hair-1 I don’t really get it.

Once your character clicks done, you send that data to server and store it in the datastores and load when player enters game. ----> This is kind of hard part for me. I know some stuff about Data Stores, but sending the data to server and store that data and load it is kind of confusing.

#4

When the player goes into the customisation menu, you can start by playing the idle animation by using Humanoid/LoadAnimation.

As for selecting items, you could use a module script that contains IDs for each item, which you can reference with the item’s name, then equip that item locally, so the player can see what it looks like, and replace a value in a dictionary which would contain names of the items that the user is wearing.

You should then fire an event that gives the server the player’s new outfit. The server can then check that the outfit is valid, and if it is, it could store the new table in a datastore which can then be retrieved when the player joins another server.

Hopefully this pseudocode will give you a general idea.

Client:

Outfit = { -- current outfit table
    Hair = "BlackHair",
    Shirt = "GreenShirt"
}

Module.BlueHair = { -- example of a dictionary in the modulescript
    ID = 0000000,
    ItemType = "Hair"
}

BlueHairButton.MouseButton1Click:Connect(function()
    Equip(Module.BlueHair.ID)
    Outfit[Module.BlueHair.ItemType] = "BlueHair" -- change to hair chosen by user
end)

ExitButton.MouseButton1Click:Connect(function()
    UpdateOutfit:FireServer(Outfit) -- give the server the new outfit
end)

ReplaceOutfitTable.OnClientEvent:Connect(function(NewOutfit)
    Outfit = NewOutfit -- replaces outfit table with user's current outfit upon joining
end)

Server:

UpdateOutfit.OnServerEvent:Connect(function(Player, NewOutfit)
    if IsValid(NewOutfit) then -- update the player's outfit in datastore if valid
        DataStore:GetDataStore(tostring(Player.UserId)):SetAsync("Outfit", NewOutfit)
    end
end)

game.Players.PlayerAdded:Connect(function(Player)
    local Data = DataStore:GetDataStore(tostring(Player.UserId)):GetAsync("Outfit")
    if Data then -- if the data exists
        ReplaceOutfit(Data) -- replace the user's default outfit with the one they've saved
        ReplaceOutfitTable:FireClient(Player, Data) -- tell the client what the user's outfit is
    end
end)

I hope this helps!

6 Likes
#5

What’s the best place for a client and server script?

#6

A localscript, which runs on the client, would go best in the StarterGui folder in this case.

A script, which runs on the server, should be placed in the ServerScriptService to ensure that it can’t be accessed by a player with malicious intent.

#7

Thank you very much for a help. I will test this out soon.

#8

I tried it, but it looks like I am really not experienced scripter. Could you explain these codes a little bit more? Like what’s Equip, Outfit, UpdateOutfit etc. How do I detect them in the script? I need a good starting guide.

Thanks.

3 Likes