Partie 4 : Créer votre personnage

Dans Partie 3, vous avez appris à créer votre premier niveau. Dans ce tutoriel, nous allons commencer à transformer notre niveau vide en un jeu.

Un plateforme est un jeu comme Mario. Typiquement, les plateformes ont un personnage qui peut être contrôlé par un joystick et qui peut sauter pour résoudre divers puzzles.

Cette partie du guide s'appuie sur Partie 3 et suppose que vous avez déjà créé votre niveau en utilisant les ressources du Pack de Démarrage Plateforme, que vous pouvez télécharger depuis la Boutique d'Assets.

Ajouter le Joueur :

Vous devez d'abord ajouter votre graphique de joueur au dock d'objets. Commencez par naviguer dans le dossier Téléchargements de la Bibliothèque d'Assets et localisez le personnage animé Green Space Man.

Taper sur le personnage animé dans la Bibliothèque d'Assets vous montrera tous les cycles d'animation disponibles.

Comme nous ne voulons pas que le joueur ait l'air de marcher même s'il est immobile, nous utiliserons le cycle d'animation "Stand". Appuyez sur le cycle d'animation "Stand" pour l'ajouter au dock.

Remarque : Si le graphique animé que vous utilisez n'a pas de cycle de stand ou d'inactivité, vous pouvez toujours sélectionner une seule image d'une animation en maintenant votre doigt sur le cycle d'animation et en sélectionnant "Voir les images" dans le menu d'Assets.

Maintenant que vous avez votre personnage sur le dock d'objets, vous pouvez simplement le faire glisser hors du dock et dans votre scène.

Déplacer le Joueur :

Nous devons maintenant donner vie au personnage et le rendre déplaçable avec un joystick. hyperPad rend ce processus vraiment simple avec les comportements inclus.

Commencez par ouvrir les Propriétés de l'Objet en tapant sur le personnage que vous venez de glisser sur le canevas.

Depuis l'onglet "Physique" des Propriétés de l'Objet, faites de votre personnage un "Type Physique" en appuyant sur l'icône d'objet physique ( ) juste en dessous du bouton "Comportements".

Remarque : les objets physiques respecteront les lois de la gravité et réagiront aux autres objets et forces.

Ensuite, appuyez sur le bouton Comportements pour ouvrir l'éditeur de comportement et commencer le processus qui rendra votre personnage jouable.

L'éditeur de comportement a plusieurs catégories affichées le long de la barre du haut, et des comportements sur la liste à gauche.

Puisque vous avez ajouté un cycle d'animation, un comportement "Jouer Animation" est déjà ajouté sur le canevas de comportement.

Depuis la catégorie "interaction", faites glisser le comportement "Contrôlé par Joystick" sur votre canevas.

Dès que ce comportement est ajouté, il créera également automatiquement et ajoutera un joystick à votre couche GLOBAL UI. Si vous aviez déjà un joystick ajouté à votre couche UI, le comportement utilisera automatiquement celui-ci au lieu d'en ajouter un pour vous.

À ce stade, vous pouvez appuyer sur play et exécuter votre jeu ! Vous remarquerez cependant que le joueur glisse simplement sur l'écran...

Animations :

Améliorons un peu le jeu en ajoutant des animations à notre joueur.

Nous allons commencer par faire marcher le personnage en déplaçant le joystick vers la gauche ou la droite.

Pour ce faire, vous devez consulter les comportements d'interaction "avancés". Pendant que vous êtes dans la catégorie "Interaction", appuyez sur l'option "Avancé" en bas de la liste des comportements.

Dans la liste "avancée", ajoutez "Joystick Gauche" et "Joystick Droit" au canevas.

Ensuite, depuis la catégorie "FX", ajoutez le comportement "Jouer Animation" et connectez les Joystick Gauche et Droit à cette nouvelle "Jouer Animation".

Appuyez maintenant sur le comportement "Jouer Animation" pour afficher les Propriétés du Comportement.

La première case en haut est l'objet auquel vous souhaitez appliquer l'animation. hyperPad sélectionne automatiquement l'objet actuel.

