# Usa el diseño vertical para facilitar la decisión principal del juego

> Crea un juego vertical en torno a un campo de juego claro, un estado legible y cambios en las ventanas gráficas del teléfono antes de agregar contenido o soporte horizontal.

- URL: https://oneshotgems.ai/es/topics/portrait-mobile-game-design
- Categoría: Para desarrolladores de juegos
- Tipo: Guía
- Actualizado: 5 de octubre de 2026

Un juego vertical no consiste en comprimir una escena horizontal dentro de un rectángulo alto. Decide qué debe ver y hacer el jugador en los próximos segundos, y organiza la pantalla para que pueda ver todo eso a la vez. Prueba una situación de juego en el área visible más estrecha que admitas antes de crear un nivel largo.

## Reserva un campo de juego legible

Divide el boceto de la pantalla en tres zonas: juego activo, información de estado permanente y avisos temporales. Reserva el centro para la mecánica principal; coloca puntuación, vidas y pausa donde puedan consultarse de un vistazo sin ocultar peligros ni objetivos. En un juego de plataformas vertical, deja visible sobre el personaje la siguiente zona donde aterrizar. En un puzle de palabras, reserva anchura suficiente para la pista y la fila de fichas activa, sin que las capas superpuestas las invadan.

Utilice el ancho de la ventana gráfica en lugar de una resolución estimada del teléfono. MDN explica cómo el metaelemento de la ventana gráfica le dice a un navegador móvil que use el ancho del dispositivo para el diseño de su página. Verifique el campo de juego por separado: una página configurada correctamente aún puede contener un lienzo o panel que asume un tamaño fijo.

## Elige cómo se adapta el juego

Decide si los elementos del mundo se redistribuyen, si la cámara sigue la acción o si el espacio sobrante se convierte en márgenes. La redistribución sirve cuando las reglas permiten más o menos columnas; una cámara permite recorrer un mundo mayor que la pantalla; las bandas de margen conservan el campo de juego cuando su proporción debe permanecer fija. Evita estirar personajes o cambiar la posición de los objetivos solo para llenar cada píxel.

Comprueba la interfaz del sistema y los recortes de pantalla antes de fijar controles en un borde. La guía de Apple describe las áreas seguras y recomienda mantener la información importante fuera de las zonas ocupadas por el hardware. En Android, prueba por separado las proporciones de teléfono y tableta si admites ambos. Aunque el juego sea solo vertical, define qué ocurre al girar el dispositivo para que la pantalla siga siendo utilizable y no quede cortada.

## Revisar una ronda completa

Prueba el tutorial, un momento de mucha acción y la pantalla final tanto en un teléfono estrecho como en un dispositivo más ancho. En cada caso comprueba si el jugador puede ver a la vez el objetivo, el peligro inmediato y el estado actual. Corrige los elementos recortados y la jerarquía visual antes de añadir fases.

## Preguntas

**¿Un juego vertical debe admitir también el modo horizontal?** Solo si aporta algo al diseño. Puedes optar por un juego exclusivamente vertical, pero prepara una disposición utilizable cuando el jugador gire el dispositivo, sin depender de un bloqueo de orientación concreto.

**¿La información de estado debe estar siempre arriba?** No. Colócala donde sea visible sin competir con la acción principal. Prueba durante el juego, con capas superpuestas y en la pantalla final: la mejor ubicación depende del campo de juego.

## Sigue tu curiosidad

- [Desarrollo de juegos móviles: elija su objetivo primero](https://oneshotgems.ai/es/topics/mobile-game-development): Planifique un juego para teléfonos, compare versiones nativas y de navegador, y elija un primer flujo de trabajo práctico antes de agregar sistemas específicos para dispositivos móviles.
- [Crea diseños adaptables para juegos de navegador](https://oneshotgems.ai/es/topics/responsive-game-layouts): Adapte una superficie de juego a su contenedor sin vincular el estado de la simulación a las dimensiones de la pantalla y pruebe el diseño en ventanas gráficas cambiantes.
- [Gestiona los cambios de orientación en juegos de navegador](https://oneshotgems.ai/es/topics/game-orientation-changes): Mantenga el juego legible cuando un dispositivo gira recalculando el diseño y el mapeo de entrada sin tratar la orientación como un reinicio del juego.
- [Diseñe señales del juego que expliquen cada acción](https://oneshotgems.ai/es/topics/game-feedback-design): Haga que las respuestas del juego muestren qué cambió, por qué y qué puede hacer el jugador a continuación, sin tapar el área de juego.

## Más información

- [Metaelemento de ventana gráfica de MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport)
- [Directrices de la interfaz humana de Apple: diseño](https://developer.apple.com/design/human-interface-guidelines/layout)
- [Pautas de diseño de juegos para Android](https://developer.android.com/games/design/overview?hl=en)

---
Página canónica: https://oneshotgems.ai/es/topics/portrait-mobile-game-design