Un premier tutoriel pour Game Develop

Bonjour,



Je vais vous proposer un 1er tutoriel sur Game Develop.



Idée de ce tutoriel, est de fournir les bases pour l'utilisation du logiciel en créant un petit jeu de tire avec des tanks.

Le tutoriel :



Obtenir Game Develop







Si vous ne l''avez pas dé'jà' fait, té'lé'chargez Game Develop sur le site officiel : http://compilgames.net.


Té'lé'charger Game Develop à' 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 :





class=mediacenter





Si vous le souhaitez, vous pouvez lire sur cette page une rapide introduction à' l''interface gé'né'rale de Game Develop.







Cré'er un nouveau jeu







Cliquez sur Nouveau dans le ruban pour cré'er un nouveau projet :





class=mediacenter





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 :





class=mediacenter







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 à' Game Develop 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 :





class=mediacenter





Choisissez le type &ldquo'Sprite ( image animé'e )&rdquo' 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.





class=mediacenter





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.





class=mediacenter





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 :





class=mediacenter





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.





class=mediacenter





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 :





class=mediacenter





Puis ajoutez un premier é'vè'nement en cliquant sur Ajouter un é'vè'nement dans le ruban :





class=mediacenter









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 : class=media


(Et non pas sur l''onglet Evenements du ruban.)




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 :





class=mediacenter





Une fenê'tre s''affiche, affichant sur la gauche les actions disponibles. Dans la liste, choisissez l''action Sprite >' Direction >' Tourner un objet 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.





class=mediacenter









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 Game Develop 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.




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 :





class=mediacenter





Vous pouvez alors voir que le tank se tourne bien vers la souris :





class=mediacenter





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 :





class=mediacenter





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 :





class=mediacenter





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 :





class=mediacenter





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.





class=mediacenter





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 :





class=mediacenter





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 !





class=mediacenter





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 &ldquo'FireRate&rdquo' dans le second. N''oubliez pas les guillemets dans le second paramè'tre.





class=mediacenter





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 &ldquo'FireRate&rdquo' en nom de chronomè'tre ( N''oubliez pas les guillemets ! ).


L''é'vè'nement complet ressemble à' ceci :





class=mediacenter





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 :





class=mediacenter





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 :





class=mediacenter





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.





class=mediacenter





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 ).





class=mediacenter







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 )





class=mediacenter





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.





class=mediacenter





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.





class=mediacenter





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 :





class=mediacenter





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 :





class=mediacenter





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.





class=mediacenter





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 :





class=mediacenter





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 un objet vers une position, situé'e dans la caté'gorie Sprite ( image animé'e ) >' Direction . 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 :





class=mediacenter





Vous pouvez lancer un test : Les ennemis apparaitront et se dirigeront vers vous :





class=mediacenter







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 :





class=mediacenter





La liste des extensions utilisé'es par le jeu s''affiche : Cochez Systè'me de particules et fermez la fenê'tre :





class=mediacenter





L''objet que nous souhaitons utiliser est dans un jeu d''exemple : Cliquez sur Fichier dans le ruban, puis Ouvrir un jeu d''exemple.





class=mediacenter





Choisissez le fichier Particles - Explosions





class=mediacenter





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.





class=mediacenter





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 :





class=mediacenter





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 :





class=mediacenter





Une fois revenu dans notre scè'ne, faites un clic droit sur un objet, et choisissez Coller :





class=mediacenter





L''objet Explosion est rajouté'e à' la liste :





class=mediacenter





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.





class=mediacenter





Double cliquez sur l''é'lement &ldquo'Images&rdquo' de votre jeu dans le gestionnaire de projet :





class=mediacenter





L''é'diteur de la banque d''images s''ouvre. Cliquez dans le ruban sur &ldquo'Ajouter une image&rdquo' et choisissez l''image nommé'e &ldquo'ExplosionTexture.png&rdquo'.





L''image est maintenant ajouté'e, vous pouvez revenir à' l''é'diteur de scè'ne en cliquant sur Nouvelle scè'ne dans les onglets.


L''ob

Nombre de Lectures : 574
Date de mise en ligne : 05 mai 2014 à 10:52

Les Catégories

Une Pub