Créer un affichage tête haute (heads-up display (HUD))
Un affichage tête haute (aussi appelé HUD en anglais) est l'interface qui montre la vie (health) du joueur son score et d'autres informations en jeu. Créons un HUD très simple à l'aide de l'objet "text".
Le HUD reste toujours à la même place à l'écran. Si nous avons quelques objets d'interface, nous ne voulons pas qu'ils "scrollent" à mesure que le joueur (Player) se déplace, ils devraient plutôt rester à l'écran en permanence. Par défaut les layers "défilent" (scroll). Pour les garder à l'écran, nous pouvons utiliser le réglage Parallax des layers. Le parallaxe permet aux différents layers de "scroller" à différentes vitesses les uns par rapport aux autres dans un effet de pseudo 3D. Si nous mettons le parallaxe d'un layer à 0, le layer ne glissera pas du tout, idéal pour un HUD.
Retournez à la barre de couches (layers) que nous avons utilisé précédemment. Ajoutez un nouveau layer nommé HUD. Assurez-vous qu'il soit au niveau supérieur (en premier dans la liste) et qu'il soit sélectionné (souvenez-vous cela active le layer). La barre des propriétés devrait afficher ses propriétés. Fixez la valeur de la propriété Parallax à 0, 0 (0 sur l'axe des X et des Y).
Double-cliquez un espace du layout pour insérer un nouvel objet. Cette fois-ci sélectionnez l'objet Text (texte). Placez le dans le coin supérieur gauche de votre layout. Cela sera difficile à voir si le fond est noir, donc dans la barre des propriétés rendez l'objet en gras (bold), italique (italic), de couleur jaune et choisissez une taille un peu supérieure pour la police. Redimensionnez l'objet de manière assez large pour qu'il puisse afficher tout le texte. Cela devrait ressembler à quelque chose comme ça:
Retournez à la feuille d’événements. Faisons en sorte de mettre à jour le contenu de l'objet "Text" avec le score du joueur. Dans l’événement Every tick (toutes les ticks) que nous avons ajouté précédemment, ajoutez une action Text -> Set text (définir le texte).
En utilisant l'opérateur & vous pouvez convertir un nombre en du texte et l'adjoindre à un autre bout de texte. Pour la valeur "Text" entrez:
"Score: " & Score
La première partie ("Score: ") veut dire que le texte affiché commencera toujours avec les mots Score:. La seconde partie (Score) est la valeur de la variable globale (global variable) "Score". Le & "joint" les deux parties en une seule et même ligne de texte.
Exécutez le jeu et tirez sur des monstres. Votre score apparaît et reste à la même position à l'écran malgré vos déplacements !
Finitions
Nous avons presque fini. Ajoutons les dernières touches à notre jeu.
Tout d'abord, faisons en sorte d'avoir des monstres qui "spawnent" (apparaissent spontanément) de manière régulière autrement une fois que vous aurez tués tous les monstres créés dans l'éditeur, il n'y aura plus rien à faire. Nous allons créer un nouveau monstre toutes les 3 secondes. Ajoutez un nouvel événement:
Condition: System -> Every X seconds -> 3
Action: System -> Create object -> Monster, layer 1, 1400 (for X), random(1024) (for Y)
1400 est une coordonnée X juste à la droite du bord du layout et random(1024) est une coordonnée Y aléatoire qui est comprise entre zéro et la hauteur du layout (height).
Enfin, faisons en sorte que les monstres tuent le joueur.
Condition: Monster -> On collision with another object -> Player
Action: Player -> Destroy
Conclusion
Félicitations, vous avez fait votre premier jeu en HTML5 avec Construct 2 ! Si vous avez un serveur et que vous désirez montrez votre travail, cliquez sur Export (exporter) dans le menu File (fichier). Construct peut enregistrer tous les fichiers du projet dans un dossier de votre ordinateur que vous pouvez ensuite télécharger (upload) vers un serveur et/ou intégrer à une page web. Si vous n'avez pas de serveur disponible, vous pouvez partager votre jeu avec Dropbox.
Vous avez appris des bases essentielles à propos de Construct 2: insérer des objets, utiliser les layers, les behaviors, les événements et plus encore. Espérons que ce tutoriel vous a bien préparé à apprendre plus de Construct 2 ! Essayez d'explorer ses fonctionnalités et voir ce qu'il peut faire pour vous.
Le truc finit
Essayez de télécharger le projet tutoriel complet. J'ai (ndt: Ashley) ajouté des fonctionnalités en plus telles qu'un texte "Game Over" et des monstres qui vont de plus en plus vite à mesure que le temps passe. Sachant ce que vous savez maintenant, il ne devrait pas être trop difficile de deviner comment cela fonctionne. Il y a aussi beaucoup de commentaires (en anglais) qui décrivent le fonctionnement du jeu.
Bien joué ! Si vous avez le moindre problème ou si vous pensez que certaines parties du tutoriel pourraient être améliorées, laissez un commentaire ou un message dans les forums. Et montrez nous de quoi vous êtes capables !
Enfin, si vous avez aimé ce tutoriel et pensez que l'une de vos connaissances pourraient aussi apprécier Construct 2, pourquoi ne pas lui envoyer le lien ? Cela ne peut faire de mal à personne :)
Encore plus de lecture
Vous voulez ajouter de la musique et des effets sonores ? Allez lire Sounds & Music dans le manuel pour un aperçu rapide.
Vous pouvez être intéressés par le guide du débutant alternatif basé sur les jeux de plateforme: How to make a platform game .
Si vous voulez en apprendre plus à propos de comment fonctionnent les événements dans Construct 2 assurez vous de lire la section How Events Work dans le manuel.
C'est fortement recommandé afin de vous permettre à créer rapidement vos propres projets !
Et pour encore plus d'informations, n'oubliez pas la documentation complète dans le manuel
http://peruserpaid.com/?ref=79385