Une demande récurrente est de customiser l'écran de chargement de Construct 2. Cela peut être effectué en utilisant un layout de chargement, qui est un layout spécial apparaissant lorsque le projet est en train de charger.
Possibilités créatives
Voici quelques idées intéressantes à propos de comment bénéficier au maximum d'avoir votre propre écran de chargement :
- Vous pouvez créer la barre de progression dans le même style que le reste de votre jeu. Cela permet d'immerger le joueur dans le style graphique de votre jeu dès le moment où celui-ci commence à charger.
- L'écran de chargement pourrait être créé comme l'écran titre principal, de façon à ce que le joueur sente qu'il va bientôt pouvoir jouer au jeu.
- Vous pouvez également inclure des informations comme des instructions et les contrôles sur l'écran de chargement, de façon à ce que le joueur puisse lire quelque chose d'utile en attendant. (N'oubliez pas d'inclure les instructions dans le jeu principal également quand même, au cas où le jeu charge rapidement !)
- Vous pourriez même inclure un mini-jeu, ou une petite partie du vrai jeu, de façon à ce que le joueur soit diverti en attendant. Noubliez pas que vous devriez essayer d'utiliser le moins d'objets possibles sur le layout de chargement afin que ce dernier se charge rapidement lui-même ! Quelques informations complémentaires suivent peu après.
#Comment le projet se charge*
Avannt de faire un layout de chargement, il est mieux de comprendre comment les projets Construct 2 sont chargés. Cela s'effectue en quatre phases.
1. Le code HTML et Javascript de la page est téléchargé. Etant donné que le moteur de Construct 2 n'est pas encore téléchargé, rien n’apparaît.
2. Une fois que le code Javascript est téléchargé (généralement très rapidement étant donné que le code est court), le chargeur par défaut aparraît. C'est la barre de chargement de série de Construct 2, qui est un logo HTML5 avec une barre de progression bleue. Cela s'affiche pendant que le layout de chargement lui-même est en trainn de charger. Le style du chargement par défaut peut également être modifié dans les Propriétés du Projet (voir plus loin).
3. Le reste du projet charge pendant que le layout de chargement s'affiche.
4. Enfin, le game est complètement chargé et prêt à démarrer.
Notez qu'au cours des étapes 2 et 3, se téléchargent uniquement des images. Toute la logique Javascipt a été téléchargée dans l'étape 1, et l'audio est streamé après que le projet ait démarré. Pour plus d'informations sur la façon dont l'audio se joue sur demande, voir Audio dans le manuel. Ainsi la seule chose se chargeant pendant que la barre de progression est affichée sont les images des Sprites, Arrière-Plans, etc.
Cela signifie que tout ce que vous avez à faire pour accélérer le chargement de votre jeu est de vous assurer que vos images sont aussi peu et légères que possible. Pour plus d'informations et d'astuces sur comment réduire la taille du projet, allez lire les articles du blog Compression d'image dans Construct 2 et Sous le capot : les feuilles de sprites dans Construct 2.
##COmment créer un layout de chargement**
Il y a deux paramètres pertinents dans les Propriétés du Projet : Utiliser le layout de chargement et Style du chargement.
Style du chargement modifie l'apparence du chargement par défaut. Voir Changer le chargement par défaut ci-dessous pour plus d'informations.
Utiliser un layout de chargement permet l'utilisation d'un layout de chargement. Par défaut cette option est désactivée, vous devez donc l'activer manuellement pour chaque projet. Ensuite, le premier layout devient le layout de chargement. Vous devriez manuellement sélectionner votre layout de chargement avec l'option Premier layout pour s'assurer que c'est le premier layout à apparaître (autrement Construct 2 pourrait choisir un layout différent pour le chargement).
Afficher l’avancement
L'expression système loadingprogress retourne une nombre entre 0 et 1 pour l'avancement du chargement du projet. Par exemple, si le projet est à moitié chargé, loadingprogress vaudra 0,5. Vous pouvez utiliser cela pour afficher la progression sur le layout de chargement.
Par exemple, pour afficher le pourcentage de chargement en tant que texte, vous pourriez définir le texte d'un objet texte à :
round(loadingprogress[] 100) & "%"*
Cela multiplie l'avancement par 100 pour le transformer en pourcentage, arrondit le résultat et ajoute le caractère "pourcent", résultant en texte comme "50%".
Les objets Arrière Plan de Tuiles font également de bonnes barres de progression. Par exemple si vous avez un Arrière Plan de Tuiles de 500 pixels de large lorsque rempli, chaque itération modifie sa largeur en :
500 [] loadingprogress*
Cela résultera en la barre de chargement se remplissant jusqu'à la largeur maximale de 500 pixels conformément à l'avancement du chargement du Projet.
Il est essentiel de montrer un retour sur l'avancement du chargement. Autrement les utilisateurs avec une connexion lente pourraient être frustrés, n'ayant aucune idée de combien de temps ils devront encore attendre avant de pouvoir jouer, et quitteront. Cela serait dommage s'ils quittaient quelques secondes avant que le jeu ne soit chargé parce que vous n'avez montré aucun retour d'avancement.d'autres animations ou effets, par exemple des sabliers, roues de chargement, etc.
Précautions
Souvenez vous que les images de chaque objet dans le layout de chargement doivent finir d'être complètement chargées avant que le layout de chargement lui-même ne s'affiche. Si vous placez votre objet Joueur avec dix animations dans l'écran de chargement, toutes les dix animations devront finir de charger avec que le chargement par défaut ne se change en le layout de chargement. Si vous voulez uniquement afficher une icone du joueur, pensez à faire un objet séparer pour le layout de chargement avec seulement une des images du joueur.
Considérez avec attention chaque objet que vous placez sur le layout de chargement, ainsi que toutes ses animations. Sont-elles toutes nécessaires ? Rappellez vous que seuls les objets avec des images vont ralentir l'affichage du layout de chargement, faites alors attention à chaque Sprite et Arrière Plan de Tuiles que vous utilisez, surtout si l'un d'entre eux possède de longues animations. Idéalement vous voulez que votre layout de chargement s'affiche aussi vite que possible.
Limitations
Notez quelques limitations en ce qui concerne l'utilisation des layouts de chargement :
1. Les layouts de chargement ne sont pas affichés dans le cas de la publication en tant qu'application native sur mobile (par exemple via PhoneGap, CocoonJS et appMobi). C'est parce que l'application intégrale est téléchargée en une fois. Etant donné que tous les fichiers sont immédiatement disponibles sur l'appareil, il n'y a pas besoin de télécharger quoi que ce soit. Pour ces plateformes, vous voudrez probablement vous concentrez sur une image splash personnalisée à la place.
2. Les layouts de chargement sont seulement affichés la première fois que le jeu est téléchargé
3. Sur les layouts de chargement, vous ne pouvez pas créer ou spawner des objets qui ne sont pas sur le layout de chargement, vous ne pouvez pas non plus changer de layout tant que le chargement n'est pas terminé. C'est évidemment parce que le reste du projet n'est pas encore chargé.
4. Rappelez vous que le chargement par défaut est toujours affiché pendant que le layout de chargement est lui même en train de se charger.
Complétion du chargement
Une fois que le chargement est terminé, loadingprogress vaudra 1. Aussi, le déclencheur système On loader layout complete s'active (dans la catégorie Start & end). Vous pouvez utiliser cet événement pour afficher un bouton "Jouer", passer à un menu principal, ou simplement démarrer le jeu.
Changer le chargement par défaut
Le Style du chargement modifie le chargement par défaut pour le projet. Il est toujours affiché quand le layout de chargement est lui-même en train de changer, ou est seulement la barre de progression quand aucun layout de chargement n'est utilisé. Les quatre styles sont :
Barre de progression et logo (par défaut) : affiche un logo et une barre de progression bleue. Vous pouvez modifier le logo en remplaçant le fichier logo.png dans le dossier d'exportation après avoir exporté le projet. Assurez vous que le ficher est aussi léger que possible de façon à ce qu'il s'affiche rapidement - le logo HTML5 par défaut pèse seulement 1kb ! La barre de progression est élargie à la largeur du fichier logo.png et se positionne 12 pixels en dessous de ce dernier.
Barre de progression seulement : idem que précédemment, mais le fichier logo.png n'est ni chargé ni affiché.
Texte de pourcentage : au lieu d'une barre de progression, du texte en gris indiquant le pourcentage d'avancement du chargement est affiché.
Aucun style (non recommandé) : affichera simplement un écran vierge pendant le chargement. Cela n'est pas recommandé même avec un layout de chargement, étant donné que les utilisateurs avec une connexion lente ne verront aucun retour pendant que le layout de chargement se charge. Il est fortement recommandé d'utiliser au minimum le style Texte de pourcentage.
Mises-à-jour
Comme décrit ci-dessus, le layout de chargement ne s'affiche qu'au premier chargement. Même si vous mettez-à-jour le jeu, il démarrera immédiatement et commencera à se mettre à jour en arrière-plan la prochaine fois qu'il sera joué, comme indiqué dans le tutoriel Jeux hors-ligne dans Construct 2.
Vous pouvez détecter cet événement en utilisant les conditions suivantes dans l'Objet Navigateur :
Télécharge une mise-à-jour : Vrai lorsque votre jeu est en cours d'exécution et que vous avez chargé un nouvelle version et que le navigateur est en train de la télécharger en arrière-plan.
Lors d'une mise-à-jour prête : s'enclenche lorsqu'une mise à jour a terminé de se télécharger. La nouvelle version ne sera pas utilisé jusqu'à ce que la page soit rafraîchie, vous pourriez donc vouloir proposer à l'utilisateur de le faire ou d'utiliser l'action Recharger de l'objet Navigateur.
Aussi, lorsque En train de télécharger une mise-à-jour est vrai, loadingprogress indiquera là encore l'avancement du téléchargement de la mise-à-jour.
En utilisant ces fonctionnalités vous pouvez réutiliser votre layout de chargement en tant que layout de mise-à-jour. Cependant, lorsque la mise-à-jour se termine, n'oubliez pas de rafraîchir au lieu de démarrer le jeu. Alternativement, vous n'avez pas besoin de gérer ces événements et pouvez juste laissez les mises-à-jour se produire automatiquement et silencieusement.
Conclusion
Créer un layour de chargement est une manière très intéressante de procurer une très bonne première impression à partir du moment où le jeu commence à charger. Rappelez vous seulement de toujours afficher une sorte de retour de l'avancement du chargement, et essayer d'utiliser le moins d'images possibles sur le layout de chargement.