Cómo hacer un juego de navegador que funcione en teléfonos

La mayoría de la gente probará tu juego en un teléfono, así que necesita controles táctiles, un diseño que quepa en una pantalla pequeña y sonido que empiece después de un toque. Go Bananas incluye todo esto en cada juego que crea.

Un juego de navegador funciona en los teléfonos sin instalar nada: el jugador abre un enlace y juega. Pero un teléfono no es una computadora pequeña. No hay teclado, la pantalla puede medir 320 píxeles de ancho, el procesador es más lento y algunos navegadores se niegan a reproducir sonido hasta que el jugador toca la pantalla. Esta guía explica qué cambia en un teléfono, qué hace Go Bananas por ti y cómo probar y mejorar tu juego en un dispositivo real.

Qué cambia en un teléfono

Toques en lugar de teclas. Las flechas, la barra espaciadora y el mouse no existen. Cada acción necesita algo que tocar, arrastrar o deslizar, y los dedos son menos precisos que el puntero de un mouse. Un botón en el que es fácil hacer clic en una laptop puede ser demasiado pequeño para atinarle con el pulgar.

Pantallas pequeñas. Los teléfonos más angostos miden unos 320 píxeles de ancho en el navegador. Los contadores de puntos, las barras de vida y los menús que caben cómodamente en un monitor pueden tapar la mitad de la zona de juego en un teléfono. Además, los jugadores ponen el teléfono de lado, así que el juego tiene que adaptarse cuando la pantalla cambia de forma.

Rendimiento. Los teléfonos tienen menos memoria y gráficos más lentos que la mayoría de las computadoras. Las imágenes grandes, los modelos 3D pesados y las escenas 3D fotorrealistas cargan lento y pueden hacer que un juego se trabe.

Sonido después de un toque. En iPhone, una página web no puede reproducir sonido hasta que el jugador toca la pantalla al menos una vez. Un juego que intenta poner música antes del primer toque se queda en silencio.

Lo que Go Bananas incluye

Cuando Go Bananas crea un juego, la IA tiene instrucciones de tratar los teléfonos como un requisito, no como algo secundario. Cada juego nuevo está pensado para funcionar en pantallas de solo 320 píxeles de ancho. En la práctica, eso significa:

Controles táctiles que se adaptan al tipo de juego. Los juegos 3D tienen un joystick virtual en el lado izquierdo de la pantalla, arrastrar para mirar en el derecho y botones de acción de unos 60 píxeles. Los juegos de mesa usan tocar para seleccionar, con zonas táctiles de al menos 40 píxeles.
Botones lo bastante grandes para un pulgar. Los botones en pantalla miden al menos 44 píxeles, un mínimo habitual para tocar con comodidad.
Un HUD que no estorba. Las puntuaciones y los textos de estado se mantienen fuera de la zona de juego, y el tamaño de su letra se adapta a la pantalla en lugar de quedar fijo.
Gráficos nítidos en pantallas de alta densidad. El lienzo del juego llena la pantalla y se escala según la densidad de píxeles del teléfono, así que no se ve borroso en las pantallas modernas.
Se adapta cuando giras el teléfono. Los juegos reaccionan cuando la ventana cambia de tamaño, así que al poner el teléfono de lado el diseño se reorganiza.
Los toques caen donde esperas. Las posiciones de los toques se convierten a las coordenadas del propio juego, así que un toque cae donde está tu dedo, incluso en un lienzo escalado.
Sonido que funciona en iPhone. Cada juego recibe una función de sonido que desbloquea el audio con el primer toque y obedece el botón de silencio del sitio. No tienes que escribir ningún código especial para eso.

Nada de esto garantiza que todo salga perfecto con cada idea, así que prueba tu juego en un teléfono antes de compartirlo.

Jugar en pantalla completa

Dentro de un juego, abre su Menu (menú) y elige pantalla completa. En los teléfonos que no permiten que una página web pase a pantalla completa, Go Bananas te lo avisa y te sugiere poner el teléfono de lado, lo que le da más espacio al juego.

Agregar Go Bananas a tu pantalla de inicio

