Crie uma UI interativa

Um HUD (Heads-Up Display) em sua experiência comumente exibe elementos de UI não interativos, como o medidor de saúde demonstrado em Criar medidores HUD. Além disso, quase toda experiência requer UI interativa, como botões que respondem à ativação do jogador, que animam quando ativados, que fazem menus aparecerem/desaparecerem com outros controles interativos, etc.

Usando Fundamentos de UI - Medidor HUD como um ponto de partida e Fundamentos de UI - Interatividade como um lugar de referência finalizado, este tutorial demonstra:

• Como posicionar um botão de configurações ao longo da borda superior da tela.
• Design de um menu de configurações contendo controles deslizantes interativos arrastáveis.
• Uso de um ModuleScripts para formar módulos "controladores" para controle extensível de objetos de UI com declarações de estado.
• Como conectar botões à ativação do jogador para alternar a abertura e fechamento do menu de configurações.
• Como conectar controles deslizantes de UI arrastáveis para ajustar o volume de efeitos sonoros e do ambiente de fundo separadamente.

Habilitar o Emulador de Dispositivo

Como mencionado em Criar medidores HUD, telefones e tablets têm a menor quantidade de espaço de tela, portanto, é importante que seus elementos de UI se encaixem em telas menores e que sejam claramente visíveis para os jogadores. Se você ainda não fez isso, habilite o Emulador de Dispositivo no Studio:

1. Abra o template Fundamentos de UI - Medidor HUD no Studio.

2. No menu Testar do Studio, ative o Emulador de Dispositivo.

3. Na barra logo acima da janela principal, selecione uma emulação de telefone como iPhone X ou Samsung Galaxy A51. Em seguida, defina o tamanho da visualização como Ajustar à Janela para utilizar ao máximo o espaço no Studio.

   

Criar o botão de configurações

GuiButtons são elementos interativos da interface do usuário com funcionalidade embutida, como o evento multiplataforma Activated, que é acionado quando o botão é clicado ou pressionado. A classe GuiButton se estende a duas variações, TextButton e ImageButton, e este tutorial utiliza um ImageButton com formato de "engrenagem" para alternar o menu de configurações aberto ou fechado.

Para construir o botão de configurações:

1. Na janela Explorer, localize HUDContainer dentro de StarterGui.

   

2. Insira um ImageButton dentro de HUDContainer e renomeie-o para SettingsButton.

   

3. Com o novo botão selecionado, defina o seguinte na janela Propriedades:

   • AnchorPoint = 0.5, 0.25 (centro horizontal e um quarto superior verticalmente)
   • BackgroundTransparency = 1 (totalmente transparente)
   • Position = 0.5, 0, 0, 0 (posicionamento no centro superior)
   • Size = 0.1, 0, 0.1, 0 (10% da altura da tela uma vez que a proporção é restringida)
   • Image = rbxassetid://104919049969988 (ID do ativo do símbolo "engrenagem")

4. Insira um UIAspectRatioConstraint no botão com propriedades padrão (proporção 1:1 de largura para altura).

   

5. Para limitar a altura máxima em pixels do botão, insira um UISizeConstraint e defina seu MaxSize para inf, 44.

   

   

   

Criar o menu de configurações

O novo botão de configurações será scriptado para alternar um menu de configurações aberto e fechado, dando aos jogadores acesso sob demanda a configurações ou outras informações. Neste tutorial, o menu conterá controles deslizantes interativos para ajustar os níveis de volume do áudio de fundo e dos efeitos sonoros de forma independente.

Criar o frame pai

Como mencionado em Criar medidores HUD, um Frame serve como um contêiner para outros objetos de UI. Todo o menu de configurações será construído com um único frame pai, tornando simples gerenciá-lo como um objeto com estado que reage à entrada de maneira diferente dependendo do estado atual.

1. Insira um Frame dentro de HUDContainer e renomeie-o para SettingsMenu.

   

2. Com SettingsMenu selecionado, defina as seguintes propriedades:

   • AnchorPoint = 0.5 (âncora central)
   • BackgroundColor3 = 30, 30, 60 (azul marinho)
   • BackgroundTransparency = 0.25 (75% opaco)
   • Position = 0.5, 0, 0.5, 0 (centro da tela)
   • Size = 0.75, 0, 0.75, 0 (75% da largura/altura da área da tela interna)

   

