Cette section aborde l'optimisation du chargement des Prefab, qui se concentre sur deux aspects principaux : la réduction du temps de chargement via load et l'amélioration de la performence lors de l'instanciation.

Comprendre le processus d'utilisation des Prefab

Avant d'optimiser, il est essentiel de comprendre les étapes impliquées lors de l'utilisation d'un Prefab :

1. Chargement du Prefab : Le fichier de Prefab est chargé depuis le disque ou le réseau.
2. Analyse du Prefab : Le contenu du Prefab est analysé pour identifier les nœuds et les ressources associées.
3. Instanciation : Une nouvelle instance du Prefab est créée dans la scène.
4. Chargement des ressources référencées : Les ressources (textures, sons, etc.) référencées par le Prefab sont chargées si elles ne sont pas déjà en mémoire.
5. Initialisation : Les scripts attachés au Prefab sont exécutés pour son initialisation.

Stratégies d'optimisation courantes pour les Prefab

1. Segmentation raisonnable des Prefab

Les fichiers de Prefab volumineux entraînent des temps de chargement plus longs. L'augmentation du temps de chargement n'est pas linéaire ; elle peut croître de manière exponentielle avec la taille du fichier. Par exemple, un fichier de 1 Mo peut prendre beaucoup plus de temps à charger qu'un fichier de 100 Ko. Il est donc judicieux de diviser les Prefab de grande taille (plusieurs centaines de Ko) en plusieurs Prefab plus petits qui peuvent être assemblés.

Considérez chaque Prefab comme un module fonctionnel. Privilégiez la spécialisation des fonctionnalités plutôt que la taille des modules. Cela facilite la segmentation et la gestion.

2. Chargement différé des ressources

Dans l'éditeur Cocos Creator, l'option Chargement différé des ressources (Deferred Load Resources) pour les Prefab permet de réduire le temps de chargement initial. Cependant, cela peut augmenter le temps de chargement lors de la première visualisation du Prefab. Lorsque cette option est activée, les ressources référencées (images, sons, etc.) ne sont chargées qu'au moment où le Prefab est affiché pour la première fois.

Cette approche doit être choisie en fonction du contexte d'utilisation spécifique.

3. Choix de la stratégie d'optimisation

L'option Stratégie d'optimisation (Optimization Strategy) dans l'inspecteur des Prefab permet de choisir entre deux modes :

• Optimiser les performances de création multiples : Cette option prépare le Prefab en générant du code d'instanciation dynamique qui est ensuite optimisé par le moteur JIT. Cela réduit considérablement le temps d'instanciation au prix d'un temps de chargement initial plus long.
• Optimiser les performances de création unique : Cette option ignore l'étape de pré-traitement, réduisant ainsi le temps de chargement. Cependant, le temps d'instanciation sera plus long. C'est idéal pour les interfaces utilisateur statiques ou les Prefab qui ne sont instanciés qu'une seule fois.

Note importante : La stratégie d'optimisation des Prefab n'est pas effective sur la plateforme WeChat Mini Game en raison de l'interdiction du chargement dynamique de code (fonctions comme eval sont désactivées).

Optimisation du chargement des scènes

Utilisation judicieuse des Prefab pour composer les scènes

Composer les scènes à l'aide de Prefab et les charger de manière asynchrone par lots est une méthode courante et efficace. Par exemple, les interfaces utilisateur secondaires ou les éléments de scène non essentiels peuvent être chargés dynamiquement à la demande plutôt que d'être inclus dans la scène principale dès le départ. Une scène peut initialement contenir des éléments clés (comme l'arrière-plan et les boutons principaux), tandis que d'autres ressources sont chargées de manière asynchrone après l'entrée dans la scène. Cela réduit le temps d'attente de l'utilisateur et évite de charger inutilement des ressources.

Amélioration de l'expérience utilisateur avec un écran de chargement

Pour les scènes complexes nécessitant un temps de chargement appréciable, l'implémentation d'un écran de chargement est essentielle pour améliorer l'expérience utilisateur. C'est une pratique standard et ne sera pas détaillée ici.

Chargement différé des ressources de scène

L'option Chargement différé des ressources peut également être appliquée aux ressources de la scène. Elle garantit que les ressources ne sont chargées que lorsqu'elles sont nécessaires, ce qui est bénéfique dans la plupart des cas pour réduire le temps de chargement et éviter le chargemetn massif de ressources inutilisées.

Optimisation du chargement groupé des ressources

Dans les projets, il est fréquent de générer un grand nombre de nœuds ou de Prefab en même temps, comme des projectiles, des ennemis, etc. Sans optimisation, cela peut entraîner des pics de mémoire soudains et des saccades dans le jeu.

L'appproche naïve suivante peut causer des problèmes de performance lors de la génération de nombreux objets :

for (let i = 0; i < 200; i++) {
    const instance = cc.instantiate(this.prefab);
    instance.parent = this.layout;
}

Lorsque le nombre d'objets à générer est faible, l'impact est négligeable. Cependant, pour un grand nombre (par exemple, 200 instances), cela peut entraîner des saccades notables. Les démos montrent des pics de temps d'une trame pouvant dépasser 180 ms dans de tels cas.

Recommandation : Évitez d'effectuer un grand nombre d'opératio ns d'instanciation dans une même trame pour prévenir les pics de mémoire soudains. Des solutions comme schedule ou setTimeout peuvent être utilisées.

Une méthode recommandée est l'utilisation de la bibliothèque tierce async.

async.eachLimit(arrayOfItems, 5, (item, callback) => {
    const instance = cc.instantiate(this.prefab);
    instance.parent = this.layout;
    setTimeout(callback, 0); // Permet de céder le contrôle à la trame suivante
});

La méthode eachLimit de async permet de limiter le nombre d'instanciations par trame. Cette approche assure une fluidité visuelle sans saccades et maintient une base de code propre.

Intégration de la bibliothèque async

Pour utiliser async dans votre projet :

1. Ouvrez un terminal dans le répertoire de votre projet.
2. Exécutez npm init pour créer ou mettre à jour le fichier package.json.
3. Exécutez npm install async --save pour installer la bibliothèque.
4. Dans votre code, importez la bibliothèque avec :

const async = require("async");