Accueil logo MakeYourGame gachetteG gachetteD paddleG paddleH paddleD paddleB buttonG buttonH buttonD buttonB

Roll The Ball 3D avec Godot Engine (partie I)

Godot Engine

Ce cours détaille la mise en place des éléments de notre scène. Au programme :

  • Description et utilisation de quelques nœuds 3D de base (StaticBody, Area, RigidBody et Camera)
  • Mise en place du sol, de murs, d'une balle et contrôle de cette dernière ainsi que de la caméra
20 min Débutant Dans le cours précédent, nous avions vu les bases de la 3D avec Godot en découvrant l'interface ainsi que la notion de Transform. Il est grand temps de passer à la pratique en démarrant notre premier jeu : Roll The Ball 3D !

Présentation du jeu

Roll the ball est un jeu dans lequel le joueur fait rouler une balle sur un plateau. En roulant, la balle doit ramasser des éléments flottant au dessus du sol. Lorsque tous les éléments ont été ramassés, le joueur gagne. Un jeu très simple, mais qui constitue une bonne entrée en matière concernant tout ce qui touche à la 3D. Évidemment, si à l'issue de ce tutoriel, vous ressentez l'envie d'aller plus loin, on peut imaginer créer des niveaux plus complexes, chronométrer la partie et faire un tableau des meilleurs temps mais pour ce tutoriel, on se contentera des fonctionnalités de base. Je rappelle que ce jeu est calqué sur celui proposé par ce tuoriel Unity. Il peut être intéressant de faire les deux et d'étudier les différences si vous voulez progresser https://makeyourgame.fun/sceditor/emoticons/wink.png

Mise en place du niveau

Description

Commençons sans attendre en créant un nouveau projet avec Godot (appelons-le RollTheBall, par exemple). Créons ensuite une première scène qui contiendra notre niveau. Cette scène sera une scène 3D, donc vous pouvez dès à présent cliquer sur
https://makeyourgame.fun/upload/users/cevantime/Initiation3d/capturedu20200706204338-5f0dd4c253de9.png
pour créer un Spatial racine. Nommez-le Level, par exemple. Sauvegardez-le dans un fichier Level.tscn. Le niveau en lui-même sera constitué :
  • d'un sol tout simple (pour éviter que la balle ne tombe, bien sûr)
  • de quatre murs entourant le niveau (toujours pour éviter que la balle ne tombe, lorsqu'il n'y a plus de sol !)
La question est maintenant celle qu'on se pose toujours avec Godot : quel nœud utiliser ? Pour y répondre, on doit prévoir le comportement qu'aura l'élément en question. En l’occurrence, notre sol et nos murs ne bougeront pas dans la scène mais devront avoir une réalité physique (il s'agira de solides, au travers desquels la balle ne pourra pas passer). En Godot, des nœuds de ce genre (statiques, mais solides) s'appelle des StaticBody. Notre sol et nos murs seront donc des StaticBody. Commençons par notre sol.

Le sol