3. Insira um UIAspectRatioConstraint em SettingsMenu e defina sua propriedade AspectRatio para 2.5. (2.5:1 de largura para altura).

   

   

4. Insira um modificador UICorner em SettingsMenu e defina sua propriedade CornerRadius para 0.1, 0.

   

   

5. Para restringir a largura e altura em pixels de SettingsMenu, insira um UISizeConstraint. Defina seu MaxSize para 800, inf e seu MinSize para 350, 0.

   

   

   

Construir um controle deslizante

Para permitir que os jogadores ajustem os níveis de volume, o menu de configurações conterá dois widgets deslizantes arrastáveis, alimentados pelo UIDragDetector, um objeto conveniente que facilita a interação com elementos de interface do usuário 2D.

Para criar um contêiner pai para o primeiro controle deslizante:

1. Insira um novo Frame no contêiner SettingsMenu e renomeie-o para EffectsVolumeSlider.

   

2. Com o frame EffectsVolumeSlider selecionado, defina as seguintes propriedades:

   • AnchorPoint = 0.5 (âncora central)
   • BackgroundTransparency = 1 (totalmente transparente)
   • Position = 0.5, 0, 0.35, 0 (centro horizontal e 35% da parte superior do contêiner)
   • Size = 0.8, 0, 0.1, 0 (80% da largura do contêiner e 10% de sua altura)

   

3. Insira um novo UIListLayout em EffectsVolumeSlider. Este modificador de layout é uma maneira poderosa de auto-arranjar GuiObjects irmãos em linhas horizontais ou colunas verticais dentro de seu contêiner pai, incluindo a capacidade de aplicar conceitos de flex.

   

4. Defina as seguintes propriedades para o novo UIListLayout:

   • Padding = 0.06, 0 (6% de preenchimento entre os elementos da lista)
   • FillDirection = Horizontal (arranjo de elementos da esquerda para a direita)
   • HorizontalFlex = Fill (redimensionar elementos horizontalmente para preencher todo o contêiner pai, substituindo sua largura definida)
   • VerticalAlignment = Center (alinhar elementos ao longo de seu centro vertical)

Ícone do controle deslizante

Um ícone simples que inclui uma nota musical e símbolo de "explosão" ajuda os jogadores a identificar o propósito do controle deslizante quando abrem o menu de configurações.

1. Insira um ImageLabel no frame EffectsVolumeSlider e renomeie-o para Icon. Este ícone ajudará os jogadores a entender qual aspecto da experiência o controle deslizante controla.

   

   Importante, note que o rótulo deve ser um irmão do UIListLayout, não um filho dele.

2. Com Icon selecionado, defina as seguintes propriedades:

   • BackgroundTransparency = 1 (totalmente transparente)
   • Size = 2.5, 0, 2.5, 0 (250% da altura do frame pai uma vez que a proporção é restrita)
   • Image = rbxassetid://90019827067389 (ID do ativo da nota musical e símbolo de "explosão")

3. Insira um UIAspectRatioConstraint em Icon e mantenha suas propriedades como os padrões (proporção 1:1 de largura para altura).

   

Frame de intervalo

Diretamente à direita do ícone, a parte interativa do controle deslizante deve estar contida dentro de outro Frame.

1. Insira um novo Frame no frame EffectsVolumeSlider e renomeie-o para SliderFrame. Observe que ele deve ser um irmão direto do modificador de layout UIListLayout.

   

2. Com SliderFrame selecionado, defina as seguintes propriedades:

   • BackgroundColor3 = 0 (preto)
   • BackgroundTransparency = 0.75 (25% opaco)
   • LayoutOrder = 1
   • Size = 1, 0, 1, 0 (100% da largura/altura do frame pai)

   Note que não é necessário atribuir mudanças posicionais como AnchorPoint ou Position, uma vez que o UIListLayout controla a posição de seus irmãos, neste caso ordenando-os horizontalmente da esquerda para a direita e mantendo-os verticalmente centralizados entre si.

   A propriedade LayoutOrder é importante quando se trabalha com modificadores de layout, como UIListLayout, pois determina a sequência em que os irmãos são colocados em relação uns aos outros. Mudá-lo para 1 para SliderFrame garante que ele seja colocado à direita do Icon, que tem uma LayoutOrder padrão de 0.

