➤ Tutorial: Guía absoluta para principiantes de GUI 🕹

Bienvenido a la Guía absoluta para principiantes de GUI. Esta guía lo guiará a través de varios cursos intensivos sobre cómo crear GUI y comprender las palabras detrás de todo. GUI son las siglas de Graphical User Interface. Las GUI en Roblox son formas, texto, imágenes y otros elementos 2D en su pantalla que son parte de su juego de Roblox. Un ejemplo sería su barra de salud a la derecha.

Las GUI son fáciles de hacer, pero para hacerlas interactivas se requieren conocimientos básicos de secuencias de comandos. Se recomienda encarecidamente que lea algunos tutoriales sobre secuencias de comandos en Roblox Lua (o puede aprender aquí) antes de leer sobre las GUI, ya que son bastante avanzadas. Sin embargo, si esto no le desanimó, ¡le deseo suerte en su búsqueda por dominar las GUI!

Debe tener la ventana del Explorador y la ventana de Propiedades abiertas en todo momento cuando trabaje con GUI.

Para abrir la ventana del Explorador, vaya a Ver> Explorador.
Para abrir la ventana Propiedades, vaya a Ver> Propiedades.

Contenido

1 instancias de GUI
- 1.1 Objetos GUIO y componentes UIC
- Propiedades 1.2
- 1.3 Colector de capas
- Marco 1.4
- 1.5 Objetos de texto
- 1.6 Objetos de imagen
2 UDim y UDim2
- 2.1 Notación
- Escala 2.2
- 2.3 Desplazamiento
- 2.4 AnchorPoint
3 tutoriales de GUI

Instancias de GUI

Objetos GUIO y componentes UIC

En Roblox, los objetos como botones o etiquetas de texto se conocen como GUIObjects, que es una clase abstracta para un objeto de interfaz de usuario. Cada objeto UI tendrá propiedades heredadas como Size, BackgroundColor3, etc. Los GUIObjects también tienen funciones y eventos definidos. Un GUIObject o sus hijos se pueden manipular a través de UIComponents. El componente UICorner puede alterar el aspecto de las esquinas de un GUIObject, y el componente UIListLayout puede manipular el diseño de un GUIObject.

Propiedades

Tipo	Propiedad	Descripción
Boolean	Deportivo	Determina si un elemento de la interfaz de usuario absorbe la entrada
Vector2	AnchorPoint	Determina el punto de origen de una GUI, en relación con su tamaño absoluto
Enum.AutomaticSize	AutomaticSize	Determina si el cambio de tamaño se produce en función del contenido infantil
Color3	BackgroundColor3	Determina el color de fondo de una GUI
Flotador	FondoTransparencia	Determina la transparencia del fondo y el borde de la GUI
Color3	BorderColor3	Determina el color del borde de una GUI
Enum.BorderMode	BorderMode	Determina de qué manera se distribuye el borde de un GuiObject en relación con sus dimensiones.
Entero	BorderSizePixel	Determina el ancho de píxel del borde de una GUI
Boolean	Clips de descendientes	Determina si las GUI descendientes fuera de los límites de un elemento de la GUI principal deben procesarse
Entero	LayoutOrder	Controla el orden de clasificación de una GUI cuando se usa con un UIGridStyleLayout
GUIObject	SiguienteSelección	Establece el GuiObject que se seleccionará cuando el selector de Gamepad se mueva en esta dirección
UDim2	Posición	Determina el píxel y la posición escalar de una GUI
Flotador	rotación	Determina la cantidad de grados en los que se gira un elemento de la interfaz de usuario
Boolean	Seleccionable	Determinar si la GUI puede ser seleccionada por un gamepad
GUIObject	SelectionImageObject	Anula el adorno de selección predeterminado (utilizado para gamepads)
UDim2	Tamaño	Determine el tamaño de píxel y escalar de una GUI
Enum.SizeConstraint	Tamaño	Selecciona los ejes GUIObject.Size en los que se basará una GUI en relación con el tamaño de su padre
Boolean	Visible	Determina si se renderizará un GUIObject y sus descendientes
Entero	ZIndex	Determina el orden en el que se representa una GUI en relación con otras GUI

LayerCollector

Un LayerCollector es una clase abstracta que contiene 3 tipos de contenedores GUI. Un ScreenGui, un SurfaceGui y un BillboardGui. ScreenGui y SurfaceGui se explican por sí mismos. Un ScreenGui es un contenedor de objetos GUIO que aparecen en su pantalla. Un SurfaceGui es un contenedor de objetos GUIO que aparecen en superficies (como en partes). Un BillboardGui es un contenedor 2d que está vinculado a un objeto 3D.