Créez un nouveau nœud de type StaticBody comme enfant de votre nœud Level. Lorsque nous faisons cela, aucune forme n'est encore ajoutée à notre niveau et Godot nous avertit d'un potentiel problème :
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/capturedu20200804170136-5f2ac08474e92.png
Par défaut, notre StaticBody n'a pas de forme. Pour faire en sorte que ce soit le cas, nous devons créer un CollisionShape (une forme physique solide) dans notre StaticBody. Néanmoins, nous allons repousser la création de notre Shpae et commencer par créer un nœud de type MeshInstance comme enfant de notre StaticBody. Ce nœud permettra de donner une forme visuelle à notre sol avant d'en déduire sa forme physique. Créons ce MeshInstance. Comme vu dans le [course=141]chapitre précédent[/course], nous devons ensuite assigner un Mesh à notre MeshInstance. Pour notre sol, nous utiliserons un PlaneMesh :
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/capturedu20200804180330-5f2ac08caa0cc.png
Pour l'instant, notre sol est trop petit. Pour modifier sa taille, nous allons le redimensionner. Comme vu dans le chapitre précédent, il existe plusieurs manières de faire cela. Pour ce tutoriel, nous changerons directement les valeurs dans l'inspecteur. Sélectionnez votre MeshInstance dans la hiérarchie et fixez directement les valeurs x et z de sa transform à 30 dans l'inspecteur.
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/capturedu20200804180850-5f2ac32d3c1f6.png
Nous obtenons un sol 30 fois plus étendu !
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/capturedu20200804180924-5f2ac0938d9cd.png
Maintenant que le forme visuelle du sol est bonne, créons sa forme physique. Pour cela, sélectionnez à nouveau notre MeshInstance et cliquez sur le bouton
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/capturedu20200804181238-5f2ac09cbf168.png
qui apparaît au dessus de notre scène. Cliquez ensuite sur Create Single Convex Collision Sibling pour créer une collision shape placée au même niveau que la MeshInstance. Notre sol a désormais une collision shape, c'est-à-dire une forme solide ! Bien ! notre sol est bien avancé, renommons-le Ground. Votre hiérarchie devrait être celle-ci :
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/capturedu20200804181914-5f2ac0a52529c.png

Les murs

Créons maintenant nos murs en suivant une méthode proche de celle du sol. Ajoutez un StaticBody comme enfant de Level et créez-y un MeshInstance. Notre MeshInstance aura pour Mesh un CubeMesh. Fixez la scale selon l'axe z de notre MeshInstance à 31 de façon à lui faire prendre toute la longueur du sol. Augmentons aussi sa hauteur en modifiant sa scale y en 2 .
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/capturedu20200804183550-5f2ac0d943ef0.png
Sélectionnez cette fois votre StaticBody et donnez-lui la translation 31 selon l'axe x de façon à ce que notre mur apparaisse à l'extrémité Est de notre sol.
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/capturedu20200804183531-5f2ac0d050d2e.png
Bien ! notre mur est bien placé. Créons maintenant une CollisionShape pour notre mur de la même manière que pour notre sol (Bouton
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/capturedu20200804181238-5f2ac09cbf168.png
puis Create Single Convex Collision Sibling). Par défaut, Godot crée un ConvexPolygonShape car c'est la Shape la plus générique. Cela dit, pour notre mur, nous n'avons besoin que d'un BoxShape. Vous pouvez changer la shape de votre CollisionShape dans l'inspecteur.
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/peek040820201844-5f2ac113c8cae.gif
Parfait, notre mur Est est terminé. Appelons-le East.
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/capturedu20200804183531-5f2ac0d050d2e.png
Les trois autres murs que nous allons créer sont identiques à celui-ci. Pour les créer, nous nous contenterons de le dupliquer et de repositionner les trois copies. Sélectionnez le nœud East, et dupliquez-le à l'aide de Ctrl + D. Renommez le nœud copié en West et modifiez sa translation x en -31 . Les murs South et North seront eux-aussi des copies du nœud East. Modifiez leur positionnement ainsi :
  • South : translation x = 0, rotation y = 90 et translation z = 30
  • North : translation x = 0, rotation y = 90 et translation z = -30
Vous remarquerez qu'on aurait pu gagner un peu de temps en construisant le mur North à partir du mur South. Parfait, notre niveau est en place. Nous allons apporter une petite touche supplémentaire en regroupant ces quatre murs au sein d'un Spatial que nous appellerons Walls. Ceci nous permettra d'organiser un peu notre scène en évitant le surplus d'enfants directs :
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/peek040820202337-5f2ac119555fa.gif
Autre avantage de la manœuvre, nous sommes désormais en mesure de cacher tous nos murs d'un seul coup si nous le souhaitons :
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/peek040820202338-5f2ac11dd4fda.gif
Ces petites manœuvres organisationnelles peuvent paraître superflues mais deviennent souvent nécessaires sur le long terme.

