Comment optimiser une application Web HTML5 Canvas et JavaScript pour Mobile Safari?
17
J'ai créé un jeu HTML5 Canvas et JS qui fonctionne très bien sur un ordinateur de bureau ou un ordinateur portable dans Chrome (30 images par seconde), mais sur Safari mobile, je n'obtiens que 8 images par seconde. Y a-t-il des trucs ou astuces simples pour augmenter le framerate?
Malheureusement, la réponse est de tirer moins. J'ai trouvé que le goulot d'étranglement avec les applications basées sur le canevas (sur n'importe quelle plate-forme, vraiment) est le temps qu'il faut pour dessiner des pixels.
Voici quelques choses à essayer:
Utilisez plusieurs couches de toile. Dessinez votre arrière-plan sur un calque tout en dessinant vos objets sur un autre calque (absolument positionné au-dessus du calque d'arrière-plan). (Remarque: je n'ai pas essayé cela sur safari mobile, mais cela peut aider sur d'autres plates-formes)
Seulement redessiner les sprites qui ont changé. C'est délicat, mais augmente certainement les performances. L'idée est de stocker si un sprite doit être redessiné et de redessiner uniquement les sprites qui en ont besoin avec l'arrière-plan derrière eux. (Cela doit également se répercuter sur d'autres objets que l'image-objet pourrait chevaucher.)
Le truc avec le développement sur Chrome est que a) son moteur JavaScript (V8) est rapide et b) les versions les plus récentes (7,8,9) ont toutes une accélération GPU en ce qui concerne le rendu du canevas. Cela, couplé au fait que le matériel mobile n'est tout simplement pas aussi puissant que votre ordinateur de bureau / portable signifie qu'il sera très difficile d'obtenir les mêmes performances sur un safari mobile.
Je pense que, pour le moment, la meilleure approche pourrait être de cibler votre jeu lors d'un safari mobile dès le départ et d'essayer de créer un jeu moins intensif.
+1 Dessiner moins est certainement et malheureusement la voie à suivre ici, bien qu'avec un deuxième canevas pour le calque d'arrière-plan et une approche marquée sale, vous pouvez gagner jusqu'à 50% de performances supplémentaires dans certains cas.
Ivo Wetzel
4
C'est un peu long, mais votre jeu peut-il fonctionner sur des sprites DIV avec des transformations CSS à la place? Je dis cela parce que j'obtiens de merveilleuses performances en déplaçant les choses sur les appareils iOS avec des transformations et des transitions CSS.
Ceux-ci semblent être correctement accélérés par le matériel, avec la mise en garde bizarre que vous devez utiliser le formulaire 3D pour les transformations (c.-à-d. Traduire3D, plutôt que traduire) pour que l'accélération se déclenche. forme où vous venez de définir directement une matrice flottante à 16 éléments, ce qui est très pratique pour moi.
Je suis tellement impressionné par la fluidité de ce processus, que je voulais essayer un projet de jeu simple écrit de cette façon.
Je détesterais ajouter une réponse à un vieux fil - mais je suis surpris que personne n'ait mentionné cela.
Lorsque vous écrivez vos premiers jeux, écrivez-leur simplement comment vous vous attendriez à ce qu'ils fonctionnent correctement. Les techniques ci-dessus sont de bons points de départ pour maintenir des performances élevées - mais le vrai truc est le profileur. Si vous profilez votre application dans Chrome ou Firefox (indice: utilisez de nombreuses méthodes pour voir les goulots d'étranglement exacts; vous n'avez donc pas à déplacer les éléments plus tard - vous devriez le faire de toute façon.), Vous obtenez l'avantage supplémentaire de voir résultats de synchronisation exacts. Dans mon cas, j'ai vu que constamment redessiner l'arrière-plan prenait 80% du temps du navigateur. Après l'avoir écarté, j'ai vu d'autres appels prendre respectivement 40% et plus. Après une heure ou deux, j'ai vu un gain FPS substantiel.
J'aimerais également connaître vos résultats. J'ai essayé de faire la même chose. J'ai trouvé que faire beaucoup de maths était bien, mais dès que vous y mettez une toile, ça va mentalement et les taux de trame chutent.
J'avais une superposition de premier plan qui affichait des effets. C'était une image de très haute qualité mais le truc alpha l'a tellement ralentie que je l'ai complètement abandonnée en échange de plus d'images par seconde.
Une autre chose que j'ai faite a été d'utiliser PHP pour travailler sur certains calculs lourds. J'avais de grands ensembles de données mais plutôt que d'obtenir JavaScript pour calculer et afficher les données, j'ai décidé de laisser PHP faire le travail et laisser JavaScript afficher les résultats. Cela n'a pas fait gagner beaucoup de temps car JavaScript est "sehr gut" avec les mathématiques.
Je suppose que tout votre site est en HTML5, essayez donc de jouer avec le travailleur en arrière-plan.
J'espère que j'ai aidé et s'il vous plaît partager vos résultats.
C'est un peu long, mais votre jeu peut-il fonctionner sur des sprites DIV avec des transformations CSS à la place? Je dis cela parce que j'obtiens de merveilleuses performances en déplaçant les choses sur les appareils iOS avec des transformations et des transitions CSS.
Ceux-ci semblent être correctement accélérés par le matériel, avec la mise en garde bizarre que vous devez utiliser le formulaire 3D pour les transformations (c.-à-d. Traduire3D, plutôt que traduire) pour que l'accélération se déclenche. forme où vous venez de définir directement une matrice flottante à 16 éléments, ce qui est très pratique pour moi.
Je suis tellement impressionné par la fluidité de ce processus, que je voulais essayer un projet de jeu simple écrit de cette façon.
la source
En cas de dessin au trait, combinez autant de commandes lineTo avant d'appeler le trait.
Ceci et quelques autres conseils: http://dt.deviantart.com/blog/38471599/
la source
tout ce que @Gosub a dit plus:
regardez les calculs que vous faites, voyez s'il existe de toute façon des algorithmes plus efficaces.
utilisez des images plus petites. essayez de faire les dimensions des puissances d'image de 2
voyez si vous pouvez vous débarrasser du mélange alpha sur la toile ou n'utilisez pas la propriété d'opacité CSS.
veuillez renvoyer vos résultats. serait intéressant de savoir ce qui a le plus aidé.
la source
Je détesterais ajouter une réponse à un vieux fil - mais je suis surpris que personne n'ait mentionné cela.
Lorsque vous écrivez vos premiers jeux, écrivez-leur simplement comment vous vous attendriez à ce qu'ils fonctionnent correctement. Les techniques ci-dessus sont de bons points de départ pour maintenir des performances élevées - mais le vrai truc est le profileur. Si vous profilez votre application dans Chrome ou Firefox (indice: utilisez de nombreuses méthodes pour voir les goulots d'étranglement exacts; vous n'avez donc pas à déplacer les éléments plus tard - vous devriez le faire de toute façon.), Vous obtenez l'avantage supplémentaire de voir résultats de synchronisation exacts. Dans mon cas, j'ai vu que constamment redessiner l'arrière-plan prenait 80% du temps du navigateur. Après l'avoir écarté, j'ai vu d'autres appels prendre respectivement 40% et plus. Après une heure ou deux, j'ai vu un gain FPS substantiel.
la source
J'aimerais également connaître vos résultats. J'ai essayé de faire la même chose. J'ai trouvé que faire beaucoup de maths était bien, mais dès que vous y mettez une toile, ça va mentalement et les taux de trame chutent.
J'avais une superposition de premier plan qui affichait des effets. C'était une image de très haute qualité mais le truc alpha l'a tellement ralentie que je l'ai complètement abandonnée en échange de plus d'images par seconde.
Une autre chose que j'ai faite a été d'utiliser PHP pour travailler sur certains calculs lourds. J'avais de grands ensembles de données mais plutôt que d'obtenir JavaScript pour calculer et afficher les données, j'ai décidé de laisser PHP faire le travail et laisser JavaScript afficher les résultats. Cela n'a pas fait gagner beaucoup de temps car JavaScript est "sehr gut" avec les mathématiques.
Je suppose que tout votre site est en HTML5, essayez donc de jouer avec le travailleur en arrière-plan.
J'espère que j'ai aidé et s'il vous plaît partager vos résultats.
la source