Is there a better way of doing this?

I’m trying to make a character creation menu and I’m trying to make it so you click through a series of arrows and they bring up the different menus, as shown:

Currently, my code is a long mess that barely works. I’d assume you use some type of loop, but I’m not all that advanced in Luau, so I’m not sure how to go about making all of this.

Here’s my current code:

script.Parent.Activated:Connect(function()
	game.Players.LocalPlayer.PlayerGui.ScreenGui.CharacterCreationUI.Main.Selection.Backwards.Visible = true
	game.Players.LocalPlayer.PlayerGui.ScreenGui.CharacterCreationUI.Main.Selection.Skin.Visible = true
	game.Players.LocalPlayer.PlayerGui.ScreenGui.CharacterCreationUI.Main.Selection.Hair.Visible = false
	game.Players.LocalPlayer.PlayerGui.ScreenGui.CharacterCreationUI.Main.Selection.Backwards.Activated:Connect(function()
		game.Players.LocalPlayer.PlayerGui.ScreenGui.CharacterCreationUI.Main.Selection.Hair.Visible = true
		game.Players.LocalPlayer.PlayerGui.ScreenGui.CharacterCreationUI.Main.Selection.Skin.Visible = false
		script.Parent.Activated:Connect(function()
			game.Players.LocalPlayer.PlayerGui.ScreenGui.CharacterCreationUI.Main.Selection.Face.Visible = true
			game.Players.LocalPlayer.PlayerGui.ScreenGui.CharacterCreationUI.Main.Selection.Skin.Visible = false
			game.Players.LocalPlayer.PlayerGui.ScreenGui.CharacterCreationUI.Main.Selection.Backwards.Activated:Connect(function()
				game.Players.LocalPlayer.PlayerGui.ScreenGui.CharacterCreationUI.Main.Selection.Skin.Visible = true
				game.Players.LocalPlayer.PlayerGui.ScreenGui.CharacterCreationUI.Main.Selection.Face.Visible = false
			end)
		end)
	end)
end)

So, is there a better way of doing what I’m trying to do? Any help is appreciated

idk really amnot advanced in luau too but i think using a variable would make it more readable like
using a variable outside the function like this
local Selection = game.Players.LocalPlayer.PlayerGui.ScreenGui.CharacterCreationUI.Main.Selection
and using Selection.anything.Visible = bool inside the function instead of the long line idk i may be wrong

You can use a state variable to better organize your code.

Also you can use an array to organize the increment decrement behavior of the arrows.

[1] = “Hair”
[2] = “Skin”
[3] = “Face”

Then you just +1 to the current state variable to change state.

Then have events that listen to this number change and create/destroy/make visible/rename text box the ui whatever you want or need.

This is my perspective after studying ui libaries like Roact or Fusion which also studies from other ui libraries like react.

1 Like

This would probably work, the only issue I’m having is setting it up.

This is basically all I have so far:

local SelectionArray = {"Hair", "Skin", "Beard", "Face", "Shirts", "Pants"}

script.Parent.Activated:Connect(function()
	
end)

I’m not quite sure what to do after that, I’ve also never used an Array in my life but after quickly reading up on documentation this is so far right… I think… I just don’t know how to increment the array and get it to show all the UI and stuff.