Marco

Un marco es un tipo de objeto GUIO simple pero aplicable que se puede utilizar para su GUI. Heredan las propiedades de un GuiObject, incluyendo BackgroundColor3, BackgroundTransparency, Size, Position, etc. Pueden verse y usarse de muchas formas diferentes.

Objetos de texto

Los objetos de texto son GUIObjects como Frames, pero contienen texto. Debido a que los objetos de texto son GUIObjects, heredan sus propiedades. Los objetos de texto también tienen sus propias propiedades únicas como Texto o Fuente. Hay 3 tipos de objetos de texto.

TextLabel: una etiqueta que contiene texto.
TextButton: un botón interactiva que contiene texto.
TextBox: una etiqueta que puede recibir entrada. (Como una barra de búsqueda o un cuadro de contraseña)

Objetos de imagen

Los objetos de imagen también son objetos GUIO como Frames, pero contienen una imagen. (Como una calcomanía). Heredan las propiedades de un GUIObject pero también tienen sus propiedades únicas como Image, ImageColor3, ImageTransparency, etc. Hay 2 tipos de objetos de imagen.

ImageLabel: una etiqueta que contiene una imagen.
ImageButton: un botón interactiva que contiene una imagen.

UDim y UDim2

Un UDim es un componente que se utiliza cuando se trabaja con GUI. Un UDim puede ser X o Y en una coordenada UDim2 y tiene 2 propiedades principales.

Escala: el valor que esto representa se escala en relación con el eje que representa este UDim en un UDim2.
Desplazamiento: el componente de unidad de píxel de UDim

Calificación

Los valores UDim2 a menudo se indican con corchetes, pero al escribir valores UDim2 en la ventana de propiedades, los corchetes se pueden omitir ya que Roblox implementará automáticamente los corchetes nuevamente. Cuando intente escribir un valor UDim2 en un script, puede usar el constructor .new .

UDim2.new (XUDim, YUDim) UDim2.new (XScale, XOffset, YScale, YOffset)

Ahora probablemente se esté preguntando por qué puse dos formas diferentes de usar este constructor. (no, no lo eres, pero te lo diré de todos modos). Es porque hay 2 formas de usar este constructor.

Forma 1: uso de UDims
- Puede usar el constructor UDim.new para hacer un X UDim y un Y UDim para su UDim2
Camino 2: en total
- Simplemente puede poner su escala y compensación para cada eje y eso también funcionará

Estos métodos se pueden mezclar ya que UDim2.new (0.5, 10, UDim.new (1, 0)) también funcionará

Escalable

Lo que representa el componente de escala se escala en relación con el eje que representa este UDim (generalmente el padre). Por ejemplo, si tuviéramos que establecer la posición de un marco en {0.5, 0}, {0.5, 0}, el marco estaría en el centro de la pantalla. Eso es si centramos el punto de anclaje, de lo contrario, se verá así. Se recomienda que utilice Scale para dimensionar y posicionar para que pueda mantener un tamaño en todos los dispositivos. si usa offset, puede parecer normal en una computadora, pero demasiado grande en un teléfono.

Compensación

La compensación es solo eso: una compensación de píxeles. Si la posición de un objeto es {0,100}, {0,150}, se colocará a 100 píxeles de la izquierda de la pantalla y 150 píxeles de la parte superior de la pantalla. El uso de XOffset y YOffset en Size ajustará el tamaño del objeto en píxeles.

AnchorPoint

El punto de anclaje es una propiedad muy importante al posicionar y escalar las GUI. El tipo de datos para el punto de anclaje es Vector2 (X e Y). El punto de anclaje es el punto de origen de una GUI en relación con su tamaño absoluto. Básicamente, lo que esto significa es que el punto de anclaje de una GUI indica dónde cambiar el tamaño de la GUI o dónde colocarla. Entonces, básicamente, cuando coloca algo, básicamente solo está colocando el punto de anclaje, y la GUI en sí se mueve en relación con el punto de anclaje. El punto de anclaje funciona igual que la escala. Si el valor de X es 0.5, el punto de anclaje se moverá al centro horizontalmente.

Tutoriales de GUI

Bueno, ahora que ha aprendido sobre las GUI, ¡hagamos una! Antes de entrar en él, hagamos nuestro ScreenGui donde aparecerá la GUI.

StarterGui
- ScreenGui

Cree un nuevo ScreenGui en StarterGui colocando el cursor sobre StarterGui y haciendo clic en el botón más, luego busque ScreenGui. (Puede buscarlo si lo necesita) ¡Y ese es el primer paso obligatorio! Puede ver los tutoriales a continuación si lo desea. ¡Voy a seguir mi camino, cya!