Créer une scène enfant et un sol pour le jeu avec Godot

Il est possible de créer une nouvelle scène enfant à partir de n’importe quelle scène que vous avez créée. Donc, pour ce faire, allez simplement dans Scène/Nouvelle scène héritée… et choisissez la scène que vous voulez comme scène parente.

Enregistrez ensuite cette scène sous un nouveau nom.

Jusqu’à présent, nous avons appris plusieurs concepts avec le moteur de jeu Godot en créant notre scène de menu.

Mais vous avez sûrement hâte de jouer. Pour cette partie du didacticiel, nous aurons besoin de ressources graphiques supplémentaires, toujours bien organisées dans leurs répertoires de ressources :

resources/images/bg/0.png

resources/images/gui/fx.png

La scène du jeu

La première chose que nous allons faire est de créer une nouvelle scène. Pour cela, utilisez le menu Scène/Nouvelle scène. Choisissez Scène 2D et renommez le nœud racine de cette scène en Play.

Ensuite, ajoutez-y un nœud TextureRect, renommez-le Background, et définissez le fichier resources/images/bg/0.png comme texture. Enregistrez avec Ctrl + S, et enregistrez la scène avec le nom qu’elle propose : Play.tscn.

Comme vous le savez déjà, vous pouvez exécuter le jeu avec F5. Ce qui lancera la scène principale. Mais vous pouvez également lancer la scène actuelle avec F6. Si vous l’essayez maintenant, vous verrez qu’un écran s’ouvre contenant l’image de fond que nous avons définie.

Créer un sol pour la scène

Nous allons maintenant ajouter une pièce de base à ce jeu : le sol. Le sol joue un rôle fondamental. Par exemple, il faut détecter la collision des bulles avec le sol pour rebondir, ou lorsqu’elles tombent elles doivent reposer sur le sol.

L’un des avantages de l’utilisation de Godot est qu’il résout pour vous de nombreux problèmes complexes (et très courants) dans les jeux. Et l’un d’eux est la détection et la gestion des collisions. Comment savoir qu’un élément en a touché un autre ? Comment empêcher les objets de se croiser lors d’un déplacement ? En fait, tout cela peut être programmé à partir de zéro, ou nous pouvons nous épargner beaucoup de travail fastidieux et laisser Godot le faire pour nous.

Donc, nous allons utiliser un nouveau type de nœud Godot appelé KinematicBody2D. C’est un élément statique (non affecté par des choses comme la gravité), qui peut interagir (entrer en collision) avec d’autres éléments.

La première étape consiste donc à ajouter un nœud enfant de type KinematicBody2D à Play et à le renommer en Floor.

Le sol doit être en bas de l’écran, nous allons laisser de la place pour les commandes. Donc, dans l’inspecteur, définissez la propriété Transform/Position/y sur 840.

Mais il ne suffit pas que le sol puisse détecter les collisions. En fait, nous avons également besoin que le joueur voit le sol, et KinematicBody2D n’a aucune propriété d’image. La solution est très simple, même si cela nécessite de faire quelque chose que nous n’avons pas encore fait : créer d’autres nœuds enfants. Dans l’arborescence des nœuds, cliquez sur le nœud floor et ajoutez-y un nœud enfant de type TextureRect. Faites glisser l’image floor.png vers sa propriété texture dans l’inspecteur. Pour le rendre aussi grand que l’écran, dans le même inspecteur, définissez la propriété Rect/Size/x sur 1920.

scène

Bien que, comme vous pouvez le voir, le carré de l’image soit maintenant grand, l’image elle-même n’a pas grandi. Afin de résoudre ce problème, nous utiliserons la propriété Stretch Mode. Par exemple, si nous mettons la valeur Scale, cela forcera la taille de l’image sur la taille du rectangle. Dans ce cas, ce n’est pas une bonne solution, car il sera déformé. L’idéal ici est de choisir Tile, qui répétera l’image encore et encore jusqu’à ce que l’espace soit rempli. Comme l’image que nous avons du sol est précisément conçue pour cela, le résultat est parfait.

Comme vous pouvez le constater, une icône d’avertissement apparaît à côté du nœud Floor. C’est parce qu’en ce moment, le nœud n’a pas de forme. Bien que nous ayons ajouté un enfant de type TextureRect, ce nœud n’est que visuel, il ne fait rien en interne pour le problème de collision. En fait, nous devons définir une forme pour les collisions : un nouveau nœud de type CollisionShape2D. Ajoutez-le en tant qu’enfant de Floor, et vous verrez, une autre icône d’avertissement. Cette fois, car même si nous avons ajouté le nœud, nous devons encore définir la forme spécifique que nous voulons. Godot nous donne plusieurs options, cercle, rectangle, ellipse et bien d’autres.

