Je code, tu codes… vous codez ? #3

Création, animation et déplacement du personnage du jeu

Bonjour à toutes et à tous, et bienvenue dans cette nouvelle série d’articles qui traitera – en long, large et autres travers – de la programmation, et puisque nous sommes sur Cleek, nous parlerons bien entendu ici de l’art geek dans toute sa splendeur : le jeu vidéo et les étapes nécessaires pour créer le vôtre de A à Z !

Non, non, ne fuyez pas tout de suite, rassurez-vous, le développement de logiciels n’est en aucun cas, contrairement à certaines idées reçues, une affaire d’intellos reclus et monomaniaques ! En effet, quelques cuillères à soupe de logique, une ou deux onces de patience ainsi que quelques grammes de curiosité sont les seuls ingrédients requis pour développer la base d’un jeu vidéo.

Après les deux premiers numéros orientés sur les points de théorie basique de programmation (les variables, boucles et conditions, puis les notions d’objets), nous allons enfin aborder la pratique ! Cette semaine, Cleek vous accompagne dans les débuts de l’élaboration d’un shooter horizontal dans lequel le joueur incarnera le « Nyan-cat » (oui, souvenez-vous, le chat pixel-art propulsé par un arc-en-ciel et accompagné d’une musique à rendre fou !) qui tiendra lieu de vaisseau, comme dans les jeux de tirs traditionnels.

Notre premier jeu sera donc en deux dimensions : le joueur contrôlera le Nyan-cat sur l’axe vertical et devra parcourir les différents niveaux en massacrant tous les ennemis se présentant à l’écran. Côté réalisation, vous pouvez soit utiliser les ressources créées pour ce tutoriel (disponibles ici), soit fabriquer les vôtres de toute pièce, en tenant compte du cahier des charges suivant :

• le personnage principal est composé d’une ou plusieurs images (selon si vous souhaitez un héros avec ou sans animations), de simples .png ou .bmp feront l’affaire.
• les ennemis sont de simples vaisseaux, sans animation, à l’exception des boss pour lesquels nous chercherons des idées un peu plus farfelues !
• le fond d’écran est une image en bonne résolution (dans le cas des ressources utilisées par le jeu, une série de wallpapers sur le thème de l’espace).
• quelques éléments dynamiques, comme des astéroïdes, sont une plus-value graphique non négligeable.

[divider]Une bonne organisation[/divider]

La première chose importante lorsque vous commencez un projet sur Unity (ou pour n’importe quel projet de programmation) est de bien organiser ses fichiers et ressources pour mieux s’y retrouver. Lancez donc Unity, et ouvrez le projet créé dans le précédent numéro, ou créez en un nouveau en respectant les mêmes consignes. Une fois que votre projet (vide pour l’instant) est affiché dans votre IDE favori, concentrez vous sur la fenêtre « Project » et suivez les étapes suivantes :

• cliquez sur « Assets » dans la partie gauche de la fenêtre : cela vous place sur le répertoire « Assets » de votre projet. Ce dossier contient en fait toutes les ressources de votre futur jeu, et nous allons donc créer quelques dossiers pour trier le tout !
• faites un clic droit dans la partie droite de la fenêtre Project, puis dans le menu contextuel, sélectionnez l’option « Create », puis « Folder » : un nouveau dossier apparaît alors. Donnez lui le nom « sprites »
• refaites la manipulation pour créer les dossiers « background », « scenes » et « scripts »

Votre fenêtre Project devrait donc ressembler à ceci :

Chaque dossier aura une utilité particulière : « sprites » contiendra toutes les images mobiles du jeu (le joueur, les ennemis, projectiles et autres astéroïdes), « background », les plans fixes du fond d’écran, des images de grande taille, « scenes », les différents niveaux de votre jeu, et « scripts », comme son nom l’indique, sera l’antre de vos pages de code ! Placez donc vos ressources par glisser-déposer depuis votre dossier de téléchargement dans chacun des dossiers nouvellement créés.

[divider]Let’s Begin ![/divider]

Dans la fenêtre Project, ouvrez le dossier background, choisissez une des images de fond et déposez la dans la fenêtre Hierarchy juste en dessous de l’objet « Main Camera ». Votre écran devrait ressembler à ceci :