Puedes agregar Go Bananas a la pantalla de inicio de tu teléfono para que se abra como una app, sin la barra de direcciones del navegador. Donde el navegador lo permite, Go Bananas ofrece instalarse. En iPhone, muestra los pasos para hacerlo desde Safari, y si usas otro navegador en iPhone, te pide que primero abras la página en Safari, porque ahí solo Safari puede agregarla a la pantalla de inicio.

Probar en un teléfono real

La vista de teléfono de un navegador de escritorio es un buen comienzo, pero no muestra cómo se sienten los controles bajo el pulgar, qué tan rápido carga el juego con datos móviles ni si el sonido empieza. Prueba en un teléfono real:

Juegos publicados: abre el juego en Go Bananas y usa el código QR ("Scan to play on mobile", escanea para jugar en el teléfono). Apunta la cámara de tu teléfono al código y el juego se abre en el teléfono.
Borradores: un borrador es privado, así que no ofrece código QR. Inicia sesión en tu cuenta desde el teléfono y abre el juego desde tus borradores.
Juega unos minutos con el teléfono vertical y de lado. Comprueba que sea fácil atinarle a cada botón, que nada importante quede oculto detrás de la puntuación o del menú, y que el sonido empiece después de tu primer toque.
Pruébalo con datos móviles además de con Wi-Fi si tu juego usa imágenes grandes o archivos 3D.

Cómo pedir cambios para teléfonos

Si algo no funciona bien en un teléfono, describe el problema en el chat de edición con palabras sencillas. Sé específico sobre lo que viste y dónde. Por ejemplo:

«En los teléfonos, el botón de salto es demasiado pequeño. Hazlo el doble de grande y muévelo a la esquina inferior derecha.»
«En un teléfono pequeño, el texto de la puntuación tapa la parte de arriba del tablero. Muévelo a una barra delgada encima del tablero.»
«Agrega flechas izquierda y derecha en pantalla para los teléfonos, y ocúltalas en las computadoras.»
«Cuando pongo el teléfono de lado, el juego no llena la pantalla. Haz que se adapte al nuevo tamaño de pantalla.»
«La escena 3D va lenta en mi teléfono. Usa menos árboles y sombras más sencillas en los teléfonos.»

Los cambios suelen tardar menos de un minuto, y cada uno se guarda como una versión nueva, así que puedes volver atrás si un cambio empeora las cosas.

Archivos pequeños para teléfonos

Los archivos que agregas a un juego son lo que más afecta el tiempo de carga. Algunas reglas prácticas:

Imágenes: usa imágenes que no sean más grandes de lo que se ven en pantalla. Un fondo que se muestra a 1080 píxeles de ancho no necesita medir 6000 píxeles de ancho. Los archivos WebP suelen ser mucho más pequeños que los PNG o JPEG con la misma calidad. Mira Archivos WebP en juegos de navegador.
Modelos 3D: GLB es el mejor formato para modelos 3D. Mantén moderados la cantidad de polígonos y el tamaño de las texturas. Los modelos FBX que se suben a Go Bananas se convierten a GLB con las texturas reducidas a 512 por 512 píxeles, lo que ayuda en los teléfonos. Mira Archivos GLB en juegos de navegador.
Escenas 3D fotorrealistas (Gaussian splats): se ven impresionantes, pero son pesadas para los teléfonos. Go Bananas las reduce cuando las subes, a 500,000 puntos en los archivos PLY y a 300,000 splats en los archivos SPZ, pero aun así pueden ir lentas en teléfonos más viejos. Mira Archivos PLY en juegos de navegador.
Sonido: cada archivo de audio subido se convierte a un MP3 comprimido, y cada archivo está limitado a 5 MB y 120 segundos, así que el sonido rara vez causa problemas de carga.

Lista rápida para teléfonos

Antes de compartir tu juego, comprueba que:

Cada acción se puede hacer tocando la pantalla.
Es fácil atinarles a los botones con el pulgar.
La puntuación y los menús no tapan la zona de juego en una pantalla pequeña.
El juego se adapta cuando giras el teléfono.
El sonido empieza después del primer toque, y el botón de silencio lo apaga.
Carga en un tiempo razonable con datos móviles.