Avec le nœud CollisionShape2D sélectionné, dans l’inspecteur, affichez les valeurs possibles pour la propriété Shape et choisissez New RectangleShape2D.

Ensuite, pour le centrer, et lui donner de la taille, mettez ces valeurs :

Extents/x: 960
Extents/y: 128
Transform/Position/x: 960
Transform/Position/y: 128

Si vous ne voyez pas Extents, cliquez sur le texte lui-même RectangleShape2D pour que ses propriétés soient affichées (pas dans la flèche déroulante à sa droite).

Le placement et la taille des éléments peuvent également être effectués visuellement, en faisant glisser et en zoomant. Mais il est beaucoup plus sujet aux erreurs et moins précis. En réalité, mettre quelque chose avec des valeurs exactes est la meilleure option.

Le personnage principal (I)

Notre personnage sera également basé sur KinematicBody2D. Comme je prévois qu’il va gagner en complexité, au lieu d’être un simple nœud de la scène de jeu, le personnage principal va être une scène elle-même. Utilisez donc à nouveau le menu Scène/nouvelle scène. Choisissez Autre nœud et KinematicBody2D. Renommez le nœud racine en Player.

Nous allons faire quelque chose de très similaire à ce que nous avons fait pour le sol. Nous allons ajouter deux enfants à ce nœud Player, un capable d’afficher une image, et un autre qui définit la forme que nous voulons pour les collisions. Dans ce, cas nous allons choisir une forme capsule, qui s’adapte très bien au corps d’un personnage.

Dans l’arborescence des nœuds, cliquez sur le nœud Player et ajoutez-y un nœud enfant de type TextureRect. Faites glisser l’image adventure_guy.png vers cette dernière, vers sa propriété texture dans l’inspecteur.

Dans l’arborescence des nœuds, cliquez à nouveau sur le nœud Player et ajoutez-y un nœud enfant de type CollisionShape2D. Avec ce nœud sélectionné, affichez les valeurs possibles pour la propriété Shape et choisissez New CapsuleShape2D.

Pour l’ajuster à la figure, mettez ces valeurs :

Radius : 80
Height : 300
Transform/Position/x : 160
Transform/Position/y : 243
Enfin, enregistrez tout en tant que Player.tscn.

jeu1

Créer une scène enfant

La prochaine étape consiste à ajouter la scène que nous venons de créer en tant que scène enfant de la scène Play. Pour cela, nous allons revenir à la scène Play. Si vous l’avez toujours ouvert, passez simplement à son onglet. Sinon, ouvrez-le avec le menu Scène/Ouvrir scène.

Sélectionnez maintenant le nœud racine Play et cliquez sur le premier bouton qui se trouve à droite du signe + (ou faites un clic droit sur le nœud et sélectionnez Instance Child Scene. Dans la fenêtre qui apparaît, choisissez la scène Player.tscn.

Si tout s’est bien passé, vous verrez que la scène complète a été ajoutée comme s’il s’agissait d’un simple nœud. Pour l’adapter à cette scène, définissez ces propriétés :

Transform/Position/x : 845
Transform/Position/y : 605
Transform/Scale /x : 0.5
Transformer/Scale/y : 0.5
Si vous exécutez la scène avec F6, vous verrez effectivement le personnage sur le sol.

Le personnage principal (II)

Pour terminer cette partie du tutoriel, nous allons donner au personnage principal un minimum d’interactivité. Ouvrez à nouveau la scène Player, et avec le nœud racine sélectionné, appuyez sur le bouton (à droite du + et de la zone de recherche) qui associe un script GDScript. Appelez-le Play.gd.

Nous allons créer une fonction spéciale, appelée _physics_process. Cette fonction sera appelée automatiquement par Godot à chaque fois qu’il traitera le mouvement dans le jeu. C’est-à-dire qu’il sera appelé un grand nombre de fois par seconde. En fait, il reçoit un paramètre, delta, qui indique le nombre de millisecondes écoulées depuis son dernier appel. Nous l’utiliserons plus tard.

Ce que nous allons faire maintenant, c’est vérifier si le joueur a appuyé sur le curseur droit ou gauche, et décider avec cela si nous voulons retourner l’image horizontalement ou non. Plus tard, nous aurons des commandes à l’écran, mais pour l’instant, nous allons tester cette option.

En fait, Godot nous permet d’accéder facilement aux interactions avec l’utilisateur via la classe Input. Il existe de nombreuses constantes prédéfinies que vous pouvez voir (et modifier) ​​dans le menu Projet/Paramètres du projet/Carte d'entrée.

Exécutez avec F6, utilisez les flèches vers la droit et vers la gauche de votre clavier. Normalement votre personnage va tourner à gauche et à droite.

Créer une scène enfant et un sol pour le jeu avec Godot

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Retour en haut