3. Insira os seguintes modificadores em SliderFrame:

   • UICorner com sua propriedade CornerRadius definida para 0.5, 0 (forma de "pílula")
   • UISizeConstraint com sua propriedade MaxSize definida para inf, 30 (máximo de 30 pixels de altura)
   • UIStroke com sua Color definida para 0, Thickness para 3, e Transparency para 0.25 (contorno preto 75% opaco)

   

Manuseio interativo

Com o contêiner do controle deslizante construído, agora você pode criar um manipulador arrastável para os jogadores interagirem durante o jogo.

1. Insira um novo Frame no contêiner SliderFrame e renomeie-o para Handle.

   

2. Com Handle selecionado, defina as seguintes propriedades:

   • AnchorPoint = 0.5 (âncora central)
   • Position = 0.5, 0, 0.5, 0 (centro horizontal e vertical do frame pai)
   • Size = 1.2, 0, 1.2, 0 (120% da altura do frame pai uma vez que a proporção é restrita)
   • ZIndex = 3 (camada do manipulador visualmente na frente de outros elementos do controle deslizante)

3. Insira os seguintes modificadores em Handle:

   • UIAspectRatioConstraint com suas propriedades padrão (proporção 1:1 de largura para altura)
   • UICorner com sua propriedade CornerRadius definida para 0.5, 0 (forma circular)
   • UIStroke com sua Color definida para [0, 150, 255] e sua Thickness para 8 (contorno azul espesso)

4. Insira um objeto UIDragDetector em Handle. Este objeto conveniente facilita e incentiva a interação com elementos de interface do usuário 2D.

   

5. Defina as seguintes propriedades para o novo UIDragDetector:

   • DragStyle = TranslateLine (movimento 1D ao longo do DragAxis do detector).
   • ResponseStyle = Scale (mover pelos valores de escala da posição do pai do detector)

6. Para garantir que a faixa de arrasto linear do manipulador seja limitada ao seu contêiner, vincule sua propriedade BoundingUI ao contêiner SliderFrame:

   1. Selecione o UIDragDetector.
   2. Clique em sua propriedade BoundingUI na janela Propriedades.
   3. Na janela Explorer, clique no pai SliderFrame do manipulador.

   

   A propriedade BoundingUI agora reflete o contêiner SliderFrame:

   

Se você testar a experiência agora, poderá arrastar o manipulador para a esquerda e para a direita dentro de seu contêiner pai:

Preenchimento interno

Para indicar mais claramente que o controle deslizante controla um intervalo de 0% a 100%, você pode adicionar um preenchimento interno ao lado esquerdo do contêiner que irá sincronizar com a posição variável do manipulador.

1. Insira um novo Frame no contêiner SliderFrame e renomeie-o para InnerFill.

   

2. Defina as seguintes propriedades para o frame InnerFill:

   • AnchorPoint = 0, 0.5 (borda esquerda e centro vertical)
   • BackgroundColor3 = [0, 150, 255] (azul combinando com o manipulador do controle deslizante)
   • BackgroundTransparency = 0.35 (65% opaco)
   • Position = 0, 0, 0.5, 0
   • Size = 0.5, 0, 1, 0 (50% de largura e 100% de altura do frame pai)
   • ZIndex = 2 (camada visualmente na frente do preenchimento/contorno do frame pai)

3. Para combinar com a forma de "pílula" do contêiner pai SliderFrame, insira um modificador UICorner e defina sua propriedade CornerRadius para 0.5, 0.

   

   

   

Duplicar o controle deslizante

Com o primeiro controle deslizante construído, você pode facilmente duplicá-lo e modificar alguns aspectos visuais para indicar outro propósito, neste caso, o nível de volume do áudio de fundo simbolizado por um ícone de notas musicais.

