Mesurez la boîte CSS avant de définir les pixels
Lisez les dimensions du canevas affichées, multipliez par l'échelle de l'appareil choisi, définissez la largeur et la hauteur du support et transformez les coordonnées du dessin afin que la logique du jeu puisse continuer à utiliser les unités d'espace CSS. Réappliquez la transformation après avoir modifié la largeur ou la hauteur, car l'attribution de ces attributs de canevas réinitialise son état de dessin.
Comparez une grille d'un pixel, des bords diagonaux et un petit texte d'interface utilisateur à des facteurs d'échelle tels que 1, 1,5 et 2. Vérifiez à la fois la netteté et la réactivité. Un multiplicateur complet de devicePixelRatio est un point de départ, pas une règle que chaque jeu devrait suivre ; réduire l'échelle de rendu peut réduire les coûts sur les affichages denses tout en laissant la mise en page CSS inchangée.
Considérez le redimensionnement et la mémoire comme faisant partie du choix
Le nombre de pixels du backing-store augmente avec les deux dimensions, donc doubler l’échelle dans chaque direction crée quatre fois plus de pixels. Testez une scène chargée avec la plus grande taille d'affichage prise en charge et recherchez la pression de la mémoire ou les redessins plus lents avant d'expédier un paramètre haute densité.
Les conseils de canevas de MDN montrent une configuration basée sur devicePixelRatio. La page des meilleures pratiques de WebGL fait ressortir les subtilités des ratios et du zoom non entiers. Revérifiez après le zoom du navigateur ou le déplacement d'une fenêtre entre les affichages, et évitez de réinitialiser à plusieurs reprises le magasin de sauvegarde si ses dimensions effectives n'ont pas changé.
Questions sur ratio de pixels du Canvas selon l’appareil
La largeur du canevas doit-elle toujours être égale à la largeur CSS multipliée par devicePixelRatio ?
Non. Cela peut affiner le contenu mais multiplie le travail et la mémoire. Comparez une version pleine résolution avec une échelle plafonnée en utilisant la même scène et les mêmes contrôles visuels.
Pourquoi le dessin devient-il flou après le redimensionnement ?
La modification de la largeur ou de la hauteur du canevas efface son bitmap et réinitialise l'état du contexte. Recalculez ses dimensions de support, redimensionnez le contexte et redessinez la scène.
Pour aller plus loin
Vous avez repéré une information dépassée ? Signaler une correction