A GUI, Lo que significa GRaphical Uver Interface, se utiliza para mostrar información sobre el juego al jugador. Las GUI se pueden usar para mostrar al jugador cuál es el nivel, la salud y el oro de su personaje, y también para crear botones en el juego para menús y sistemas de inventario.
Contenido
- 1 Cómo entran las GUI en un juego
- 2 Agregar elementos a una GUI de pantalla
- 2.1 Agregar una etiqueta de texto
- 2.2 Personalizar la etiqueta
- 3 Colocación de elementos en una GUI de pantalla
- 3.1 Propiedad de escala
- 3.2 Propiedad de compensación
- 3.3 Punto de anclaje
- 4 Cambiar el tamaño de los elementos en una GUI de pantalla
- 5 Uso de compensaciones negativas
- 6 Profundizando en la GUI
- 7 Referencias
Cómo las GUI entran en un juego
El tipo más común de GUI es un GUI de pantalla que se comporta como un lugar 2D para colocar pegatinas en la pantalla del jugador. Cuando el jugador mueve la cámara o explora el mundo del juego, una GUI de pantalla permanece en el mismo lugar (en la pantalla).
Cuando creas un nuevo juego de Roblox, este espacio de la GUI de la pantalla no existe; es tu trabajo agregarlo. La forma más sencilla es agregarlo al StarterGui servicio para que se copie en la sesión de juego local de un jugador cuando se une al juego.
- En los Explorador ventana, encuentra el
Objeto StarterGui.
- Coloca el cursor sobre él y haz clic en el botón de círculo ⊕
- Localiza
ScreenGui en el menú emergente y selecciónelo. Esto creará un nuevo espacio de pantalla 2D frente a su mundo de juego en 3D.
Agregar elementos a una GUI de pantalla
Actualmente, la nueva GUI de la pantalla está vacía, es solo un lienzo en blanco que abarca todo el ancho y alto de la pantalla del jugador.
Agregar una etiqueta de texto
Se pueden agregar todo tipo de cosas a la GUI de la pantalla. Comencemos con una etiqueta de texto básica.
- En la ventana del Explorador, coloque el cursor sobre el nuevo ScreenGui objeto, un hijo de StarterGuiy haz clic en su botón circular ⊕.
- Encontrar
TextLabel en el menú emergente y selecciónelo. Tenga en cuenta que un objeto se puede encontrar más fácilmente escribiendo las primeras letras de su nombre en el campo de entrada "Buscar objeto".
Esto agregará una etiqueta de texto muy básica en la esquina superior izquierda de la vista del juego.
Personaliza la etiqueta
Tenemos una etiqueta de texto en la pantalla, pero un cuadro blanco con la palabra Disquera no es muy útil. Vamos a personalizarlo para que se vea como una GUI de "número de versión", un elemento de visualización que generalmente se encuentra en la pantalla de menú / introducción que muestra la versión actual del juego.
- En la ventana del Explorador, seleccione el nuevo TextLabel objeto.
- Abra la Propiedades ventana seleccionando el Ver pestaña y haciendo clic en el Propiedades
- Para la fuente propiedad (dentro del Texto sección), haga clic a la derecha del nombre de la fuente y seleccione Carretera En el menú desplegable.
- En los Texto campo de propiedad, escriba un nuevo nombre como versión 1.0.
- En los Tamano del texto campo de propiedad, tipo 35.
- Ahora expanda el Datos sección (si aún no está expandida).
- Para la BorderSizePixel valor, ingrese un nuevo valor como 8.
¡Excelente! ¡El objeto GUI se ve mucho mejor ahora! Si desea ser aún más creativo, intente cambiar propiedades como TextColor3, BackgroundColor3, FondoTransparencia, Y otros.
Colocación de elementos en una GUI de pantalla
Ahora que tenemos un objeto de texto básico en la pantalla, vamos a moverlo a una nueva posición. Cada objeto 2D en Roblox tiene una propiedad de Posición que determina dónde se dibujará en relación con su objeto principal. Esta posición está establecida por X y Y coordenadas donde X es la posición horizontal y Y es la posición vertical. [1]
Cuando se crean por primera vez, todos los objetos 2D comienzan con un X y Y posición de 0 que es la esquina superior izquierda de la pantalla, pero ¿qué pasa si quieres moverla? Echemos un vistazo al Posición propiedad de la etiqueta de texto y aprenda cómo!
- Si el TextLabel el objeto no está seleccionado, haga clic en él dentro de la ventana del Explorador.
- Encuentra los Posición propiedad y haga clic en la flecha pequeña para expandirla.
- Ahora expanda el X y Y ramas directamente debajo de él. Tenga en cuenta que cada uno tiene un Escalable y Compensación propiedades: estos son los valores que puede usar para colocar la etiqueta de texto dentro de la GUI de la pantalla.
Propiedad de escala
El Escalable propiedad representa un porcentaje del ancho o alto del objeto principal. Recuerde que el "lienzo" de la GUI de la pantalla abarca todo el ancho y la altura de la vista del juego en 3D, eso significa que Escalable La propiedad se puede utilizar para colocar un objeto directamente en el centro de la vista, contra el borde izquierdo o derecho, o en cualquier punto intermedio basado en un porcentaje del ancho o alto total de la pantalla.
Aunque el Escalable indica un porcentaje, el rango de valores que ingrese generalmente debe estar entre 0 y 1, donde 0 es igual a 0% y 1 es igual a 100%. Por ejemplo:
95% del ancho o alto total
50% del ancho o alto total
10% del ancho o alto total
Ahora muevamos la etiqueta de texto al centro horizontal de la pantalla. Simplemente ingrese 0.5 para Escalable valor de X y presione la tecla Enter / Return para confirmar.
La etiqueta de texto ahora debería colocarse más hacia el centro de la vista del juego.
Propiedad de compensación
La segunda propiedad de cada conjunto se llama Compensación. En lugar de mover el elemento en un porcentaje del tamaño del padre, lo mueve en un número específico de píxeles. Esto puede resultar útil si desea colocar un elemento de la GUI ligeramente dentro de cualquier borde de la vista del juego.
Muevamos la etiqueta de texto ligeramente dentro del borde superior de la pantalla. Ingresar 50 para Compensación valor de Y y presione la tecla Enter / Return para confirmar.
Ahora, la etiqueta de texto debe insertarse ligeramente desde el borde superior de la pantalla.
Anchor Point
Si observa detenidamente la posición actual del objeto GUI, notará que no está perfectamente centrado de izquierda a derecha, aunque establezcamos Posición → X → Escala a 0.5 (50%).
Esto se debe a la configuración predeterminada del objeto. punto de anclaje. Un punto de anclaje es un punto específico. en el objeto para alinearse con la posición de la pantalla que establezca. Imagina el punto de anclaje como un alfiler atravesado en una hoja de papel; el alfiler se puede colocar en cualquier lugar del papel, y Roblox alineará ese punto con el Posición valor (es) que establezca para el objeto.
En la ventana del editor del juego, el punto de anclaje se muestra pequeño contorno cuadrado en el objeto (cuando está seleccionado). Cuando crea un nuevo objeto GUI, el punto de anclaje se establece en la esquina superior izquierda; es por eso que ese punto exacto en el objeto está alineado con el X y Y valores de posición establecidos anteriormente.
El punto de anclaje se basa en un X y Y valor que es un porcentaje del tamaño del objeto: 0 es igual a 0% y 1 es igual al 100%.
Puede utilizar este concepto para centrar el objeto GUI en el medio exacto de la pantalla.
- Si el TextLabel el objeto no está seleccionado, haga clic en él dentro de la ventana del Explorador.
- Encuentra los AnchorPoint propiedad y haga clic en la flecha pequeña para expandirla.
- Seleccione las X valor para 0.5 y presione la tecla Enter / Return para confirmar.
La etiqueta de texto ahora debería estar ubicada exactamente en el centro de la vista del juego.
Cambiar el tamaño de los elementos en una GUI de pantalla
Como se puede ver, el Posición y AnchorPoint Las propiedades nos permiten colocar elementos en cualquier lugar que necesitemos dentro de una GUI de pantalla. También podemos cambiar el tamaño de cualquier elemento usando su Tamaño propiedades.
- Si el TextLabel el objeto no está seleccionado, haga clic en él dentro de la ventana del Explorador.
- Encuentra los Tamaño propiedad y haga clic en la flecha pequeña para expandirla.
- Ahora expanda el X y Y ramas directamente debajo de él. Similar a Posición , cada uno tiene un Escalable y Compensación propiedades.
Propiedad de escala
Para configurar el tamaño de un objeto GUI, el Escalable La propiedad funciona igual que para el posicionamiento, lo que representa una porcentaje del ancho o alto del objeto principal. Si pones Tamaño → X → Escala a 0.5 (50%), el objeto tendrá exactamente la mitad del ancho de la pantalla.
¡Experimentemos y veamos qué pasa!
- Entrar 0.75 para Escalable valor de X y presione la tecla Enter / Return para confirmar.
- Entrar 0 para Compensación valor de X y presione la tecla Enter / Return.
La etiqueta de texto debería ocupar ahora exactamente el 75% del ancho de la pantalla.
Propiedad de compensación
Como notó anteriormente, Tamaño también tiene una propiedad llamada Compensación. Para dimensionar, Compensación es útil si desea crear botones, etiquetas u otros objetos que permanezcan el mismo número de píxeles (ancho o alto) sin importar en qué pantalla se estén viendo.
Para aumentar la altura de la etiqueta de texto, simplemente ingrese 150 para Compensación valor de Y y presione la tecla Enter / Return para confirmar.
¡Ahora la etiqueta de texto debería ser un poco más alta que antes!
Usar compensaciones negativas
Algunos diseños de GUI solo son posibles con combinaciones creativas de Escalable y Compensación valores. Puede explorar esto haciendo que el TextLabel El objeto llena toda la pantalla con un pequeño margen de 20 píxeles alrededor de los cuatro bordes.
- Kit Posición → Y → Desplazamiento a 20. Esto debería empujar el objeto hacia arriba ligeramente.
- Kit Tamaño → X → Escala a 1 (100% del ancho de la pantalla).
- Kit Tamaño → X → Desplazamiento a hasta el 40 - esto hace que el objeto sea 40 píxeles menos que todo el ancho de la pantalla, lo que da como resultado el margen deseado de 20 píxeles en ambos lados.
- Kit Tamaño → Y → Escala a 1 (100% de la altura de la pantalla).
- Kit Tamaño → Y → Desplazamiento a hasta el 40 . Al igual que arriba, esto hace que el objeto sea 40 píxeles menos que la altura de la pantalla completa y crea un margen de 20 píxeles tanto en la parte superior como en la inferior.
Profundizando más en la GUI
Esta sección no se importó del artículo de Developer Hub.Si está interesado en obtener más información sobre los objetos GUI, le recomendamos que consulte las siguientes páginas y sitios de referencia:
- ScreenGui
Marco- TextLabel
TextButton- Caja de texto
ImageLabel- Guía de inicio de diseño de interfaz de usuario (artículo creado por un miembro del Foro de desarrolladores para principiantes)
- UDim2 (tipo de datos utilizado por las propiedades de posición y tamaño de la interfaz de usuario)
¿Sigues interesado en las GUI? Le recomendamos que obtenga más información sobre Studio si es nuevo y experimenta con diferentes valores de propiedad. La práctica hace al maestro, y probarlo usted mismo le permitirá comprenderlo mejor.
Referencias
- ↑ Vector2
