Mauvaise performance dans Android lors de l'exécution de l'APK, fonctionne correctement dans le navigateur

J'ai créé un petit projet de jeu en HTML5 en utilisant le moteur Phaser (essayé à la fois 1.1.5 et 1.1.6). Ensuite, pour le porter sur une plate-forme mobile, utilisez Phonegap / Cordova pour Windows Phone 8, Android et iOS.

Dans mon jeu, il y a environ 10 éléments qui s'animent (se déplaçant d'un point a à un point b et une rotation en même temps). Sur iOS et Windows Phone 8, je n'ai rencontré aucun problème.

Mais avec Android, les performances sont inacceptables. D'un autre côté, si je lance mon jeu via le navigateur de l'appareil, il se déroule sans problème. Mais l'APK compilé fonctionne très saccadé et les éléments se déplacent très lentement et de manière vacillante.

J'ai vérifié que l'indicateur d'accélération matérielle Android est défini sur "true" dans le fichier manifeste. J'ai essayé de le changer aussi, mais cela ne reflétait aucun changement dans les performances.

J'ai vérifié la même chose sur Android 4.2 sur l'appareil Samsung S2 et que les performances sont meilleures. Mais sur Asus Nexus Tab 7 (exécutant Android 4.4), c'est très saccadé, tandis que le système d'exploitation et l'appareil sont les derniers. Également vérifié sur un autre appareil exécutant Android 4.3 (Samsung Galaxy Grand Duos) et sur ce point également, les performances ne sont pas bonnes du tout.

Dans mon jeu, j'ai essayé le rendu WebGL / Canvas (le moteur Phaser utilise Pixi.js, qui revient au canevas 2d si WebGL n'est pas pris en charge), mais aucun changement. De même avec easeljs.

Si quelqu'un d'autre est confronté à un problème similaire et peut suggérer un moyen d'obtenir des performances natives. J'ai vérifié les exemples de cocoonjs et bien qu'ils semblent fluides et acceptables, je ne peux pas opter pour cette route.

La WebView basée sur Chromium à l'origine de ce problème a finalement été mise à jour dans la version 4.4.3 / 4.4.4 de KitKat à la mi-2014, mais c'est un réconfort, étant donné que certains fournisseurs ont pris des décisions apparemment arbitraires sur le choix de leur téléphone qui a obtenu la mise à jour et celui qui ne l'a pas fait. ne pas. Le Samsung Galaxy S4, par exemple, est toujours piégé à 4.4.2.

Suivez les conseils donnés par les autres réponses: si vous avez un jeu basé sur un canevas, évitez PhoneGap, sauf si vous pouvez déterminer que le fait d'être bloqué avec l'exclusion des téléphones qui exécutent les versions de KitKat ci-dessous 4.4.3 est acceptable.

Essayez de refaire votre jeu dans libgdx. Libgdx est assez rapide et n'a pas de problèmes comme ça et il fonctionne sur toutes les plateformes. Malheureusement, ce n'est que ce à quoi je peux penser en ce moment et je n'aime pas l'idée de convertir js en java android ou quoi que ce soit qui couvre. Bien que cela prenne un certain temps, testez LibGDX.

On dirait que c'est un problème avec la plupart des développeurs de jeux. Problème similaire

"J'ai souvent entendu dire que l'interphone n'était pas le meilleur choix lorsque je voulais créer un jeu en toile. Il est plus adapté aux applications Web qu'aux natifs."

Il semble que cela rende les capacités de problème pour les téléphones Android. Il existe certains moteurs qui ne peuvent plus gérer le rendu des sprites. Je sais que 10 objets sont faciles à rendre, mais cela semble définitivement un problème avec les capacités de rendu.

Ma suggestion est que vous alliez avec cocoonjs .

J'ai rencontré le même problème avec Phaser (avec ce jeu simple ). Malheureusement, avec le rendu HTML5 et Web / Canvas, vous êtes à la merci de votre téléphone - il y aura des utilisateurs avec des navigateurs cassés ou peu performants (comme le mien).

Comme l'a suggéré @ captainbuzz123, la seule vraie solution est de passer à une plate-forme non HTML5. Mon outil de choix pour l'instant est OpenFL .

Alors que mon (très simple) application Phaser fonctionne à environ 8-12FPS sur mon téléphone, avec OpenFL (car elle est transposée en C ++ et fonctionne via Android NDK), je finis par obtenir des performances très fluides et fluides sur mon téléphone.

Cela vaut vraiment la peine d'essayer.

Une mise à jour pour la première semaine des années 2020:

Cocoonjs était probablement une solution solide pour ce problème dans le passé, mais ils sont en train de fermer .. une citation de leur site Web officiel qui dit tout

C'est avec un profond regret que nous annonçons que nous cesserons de fournir notre service bien-aimé, Cocoon.

Nous avons lancé Ludei / Cocoon parce que nous pensions que l'avenir du développement d'applications et de jeux serait basé sur HTML5. Malheureusement, cela ne s'est pas produit et le développement natif est plus fort que jamais.

Cela reflète en fait le développement HTML5 pour mobile en 2019 .. pas que ce n'est pas possible, mais ce n'est pas efficace comme prévu ...

Je passe au développement natif après certains jeux de production construits avec Phaser et Cordova pour IOS et Android. Marre de frapper le plafond de performance sur même la mécanique la plus simple sur les appareils de moyenne gamme

Juste pour partager mes prochaines options de solution tech / stack parmi lesquelles choisir pour quiconque le verra dans le présent ou dans un avenir proche:

• SpriteKit pour IOS et LibGDX pour Android: Ce sera probablement la solution la plus performante même si elle nécessitera un développement pour chaque plate-forme séparément .. mais sera également la plus "bas niveau"

• Cocos2D-X ne sait pas vraiment à quel point il est bien pris en charge et est-ce toujours un choix valide, mais il devrait être très mature et performant + vous pouvez écrire en C ++ et construire pour n'importe quelle plate-forme

• Corona semble être une plate-forme croisée et un cadre performant intéressant (et gratuit), l'utilisation de Lua devra le tester par rapport aux autres solutions mentionnées ici

• Utilisez l'un des moteurs modernes comme Unity ou Godot . Je ne sais pas comment cela se compare aux cadres mentionnés en termes de performances

J'espère que cela aide n'importe qui ..

Vu cela l'autre jour, cela pourrait bien valoir le coup d'œil pour résoudre ce problème. Cela me semble être une très bonne idée: http://tmtg.net/glesjs/

Le fait que cela fonctionne bien dans le navigateur, mais pas sur Phonegap / Cordova est vraiment très étrange. Toute la situation canvas / webGL sur Android (je ne peux pas parler pour iOS) m'a toujours semblé assez désastreuse. Certainement quelque chose que GOogle a besoin de mettre plus d'énergie, peut-être que Lollipop sera une amélioration!