Évitera de dessiner un demi-pixel sur une toile HTML5 pour améliorer la vitesse?

Question

Je dessine un sprite (d'une balle) sur un élément de toile. Comme la balle se déplace cependant, la position x ou y de la balle peut devenir une fraction, par exemple. (20,153; 63,638). Lorsque le canevas est utilisé pour dessiner cette image, il tente d'utiliser des pixels transparents pour que la balle apparaisse dans sa position avec plus de précision.

Je me demandais si je devrais utiliser Math.round() avant de dessiner la balle pour éviter les trucs de pixels transparents, et peut-être accélérer le jeu beaucoup. Cela aidera-t-il beaucoup? Le jeu est un jeu de pong complexe.

L'image ci-dessous devrait aider à mon explication:

Answer 1

Au moins this guy seems to believe so. Comme Gabe l'a mentionné, cela dépend de la mise en œuvre. Notez qu'un anti-alias de tri semble fonctionner si vous utilisez des coords normaux (1, 14, etc.). Pour cette raison, certains guides (Dive Into HTML5 principalement) semblent suggérer que vous feriez mieux de déchirer en utilisant des demi-pixels (c'est-à-dire 1,5, 14,5, etc.). Je ne sais pas si cela a un impact sur la performance. Cela est visible sur le résultat du rendu au moins.

Vous pouvez également expérimenter différents schémas de superposition. Voir this question pour plus d'informations. En fonction de votre situation, vous pourriez vouloir traiter vos objets comme des toiles séparées même en les décalant par-dessus l'arrière-plan.

Vous pouvez également essayer de tout rendre sur une seule toile. Dans ce cas, vous avez des choses supplémentaires à garder en mémoire. This library semble gérer toute la comptabilité pour vous.