Charger la première tranche jouable
Regroupez les ressources dès le moment où elles sont nécessaires : titre et première scène, niveau suivant, puis effets ou cosmétiques facultatifs. Chargez et validez le premier groupe avant d'activer l'action de démarrage. Pour les images utilisées dans une transition de scène soudaine, HTMLImageElement.decode() peut être résolu après le décodage d'une image, permettant ainsi à l'échange de se produire sans que le prochain tirage attende le décodage.
Testez avec une connexion limitée : retardez une image obligatoire et faites échouer une autre. L’indicateur ne doit avancer que lorsque chaque tâche identifiée est terminée ; l’échec d’une ressource doit afficher un message récupérable ou utiliser une solution de repli ; et le bouton de démarrage ne doit pas promettre une scène jouable si une dépendance obligatoire manque.
Gardez les progrès honnêtes
Lorsque la liste des tâches est connue, affichez le nombre de tâches terminées sur le total ou indiquez une étape, par exemple la préparation du premier niveau. Un pourcentage calculé à partir des octets n’a de sens que si les tailles concernées sont connues : le décodage, la configuration audio et l’initialisation procédurale peuvent prendre du temps après le transfert.
Ne bloquez pas l’intégralité de l’interface pour les actifs qui peuvent arriver plus tard. Utilisez un espace réservé à faible coût pour les illustrations facultatives, puis remplacez-le lorsque son image décodée est prête. Vérifiez que l'espace réservé reste lisible à la taille de canevas prévue et qu'un échec de téléchargement facultatif ne bloque pas le lecteur en état de chargement.
Questions sur chargement des ressources du jeu par navigateur
Est-ce que précharger chaque actif est une bonne idée ?
Généralement pas par défaut. Chargez ce qui est nécessaire pour le premier moment jouable, puis planifiez d'autres travaux en fonction du moment où il sera utilisé et de la quantité de mémoire requise.
Un événement de chargement d’image signifie-t-il qu’elle est prête pour un dessin fluide ?
Les octets peuvent être disponibles alors que le décodage affecte encore l’affichage. MDN indique que decode() renvoie une promesse qui se résout lorsque l’image est décodée et peut être ajoutée sans risque. Mesurez si cette différence compte dans votre scène.
Pour aller plus loin
Vous avez repéré une information dépassée ? Signaler une correction