Mide el recipiente y elige una báscula.
Utilice las dimensiones del contenedor del juego en lugar de asumir que la ventana es el área jugable. Un ResizeObserver puede informar cuando ese elemento cambia, incluidos los cambios causados por el diseño circundante en lugar de un cambio de tamaño de la ventana gráfica. Decide si el juego debe cambiarse en formato tamaño carta, recortarse o redistribuirse con una relación de aspecto estrecha y hacer visible la elección en lugar de alargar los círculos hasta convertirlos en óvalos.
Para un campo de juego virtual fijo, calcule un factor de escala que se ajuste a su ancho y alto, luego centre el espacio restante. Convierta las coordenadas del puntero a través de la inversa de esa misma transformación antes de realizar la prueba. Para un juego que cambia de flujo, actualice los anclajes de diseño y las formas de colisión juntas para que los controles no sigan usando posiciones del tamaño anterior.
Siga cambiando el tamaño fuera del ciclo de simulación
Almacene el mundo del juego en unidades estables y trate la resolución del respaldo del lienzo, el tamaño de CSS y la proporción de píxeles del dispositivo como preocupaciones de renderizado. Cuando cambie el tamaño, actualice la superficie de dibujo y vuelva a dibujarla; No reinicie el nivel ni vuelva a calcular el estado del objeto a menos que las reglas del juego lo requieran. Esta separación evita que un cambio de tamaño de la barra de herramientas parezca un reinicio.
Pruebe una ventana gráfica estrecha y amplia, un cambio de tamaño y orientación del escritorio mientras el juego está activo. Verifique el ajuste del texto, toque las posiciones de destino y coordine la conversión. La guía ResizeObserver de MDN explica la observación de las dimensiones de los elementos y advierte que cambiar el tamaño observado dentro de la devolución de llamada puede crear bucles.
Preguntas sobre diseño adaptable de juegos de navegador
¿Debo cambiar el tamaño del mundo del juego cuando el lienzo cambia de tamaño?
Por lo general, mantenga estables las coordenadas de la simulación y adapte la presentación o el diseño. Si el diseño cambia intencionalmente el campo de juego, actualice sus reglas, objetos y mapeo de entrada juntos.
¿Por qué utilizar ResizeObserver en lugar de solo cambiar el tamaño de la ventana?
Un contenedor de juego puede cambiar de tamaño debido al diseño circundante sin cambiar el tamaño de la ventana. ResizeObserver informa directamente los cambios en la dimensión del elemento.
Más información
¿Has visto algo desactualizado? Notificar una corrección