Controles Avanzados

Los controles avanzados permiten configurar valores más complejos en las historias.
Estos controles no se encuentran disponibles en Flipbook

Estos son creados manualmente utilizando los constructores disponibles en el Paquete de Utilidades.

Estos son los controles avanzados disponibles actualmente:

Control Deslizante (Slider)

El control de Slider te permite añadir un número dentro de un rango, se muestra como un control deslizante con una entrada numérica. Este control toma un valor mínimo y máximo como el rango.

---

Slider(def, min, max, step? )

Argumentos

• def number Valor predeterminado
• min number El valor mínimo del rango
• max number El valor mínimo del rango
• step numberOpcional La cantidad de incremento/disminución por cada sección. Si no se le asigna uno, este sera continuo   Predeterminado: nil

Control de Tipo RGBA

Este control es similar al control primitivo de tipo Color3, pero este te permite modificar el valor alfa del color. El valor alfa se convierte en transparencia cuando se usa en tu historia.

El tipo del control será: { Color:Color3, Transparency:number }

---

RGBA(def, transparency? )

Argumentos

• def Color3 Valor predeterminado de color
• transparency numberOpcional Valor predeterminado de transparencia    Predeterminado: 0

Control de Selección Múltiple (Choose)

El control Choose te permite seleccionar entre un conjunto de opciones, y se muestra como un menú desplegable con las opciones como entradas.

Los valores posibles para esto son: Tablas, Tipos de Datos, Enumeraciones, Funciones, Primitivos. Puedes mezclar tipos, pero no se recomienda.

---

Choose(options, index? , widen? )

Argumentos

• options Array Matriz de las opciones posibles
• index numberOpcional Índice de la opción predeterminada    Predeterminado: 1
• widen booleanOpcional Si se establece como verdadero, el tipo de control se ampliará (solo en TypeScript)    Predeterminado: false

Control de Tipo EnumList

El control de tipo EnumList es similar al control Choose, pero este te permite darle un nombre a tus opciones. Esto es útil cuando el valor por sí mismo no proporciona suficiente información.

Puedes usar los mismos tipos que en el control de Choose, y puedes mezclar tipos, pero nuevamente, no se recomienda.

---

EnumList(list, key, widen? )

Argumentos

• list { string: any } Registro de opciones posibles
• key keyof list Clave de la opción predeterminada, esto es requerido    Predeterminado: 1
• widen booleanOpcional Si se da como verdadero, el tipo de control se ampliará (solo TypeScript)    Predeterminado: false

---

Tipos Ampliados / Widened Types

Los controles Choose y EnumList aceptan un tercer parámetro widen.

Este parámetro no cambia nada durante la ejecución, pero si se da el valor true, los valores del control se generalizarán en lugar de usar los literales de valor.

Ejemplo

Choose(["One", "Two", "Three"], 0, false); // type: "One" | "Two" | "Three"
Choose(["One", "Two", "Three"], 0, true); // type: string

Choose([1, 2, 3], 0, false); // type: 1 | 2 | 3
Choose([1, 2, 3], 0, true); // type: number

Ejemplo

Lets use all of them in a more real context:

local UILabs = require(...) -- Ubicación de tu Paquete de Utilidades

local controls = {
   -- [[ Choose ]] --
   Theme = UILabs.Choose({"Dark", "Light"}),
   Currency = UILabs.Choose({"Coins", "Gems"}),

   -- [[ EnumList ]] --
   WindowSize = UILabs.EnumList({
      Mobile = 500,
      Tablet = 1000,
      Desktop = 1500,
   }, "Mobile"),
   TextColor = UILabs.EnumList({
      Red = Color3.new(1, 0, 0),
      Green = Color3.new(0, 1, 0),
      Blue = Color3.new(0, 0, 1),
   }, "Red"),

   Volume = UILabs.Slider(50, 0, 100, 1), -- solo tiene valores enteros
   FrameColor = UILabs.RGBA(Color3.new(1, 1, 1), 0) -- también tendrás que establecer el BackgroundTransparency
}

local story = {
   controls = controls,
   story = ...
}

return story