Cargue la primera porción reproducible
Agrupe los recursos según el momento en que sean necesarios: título y primera escena, siguiente nivel y luego efectos opcionales o cosméticos. Cargue y valide el primer grupo antes de habilitar la acción de inicio. Para las imágenes utilizadas en una transición repentina de escena, HTMLImageElement.decode() puede resolverse después de decodificar una imagen, lo que permite que se realice el intercambio sin que el siguiente dibujo espere para decodificarse.
Prueba con una conexión limitada: retrasa una imagen necesaria y haz que falle otra. El indicador de progreso debe avanzar únicamente cuando se complete cada tarea identificada; el recurso que falle debe mostrar un mensaje recuperable o usar una alternativa; y el control de inicio no debe prometer una escena jugable si falta una dependencia obligatoria.
Mantenga el progreso honesto
Cuando se conozca el conjunto de tareas, mostrar las tareas completadas del total o informar una fase como la preparación del primer nivel. Los porcentajes basados en bytes sólo son significativos cuando se conocen los tamaños relevantes; La decodificación, la configuración del audio y la inicialización del procedimiento pueden tardar un tiempo después de que se complete la transferencia.
No bloquee toda la interfaz para activos que puedan llegar más tarde. Utilice un marcador de posición de bajo costo para arte opcional y luego reemplácelo cuando su imagen decodificada esté lista. Verifique que el marcador de posición permanezca legible en el tamaño de lienzo previsto y que una descarga opcional fallida no deje al reproductor en el estado de carga.
Preguntas sobre carga de activos del juego de navegador
¿Es una buena idea precargar todos los activos?
Generalmente no por defecto. Cargue lo que se necesita para el primer momento jugable, luego programe otros trabajos según cuándo se usará y cuánta memoria requiere.
¿Un evento de carga de imagen significa que está lista para dibujar sin problemas?
Los datos pueden estar disponibles aunque la decodificación todavía afecte a la presentación. MDN documenta que decode() devuelve una promesa que se resuelve cuando la imagen está decodificada y se puede añadir con seguridad. Mide si esa diferencia importa en tu escena.
Más información
¿Has visto algo desactualizado? Notificar una corrección