Improving a Character Changing UI

Hello Developers.

Im making an RP game, that you can play as one of lots of characters that i made…
I took a model made by IDKBlox (https://www.roblox.com/library/1214241595/Character-select)
And I NEED to make it a huge change, but i don’t know how to do it

i need to put ALL the Character changing buttons inside a scrolling GUI that can be closed and opened, all the buttons are premade in the model, so i want to keep them, premade, but in a GUI (ScrollingFrame) that closes and opens. (no, i don’t want to use UIAspectRatioConstraint. Also, i want to add some decorative images to the ScrollingFrame)

Here are the scripts:

LocalScript inside ScreenGUI (Character Select) NOTE: Inside this ScreenGUI are the character buttons

local	Characters = game:GetService("ReplicatedStorage").Characters
local	Event = game:GetService("ReplicatedStorage").ChooseCharacter

for i,v in pairs (script.Parent:GetChildren()) do
	if v:IsA("TextButton") or v:IsA("ImageButton") then
		v.MouseButton1Click:connect(function()
			if Characters:FindFirstChild(v.Name) then
				Event:FireServer(v.Name)
			elseif v.Name == "PlayerCharacter" then
				Event:FireServer("PlayerCharacter")
			end
		end)
	end
end

Script (Called Read ME) Inside Model (Character Changer)

--[[
	characters folder goes in replicated storage
	choosecharacter event goes in replicated storage
	character select gui goes in startergui
	this script goes in ServerScriptService
	
	can add more characters by putting more character models in the characters folder
	and in the gui just duplicate the gui move it and change the name of the gui
	to exactly the name of the character you put in the characters folder
--]]


local	Characters = game:GetService("ReplicatedStorage").Characters
local	Event = game:GetService("ReplicatedStorage").ChooseCharacter

Event.OnServerEvent:connect(function(player,character)
	if character == "PlayerCharacter" then
		player:LoadCharacter()
	else
		local	char = Characters[character]:Clone()
		char.Name = player.Name
		player:LoadCharacter()
		player.Character = char
		player.Character.Parent = workspace
	end
end)

Here is a screenshot (It helps a lot, see the explorer) As you can see, the character models are inside a folder called Characters (wich is inside ReplicatedStorage. Also, inside ReplicatedStorage there is a event called ChooseCharacter)

What i do for put all toose buttons in a ScrollingFrame that close and open with a button?

I tried placing all the buttons inside a ScrollingGUI without changing any script, but it didn’t worked.

Hope you can solve this problem, and please be patient with me because sometimes takes me really much time to understand scripting :heart: Thank you!

EDIT: Sorry if i sometimes say ScrollingGUI instead of ScrollingFrame

3 Likes

You could make a scrolling frame with a UIGridLayout or UIListLayout parented to it. These guis auto position everything for you. To open and close it you could make a button or 2 buttons with a script that makes the gui visible or not.

Script ex (Parented to the button or buttons):

script.Parent.MouseButton1Click:Connect(function()
gui.Visible = true/false
end)
1 Like

I am not very good at scripting but I know some and am learning

1 Like

@luabarnes

Parented to what?

Also, where goes the open/close button. And do i place all the buttons inside the ScrollingFrame?

And why the UIGridLayout or UIListLayout?

Thank you!

Parented to the scrolling frame
The open/close button goes anywhere in StarterGui
UIGridLayout puts all the guis in a grid and with it you can change the size, and change other things with everything in the scrolling frame
UIListLayout is for putting the guis in a list one after the other and also each one can be a different size

If you want one button to open and close the scrolling frame then you could use this script:

script.Parent.MouseButton1Click:Connect(function()

local gui = put the path to the scrolling frame here

if gui.Visible == false then gui.Visible = true
     elseif gui.Visible == true then gui.Visible = false
     end
end)

Tell me if this works

1 Like

An example of a path would be:

game.Players.LocalPlayer.PlayerGui.CharacterPickerGui.OpenCloseButton
1 Like

Is UIGridLayout/UIListLayout Necessary? @luabarnes

Also, if i put the button inside the scrollingframe, the button disappears.
And you wrote Visible instead Enabled

You do not have to use UIGridLayout/UIListLayout, if you don’t you would have to manually position everything yourself. I am not sure why the button is disappearing. Visible works fine for me. Enabled is for a ScreenGui. I am talking about a ScrollingFrame. ScrollingFrames go inside of ScreenGuis

1 Like

Yes, i want to put all of them manually…

And when i placed all the buttons inside the ScrollingFrame, they doesn’t work.

@luabarnes

The script I gave you was to open and close the ScrollingFrame

1 Like

Nevermind. i solved it placing the LocalScript inside the ScrollingFrame. lol

Also, the reason why i dont use UILayouts its because the screen of my Laptop is very small.

But anyways, thanks for the help, you are my hero! :heart_decoration:

1 Like

Sorry if I did not make that clear. Also, when I said that UIGridLayout/UIListLayout auto places things, I meant that it positions everything for you, you still create the guis, just you don’t have to mess with the position setting

1 Like

Ok, good. Is the LocalScript the one I gave you?

The screen size should not affect UIListLayout/UIGridLayout. UIListLayout/UIGridLayout should be parented to the scrolling frame, not the ScreenGui, which means that whatever size the ScreenGui the UIListLayout/UIGridLayout will be the same size

1 Like