Vous avez créé votre premier objet dans Unity (une simple image, mais il faut bien débuter) ! Les détails de l’objet sont désormais visibles dans la partie Inspector de Unity : jetons un coup d’œil à ces caractéristiques :

• Le nom de votre objet (« space-wallpapers-15 » dans notre cas) suivi des mentions « Tag » et « Layer ».
• Une série de propriétés réunies dans un onglet « Transform » : ces propriétés concernent la position de l’image, sa rotation ainsi que son échelle (« Scale »).
• Un onglet « Sprite Renderer » qui contient les informations de l’image (quelle image s’affiche, la couleur et d’autres choses qui ne nous intéressent pas pour l’instant).

La seule chose à faire pour en finir avec le fond de notre jeu, c’est de modifier la position de l’image sur l’axe Z (la profondeur). Ainsi, dans la partie Inspector, onglet Transform, modifiez la position à la case Z et inscrivez la valeur 10 (par défaut elle sera à 0). Cela aura pour effet de « reculer » votre fond d’écran afin de laisser la place entre ce dernier et la caméra (la vue du joueur) pour placer d’autres éléments, qui ne seront ainsi pas cachés par votre fond !

Bien que nous travaillons sur un projet 2D, Unity fonctionne quand même en trois dimensions afin de déplacer les différentes couches de notre jeu 2D les unes au dessus des autres, un peu comme si vous utilisiez les calques de Photoshop ! Le point de vue du joueur (c’est-à-dire ce qui s’affiche sur son écran) est représenté par l’objet « Main Camera », positionnée par défaut en -10 sur l’axe Z, en  sachant que le « regard » de cette caméra se dirige vers 0. Pour illustrer cela, nous pouvons basculer la fenêtre « Scene » en vue en trois dimensions (en cliquant sur le bouton « 2D » dans la barre d’outils de cette fenêtre) et dézoomer un peu :

Reprenons notre vue en 2D. Nous allons maintenant créer l’objet qui représentera notre joueur ! Ouvrez votre dossier « sprites » qui ne contient pour l’instant que deux images de Nyan-Cat, sélectionnez la première et glissez-la dans Hierarchy comme vous l’avez fait pour le fond. Renommez votre nouvel objet en « NyanCat » dans l’Inspector. Vous voyez désormais notre chat (si on peut le considérer comme tel) à l’écran ! Notre prochaine étape est de lui attribuer une animation, afin de lui ajouter un peu de vie !

Dans le menu de Unity, cliquez sur Windows, puis sur « Animation » : une nouvelle fenêtre s’ouvre, la bien-nommée… Animation ! et vous pouvez ranger cette nouvelle fenêtre où bon vous semble parmi ses sœurs.

Cliquez sur le petit rond rouge de cette nouvelle fenêtre afin de créer une nouvelle animation : votre explorer s’ouvre et vous pouvez retrouver tous les dossiers de votre projet (sprites, scenes, background…) ! Seul problème : nous ne disposons pas encore de dossier pour ranger nos animations ! La solution est vite trouvée, créons rapidement ce nouveau dossier au même endroit que les autres et nommons le « animations » pour rester logiques.

Toujours dans l’explorer, ouvrez ce nouveau dossier (qui sera vide – c’est normal) et saisissez le nom « IdleNyan » pour notre nouvelle animation, avant de valider le tout en cliquant sur le bouton « Enregistrer ».

Nota Bene : « idle » peut vous paraître un terme un peu barbare, mais en programmation, et plus particulièrement quant il s’agit de jeux vidéo, ce mot désigne en fait l’état de « repos » pour un personnage. L’animation par défaut (au repos donc) est alors souvent nommée de cette manière.

Retournez dans Project, dossier sprites, sélectionnez les deux images du NyanCat et déposez-les dans la fenêtre Animation. Ces deux images s’alterneront pour que l’arc-en-ciel qui suit le chat soit un peu moins statique et que notre bestiole remue de la queue (il fallait bien trouver un petit quelque chose à animer !). Vous pouvez régler le délai entre ces deux images en modifiant la valeur « Sample » (par défaut à 60) et en la mettant à 10 par exemple. Vous pouvez ensuite tester l’animation en utilisant le bouton doté d’un symbole « Play », et une fois satisfait, terminer la création de notre première animation en cliquant à nouveau sur le bouton en forme de rond rouge.