Remarque : vous pouvez appuyer ici et sélectionner n'importe quel autre objet de votre scène si vous le souhaitez. Nous ne voulons pas faire cela pour l'instant, donc nous allons laisser ça tel quel.

La case ci-dessous représente l'animation que vous souhaitez jouer. Comme il n'y a pas d'animation à jouer, elle est vide.

Appuyez sur la case vide pour sélectionner une animation.

Remarquez qu'une bande de film apparaît en bas de l'écran. Appuyez sur l'icône Bibliothèque d'Assets pour ajouter un cycle d'animation à la bande de film.

Naviguez vers le personnage animé "Green Spaceman" et sélectionnez le cycle "Walk". Remarquez que chaque image de l'animation a été automatiquement ajoutée à la bande de film. Appuyez n'importe où pour fermer la bande de film et revenir aux propriétés.

Remarque : vous pouvez également ajouter des images individuelles ou des images d'animation à la bande de film d'animation. Vous n'êtes pas seulement limité à des cycles d'animation pré-créés.

Ensuite, dans les propriétés du comportement d'animation de marche, désactivez le commutateur pour "Boucle Animation". Nous voulons que ce commutateur soit désactivé car les Joystick Gauche et Droit bouclent essentiellement notre animation pour nous puisque l'animation ne se produira que pendant que le joystick est à gauche ou à droite.

Enfin, renommez ce comportement pour le rendre plus facile à trouver plus tard. À partir des propriétés du comportement, appuyez sur le nom du comportement tout en haut. Cela fera apparaître un clavier et vous permettra de taper un nouveau nom pour le comportement. Appelons-le "Animation de Marche".

Si vous appuyez sur play maintenant, votre personnage devrait se déplacer avec le joystick et être animé !

Sauter :

Vous ne pouvez pas avoir un jeu de plateforme sans saut ! Faire sauter le joueur est un jeu d'enfant dans hyperPad.

Tant que vous êtes encore dans l'éditeur de comportement du Green Spaceman, appuyez sur la catégorie "Interaction", et depuis la liste des comportements à gauche, faites glisser le comportement "Sauter avec un Bouton". Tout comme le comportement Contrôlé par Joystick, le saut avec bouton gérera également une grande partie des mouvements de vos objets pour vous, et ajoutera automatiquement un bouton à la couche Global UI.

Vous pouvez appuyer sur le comportement de saut pour voir ses propriétés. Depuis les propriétés du comportement de saut, vous pouvez changer des paramètres comme le son à jouer, la puissance des sauts, et plus encore. Pour ce tutoriel, nous allons laisser tout tel quel, sauf que nous allons changer la puissance.

J'ai dû mettre la puissance à 18 pour pouvoir sauter au-dessus de tous les obstacles dans le niveau créé pour la Partie 3. Si vous avez conçu votre propre niveau, vous devez peut-être jouer avec la valeur de saut jusqu'à ce que ça fonctionne pour vous.

Si vous appuyez sur play maintenant, vous pouvez voir votre joueur courir et sauter. Cependant, vous avez peut-être remarqué que le personnage continue de marcher pendant qu'il saute dans les airs... Corrigeons cela !

Commençons par jouer une animation pendant que vous sautez.

Depuis la catégorie "Interaction", ajoutez un comportement "Commencé à Toucher", puis appuyez sur le comportement que vous venez d'ajouter pour voir les propriétés.

Nous devons maintenant changer le comportement pour qu'il ne fonctionne que lorsque vous commencez à toucher le bouton de saut. Dans les propriétés du comportement "Commencé à Toucher", appuyez sur le graphique du spaceman dans la boîte du haut.

Cela vous amène à l'écran du "Sélecteur d'Objet". D'ici, vous pouvez sélectionner n'importe quel objet ou élément d'UI dans votre scène. Vous ne pouvez probablement pas sélectionner le bouton. C'est parce que le Green Spaceman était sur la Couche Principale, et le bouton est sur la Couche Global UI. Dans la barre des couches sur le côté droit de l'écran, tapez simplement sur la Couche Global UI. Maintenant vous pouvez sélectionner le bouton.

Avec le bouton sélectionné, appuyez sur l'icône d'acceptation en bas.