1. Selecione o objeto EffectsVolumeSlider completo.

   

2. Duplicá-lo (CtrlD ou ⌘D) e renomeie a duplicata para BackgroundVolumeSlider.

   

3. Altere a Position da duplicata para 0.5, 0, 0.7, 0 para movê-la para abaixo do primeiro controle deslizante.

   

4. Expanda o ramo de nível superior de BackgroundVolumeSlider, selecione o rótulo da imagem Icon e altere sua propriedade Image para rbxassetid://101125859760167 (ID do ativo do símbolo com notas musicais).

   

   

   

5. Expanda o ramo SliderFrame ⟩ Handle, selecione o modificador UIStroke dentro, e defina sua propriedade Color para [255, 0, 125] (magenta).

   

   

   

6. Selecione o frame InnerFill dentro de SliderFrame e altere sua propriedade BackgroundColor3 para a mesma cor magenta ([255, 0, 125]).

   

   

   

Criar o botão de fechar

O último elemento do menu de configurações é um botão de fechar que fornece aos jogadores uma entrada adicional para fechar o menu (o SettingsButton no centro superior servirá ao mesmo propósito).

1. Insira um novo ImageButton no contêiner SettingsMenu e renomeie-o para CloseButton.

   

2. Com CloseButton selecionado, defina as seguintes propriedades:

   • AnchorPoint = 1, 0 (canto superior direito)
   • BackgroundTransparency = 1 (totalmente transparente)
   • Position = 1, -10, 0, 10 (10 pixels para dentro a partir do canto superior direito)
   • Size = 0.15, 0, 0.15, 0 (15% da altura do frame uma vez que a proporção é restringida)
   • Image = rbxassetid://5577404210 (ID do ativo do símbolo do botão de fechar)
   • ImageTransparency = 0.25 (75% opaco)

3. Insira um UIAspectRatioConstraint no botão com propriedades padrão (proporção 1:1 de largura para altura).

   

Criar os módulos de controle

Uma configuração de módulo de controle extensível torna o gerenciamento de UI interativa mais simplificado do que scripts individuais colocados dentro de cada objeto. ModuleScripts facilitam essa funcionalidade extensível permitindo que você reutilize código entre scripts em diferentes lados da fronteira cliente-servidor ou no mesmo lado da fronteira.

Controlador de objeto com estado

O seguinte módulo controlador de objeto com estado permite que você anexe comportamentos a objetos de UI como SettingsButton e SettingsMenu, e facilmente alternar/animar entre vários estados. Para criar o módulo:

1. Insira um ModuleScript no contêiner ReplicatedStorage e renomeie-o para StatefulObjectController.

   

2. Cole o seguinte código dentro do módulo:

   StatefulObjectController
   local TweenService = game:GetService("TweenService")
   
   local StatefulObjectController = {}
   StatefulObjectController.__index = StatefulObjectController
   
   export type StateName = string
   export type State = {
       transition: TweenInfo,
       properties: { [string]: any },
   }
   
   function StatefulObjectController.hydrate(props: {
           object: Instance,
           states: { [StateName]: State },
           initialStateName: StateName
       })
       local object, states, initialStateName = props.object, props.states, props.initialStateName
   
       local self = setmetatable({
           states = states,
           currentStateName = initialStateName,
           tweens = {},
       }, StatefulObjectController)
   
       -- Crie tweens para reutilização para evitar fazer novos tweens toda vez que o estado é alterado
       for stateName, state in states do
           self.tweens[stateName] = TweenService:Create(object, state.transition, state.properties)
       end
   
       self:setState(self.currentStateName)
   
       return self
   end
   
   function StatefulObjectController:setState(stateName: StateName)
       local stateTween: Tween = self.tweens[stateName]
       if not stateTween then
           warn(string.format("Tentou definir %s para um estado desconhecido '%s'", self.object:GetFullName(), stateName))
           return
       end
   
       self.currentStateName = stateName
   
       -- Certifique-se de que outros tweens não estejam em conflito
       for _, tween in self.tweens do
           tween:Cancel()
       end
   
       stateTween:Play()
   end
   
   return StatefulObjectController

   Explicação do Código

   Linhas	Propósito
   6‑10	Define e exporta os tipos Luau para melhorar a autocompletação e verificação ao usar este módulo.
   12‑33	Função usada para inicializar e anexar comportamento a um objeto de UI com estado, aceitando um GuiObject como object, uma tabela de estados e seus respectivos dados TweenInfo, e um nome de estado inicial. Dentro dessa função, as linhas 26‑28 constroem Tweens para cada estado, e a linha 30 chama a função setState() do módulo para definir o objeto ao estado inicial.
   35‑50	Função usada para definir/mudar o estado de um objeto com estado. A linha 42 define o currentStateName do objeto para o estado que está sendo definido, as linhas 45‑47 cancelam quaisquer tweens em execução para evitar conflitos, e a linha 49 executa o(s) tween(s) do estado.

