Differences

This shows you the differences between two versions of the page.

Link to this comparison view

fr:gdevelop:tutorials:debutant [2015/05/18 12:28] (current)
Line 1: Line 1:
 +====== Tutoriel pas à pas pour débuter avec GDevelop ======
 +
 +Ce tutoriel pas à pas va vous guider dans la création d'un jeu très basique avec GDevelop :\\
 +Il s'agit d'un jeu où des chars ennemis se précipitent sur le joueur, qui peut tirer dessus pour les faire exploser avant qu'il ne l'​atteigne.\\
 +
 +<​note>​Notez que vous pouvez lire le **[[fr:​gdevelop:​documentation:​manual:​edit_getstart|guide de mise en route]]** pour avoir un bon aperçu du logiciel.\\
 +Vous apprendrez les concepts principaux utilisés dans le logiciel et vous en découvrirez l'​interface.</​note>​
 +
 +===== Obtenir GDevelop =====
 +
 +Si vous ne l'avez pas déjà fait, téléchargez GDevelop sur le site officiel : **[[http://​compilgames.net]]**. \\
 +Télécharger GDevelop à cette adresse permet de s'​assurer d'​avoir **la dernière version en date**.\\
 +Installez ou décompressez ensuite simplement le logiciel et lancez le. La page d'​accueil s'​affiche :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_1_.png?​nolink |}}
 +
 +Si vous le souhaitez, vous pouvez lire sur [[fr:​gdevelop:​documentation:​manual:​edit_overview|cette page]] une rapide introduction à l'​interface générale de GDevelop.
 +===== Créer un nouveau jeu =====
 +
 +Cliquez sur ''​Nouveau''​ dans le ruban pour créer un nouveau projet :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_2_.png?​nolink |}}
 +
 +La fenêtre suivante propose quelques modèles de jeux. Double cliquez sur Projet vierge après avoir éventuellement choisi un répertoire pour votre jeu.\\
 +Une fois le nouveau projet créé, la première scène, vide, est ouverte automatiquement :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_3_.png?​nolink |}}
 +
 +===== Récuperer les images du tutoriel =====
 +
 +Avant de continuer, nous allons avoir besoin de quelques images spécifiques pour le jeu.\\
 +Vous pouvez les télécharger à cette adresse : [[http://​www.compilgames.net/​dl/​BeginnerTutorialImages.zip]].
 +
 +Ouvrez le fichier une fois téléchargé et copiez toutes les images contenues dedans dans le dossier où vous avez enregistré le jeu lors de l'​étape précédente.
 +===== Créer le tank du joueur =====
 +
 +Revenons à GDevelop et ajoutons un premier objet, le tank que contrôlera le joueur.\\
 +Faites un clic droit sur la scène grise et choisissez ''​Ajouter un nouvel objet''​. La fenêtre suivante vous permet de choisir le type d'​objet à ajouter :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_4_.png?​nolink |}}
 +
 +Choisissez le type "​Sprite ( image animée )" qui est un type d'​objet très versatile permettant d'​afficher pratiquement tous les élements d'un jeu.\\
 +Une fois que vous avez cliqué sur ''​Ok'',​ un éditeur s'​ouvre pour vous permettre d'​éditer l'​objet. A gauche s'​affiche la liste des animations : L'​animation affichée par défaut est l'​animation 0. En bas de l'​éditeur,​ la liste des images composant l'​animation est affichée. Pour le moment, celle ci est vide.
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_5_.png?​nolink |}}
 +
 +Nous souhaitons afficher simplement l'​image d'un char : Faites un clic droit dans la zone blanche en bas de l'​éditeur et choisissez ''​Ajouter une image depuis un fichier''​.\\
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_6_.png?​nolink |}}
 +
 +Une fenêtre va vous demander l'​image à ajouter. Choisissez le fichier ''​tank1fr1.png''​ situé parmi les images que vous avez récupéré et placé dans le dossier du jeu au début de ce tutoriel.\\
 +Une fois l'​image choisie, celle ci est ajoutée à l'​animation :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_7_.png?​nolink |}}
 +
 +Vous remarquez aussi que l'​image est ajoutée à la //banque d'​images//,​ affichée sur le coté droit. Cette banque rassemble toutes les images utilisées dans le jeu.
 +Fermez l'​éditeur de l'​objet en cliquant sur la croix rouge.
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_8_.png?​nolink |}}
 +
 +Vous revenez alors sur l'​éditeur de scène : Cette fois l'​objet est affiché à l'​endroit où vous aviez effectué un clic droit. Vous pouvez le sélectionner en faisant un clic gauche dessus et en le déplacer en restant appuyer sur le clic gauche.\\
 +L'​objet est également affiché dans la liste des objets situé sur la droite : Son nom est pour le moment ''​Nouvel objet''​. Cliquez sur ce nom, et appuyez sur F2 ( ou faites un clic droit et choisissez Renommer ) pour modifier ce nom : Entrez ''​Tank''​ en nouveau nom.
 +
 +===== Premiers évènements =====
 +
 +Nous allons créer les premiers évènements pour animer le tank.\\
 +Premièrement,​ le tank doit se tourner vers la souris.
 +
 +Affichez l'​éditeur d'​évènements en cliquant sur l'​onglet ''​Evenements''​ :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_9_.png?​nolink |}}
 +
 +Puis ajoutez un premier évènement en cliquant sur ''​Ajouter un évènement''​ dans le ruban :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_10_.png?​nolink |}}
 +
 +<note warning>​**Attention !** Avant d'​utiliser le ruban, il faut bien être entré dans l'​éditeur d'​évènements,​ en cliquant sur l'​onglet Événements qui permet de naviguer entre les deux éditeurs : {{fr:​gdevelop:​tutorials:​eventeditortab.png?​nolink|}} \\
 +(Et non **pas** sur l'​onglet Evenements du //​ruban//​.)</​note>​
 +
 +Un évènement vierge est ajouté. Celui ci ne contient pas de conditions et pas d'​actions. Ajoutons donc une action pour faire pivoter le char.\\
 +Passez la souris sur le texte ''​Pas d'​actions''​ et, dans le petit panneau qui s'​affiche,​ cliquez sur ''​Ajouter une action :''​
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_11_.png?​nolink |}}
 +
 +Une fenêtre s'​affiche,​ affichant sur la gauche les actions disponibles. Dans la liste, choisissez l'​action ''​Tous les objets > Angle > Tourner vers une position''​.\\
 +Une fois choisie, la partie de droite va afficher les //​paramètres//​ de l'​action. Complétez le premier paramètre en tapant ''​Tank'',​ pour indiquer que vous souhaitez tourner le Tank. ( Vous pouvez également cliquer sur le bouton de droite pour afficher la liste des objets ).\\
 +Completez les deux paramètres suivants en indiquant les coordonnées vers lesquelles se tourner. Il s'agit de se tourner vers la souris, entrez donc ''​MouseX()''​ et ''​MouseY()''​. Ces deux fonctions seront remplacées à l'​execution par leur résultat, à savoir la position de la souris sur l'//​axe X// et //Y//.
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_12_b.png?​nolink |}}
 +
 +<​note>''​MouseX()''​ et ''​MouseY()''​ ne sont que deux des nombreuses //​fonctions//​ accessibles lorsque vous écrivez une //​expression//​ ( C'est à dire un paramètre qui attend un nombre ).\\
 +Toutes les fonctions ( et elles sont nombreuses ) fournies par GDevelop peuvent être affiché grâce à //​l'​éditeur d'​expression//​ : Cliquez sur le bouton à droite d'un paramètre qui attend une expression pour ouvrir cet éditeur.</​note>​
 +
 +Cliquez sur ''​Ok''​. L'​action est alors ajoutée.\\
 +Comme nous n'​avons ajouté aucune condition, l'​action sera appliquée à chaque rafraichissement de l'​écran ( C'est à dire à chaque fois que les objets sont redessinés,​ environ 60 fois par seconde ). Le char sera donc toujours orienté vers la souris.\\
 +Vous pouvez tester si l'​évènement fonctionne correctement : Revenez à l'​éditeur de scène en cliquant sur l'​onglet ''​Scène''​. Dans le ruban, cliquez sur ''​Aperçu'',​ puis sur ''​Jouer''​ :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_13_.png?​nolink |}}
 +
 +Vous pouvez alors voir que le tank se tourne bien vers la souris :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_14_.png?​nolink |}}
 +
 +Arrêtez l'​aperçu en cliquant sur ''​Edition''​ dans le ruban.\\
 +
 +===== Faire tirer le char =====
 +
 +Nous allons permettre au char de tirer, grâce à un clic sur le bouton gauche de la souris.\\
 +Nous avons besoin en premier lieu d'un nouvel objet. Faites un clic droit sur l'​objet ''​Tank''​ dans la liste des objets et choisissez ''​Ajouter un objet''​ :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_16_.png?​nolink |}}
 +
 +Choisissez un objet de type ''​Sprite ( image animée )''​. L'​objet est ajouté à la liste : Donnez lui le nom de ''​Bullet''​.\\
 +Double cliquez ensuite sur cet objet ''​Bullet''​ pour l'​éditer. L'​éditeur de Sprite s'​affiche.\\
 +Comme dernièrement,​ faites un clic droit en bas et choisissez ''​Ajouter une image depuis un fichier''​. Cette fois, choisissez l'​image ''​Bullet.png''​ :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_17_.png?​nolink |}}
 +
 +Fermez l'​éditeur,​ l'​objet est prêt. Vous noterez qu'il n'​apparait pas sur la scène, vu que nous ne l'​avons pas placé dessus.\\
 +Par contre, un ou plusieurs objets ''​Bullet''​ devront être créés quand nous tirons avec le clic gauche : Allez dans l'​onglet ''​Evenements''​.
 +
 +Ajoutez un évènement vierge comme auparavant, et ajoutez de même comme auparavant une action.\\
 +L'​action sera de créer un objet : Choisissez dans la liste de gauche l'​action ''​Tous les objets > Objets > Créer un objet''​.\\
 +Entrez ''​Bullet''​ dans le paramètre ''​Objet à créer'',​ puis ''​Tank.X()''​ et ''​Tank.Y()''​ dans les deux paramètres suivants. Ainsi, l'​objet Bullet sera créé à la position du tank :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_18_.png?​nolink |}}
 +
 +Cliquez sur Ok : L'​action est ajoutée à l'​évènement,​ qui est cependant encore loin d'​être fini !\\
 +Ajoutez une autre action à cet évènement ( En cliquant sur ''​Ajouter une action''​ comme avant ). Cette fois, choisissez ''​Tous les objets > Déplacement > Ajouter une force ( par angle )''​. \\
 +Cette action servira à lancer le tir : Mettez ''​Bullet''​ en nom d'​objet à déplacer. L'​angle de tir doit être celui du tank. Mettez donc ''​Tank.Direction()''​ en second paramètre.\\
 +Enfin, entrez 400 pour indiquer un déplacement de 400 pixels par secondes, et 1 en amortissement. Ce chiffre indique qu'à chaque seconde, la force sera multipliée par ce nombre : Elle restera donc active indéfiniment.\\
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_19_.png?​nolink |}}
 +
 +Cliquez sur Ok pour fermer cette action.\\
 +Avant de continuer, il nous faut nous assurer que le char ne tire que quand on effectue un clic gauche. Pour ceci, nous allons ajouter une condition à notre évènement.\\
 +Passez la souris sur le texte ''​Pas de conditions''​ de l'​évènement que nous venons d'​éditer,​ et cliquez sur ''​Ajouter une condition''​ :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_15_.png?​nolink |}}
 +
 +Une fenêtre, similaire à celle des actions, s'​affiche. Choisissez la condition ''​Souris > Bouton de la souris''​.\\
 +Entrez ''​Left''​ en paramètre pour indiquer que nous souhaitons tester le bouton Gauche de la souris.\\
 +Cliquez sur ''​Ok''​ pour fermer l'​édition de la condition : Celle ci s'​affiche dans l'​évènement.
 +
 +Vous pouvez lancer un aperçu : Allez dans l'​onglet ''​Scène''​ pour revenir sur l'​éditeur de scène, cliquez sur ''​Aperçu''​ dans le ruban puis sur ''​Jouer''​.\\
 +En faisant un clic gauche, des tirs sont bien créés, mais deux problèmes se posent : Ils sont créés en trop grand nombre et au mauvais endroit !
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_20_.png?​nolink |}}
 +
 +Pour le nombre, le problème vient du fait que les tirs sont créés à chaque fois que les évènements sont lancés et que le clic gauche est appuyée, c'est à dire jusqu'​à 60 fois par secondes.\\
 +Pour régler ce soucis, ajoutez une condition à l'​évènement ( Passez la souris sur la condition existante, puis cliquez sur ''​Ajouter une condition''​ ). Nous allons utiliser un chronomètre :\\
 +Choisissez la condition ''​Temps et chronomètres > Temps écoulé d'un chronomètre''​. Entrez ''​0.25''​ dans le premier paramètre et ''"​FireRate"''​ dans le second. //​N'​oubliez pas les guillemets dans le second paramètre.//​ \\
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_21_.png?​nolink |}}
 +
 +Cliquez sur Ok : La condition que nous avons ajouté permet de s'​assurer que les actions permettant de tirer ne seront effectuées que lorsque le chronomètre nommé **FireRate** atteindra 0.25 secondes. Il nous faut également remettre à zéro le chronomètre une fois les actions effectués.\\
 +Ajoutez une action. Choisissez l'​action nommée ''​Temps et chronomètre > Remettre à zéro un chronomètre''​ en mettant ''"​FireRate"''​ en nom de chronomètre ( N'​oubliez pas les guillemets ! ).\\
 +L'​évènement complet ressemble à ceci :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_22_.png?​nolink |}}
 +
 +Vous pouvez relancer un aperçu : Cette fois, les tirs sont créés à intervalles réguliers de 0.25 secondes. \\
 +
 +Reste maintenant à définir l'​emplacement de création des tirs de façon plus précise !\\
 +Nous allons définir un point où ceux ci apparaitront. Dans la liste des objets, double cliquez sur l'​objet ''​Tank''​. Une fois l'​éditeur de l'​objet ouvert, cliquez sur l'​icone ''​Point''​ dans la barre d'​outils :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_23_.png?​nolink |}}
 +
 +Une fenêtre s'​affiche,​ montrant les points disponibles pour l'​objet. Par défaut, seuls les points ''​Origine''​ et ''​Centre''​ existent.\\
 +Ajoutez un point en cliquant sur la croix verte dans la barre d'​outils de la fenêtre. Nommez le nouveau point qui apparait ''​Canon''​.\\
 +Une fois le point ajouté dans la liste, assurez vous qu'il est selectionné en cliquant dessus, puis cliquez sur le canon du char qui est affiché dans la zone centrale : Le point sera placé à cet endroit de l'​image.\\
 +Vous pouvez vérifier dans la fenêtre ''​Points''​ que le nouveau point ''​Canon''​ a bien des coordonnées adaptées :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_24_.png?​nolink |}}
 +
 +Fermez l'​éditeur de l'​objet et revenez dans l'​éditeur d'​évènements.\\
 +Modifiez l'​action qui créé l'​objet ''​Bullet''​ :\\
 +A la place de ''​Tank.X()'',​ mettez ''​Tank.PointX(Canon)'',​ et remplacez également ''​Tank.Y()''​ par ''​Tank.PointY(Canon)''​.\\
 +Pour effectuer ces changements,​ vous pouvez soit double cliquer sur l'​action,​ soit cliquer une fois sur le paramètre à modifier pour les changer directement.
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_25_.png?​nolink |}}
 +
 +Lancez un aperçu : Si tout se passe bien, les tirs sont bien créés à la position du canon. Si ce n'est pas le cas, vérifier que vous avez bien ajouté et positionné le point dans l'​éditeur de l'​objet,​ et que votre évènement est correct ( //Vérifiez notamment que l'​amortissement est bien à 1// ).
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_26_.png?​nolink |}}
 +
 +===== Lancer des ennemis sur le joueur =====
 +
 +Nous allons maintenant créer des chars ennemis qui vont se précipiter sur le joueur. Ajoutez dans la liste des objets un nouvel objet nommé ''​Enemy''​. ( Clic droit > Ajouter un objet )
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_27_.png?​nolink |}}
 +
 +Editez ensuite l'​objet ''​Enemy''​ en double cliquant dessus dans la liste. Ajoutez les images comme auparavant, en y mettant ''​tank2fr1.png''​ et ''​tank2fr2.png''​ qui vont permettre de créer une petite animation sur les chenilles du char.\\
 +Pour régler cette animation, faites ensuite un clic droit sur ''​Animation 0''​. Cliquez sur ''​Temps entre chaque image''​ et mettez environ 0.05 pour que les images s'​enchainent toutes les 50 millisecondes. Toujours en faisant un clic droit sur ''​Animation 0'',​ cliquez égalemet sur ''​Boucler l'​animation''​ pour que les images se répètent.
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_28_.png?​nolink |}}
 +
 +Fermez l'​éditeur de l'​objet une fois l'​objet terminé.
 +
 +Avant de continuer, pensez à sauvegarder votre jeu : Faites un clic sur ''​Fichier''​ dans le ruban puis choisissez ''​Enregistrer''​.\\
 +Pensez à enregistrer souvent vos jeux, et à faire des copies de sauvegarde de façon régulière.
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_29_.png?​nolink |}}
 +
 +Revenons à notre jeu. Nous allons créer des ennemis de façon régulière : Allez dans l'​éditeur d'​évènements et ajouter un nouvel évènement grâce au ruban.
 +Créer un évènement comme celui ci :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_30_.png?​nolink |}}
 +
 +La condition et l'​action permettent, grâce à l'​utilisation du chronomètre,​ de ne répéter l'​évènement que toutes les 1 secondes. Si vous n'​arrivez pas à trouver comment créer cette condition et cette action, reportez vous aux indications données avant quand nous avons créé un autre chronomètre.
 +
 +Pour le moment, cet évènement ne sert à rien ! Ajoutons une nouvelle action :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_31_.png?​nolink |}}
 +
 +Choisissez l'​action ''​Créer un objet'',​ et mettez ''​Enemy''​ en nom d'​objet à créer. Entrez ''​-50''​ à la position Y, et ''​Random(800)''​ à la position X. Cette fonction ''​Random''​ renverra un nombre aléatoire entre 0 et 800 : Ainsi les chars apparaitront à des positions aléatoires en haut de la scène.
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_32_.png?​nolink |}}
 +
 +Maintenant, il s'agit de déplacer régulièrement ces chars vers le joueur. Ajoutez un nouvel évènement vierge.\\
 +Ne mettez pas de conditions, mais rajoutez uniquement cette action :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_33_.png?​nolink |}}
 +
 +Le 1er paramètre indique qu'il faut bouger l'​objet ''​Enemy''​. Les deux suivants indiquent de se diriger vers la position du Tank du joueur. La longueur définit la vitesse et le 0 indique que cette force est temporaire : Elle n'​agira que durant un rafraichissement de l'​image,​ et disparaitra aussitôt après. C'est ce que nous souhaitons, car de toute manière, l'​action est appliquée en continue.\\
 +( De manière générale, mettez un amortissement de 1 pour les forces qui sont appliquées une seule fois, et un amortissement de 0 pour les forces qui sont appliquées de façon continue, comme c'est le cas ici ).
 +
 +Rajoutez également une autre action nommée ''​Tourner vers une position'',​ située dans la catégorie ''​Tous les objets > Angle''​. En paramètre, mettez toujours ''​Enemy''​ dans l'​objet à tourner, et''​ Tank.X()''​ et ''​Tank.Y()''​ pour la position vers laquelle se tourner.
 +
 +L'​évènement ressemble au final à ceci :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_34_.png?​nolink |}}
 +
 +Vous pouvez lancer un test : Les ennemis apparaitront et se dirigeront vers vous :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_35_.png?​nolink |}}
 +
 +===== Faire exploser les chars =====
 +
 +==== Ajouter un objet Explosion ====
 +
 +Nous allons maintenant créer des explosions quand les chars sont touchés par un tir. Pour cela, nous allons utiliser un objet disponible dans un jeu d'​exemple fourni avec GD.\\
 +Il nous faut d'​abord activer le moteur de particule pour notre jeu, l'​objet étant un émetteur de particules. Double cliquez sur ''​Extensions''​ dans le gestionnaire de projet sur la gauche :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_42_.png?​nolink |}}
 +
 +La liste des extensions utilisées par le jeu s'​affiche : Cochez ''​Système de particules''​ et fermez la fenêtre :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_44_.png?​nolink |}}
 +
 +L'​objet que nous souhaitons utiliser est dans un jeu d'​exemple : Cliquez sur ''​Fichier''​ dans le ruban, puis ''​Ouvrir un jeu d'​exemple''​.
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_36_.png?​nolink |}}
 +
 +Choisissez le fichier ''​Particles - Explosions''​
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_37_.png?​nolink |}}
 +
 +Le jeu s'​ouvre dans le gestionnaire de projet. Son nom est mis en gras, car c'est le jeu qui est actif dans l'​éditeur ( Vous pouvez également le vérifier dans la barre de titre en haut ) : Si vous cliquez sur ''​Enregistrer''​ maintenant, c'est ce jeu qui sera enregistré.
 +
 +Double cliquez sur ''​New scene''​ dans le gestionnaire de projet pour ouvrir la scène du jeu d'​exemple.
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_38_.png?​nolink |}}
 +
 +La scène s'​affiche,​ avec un fond noir. Dans la liste des objets, faites un clic droit sur l'​objet ''​Explosion''​ et choisissez ''​Copier''​ :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_39_.png?​nolink |}}
 +
 +Revenez à la scène de notre jeu : Cliquez soit sur ''​Nouvelle scène''​ dans la liste des onglets ou faites un double clic sur ''​Nouvelle scène''​ dans le gestionnaire de projet :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_40_.png?​nolink |}}
 +
 +Une fois revenu dans notre scène, faites un clic droit sur un objet, et choisissez ''​Coller''​ :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_41_.png?​nolink |}}
 +
 +L'​objet ''​Explosion''​ est rajoutée à la liste :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_45_.png?​nolink |}}
 +
 +Il reste une dernière chose à faire avant de pouvoir utiliser notre objet Explosion : Cet objet utilise une image qui n'est pas dans notre jeu. Nous allons l'​ajouter manuellement.\\
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_48_.png?​nolink |}}
 +
 +Double cliquez sur l'​élement "​Images"​ de votre jeu dans le gestionnaire de projet :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_49_.png?​nolink |}}
 +
 +L'​éditeur de la banque d'​images s'​ouvre. Cliquez dans le ruban sur "​Ajouter une image" et choisissez l'​image nommée "​ExplosionTexture.png"​.
 +
 +L'​image est maintenant ajoutée, vous pouvez revenir à l'​éditeur de scène en cliquant sur ''​Nouvelle scène''​ dans les onglets.\\
 +L'​objet Explosion est fin près à être utilisé !
 +
 +==== Créer les explosions lors des collisions ====
 +
 +Nous allons maintenant créer l'​explosion quand un tir touche un char ennemi.\\
 +Créez un nouvel évènement,​ et ajoutez une condition : Cette condition est nommée ''​Collision''​ et se situe dans la catégorie ''​Tous les objets > Collisions''​. Entrez ''​Bullet''​ et ''​Enemy''​ en paramètre. Cliquez sur Ok pour fermer l'​édition de la condition.
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_46_.png?​nolink |}}
 +
 +Cette condition sera vraie quand un tir touchera un char : Il faut alors créer un explosion puis détruire le tir et le char.\\
 +Ajoutez une action à l'​évènement. Choisissez l'​action ''​Créer un objet'',​ et mettez en paramètre ''​Explosion'',​ afin de créer une explosion, puis ''​Enemy.X()''​ et ''​Enemy.Y()''​ pour créer l'​explosion à la position du tank ennemi.\\
 +Ajoutez ensuite deux actions ''​Supprimer un objet''​ ( Catégorie Tous les objets > Objets ), avec ''​Enemy''​ puis ''​Bullet''​ en paramètres pour détruire les deux objets.
 +
 +Il reste également à faire exploser le joueur : Créez un évènement qui créé une explosion et supprime l'​objet ''​Tank'',​ quand ''​Tank''​ et ''​Enemy''​ sont en collisions.\\
 +Cela devrait être facile à faire si vous avez réussi à faire l'​évènement précédent.
 +
 +Avant de continuer, il ne faut pas oublier de gérer aussi la "​vie"​ des objets ''​Explosions''​. En effet, une fois que l'​objet Explosion a fini d'​être affiché, il faut le détruire, sans quoi de nombreux objets explosions invisibles vont continuer à vivre sur la scène et consommer des ressources.\\
 +Ajoutez un nouvel évènement. Ajoutez la condition ''​Système de particules > Commun > Plus aucune particules'',​ avec en paramètre l'​objet ''​Explosion''​ :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_47_.png?​nolink |}}
 +
 +Cette condition sera vraie quand des objets Explosions auront fini de s'​animer. A ce moment, il faut les détruire. Ajoutez à cet évènement une action pour supprimer l'​objet Explosion :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_50_.png?​nolink |}}
 +
 +L'​évènement finalisé ressemble à ceci :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_51_.png?​nolink |}}
 +
 +Vous pouvez vous demander à cette étape comment fait GDevelop pour distinguer, lorsqu'​il exécute l'​action,​ quels sont les objets ''​Explosions''​ à supprimer et ceux à conserver ? Comme vous avez pu le lire dans le guide de démarrage, chaque condition qu'​execute GDevelop dans un évènement lui permet de restreindre les objets sélectionnés virtuellement : Au départ de l'​évenement,​ tous les objets Explosions sont susceptibles d'​être pris en compte. Après le passage de la condition, seuls les objets Explosions qui n'ont plus de particules sont conservés.\\
 +Lorsque l'​action est executée, c'est donc eux qui sont supprimés.
 +
 +Vous pouvez tester le jeu : Quand un objet tir entre en collision avec un char, celui ci est détruit et une jolie explosion s'​affiche.
 +
 +===== Afficher un Game Over =====
 +
 +Le joueur doit également pouvoir mourir si un char ennemi le percute !
 +Nous allons ajouter un nouvel objet Texte qui affichera **Game Over** sur la scène quand le joueur disparaitra.\\
 +Ajoutez un nouvel objet à la liste des objets. Choisissez un objet ''​Texte''​ :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_52_.png?​nolink |}}
 +
 +Même si l'​objet est grisé, double cliquez dessus. GDevelop vous demandera si vous souhaitez activer l'​extension ''​Texte''​ dans votre jeu : Répondez oui.\\
 +( Par la suite, les objets de type ''​Texte''​ seront affiché sans être grisés. Vous auriez pu également activer auparavant l'​extension ''​Texte''​ en double cliquant sur ''​Extensions''​ dans le gestionnaire de projet, comme nous l'​avons fait auparavant pour activer l'​extension ''​Moteur physique''​ ).
 +
 +Une fois l'​objet Texte ajouté à la liste ( nommez le au passage ''​GameOver''​ ), double cliquez dessus dans la liste pour l'​éditer. Entrez un texte tel que ''​Game Over''​ et modifiez quelques paramètres si vous le souhaitez.\\
 +Pour placer l'​objet sur la scène, restez cliqué sur l'​objet dans la liste, avec le bouton gauche de la souris, et faites glisser la souris sur la scène. Relâchez le bouton gauche pour poser l'​objet.\\
 +( Cette méthode dite de ''​Drag'​n'​drop''​ fonctionne avec tous les objets ).
 +
 +Pour cacher l'​objet ''​GameOver''​ au départ, ajoutez un évènement avec pour condition : ''​Au lancement de la scène''​ ( Cette condition n'est vraie qu'au départ et devient fausse pendant le reste du temps ) et une action : ''​Cacher l'​objet'',​ en mettant donc l'​objet ''​GameOver''​ en paramètre.
 +
 +Créez enfin un évènement similaire, mais en utilisant une action ''​Montrer l'​objet'',​ et en remplaçant la condition par une condition testant le nombre d'​objets ''​Tank''​ ( disponible dans ''​Tous les objets > Objets''​ ). Mettez ''​Tank''​ en objet à tester, ''​0''​ en nombre à tester, et ''​=''​ en signe pour indiquer que vous souhaitez tester si le nombre d'​objets Tank est bien égal à 0 :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_53_.png?​nolink |}}
 +
 +Toutes les conditions testant une quantité utilisent ce principe de valeur à tester + signe à renseigner pour effectuer le test.
 +Vos évènements ressemblent maintenant à ceci :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_54_.png?​nolink |}}
 +
 +Si le joueur meurt, le texte s'​affichera. Par contre, les ennemis tenteront toujours de se diriger vers le joueur. Comme il n'​existe plus, ils se dirigeront alors vers la position 0;0 en haut à gauche de l'​écran !
 +Pour éviter ceci, vous pouvez rajouter une condition testant le nombre d'​objets ''​Tank''​ au niveau de l'​évènement qui fait se déplacer les tanks ennemis :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_55_.png?​nolink |}}
 +
 +Il pourrait être intéressant de laisser s'​écouler quelques secondes avant d'​afficher le message Game Over. Pour cela, remettez à zéro un chronomètre nommé ''"​GameOver"''​ grâce à une action dans l'​évènement où le tank du joueur est détruit.\\
 +Ajoutez ensuite une condition dans l'​évènement où le texte est affiché, afin de vérifier si le chronomètre a atteint une demi seconde :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_56_.png?​nolink |}}
 +
 +Pour en terminer avec la mort du joueur, il peut être intéressant d'​arrêter à ce moment le jeu.\\
 +On peut le faire très facilement en mettant à 0 l'​échelle du temps. L'​échelle du temps vaut 1 par défaut. En la mettant à une valeur supérieure,​ le jeu se passera plus vite, et inversement une valeur entre 0 et 1 ralentira le jeu, permettant là de créer un effet de ralenti très saisissant.
 +
 +Dans notre jeu, ajoutez juste une action ''​Temps et chronomètres > Changer l'​échelle du temps''​ après l'​affichage du texte ''​GameOver''​. Mettez 0 en paramètre :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_59_.png?​nolink |}}
 +
 +Vous pouvez maintenant tester le jeu : Quand le joueur est touché, une explosion s'​affiche puis le jeu s'​arrête et affiche Game Over après une demi seconde.\\
 +Voici pour référence l'​ensemble des évènements utilisés :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_61_.png?​nolink |}}
 +
 +===== Rajouter un fond =====
 +
 +Le jeu est pour le moment encore bien terne sans un joli décor.\\
 +Nous allons nous aider du type d'​objet ''​Mosaïque''​ pour mettre en place ce décor. Ajoutez un objet de ce type à la liste des objets :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_60_.png?​nolink |}}
 +
 +Nommez le ''​Background''​ et double cliquez dessus dans la liste pour l'​éditer.\\
 +Dans l'​éditeur affiché, la banque d'​images est affichée sur la gauche. Elle ne contient pas l'​image que nous souhaitons : Cliquez donc sur la croix verte et ajoutez l'​image ''​GrassDead.png''​.\\
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_62_.png?​nolink |}}
 +
 +Une fois ceci fait, selectionnez ''​GrassDead.png''​ dans la liste, et cliquez sur le bouton d'​ajout à droite du champ de texte ''​Textures''​ :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_63_.png?​nolink |}}
 +
 +L'​objet est paramétré,​ fermez donc l'​éditeur en cliquant sur ''​Ok''​.\\
 +Ajoutez l'​objet sur la scène en le glissant déposant depuis la liste sur la scène. Afin de positionner l'​objet sur la scène parfaitement,​ double cliquez dessus pour ouvrir ses propriétés :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_64_.png?​nolink |}}
 +
 +Entrez 0 pour la position X et Y, et cochez la case ''​Taille personnalisée''​. Mettez ensuite 800 en largeur et 600 en hauteur pour que l'​objet couvre tout l'​écran.
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_67_.png?​nolink |}}
 +
 +Si vous regardez la scène, vous remarquerez que l'​objet est passé par dessus les autres objets ! Modifiez donc également le champ ''​Plan''​ pour y mettre -1.
 +Les objets sont affichés dans l'​ordre de leurs plans : Les objets ayant un plan bas seront affichés derrière les objets ayant un plan plus elevé. Par défaut, le plan d'un objet est 0. En mettant -1, on s'​assure que le fond d'​écran reste bien derrière les autres objets :
 +
 +{{ fr:​gdevelop:​tutorials:​imagetutodebutant_68_.png?​nolink |}}
 +
 +Le jeu a finalement atteint cette allure :
 +{{ fr:​gdevelop:​tutorials:​final.png?​nolink |}}
 +
 +===== Idées d'​améliorations =====
 +
 +Cette ébauche de jeu est loin d'​être finie, mais elle a le mérite de vous avoir fait parcourir le logiciel et découvrir comment utiliser certaines constructions d'​évènements.\\
 +Voici une liste de quelques idées pour continuer :
 +
 +  * Ajouter un système de score. Utilisez une action pour faire +1 à une variable dès qu'un ennemi est détruit. Affichez le score grâce à un objet Texte et une action pour modifier le texte.
 +  * Ajouter un tir secondaire, avec le clic droit par exemple
 +  * Ajouter d'​autre types d'​ennemis
 +  * Faire également tirer les ennemis
 +  * ...
 +
 +En attendant, vous pouvez **télécharger le jeu** du tutoriel ici : [[http://​www.compilgames.net/​dl/​BeginnerTutorial.zip]]. En cas de problème, vous pouvez comparer avec votre version.
 +
 +===== Continuer avec GDevelop =====
 +
 +Vous pouvez continuer à parcourir les **[[fr:​gdevelop:​tutorials|tutoriels]]** ainsi que le **[[fr:​gdevelop:​documentation:​manual:​edit_getstart|guide de démarrage]]**.\\
 +N'​hésitez pas à parcourir les nombreux exemples fournis avec GDevelop.
 +
 +<​note>​En cas de problème, vous pouvez venir en discuter sur le [[http://​www.forum.compilgames.net|forum officiel]].\\
 +Si vous avez une remarque sur le tutoriel, n'​hésitez pas à venir également la formuler sur ce même forum, ou à corriger vous même le tutoriel en créant un compte sur le wiki</​note>​