Enfin, ajoutez un autre comportement "Jouer Animation" et connectez-le au comportement "Commencé à Toucher" que nous avons ajouté précédemment.

Tout comme vous l'avez fait plus tôt, vous pouvez renommer le comportement et sélectionner une animation à partir des Propriétés du Comportement.

Pour renommer, appuyez sur le titre du comportement dans les propriétés de l'objet et entrez un nouveau nom. J'ai utilisé "Animation de Saut".

Comme vous l'avez fait pour l'animation de marche, vous devez également sélectionner un cycle pour le saut. Appuyez sur la deuxième case vide dans les propriétés du comportement et sélectionnez le cycle d'animation Saut parmi les animations du Green Spaceman disponibles.

Vous devrez également désactiver le commutateur "Boucle Animation" et le commutateur "Restaurer Image".

Si vous appuyez sur play maintenant, vous pouvez voir que lorsque vous sautez, le personnage semble sauter ! Cependant, il y a encore 2 petits problèmes.

1. Le personnage ne revient pas à son animation de standby lorsqu'il atterrit

2. Si vous déplacez le personnage pendant qu'il est dans les airs, le personnage joue l'animation de marche dans les airs.

Pour le premier problème, passez à la catégorie de comportement "Transformer" et appuyez sur le bouton avancé pour voir les comportements avancés.

Faites maintenant glisser le comportement "Arrêt de la Chute" et faites également glisser un autre comportement "Jouer Animation" depuis la catégorie FX et connectez-le à l'" Arrêt de la Chute".

Dans le "Jouer Animation" que vous venez d'ajouter, sélectionnez le cycle d'animation "Stand" du Green Spaceman, désactivez les commutateurs "Restaurer Image" et "Boucle Animation", et changez le nom du comportement "Jouer Animation" en "Stand".

Le Green Spaceman devrait maintenant pouvoir sauter et avoir l'apparence d'être debout lorsqu'il atterrit.

Pour le deuxième problème, nous devons arrêter l'animation de s'exécuter pendant que le personnage saute.

Passez à la catégorie de comportement "Personnalisé" et faites glisser "Comportement Éteint", puis connectez-le au comportement "Commencé à Toucher" que nous avons ajouté précédemment pour l'Animation de Saut.

Appuyez maintenant sur le "Comportement Éteint" et appuyez sur la case vide pour sélectionner un comportement dans la liste. Dans la liste, localisez le comportement "Jouer Animation" (Animation de Marche) qui est connecté aux comportements de Joystick gauche et droit.

Ensuite, ajoutez un "Comportement Allumé" et connectez-le au comportement "Arrêt de la Chute" que nous avons ajouté précédemment.

Encore une fois, appuyez sur la case vide et sélectionnez le comportement "Jouer Animation" (Animation de Marche) qui joue l'animation de marche.

Si vous appuyez sur play maintenant, votre personnage devrait pouvoir se déplacer et sauter parfaitement !

Déplacer l'Écran :

Comme vous l'avez probablement remarqué, si vous allez trop loin, le personnage sort de l'écran. Dans les jeux de plateforme traditionnels, l'écran se déplace généralement avec votre joueur. Prenez Mario par exemple, Mario reste toujours au centre de l'écran (avec un peu de variance).

Faisons en sorte que l'écran se déplace avec le Green Spaceman, pour qu'il ne puisse jamais sortir de l'écran.

Toujours dans les comportements du Green Spaceman, passez à la catégorie "Écran" et ajoutez le comportement "Suivre l'Écran". Le comportement "Suivre l'Écran" déplacera l'écran avec votre objet sélectionné.

Ensuite, ouvrez les propriétés du comportement Suivre l'Écran et désactivez le commutateur pour "Suit Y". Cela permet à l'écran de suivre votre joueur à gauche ou à droite, mais pas vers le haut ou vers le bas.

À ce stade, si vous appuyez sur play, vous devriez pouvoir courir à travers votre niveau avec un personnage animé et avoir l'écran se déplacer avec vous.

Vous pouvez télécharger la version terminée de la Partie 4 depuis le Hub et tout voir en action.

Dans la Partie 5, nous allons commencer à ajouter un peu plus d'éléments de jeu en ajoutant des pièces à ramasser et un score.