Controlador do deslizante

Um módulo adicional inicializa e controla os dois controles deslizantes de volume. Ele também permite que você conecte uma função de retorno de chamada a cada controle deslizante para detectar a interação do jogador com o controle deslizante e aplicar as alterações desejadas na experiência.

1. Insira um ModuleScript no contêiner ReplicatedStorage e renomeie-o para SliderController.

   

2. Cole o seguinte código dentro do módulo:

   SliderController
   local SliderController = {}
   SliderController.__index = SliderController
   
   export type Value = number
   export type OnChanged = (Value) -> ()
   
   function SliderController.hydrate(props: {
           object: Instance,
           onChanged: OnChanged,
           initialValue: Value?
       })
       local object, onChanged, initialValue = props.object, props.onChanged, props.initialValue
   
       local handle = object:FindFirstChild("Handle", true)
       if not handle then
           warn(string.format("Tentou hidratar o controle deslizante %s mas não conseguiu encontrar o Handle", object:GetFullName()))
       end
   
       local innerFill = object:FindFirstChild("InnerFill", true)
       if not innerFill then
           warn(string.format("Tentou hidratar o controle deslizante %s mas não conseguiu encontrar o InnerFill", object:GetFullName()))
       end
   
       local dragDetector = handle:FindFirstChildWhichIsA("UIDragDetector")
       if not dragDetector then
           warn(string.format("Tentou hidratar o controle deslizante %s mas não conseguiu encontrar o UIDragDetector", object:GetFullName()))
       end
   
       local self = setmetatable({
           handle = handle,
           innerFill = innerFill,
           dragDetector = dragDetector,
           value = initialValue or 0.5,
           onChanged = onChanged,
       }, SliderController)
   
       -- Defina o valor inicial
       self:setValue(self.value)
   
       -- Conecte o detector à manipulação do jogador
       self.dragConnection = dragDetector.DragContinue:Connect(function()
           self:setValue(handle.Position.X.Scale)
       end)
   
       return self
   end
   
   function SliderController:setValue(value: Value)
       local clampedValue = math.clamp(value, 0, 1)
       self.value = clampedValue
   
       -- Atualize a posição do manipulador e o tamanho do inner fill para combinar
       self.handle.Position = UDim2.fromScale(clampedValue, 0.5)
       self.innerFill.Size = UDim2.fromScale(clampedValue, 1)
   
       -- Execute a função de retorno de chamada do usuário com o valor mais recente
       local changeSuccess, changeResult = pcall(self.onChanged, clampedValue)
       if not changeSuccess then
           warn("Erro na callback do controle deslizante:", changeResult)
       end
   end
   
   return SliderController

   Explicação do Código

   Linhas	Propósito
   7‑46	Função usada para inicializar e anexar comportamento a um elemento de controle deslizante, aceitando o pai do controle deslizante Frame como object, uma função de callback onChanged para processar alterações do controle deslizante, e um valor inicial para a posição do manipulador do controle deslizante. Dentro da função, as linhas 14‑27 confirmam que os elementos do manipulador, preenchimento interno e UIDragDetector existem. A linha 38 chama a função setValue() do módulo e as linhas 41‑43 conectam o evento DragContinue do detector de arrasto à função setValue() do módulo (veja a linha seguinte para mais detalhes).
   48‑61	Função usada para definir o valor do controle deslizante. Dentro da função, as linhas 53‑54 garantem que a posição do manipulador e o tamanho do preenchimento interno estejam sincronizados, e a linha 57 passa o valor alterado para a função de retorno de chamada, para que você possa utilizar o valor conforme necessário.

