# Sistemas De Ui Pro En Unity **Source:** https://ja.cursos.frogamesformacion.com/pages/blog/sistemas-de-ui-pro-en-unity **Language:** Japanese --- ![Sistemas de UI Pro en Unity: Hotbar, Drag & Drop y minimapas que hacen que tu juego se sienta profesional](https://dropinblog.net/cdn-cgi/image/fit=scale-down,format=auto,width=700/34249715/files/portada-post/sistemas-de-ui-pro-en-unity-hotbar-drag-drop-y-minimapas-que-hacen-que-tu-juego-se-sienta-profesional.png) # Sistemas de UI Pro en Unity: Hotbar, Drag & Drop y minimapas que hacen que tu juego se sienta profesional *![フアン・ガブリエル・ゴミラ](https://dropinblog.net/cdn-cgi/image/fit=scale-down,width=100/34249715/authors/jb.JPG)* フアン・ガブリエル・ゴミラ ビデオゲーム 05/07/2026 12:00pm 13 minutos Leer el artículo Audio generated by DropInBlog's Blog Voice AI™ may have slight pronunciation nuances. Learn more ## Contenidos - 1. La hotbar: acceso instantáneo a los ítems con las teclas 1-0 - 2. Guardado persistente en Unity: que la barra rápida se vacíe al reiniciar - 3. Drag & Drop profesional con Unity: el truco del canvas que evita bugs visuales - 4. Soltar objetos al mundo: del panel a la escena - 5. Añadir game feel: un rebote sencillo que mejora muchísimo el resultado - 6. Minimapa dinámico estilo WoW con cámara y Render Texture en Unity - Máscara y borde decorativo - Blips e iconos solo visibles en el minimapa - 7. Mapa manual por descubrimiento: muy Zelda, muy Hollow Knight, muy metroidvania - 8. Mapa automático basado en fronteras: cuando quieres dibujarlo a mano - 9. El verdadero salto de calidad está en los detalles - よくある質問 La diferencia entre un prototipo que se siente barato y uque empieza a oler a juego serio suele estar en los gráficos. Está en la interfaz, en la respuesta del input, en cómo se mueven los objetos por pantalla y en si el jugador siente que el mundo reacciona con coherencia a lo que hace. Si tu inventario funciona “más o menos”, pero la barra rápida existe, los ítems desaparecen al cargar partida, el drag and drop falla visualmente o el mapa ayuda a orientarse, entonces el resultado final se resiente muchísimo. Y eso, en Unity, se nota enseguida. Voy a repasar una serie de sistemas que elevan de verdad la calidad percibida de un juego top down 2D: una **hotbar con acceso por teclado**, **guardado persistente**, **drag and drop pulido**, **soltar ítems al mundo con rebote**y **dos enfoques de navegación**: minimapa dinámico estilo MMO y mapa de descubrimiento por zonas. ## 1. La hotbar: acceso instantáneo a los ítems con las teclas 1-0 Abrir el inventario, buscar la poción, hacer clic y luego volver al combate está bien para pruebas. Pero en cuanto hay ritmo, necesitas acceso rápido. La solución clásica es la **hotbar inferior**, al estilo World of Warcraft, con diez ranuras asociadas a las teclas **1, 2, 3, 4, 5, 6, 7, 8, 9 y 0**. A nivel de UI, sigue siendo un panel dentro del canvas. La parte importante es tanto el diseño visual como la arquitectura: - Un panel anclado en la parte inferior centrada. - Un prefab de slot reutilizable. - Un **Horizontal Layout Group** para distribuir las casillas. - Creación dinámica por código de las 10 ranuras. Esto evita arrastrar diez objetos a may, sobre todo, te permite conectar la hotbar con el inventario y con el sistema de guardado sin duplicar lógica. La clave del sistema está en mapear automáticamente cada posición con su tecla correspondiente usando el **Input System** de Unity. En vez de escribir diez ifs interminables, puedes construir un array de teclas y recorrerlo en un bucle. Así el código queda limpio, modular y preparado para crecer. Además, cada slot de la hotbar reutiliza el mismo comportamiento del inventario. Eso significa que un ítem puede moverse desde el inventario a la barra rápida, volver al inventario o intercambiarse de posición con el mismo flujo de trabajo. ## 2. Guardado persistente en Unity: que la barra rápida se vacíe al reiniciar Hay pocas cosas más frustrantes que organizar el inventario y la barra rápida a tu gusto, guardar partida, volver más tarde… y encontrarte todo vacío. La solución consiste en tratar la hotbar como un sistema persistente más. Si ya tienes una clase de guardado para el inventario, puedes extenderla para incluir una segunda colección con los datos de la barra rápida. La idea general es sencilla: - **Obtener los ítems actuales** de la hotbar. - Serializarlos en el mismo formato que el inventario. - Guardarlos en JSON junto al resto de la partida. - Al cargar, reconstruir los slots de la hotbar y reasignar sus ítems. Este detalle cambia por completo la sensación del juego. El jugador percibe continuidad. Su configuración se respeta. Su tiempo vale. Y si quieres seguir profundizando en desarrollo profesional de videojuegos, tienes una ruta de aprendizaje de desarrollo de videojuegos con un enfoque mucho más amplio que un tutorial suelto. ## 3. Drag & Drop profesional con Unity: el truco del canvas que evita bugs visuales Ude los fallos más típicos en interfaces hechas deprisa es este: empiezas a arrastrar un ítem y, de repente, el icodesaparece por detrás de otros paneles. Técnicamente el sistema funciona, pero visualmente se rompe la ilusión de que lo estás sujetando. El problema suele estar en el padre temporal del objeto arrastrado. Si lo reubicas en una jerarquía que pertenece al canvas correcto, el orden de renderizado deja de ser el que esperas. La solución elegante es usar un **canvas raíz común**, por ejemplo un Menu Canvas, como padre temporal mientras dura el arrastre. Así el objeto: - siempre se ve por encima del resto, - puede moverse entre inventario y hotbar sin problemas, - y sufre cortes raros por orden jerárquico. Es un cambio de una línea, sí. Pero ese tipo de cambios son precisamente los que marcan la diferencia entre una UI que “tira” y una UI que se siente sólida. ## 4. Soltar objetos al mundo: del panel a la escena Otra funcionalidad importantísima en un RPG o juego de aventura es poder deshacerse de objetos. Si el inventario está lleno, necesitas una salida. Borrar el ítem sin más suele ser una mala idea, porque te cargas posibilidades jugables. Lo interesante es convertir el gesto de arrastrar fuera del inventario en una acción del mundo: **soltar el objeto al suelo**. Para hacerlo bien, primero debes detectar si la posición final del ratón está dentro o fuera del panel del inventario. En Unity esto se puede resolver comprobando si el punto de pantalla del cursor cae dentro del **RectTransform** del panel. Si cae fuera, devolvemos el ítem al slot original. En su lugar: - limpiamos el slot del inventario, - buscamos la posición del jugador, - generamos una posición aleatoria entre una distancia mínima y máxima, - instanciamos el objeto en el mundo, - y destruimos su representación en la UI. Ese detalle de usar una distancia aleatoria alrededor del jugador es muy importante. Si sueltas el objeto exactamente encima del personaje, lo recogerá al instante. Si lo sueltas demasiado lejos, puede acabar en un sitio inaccesible. Lo ideal es crear una especie de anillo alrededor del jugador y dejar que el ítem caiga ahí. ## 5. Añadir game feel: un rebote sencillo que mejora muchísimo el resultado Que el objeto aparezca en el suelo está bien. Que aparezca y haga **un pequeño rebote** está mucho mejor. Aquí entramos en el terredel game feel. No es una mecánica nueva. No cambia las reglas del juego. Pero cambia cómo se siente. Y eso importa una barbaridad. La implementación puede hacerse con una corrutina y una interpolación lineal, sin necesidad de montar animaciones a maen el Animator. Basta con definir unos pocos parámetros: - **bounceHeight**: altura del salto. - **bounceDuration**: duración de cada rebote. - **bounceCount**: número de rebotes. Después, en cada iteración, reduces un poco la altura y la duración para que el efecto sea natural. El primer bote es más alto, el siguiente más corto, el último casi imperceptible. Y listo. Este tipo de microanimación hace que incluso una simple poción soltada en el suelo tenga peso, presencia y calidad. ## 6. Minimapa dinámico estilo WoW con cámara y Render Texture en Unity Pasemos a la navegación. El minimapa dinámico es mucho más fácil de construir en Unity de lo que mucha gente cree. La base del sistema es esta: - Crear una **segunda cámara** como hija del jugador. - Colocarla encima del personaje, apuntando hacia abajo. - Enviar su salida a una **Render Texture**. - Mostrar esa textura en una **Raw Image** de la UI. Con eso ya tienes un minimapa funcional que sigue al personaje en tiempo real. Luego puedes decidir si usar cámara en perspectiva o en ortográfico. Para un top down 2D, la ortográfica suele resultar más limpia y controlable. Ajustando la distancia o el tamaño ortográfico consigues más o menos zoom. ### Máscara y borde decorativo Un minimapa cuadrado flotando en una esquina funciona, pero visualmente queda pobre. Lo suyo es usar una **máscara circular** para recortar la imagen y, si quieres rematarlo bien, añadir un marco decorativo encima. Ese simple borde hace que el minimapa deje de parecer un pegote y se integre con el resto de la interfaz. ### Blips e iconos solo visibles en el minimapa Si alejas suficiente la cámara, distinguir el jugador, una tienda o un NPC se vuelve complicado. La solución clásica son los **blips**, iconos específicos para el minimapa. El truco está en combinarlos con: - **sorting layers** para pintarlos por encima, - y **layers + culling masks** para que solo los vea la cámara del minimapa y la cámara principal. Así puedes poner un icopara el jugador, otro para la armería, otro para la tienda de pociones o usar simplemente círculos de colores si prefieres algo genérico. ## 7. Mapa manual por descubrimiento: muy Zelda, muy Hollow Knight, muy metroidvania El segundo enfoque de navegación es completamente distinto. Aquí quieres una visión en tiempo real del escenario, siun **mapa de descubrimiento por zonas**. La idea es muy clásica: cada región del juego tiene su propia casilla o imagen dentro del mapa general. Cuando el jugador entra en una zona, esa parte se ilumina y el icodel personaje se coloca encima. Este sistema funciona especialmente bien en juegos donde la exploración importa y donde el mapa pretende mostrar detalle exacto, siestructura. Para montarlo: - Diseñas un panel de mapa completo dentro del menú. - Creas manualmente una imagen para cada región importante. - Usas el mismo nombre de la región en el mundo y en la UI. - Cuando el jugador cruza una frontera, activas esa zona del mapa y apagas las demás. Es simple, robusto y tiene muchísimo encanto. Muy Super Mario World. Muy metroidvania clásico. ## 8. Mapa automático basado en fronteras: cuando quieres dibujarlo a mano El mapa manual queda precioso, pero tiene una pega: mantenerlo duele. Si cambias el diseño del nivel constantemente, redibujar casillas y recolocar elementos cada dos por tres es una pérdida de tiempo. Ahí entra el **mapa dinámico generado a partir de las fronteras del mundo**. En lugar de crear cada casilla a mano, recorres los **PolygonCollider2D** que delimitan las zonas del mapa y generas automáticamente una representación UI proporcional a su tamaño y posición. El flujo es este: 1. Recoger todas las áreas del mapa desde un contenedor de boundaries. 2. Limpiar cualquier representación previa. 3. Instanciar un prefab rectangular por cada área. 4. Escalarlo según el tamaño del collider. 5. Colocarlo según el centro del área. 6. Guardar su referencia en un diccionario. 7. Mover el icodel jugador a la zona actual. Con este sistema, si mañana amplías el bosque, añades una tercera región o duplicas una zona del mapa, el panel se adapta solo. No tienes que redibujar nada. Diseñas el nivel y el mapa cae por su propio peso. ## 9. El verdadero salto de calidad está en los detalles Si juntas todo lo anterior, el resultado cambia radicalmente: - La hotbar responde al teclado. - La configuración se guarda entre sesiones. - El drag and drop se ve limpio. - Los ítems pueden soltarse físicamente en el mundo. - Esos ítems tienen un pequeño rebote que da vida a la escena. - El minimapa orienta en tiempo real. - El mapa de descubrimiento guía la exploración. - Y el mapa automático evita trabajo manual innecesario. Esto es lo que hace que un juego en Unity deje de parecer una maqueta y empiece a sentirse como un proyecto serio. No porque tenga más polígonos ni más partículas, siporque el jugador nota que todo encaja. Si quieres seguir profundizando, puedes echar un vistazo a los cursos de Unity, a la categoría específica de Unity 2D o al catálogo de ビデオゲーム開発 , donde este tipo de sistemas se trabajan con más contexto y con proyectos más completos. Y a partir de aquí se abren un montón de caminos potentes: mapas por fragmentos al estilo Hollow Knight, mazmorras generadas proceduralmente como en The Binding of Isaac, mapas comprables, niebla de guerra, iconos dinámicos para NPCs o enemigos, zoom configurable y todo lo que se te ocurra. La buena noticia es que la base importante ya está montada. Ahora sí, tu juego empieza a sentirse sólido de verdad. --- Este artículo forma parte de una serie sobre desarrollo de videojuegos en Unity. Si quieres aprender a crear un juego Top-Down 2D completo, con movimiento, inventario, NPCs, diálogos y una arquitectura escalable, echa un vistazo al 完全版コース . ## よくある質問 ¿Qué es una hotbar en Unity y para qué sirve? Es una barra rápida de acceso a ítems usando teclas como 1-0, ideal para mejorar el ritmo del gameplay. ¿Cómo guardar la hotbar entre partidas en Unity? Serializando sus slots e ítems en JSON junto al resto de datos del inventario y la partida. ¿Cómo evitar bugs visuales en el drag & drop de Unity UI? Usando un canvas raíz común como padre temporal del objeto arrastrado. ¿Cómo crear un minimapa dinámico en Unity 2D? Con una segunda cámara, una Render Texture y una Raw Image dentro de la interfaz. ¿Por qué añadir rebotes a los objetos soltados? Porque mejora el game feel y hace que los ítems se sientan más vivos y naturales. Please enable JavaScript to view the comments powered by Disqus. « Volver al Blog ## Artículos relacionados ![Cofres, persistencia y animaciones en Unity: cómo pulir la jugabilidad de un top down 2D](https://dropinblog.net/cdn-cgi/image/fit=scale-down,format=auto,width=700/34249715/files/portada-post/cofres-persistencia-y-animaciones-en-unity-como-pulir-la-jugabilidad-de-un-top-down-2d.png) ## Cofres, persistencia y animaciones en Unity: cómo pulir la jugabilidad de un top down 2D 11分 06/07/2026 12:00pm ![Le añadí esto a mi juego en Unity y cambió por completo: cómo crear un sistema de inventario profesional](https://dropinblog.net/cdn-cgi/image/fit=scale-down,format=auto,width=700/34249715/files/portada-post/le-anadi-esto-a-mi-juego-en-unity-y-cambio-por-completo-como-crear-un-sistema-de-inventario-profesional.png) ## Le añadí esto a mi juego en Unity y cambió por completo: cómo crear un sistema de inventario profesional 10分 17/06/2026 12:00pm ![Crea cualquier juego 2D Top Down en Unity: plantilla modular, capas, animaciones y cámara profesional](https://dropinblog.net/cdn-cgi/image/fit=scale-down,format=auto,width=700/34249715/files/portada-post/crea-cualquier-juego-2d-top-down-en-unity-plantilla-modular-capas-animaciones-y-camara-profesional.png) ## Crea cualquier juego 2D Top Down en Unity: plantilla modular, capas, animaciones y cámara profesional 12分 15/04/2026 12:30pm 無料コース ## あなたのための無料コース 当社のUnityコースは **無料** . Unityエンジンで最初のビデオゲームを作成する方法を15時間以上のビデオコースで学びましょう。 今すぐコースを取得