Changement de couleur du sol

Pour l'instant notre sol est de la même couleur que nos murs. Remédions-y ! Pour cela, nous allons ajouter un material à notre sol.
Un material définit le rendu de la surface d'un objet, qui peut donner au joueur l'illusion que l'objet possède une certaine matière (métal, verre, bois etc.) ou plus simplement une couleur.
Pour ajouter un material à notre sol, nous allons aller dans son MeshInstance enfant et lui assigner un SpatialMaterial.
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/peek050820200008-5f2ac1239045e.gif
Cliquez sur le material nouvellement crée et modifiez la couleur de son albedo, en bleu par exemple.
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/peek050820200015-5f2ac126d209b.gif
Notre sol se démarque mieux maintenant !
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/capturedu20200805103223-5f2ac0e09a679.png
Il y a énormément de propriétés que vous pouvez modifier sur votre material. Il est même possible de personnaliser entièrement le rendu en utilisant un Shader Material même si il faudra être en mesure d'écrire des shaders pour exploiter cette possibilité. Pour plus dinformations concernant les materials en Godot, rendez-vous ici.

Création de la balle et des collectibles

Les nœuds dynamiques

Nous avons mis en place les éléments statiques de notre niveau. Nous allons maintenant ajouter les acteurs de notre scène, à savoir la balle et les éléments à ramasser, que nous appellerons collectibles. Ces éléments seront dynamiques dans ma scène, c'est-à-dire des éléments qui bougent. Godot possède plusieurs nœuds pour permettre de créer des éléments dynamiques en 3D. Le choix du bon nœud dépend une fois de plus du comportement que doit avoir mon nœud dans ma scène. Voyons les options principales qui s'offrent à nous pour les éléments dynamiques :
  • Area : Zone de l'espace non solide utilisée en général pour détecter l'intrusion d'un objet dans un endroit et pouvoir y réagir. Autre aspect intéressant, l'Area permet de modifier certaines propriétés physiques localement comme la gravité.
  • RigidBody : Objet solide de l'espace qui réagit physiquement de manière réaliste aux  collisions ainsi qu'à la gravité. Le contrôle de ces nœuds ne se fait pas en modifiant directement leur position (leur transform, en fait) mais en y appliquant des forces, des impulsions et des torques.
  • KinematicBody : Objet solide de l'espace qui ne réagit pas physiquement aux collisions ou à la gravité mais peut tout de même se mouvoir. En outre, les KinematicBody offrent des méthodes telles que move_and_slide et move_and_collide qui leur permettent de bouger sans traverser les autres objets solides.
Pour plus d'informations, jetez un (bon) coup d'oeil, ici. Tout est expliqué avec des nœuds 2D mais c'est valable en 3D aussi.

La balle : un RigidBody

Notre balle devra :
  • entrer en collision avec le sol et les murs, il s'agit donc d'un élément solide ce qui restreint les choix possibles à KinematicBody ou RigidBody.
  • rouler sur le plateau de manière de réaliste : le meilleur choix semble être un RigidBody
