html5 canvas conseils de performances générales

Question

je suis en train de développer un jeu pour le canvas d'html5 plate-forme tout en ciblant essentiellement les appareils mobiles. la toile est redimensionnée à la plus grande résolution disponible, de sorte qu'il en fait presque un plein écran de jeu.

sur un ipad, ce serait un 1024x786 toile. à une résolution comme ça j'ai remarqué une baisse significative du taux de rafraîchissement. sur les petites résolutions d'480x320 sur iphone, le jeu fonctionne en douceur! donc je suppose que c'est parce que l'appareil est fillrate limitée.

mais de toute façon je tiens à optimiser autant que possible.

donc, je serais très reconnaissant si vous pouviez poster toute les performances générales des conseils que vous avez, quand il s'agit de canvas d'html5 développement.

Answer 1

Voir aussi cette toile d'optimisation de la performance de l'article sur html5rocks, qui contient jsperf de données qui comprend les navigateurs mobiles.

Answer 2

Vous pouvez lire en Faisant un iPad Appli HTML5 & rend vraiment rapide par Thomas Fuchs

Les points clés qu'il fasse:

1. Les Images de ralentir les choses immensément– se débarrasser d'eux
2. Évitez text-shadow & box-shadow
3. Accélération matérielle est assez nouveau... et buggy (animations simultanées est limité)
4. Évitez opacity si possible (parfois interfère avec l'accélération matérielle pour le rendu)
5. Utiliser translate3d, pas translate (ce dernier n'est pas difficile-accéléré)

Quelques autres points qui peuvent améliorer les performances de façon significative:

• utiliser getImageData aussi rarement que possible (de ralentissement majeur) [2]
• combiner plus d'une toile, afin de repeindre les petites pièces qui sont en train de changer plus souvent

Vous pouvez également référence de votre application avec google Chrome/Firebug Profil peut vous montrer quelles sont les fonctions qui sont lents.

[2] http://ajaxian.com/archives/canvas-image-data-optimization-tip

Answer 3

Un couple de plus de liens:

• HTML5 Jeux 0.2: les Entiers sont Vos Amis
• HTML5 Canvas Performance dans deviantART muro
• Moteur De Jeu Inscription. Voir les esp. Les "autres" pour des liens supplémentaires.

Il est difficile de donner de conseils car je ne suis pas assez familier avec votre jeu. Vous pourriez souhaitez diviser rendu à plusieurs couches, cependant. Cela a un sens, surtout si vous avez quelques éléments statiques là. De cette façon, vous pouvez éviter certains de compensation et améliorer le code en général.