Avant la prochaine étape, vous pouvez sélectionner notre objet NyanCat et le déplacer (soit à l’aide de la flèche jaune sur la fenêtre Scene, soit directement dans l’Inspector en modifiant la valeur X de la position) de manière à ce que l’extrémité gauche de l’arc-en-ciel sorte très légèrement de l’écran.

[divider]La verticalité des choses[/divider]

Notre dernier point pour ce numéro sera de donner au joueur la possibilité de déplacer NyanCat de haut en bas (comme dans Pong !). Pour faire cela, nous allons créer notre premier script (dans Project, ouvrez le dossier scripts, faites un clic droit puis Create > C# script) et nommez le « MoveNyan ». Double-cliquez dessus, Unity va automatiquement ouvrir un nouvel outil, « MonoDevelop » qui sera votre serviteur dès qu’il faudra bidouiller du code !

Dans le dossier de ressources qui contient les images du tutoriel est aussi disponible le script C# au format texte. Vous pouvez le copier dans votre script et nous allons voir ensemble les points importants de ce morceau de code.

• les lignes précédées d’un double slash « // » sont des commentaires dont le but est d’expliquer au mieux les lignes de code. Ces commentaires ne sont pas pris en compte au moment de la compilation (quand le jeu traduit le code pour en faire un programme fonctionnel).
• les variables et objets se déclarent juste après la ligne « public class MoveNyan : MonoBehaviour { » qui représente le début de notre script.
• chaque variable ou objet est déclaré de la manière suivante : la portée (public ou private le plus souvent), le type (int, float), le nom de la variable ou de l’objet puis éventuellement sa valeur (après le signe « = »).
• l’objet Vector3 (dont la description officielle se trouve ici) est un ensemble de 3 valeurs numériques qui désignent les axes X, Y et Z, représentant respectivement l’axe horizontal, l’axe vertical et la profondeur.
• chaque ligne de code DOIT se terminer par le symbole « ; ».
• « this.gameObject » appelle l’objet dans Unity auquel est associé le script, dans notre cas, nous allons associer le script à notre NyanCat.
• le gros du code se trouve dans la fonction « void Update » (nous verrons plus en détail de quoi il retourne quand nous parlons de fonctions, retenez juste pour l’instant qu’une fonction est un morceau de code auquel on attribue un nom, ici, « Update »).

Ne paniquez pas ! Le but n’est pas que vous compreniez toutes ces instructions, mais que vous ayez une idée globale de l’agencement d’un script, et tout au long des numéros de ce tutoriel, à force d’exemples tout faits et d’explications de plus en plus précises, la compréhension viendra d’elle-même !

Ce qu’il faut savoir sur la fonction « Update », créée par défaut dès que vous faites un nouveau script dans Unity, est que le code qui se trouve à l’intérieur va s’exécuter à chaque « frame » ou plus simplement, si votre ordinateur affiche 60 images par seconde, 60 fois par seconde !

La partie la plus compliquée à aborder dans ce code réside dans la portion suivante :

speed * Time.deltaTime * Input.GetAxis (« Vertical »);

Détaillons un peu tout ça :

• « speed » est notre variable de vitesse (dont la valeur est de 5 dans l’exemple)
• « Time.deltaTime » est un multiplicateur à ajouter au calcul (notion un peu compliquée pour l’instant, liée au fait de faire un déplacement dans la fonction Update)
• « Input.GetAxis (« Vertical ») » capture les touches du clavier haut et bas et renvoie 1 ou -1 selon laquelle est enfoncée, passant l’ensemble de la ligne du positif au négatif !

Une fois que le code est copié dans votre script, sauvegardez ce dernier (Ctrl + S ou File > Save dans MonoDevelop), puis retournez dans Unity. La dernière chose à faire est d’associer notre script MoveNyan à notre NyanCat, simplement en déposant le script depuis la fenêtre Project jusqu’à notre NyanCat. Voilà, votre NyanCat, en plus de remuer la queue et l’arc-en-ciel en rythme, se déplace verticalement si vous appuyez sur les touches haut et bas de votre clavier.

Au programme de la semaine prochaine, nous allons fignoler la fonction de déplacement afin que NyanCat ne sorte plus de l’écran, puis apprendre à créer des projectiles et associer ces derniers à notre animal sauvage qui n’en deviendra que plus meurtrier !