Kinematic ou Rigid ? Il peut être assez délicat de répondre à cette question. On utilise le plus souvent un kinematic quand on veut un contrôle plus étendu et plus simple sur la manière dont notre élément bouge et intéragit avec les autres éléments de la scène, souvent quand le réalisme physique importe assez peu.
Contrairement à ce qu'on croit parfois, Kinematic et Rigid peuvent cohabiter au sein d'une même scène sans problème à condition de scripter leur collision.
Notre balle est donc un RigidBody. Ajoutons-la à notre nœud Level. Comme pour les éléments statiques, nous commençons par lui ajouter un MeshInstance qui cette fois-ci aura pour Mesh une SphereMesh.
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/capturedu20200805112016-5f2ac0e710339.png
Pour l'instant, notre balle est enfoncée dans le sol. Mettons sa translation y à 1 pour la faire ressortir (sur le RigidBody et non sur le MeshInstance !). Nous allons également changer sa couleur comme nous l'avons fait pour le sol. Nous pourrions choisir une couleur unie pour pour le sol mais il est sans doute plus intéressant de choisir une texture moins unie. Cela permettra au joueur de mieux se rendre compte du mouvement de la balle (sa vitesse, son mouvement etc.) Ainsi, assignez un nouveau SpatialMaterial à votre MeshInstance et, à la place de la couleur de l'albedo, modifiez sa texture en utilisant celle-ci.
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/ball_texture-5f2ac0784f0b0.png
Nous obtenons (#Voltorb #POKéBALL):
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/capturedu20200805114155-5f2ac0f084fd7.png
Nous pouvons maintenant donner à notre balle une CollisionShape en cliquant sur
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/capturedu20200804181238-5f2ac09cbf168.png
puis Create Single Convex Collision Sibling. Vous devriez également modifiez la Shape en SphereShape plutôt que Convex. Notre balle a fière allure, renommons-la Ball et passons aux collectibles.

Les collectibles : des Area

Les collectibles sont des éléments qui devront :
  • flotter et tourner sur eux-même au dessus du sol. Pas besoin d'en faire des RigidBody a priori.
  • disparaître au moment où la balle les touche. Pas besoin d'en faire des éléments solides, donc.
Conclusion : nos collectibles se fichent des collisions et devront juste détecter l'intrusion de la balle dans leur zone. Nos collectibles sont donc des Area. Nous reproduirons plusieurs exemplaires de nos collectibles. Dans Unity, on passerait par des Prefab pour réutiliser plusieurs fois le même élément. En Godot, on passe par des sous-scènes. Créons donc une nouvelle scène pour notre Collectible. Allez dans
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/capturedu20200805121928-5f2ac0f51e889.png
puis New Scene. Vous devrez ensuite cliquer sur
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/capturedu20200805122153-5f2ac0f94ef2a.png
pour ajouter un nœud de type Area. Renommez-le Pick Up. Ajoutons ensuite un MeshInstance avec un CubeMesh de la couleur que vous voudrez ! Nous allons aussi réduire de moitié la scale de notre MeshInstance afin que nos cubes soient plus petits et difficiles à attraper pour notre balle.
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/capturedu20200805122824-5f2ac0fd79b4b.png
Et nous allons aussi tourner notre collectible selon tous ses axes à 45 degrés afin de le rendre un peu plus chaotique.
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/capturedu20200805123108-5f2ac101bd294.png
Bien, nous pouvons maintenant ajouter un CollisionShape à notre cube (modifiez aussi la shape en BoxShape). Nous obtenons :
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/capturedu20200805123645-5f2ac1062545f.png
Notre collectible a fière allure aussi, sauvegardons-le sous le nom Pick Up.tscn. Retournons dans la scène Level. Comme pour les murs, nous allons créer dans Level un Spatial qui va contenir tous nos pickups (appelons-le Collectibles). Donnons à ce Spatial une translation y de 1 . Ainsi, tous les Pickups que nous ajouterons à ce Spatial seront situés par défaut à la hauteur de la balle ! Pour ajouter un Pick Up à votre Spatial Collectibles, sélectionnez-le et cliquez sur le bouton
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/capturedu20200805124823-5f2ac10a5b7d2.png
. Sélectionnez ensuite votre scène Pick Up.tscn. Vous pouvez ainsi dispatcher plusieurs collectibles sur votre scène en dupliquant ce premier Pick Up (Ctrl + D) et en utilisant les flèches de déplacements rouges et bleues (x et z).
https://makeyourgame.fun/upload/users/cevantime/RollTheBall/capturedu20200805125453-5f2ac10f36808.png
Bien, les différents éléments de notre scène sont en place !
Vues: 126

Connectez-vous pour applaudir applause logo 1 claps

Validation du Tutoriel

Veuillez vous connecter ou créer un compte pour pouvoir valider ce tutoriel et ainsi gagner stardust et XP !

×