Que fait melonjs-performance ?
Utilisez cette compétence lorsqu'un jeu melonJS chute en images par seconde, alloue de manière excessive, ou doit passer à l'échelle avec de nombreux objets. Elle couvre le pool d'objets, le batching des appels de rendu, les atlas, le baking avec CanvasRenderTarget, l'instancing, le culling et alwaysUpdate, le plugin de débogage, et l'identification des coûts réels. Déclencheurs : performance, lent, frame rate, fps, lag, pool, pool.register, pool.pull, batching, appels de rendu, InstancedMesh, culling, alwaysUpdate, inViewport, CanvasRenderTarget, optimiser, profilage, plugin de débogage, mémoire.
Pool d'objets
Utilisez pool.register pour enregistrer une classe d'objet, puis pool.pull pour récupérer une instance réutilisée au lieu d'utiliser new. N'oubliez pas d'appeler pool.push(sprite) lorsque l'objet n'est plus nécessaire pour le remettre dans le pool. Cela réduit considérablement les allocations de mémoire et le travail du garbage collector.
Batching des appels de rendu
Regroupez les sprites partageant la même texture et les mêmes paramètres de rendu pour minimiser le nombre d'appels de rendu (draw calls). Utilisez des atlas de textures pour combiner plusieurs sprites en une seule image, ce qui améliore le batching. Le batching est effectué automatiquement par melonJS pour les objets compatibles, mais vous pouvez favoriser ce comportement en organisant vos sprites par texture.
Baking avec CanvasRenderTarget
Pour les éléments statiques (décors, fonds), pré-calculez le rendu sur un CanvasRenderTarget pour éviter de les redessiner à chaque frame. Cela est particulièrement utile pour les grandes cartes de tuiles ou les arrière-plans complexes.
Instancing avec InstancedMesh
Pour les objets répétés en grand nombre (particules, projectiles, ennemis), utilisez InstancedMesh pour dessiner plusieurs instances d'un même maillage avec un seul appel de rendu. Cela réduit considérablement la charge sur le processeur graphique.
Culling et alwaysUpdate
- Culling : Vérifiez
inViewportpour savoir si un objet est dans la zone visible de la caméra. Si ce n'est pas le cas, vous pouvez désactiver sa mise à jour ou son rendu pour économiser des ressources. - alwaysUpdate : Par défaut, melonJS met à jour tous les objets même s'ils sont hors de la vue. Définissez
alwaysUpdate = falsesur les objets qui n'ont pas besoin d'être mis à jour en dehors de la zone visible. Attention : cela peut affecter le comportement des objets qui doivent se déplacer même hors écran (ex. : vagues d'ennemis).
Plugin de débogage
Activez le plugin de débogage (par exemple, me.debug.Plugin) pour profiler votre jeu. Il affiche des informations en temps réel : nombre d'objets, appels de rendu, mémoire, temps de trame. Utilisez-le pour identifier les goulets d'étranglement (ex. : trop d'objets actifs, trop d'appels de rendu).
Identification des coûts réels
- CPU : Mesurez le temps passé dans la boucle de mise à jour (
update) et la boucle de rendu (draw). Siupdateest lent, vérifiez les algorithmes et le pool d'objets. Sidrawest lent, vérifiez le batching, le culling et l'instancing. - Mémoire : Surveillez le nombre d'allocations et la fréquence du garbage collector. Un pool d'objets bien configuré réduit la pression mémoire.
- GPU : Utilisez
InstancedMeshet les atlas de textures pour réduire le nombre d'appels de rendu et la bande passante mémoire.
Exemple pratique
// Enregistrement d'une classe de sprite
me.pool.register("ennemi", EnnemiSprite);
// Création d'une instance depuis le pool
let ennemi = me.pool.pull("ennemi", x, y);
me.game.world.addChild(ennemi);
// Lorsque l'ennemi est détruit
me.game.world.removeChild(ennemi);
me.pool.push(ennemi);
Pour le batching, assurez-vous que tous les sprites d'une même texture sont regroupés :
// Exemple de chargement d'un atlas de textures
me.loader.preload([{
name: "monAtlas",
type: "image",
src: "data/img/atlas.png"
}]);