Criar o script de configurações

Com o botão de configurações e o menu de configurações finalizados, você pode conectar tudo com um único script que utiliza os módulos de controle.

1. Insira um novo LocalScript dentro de HUDContainer e renomeie-o para SettingsScript para descrever seu propósito. Observe que este script deve estar no mesmo nível (irmão) que SettingsMenu e SettingsButton, os objetos de UI de nível superior que irá gerenciar.

   

2. Cole o seguinte código dentro do script:

   SettingsScript
   local ReplicatedStorage = game:GetService("ReplicatedStorage")
   local SoundService = game:GetService("SoundService")
   
   local SliderController = require(ReplicatedStorage.SliderController)
   local StatefulObjectController = require(ReplicatedStorage.StatefulObjectController)
   
   local HUDContainer = script.Parent
   
   -- Inicializa o botão de configurações
   local settingsButton = StatefulObjectController.hydrate({
       object = HUDContainer:FindFirstChild("SettingsButton"),
       states = {
           menuOpen = {
               transition = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out),
               properties = {
                   Rotation = 45,
               },
           },
           menuClosed = {
               transition = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out),
               properties = {
                   Rotation = 0,
               },
           },
       },
       initialStateName = "menuClosed"
   })
   
   -- Inicializa o frame do menu de configurações
   local settingsMenu = StatefulObjectController.hydrate({
       object = HUDContainer:FindFirstChild("SettingsMenu"),
       states = {
           menuOpen = {
               transition = TweenInfo.new(0.5, Enum.EasingStyle.Bounce, Enum.EasingDirection.Out),
               properties = {
                   Position = UDim2.fromScale(0.5, 0.5),
                   Visible = true,
               },
           },
           menuClosed = {
               transition = TweenInfo.new(0),
               properties = {
                   Position = UDim2.fromScale(0.5, 0.4),
                   Visible = false,
               },
           },
       },
       initialStateName = "menuClosed"
   })
   
   -- Inicializa o controle deslizante de volume de efeitos
   local effectsAudio = SoundService:FindFirstChild("Effects")
   local effectsVolumeSlider = SliderController.hydrate({
       object = HUDContainer:FindFirstChild("EffectsVolumeSlider", true),
       initialValue = effectsAudio and effectsAudio.Volume or 0.5,
       onChanged = function(value: SliderController.Value)
           if effectsAudio then
               effectsAudio.Volume = value
           end
       end,
   })
   
   -- Inicializa o controle deslizante de volume de fundo
   local backgroundAudio = SoundService:FindFirstChild("Background")
   local backgroundVolumeSlider = SliderController.hydrate({
       object = HUDContainer:FindFirstChild("BackgroundVolumeSlider", true),
       initialValue = backgroundAudio and backgroundAudio.Volume or 0.5,
       onChanged = function(value: SliderController.Value)
           if backgroundAudio then
               backgroundAudio.Volume = value
           end
       end,
   })
   
   -- Conecta botões à interação do jogador
   HUDContainer:FindFirstChild("SettingsButton").Activated:Connect(function()
       local targetState = if settingsButton.currentStateName == "menuClosed"
           then "menuOpen"
           else "menuClosed"
       settingsButton:setState(targetState)
       settingsMenu:setState(targetState)
   end)
   HUDContainer:FindFirstChild("CloseButton", true).Activated:Connect(function()
       settingsButton:setState("menuClosed")
       settingsMenu:setState("menuClosed")
   end)

