Crear un menú de inicio atractivo en Unity es sencillo si dominas el canvas, el panel semitransparente y los botones. Aquí aprenderás a configurar un velo que resalte la interfaz, diseñar botones coherentes como play y quit, y ajustar el render mode y el UI scale mode para distintas resoluciones con precisión y control.
¿Cómo montar un menú de inicio con canvas y panel semitransparente?
Para enfocar la atención del usuario, coloca un panel encima de la escena como velo translúcido. Así tapas el fondo sin ocultarlo del todo y preparas el espacio para los botones.
- Crea un panel desde UI para cubrir la pantalla a modo de velo.
- Ajusta la jerarquía: el elemento más abajo en la lista queda más arriba visualmente. Mueve el título para que quede por encima del panel.
- Usa el cuentagotas para tintar el panel y que combine con la estética global.
- Controla la transparencia: totalmente opaca tapa el fondo; semitransparente deja ver la escena. Un punto intermedio, por ejemplo 140 de transparencia, da buen equilibrio.
¿Cómo usar un panel como velo?
- Fija un color que armonice con el arte del juego.
- Mantén el panel semitransparente para no perder contexto visual.
- Revisa que el texto del título sea legible sobre el velo.
¿Cómo gestionar la jerarquía y el color?
- Coloca el texto del título por encima del panel en la jerarquía.
- Cambia el tinte del panel con el cuentagotas para coherencia visual.
- Ajusta opacidad según el movimiento del personaje antes de iniciar el juego.
¿Cómo diseñar y duplicar botones UI consistentes?
Diferencia el contenedor del botón de su texto hijo. Configura bien uno y duplica para acelerar el flujo. Así mantienes consistencia y reduces errores.
¿Cómo nombrar y estilizar botones?
- Renombra el contenedor: de “botón” a “play button”.
- Cambia el texto hijo a “play”.
- Ajusta la fuente y el tamaño, por ejemplo 30.
- Revisa los overflows vertical y horizontal para evitar cortes.
¿Cómo ajustar tamaños y centrado con Rect Transform?
- Usa Rect Transform para el tamaño: ancho 250 y alto 80–70 funcionan bien como base.
- Centra el botón en pantalla con las herramientas de alineación.
- Tinta el botón: verde para play con el cuentagotas.
- Configura estados de color: normal, presionado, seleccionado o deshabilitado. El multiplicador de color intensifica el resultado.
¿Cómo duplicar y variar el segundo botón?
- Duplica el play button y muévelo un poco más abajo.
- Renómbralo a “quit button”.
- Cambia el color, por ejemplo a rojo.
- Sustituye el texto a “quit”.
¿Qué configuración de canvas y escalado mejora la interfaz en distintas resoluciones?
El canvas define cómo se dibuja la UI respecto a la escena. Elegir bien el modo de renderizado y el escalado evita confusiones visuales y mantiene la legibilidad en cualquier pantalla.
¿Qué render mode conviene?
- Usa render mode screen space overlay: la UI vive por encima del juego y no se mezcla con la cámara.
- Evita screen space in camera si no necesitas que la UI dependa de la cámara: puede confundir al superponer elementos de escena sobre la interfaz.
¿Cómo escalar con UI scale mode?
- Cambia a UI scale mode “Scale With Screen Size” para que el canvas escale con la pantalla.
- La resolución de referencia puede estar en 800×600, pero al cambiar a 1920×1080 los elementos se verán más pequeños si fueron diseñados para menor tamaño.
¿Cómo ajustar tipografías y tamaños tras escalar?
- Aumenta el título a tamaño 120 y estira su contenedor con la cuarta herramienta.
- Reposiciona con precisión: mueve 100 puntos y ajusta finamente 50 si hace falta.
- Amplía botones a 400 de ancho por 150 de alto.
- Centra con precisión usando Alt y Shift al alinear.
- Dirige la atención con la jerarquía tipográfica: texto de “play” a 80 y “quit” a 70. El ojo prioriza lo más grande sin que se note excesivo.
¿Te gustaría compartir cómo personalizas los estados de color o tu truco favorito para centrar la atención en el botón principal?
