Studio / ROBLOX
Un inventario comprensible: selección y salida
Historia ficticia del inventario de un juego propio, no del inventario oficial de Roblox.
Contexto #
En el Taller del Faro ficticio, Lena busca una linterna, pero la lista no muestra qué está equipado. Es una historia editorial, no un informe ni una prueba. Inventario significa un menú propio, no Roblox Inventory, Marketplace ni la lista de cuenta. Objetivo: elegir, entender el estado, encontrar una categoría y cerrar sin perder contexto.
Abrir imagen a tamaño completo ↗Selección #
Separa el objeto explorado del equipado. Muestra nombre, categoría, estado escrito y acción coherente: «Linterna — Equipada» y «Quitar». Es una decisión de diseño, no una regla de Roblox. Creator Hub describe interfaces con ScreenGui y objetos GUI como Frame, TextLabel y botones. Propiedad y equipamiento necesitan una fuente de datos; resaltar no lo demuestra.
| Estado | Mostrar | Objetivo |
|---|---|---|
| Vacío | Mensaje y siguiente paso | Ausencia entender |
| Objetos | Nombres y cantidad | Comparar |
| Elegido | Estado y acción | Elegir con claridad |
Estado vacío #
Una categoría vacía es normal. Di «Todavía no hay nada», conserva el encabezado e indica el siguiente paso. No confundas vacío, carga y error. Herramientas, materiales y notas deben ser categorías previsibles. Etiquetas y cantidades ayudan; el color solo no basta. UIListLayout o UIGridLayout ordena tarjetas, pero no verifica la facilidad de uso.
Abrir imagen a tamaño completo ↗Desplazamiento #
Para listas largas usa ScrollingFrame y ajusta el contenido a la ventana visible. Creator Hub indica que el desplazamiento se activa si CanvasSize supera la ventana o AutomaticCanvasSize sigue el contenido. No ocultes la última fila. Evita reinicios inesperados. Pantallas estrechas y traducciones largas cambian alturas; comprueba los tamaños y entradas previstos.
| Comprobación | Esperado | Observado |
|---|---|---|
| Categoría vacía | Mensaje claro | |
| Lista larga | Última fila accesible | |
| Cambiar categoría | Categoría activa visible | |
| Pantalla estrecha y traducción | Acción y salida disponibles |
Salida y comprobación #
Ofrece una salida clara. Creator Hub recomienda distintas entradas; GuiButton.Activated contempla ratón, toque y botón seleccionado del mando. No prometas controles sin verificar. Las tablas son plan, no resultados. No se inició Studio ni se convocaron participantes; observaciones vacías. Define antes la fuente de estado y los cambios permitidos.
Estructura de la lista #
Después, el equipo elige la estructura de la lista. Si hay que comparar nombres y estados, las filas legibles pueden funcionar mejor que un mosaico denso. La cuadrícula sirve para iconos uniformes si cada tarjeta también tiene etiqueta o descripción accesible. Reserva espacio para nombres largos que ocupen dos líneas. No reduzcas el texto hasta hacerlo difícil de leer solo para que quepan todas las tarjetas. Creator Hub describe UIListLayout y UIGridLayout como formas de colocar objetos GUI hermanos; la densidad y el espaciado son decisiones que deben revisarse.
Explorar y actuar #
Separa leer un objeto de cambiar su estado. Seleccionar una fila puede abrir detalles y un botón aparte equiparlo; si la fila ejecuta la acción, la etiqueta y la respuesta visual deben explicarlo. Para un objeto no disponible, indica el motivo, por ejemplo «Encuéntralo en el taller», en vez de un botón que parece activo pero no hace nada. Es un contrato propuesto. TextButton e ImageButton ofrecen eventos de activación, pero seleccionar un objeto GUI no demuestra que la lógica del juego haya aceptado el cambio. Comprueba la respuesta visible y el estado real.
Filtros y búsqueda #
La categoría y el filtro deben responder «¿qué cambió?». Si desaparecen objetos al pasar de Todo a Materiales, muestra que el filtro está activo y cómo quitarlo. Decide si al volver se conserva la posición de desplazamiento. Ambas opciones pueden servir; el problema es sorprender y desorientar. El contador debe coincidir con lo que se ve, no con todo el inventario. Una búsqueda sin coincidencias no es una categoría vacía: muestra la consulta y cómo borrarla. Documenta estos estados antes de implementar para evitar señales contradictorias.
Localización y accesibilidad #
La traducción cambia la longitud y dirección de lectura. Un botón breve en inglés puede ser más largo en alemán; el árabe se lee de derecha a izquierda y el chino se ajusta de otro modo. No codifiques el significado solo en la dirección de una flecha o la posición. Creator Hub recomienda adaptar el diseño y revisar legibilidad y entradas; AutomaticSize puede responder al contenido y ScrollingFrame tiene AutomaticCanvasSize. Estas herramientas no garantizan un buen resultado. Planifica revisar textos largos, texto ampliado, RTL, recortes y zonas táctiles. La historia no afirma localizar un juego concreto.
Montar el diseño paso a paso #
Construye el diseño en orden, sin empezar por la decoración. En Explorer crea un contenedor de pantalla y un marco principal; dentro coloca título, categorías, zona desplazable de objetos, panel del elemento elegido y salida. Empieza con un objeto y una categoría vacía para distinguir ambos estados. Después añade una lista larga y comprueba que se desplaza la zona de objetos mientras el título y la salida permanecen, si ese es el diseño previsto. En Properties revisa tamaño, posición, orden de capas y ajustes de desplazamiento. Los nombres de Studio pueden cambiar: sigue los tipos de objeto, no una ubicación supuestamente permanente de los botones.
Errores en etiquetas de estado #
Evita una trampa frecuente: «seleccionado» puede significar foco del teclado, tarjeta consultada o equipamiento realmente cambiado. Etiqueta esos estados por separado y da respuesta tras la acción: qué cambió, qué se mantuvo y cómo deshacerlo si existe esa opción. No llames propiedad del jugador a un objeto si la lista incluye objetos encontrados, temporales o no disponibles. El ejemplo ficticio de la linterna no define ninguna mecánica de propiedad. El desarrollador debe decidir disponibilidad, persistencia tras reiniciar y qué acción cambia el equipamiento. Un objeto GUI no decide esas reglas automáticamente.
Recorrido de comprobación #
Antes de terminar, resume el contrato en un recorrido: abrir el panel; entrar en categoría; elegir una fila; comparar exploración y equipamiento; desplazarse hasta el final; cerrar y continuar la actividad anterior. Repite con una categoría vacía, un nombre largo, una traducción y cada entrada que el juego admita. Anota dispositivo, orientación, entrada y resultado observado, no solo «funciona». Si difiere de lo esperado, aclara el estado y la secuencia antes de cambiar diseño o lógica. Hasta realizar esas comprobaciones futuras, la tabla es un plan, no una prueba de éxito.
Legibilidad y zonas táctiles #
El estado de la fila elegida debe quedar claro: un borde o marcador complementa la etiqueta, pero el color no debe ser la única señal. Comprueba el contraste ante distintas escenas. En pantallas táctiles, evita las esquinas ocupadas por controles predeterminados. Creator Hub señala zonas móviles reservadas y recomienda revisar la lectura en pantallas pequeñas. Son recomendaciones, no pruebas de que este diseño sea usable. El plan debe incluir el foco con mando, una señal visible del foco y la posibilidad de cerrar sin apuntar con precisión del ratón.
Actualización con el panel abierto #
Comprueba también cambios de datos con el menú abierto: un objeto puede dejar de estar disponible o aparecer tras un evento. La interfaz debe mostrar el estado actual y no dejar activa una acción obsoleta. Si actualizar la lista reinicia la selección, explícalo o conserva el contexto según el diseño. Es una cuestión de implementación, no un comportamiento probado por el ejemplo. Anota en el plan la categoría inicial, la fila seleccionada y el evento que provocó la actualización.
Fuentes originales
Roblox Creator Hub — Scrolling framesRoblox Creator Hub — Adaptive design guidelines
Roblox Creator Hub — Text and image buttons
Roblox Creator Hub — Frames
Roblox Creator Hub — Size modifiers and constraints
Roblox Creator Hub — UIListLayout
Roblox Creator Hub — UIGridLayout
Roblox Creator Hub — GuiButton