3. Consulte as seguintes seções para explorar como o script utiliza os módulos de controle.

   Botão de Configurações

   As linhas 10-27 inicializam e anexam comportamento ao botão de configurações da seguinte maneira:

   Linhas	Propósito
   10‑11	Uma referência local settingsButton é declarada e hidratada com a função StatefulObjectController.hydrate(), e o SettingsButton dentro do HUDContainer é referenciado como o objeto a ser hidratado.
   12‑25	Uma tabela states é passada com dois estados exclusivos, menuOpen e menuClosed. Cada estado contém uma transição para declarar (através de um TweenInfo) como o estado particular alcançará suas propriedades-alvo definidas na tabela properties. Neste caso, menuOpen declara uma mudança de estado para 45° para a rotação do botão Rotation com um tween Exponential de meio segundo, enquanto que menuClosed efetivamente restaura o botão à sua rotação padrão de 0.
   26	O estado inicial do botão é definido como menuClosed (isso poderia ser definido como qualquer nome de estado dentro da tabela states).

   Mais adiante no script (linhas 76-86), os botões são conectados à interação do jogador para acionar alterações no estado da UI:

   Linhas	Propósito
   76‑82	SettingsButton está conectado ao evento Activated da classe GuiButton para chamar uma função anônima. Dentro da função anônima, as linhas 77‑79 alternam uma variável targetState entre menuOpen e menuClosed. A linha 80 então chama setState() para definir o estado do botão como targetState e a linha 81 faz o mesmo para SettingsMenu, de modo que ele alterna entre aberto ou fechado com a ativação do SettingsButton.
   83‑86	CloseButton está conectado ao evento Activated para chamar uma função anônima que define o estado de ambos SettingsButton e SettingsMenu como menuClosed.

   Menu de Configurações

   As linhas 30-49 inicializam e anexam comportamento ao menu de configurações da seguinte maneira:

   Linhas	Propósito
   30‑31	Uma referência local settingsMenu é declarada e hidratada com a função StatefulObjectController.hydrate() e o frame SettingsMenu dentro do HUDContainer é referenciado como o objeto a ser hidratado.
   32‑46	Semelhante ao botão de configurações, uma tabela states é passada com dois estados exclusivos, menuOpen e menuClosed. Aqui, menuOpen declara uma mudança de estado para UDim2.fromScale(0.5, 0.5) para a Position do frame com um tween Bounce de meio segundo, bem como um estado Visible de true. Em contraste, menuClosed declara uma mudança de estado posicional para UDim2.fromScale(0.5, 0.4) e Visible para false, mas o TweenInfo com duração 0 na linha 41 efetivamente faz com que a mudança de estado ocorra instantaneamente.
   48	O estado inicial do frame é definido como menuClosed.

   Mais adiante no script (linhas 76-86), o menu de configurações é vinculado à interação do jogador:

   Linhas	Propósito
   81	Define o mesmo targetState para SettingsMenu para sincronizar com a ativação do SettingsButton.
   85	Define o estado de SettingsMenu como menuClosed quando o CloseButton é ativado.

   Controles Deslizantes de Volume

   As linhas 51-73 inicializam e anexam comportamento aos EffectsVolumeSlider e BackgroundVolumeSlider da seguinte maneira:

   Linhas	Propósito
   52	Define uma referência local ao grupo de sons Effects dentro de SoundService. Um SoundGroup permite relacionar múltiplos Sounds e controlar o volume de cada som no grupo através da propriedade Volume do grupo.
   53‑54	Uma referência local effectsVolumeSlider é declarada e hidratada com a função SliderController.hydrate() e o frame EffectsVolumeSlider dentro do HUDContainer ⟩ SettingsMenu é referenciado como o objeto a ser hidratado. Observe que o segundo parâmetro de true para FindFirstChild() diz ao método para procurar recursivamente na ramificação HUDContainer para localizar EffectsVolumeSlider.
   55	O valor inicial do controle deslizante é definido como o Volume atual do grupo de sons Effects, ou 0.5 como fallback.
   56‑60	Estabelece a função de callback para aplicar alterações de valor do controle deslizante ao volume do grupo de sons Effects.
   64‑73	Essencialmente o mesmo que as linhas 52-61, exceto que hidrata o frame BackgroundVolumeSlider dentro do HUDContainer ⟩ SettingsMenu e aplica as alterações de valor do controle deslizante ao volume do grupo de sons Background.

Com o SettingsScript em funcionamento, a experiência agora oferece um exemplo de UI interativa totalmente operacional que vincula um conjunto relacionado de objetos de UI à interação do jogador.