Programmer avec ETP
Dans cet article nous allons apprendre à programmer un jeu avec ETP Studio. S'il y a quelque chose qui n'est pas clair ou vous semble faux dans cet article, veuillez le signaler à support@etpstudio.com
Les différentes parties qui composent cet article sont:
Etape1: Loop wizard et première compilation du jeu
Etape2: Lecture des touches et l'hélicoptère bouge
Etape3: Ajouter des actions aux sprites
Etape5: Un nouveau sprite: le tir
Etape6: Mettre des adversaires
Si vous avez l'habitude de programmer dans d'autres langages que l'ETP-Basic, sachez que la conception d'un programme se fait différemment avec ETP. Bien sur, vous pouvez programmer en tout codant en etp-basic comme vous le feriez avec ti-basic, mais cet article va vous montrer la puissance de l'environnement du développement.
Il faut imaginer son jeu non pas comme une suite d'instruction qui permet de faire des dessins mais comme un ensemble d'éléments animé et/ou controlables. Par exemple, pour un jeu de plateforme tel que MarioBros (R) on peut penser aux éléments "le personnage" (càd Mario, que l'on controle), "les fleurs" (qui apparaissent et disparaissent automatiquement), "les jetons" (qui sont en rotation et disparaissent lorsqu'on les prend).
Tous ces éléments sont en fait des Sprite. ETP Studio et son compilateur ETP-Basic ont été conçus de manière à créer et gérer très facilement les sprites. Les Sprites ont des actions (par exemple le personnage peut marcher vers la gauche ou vers la droite ou sauter), et les Sprites ont des propriétés (la position du Sprite sur l'écran, le fait qu'il soit visible ou non). En fait, avec ETP Studio vous dessinez votre Sprite, définissez ces actions et le Loop Wizard génère du code implicite qui s'occupe de son affichage! Vous voulez un exemple concret? Vous voulez faire un jeu de shoot'em up avec moi? C'est parti!
Prerequisites
Pour faire ce jeu, vous avez besoin de:
* Un PC, (64 Mo de RAM conseillés) avec Windows Me, 2000 ou XP
* ETP Studio (téléchargez la dernière version de ETP Studio (sur le site officiel par exemple www.etpstudio.com) )
* De quoi tester le jeu, c'est-à-dire
soit un émulateur: Virtual TI (vous devez avoir une ROM pour pouvoir l'utiliser, si vous avez une TI vous pouvez la transferer. Sur internet on peut également télécharger des ROM d'autres personnes mais sachez que cette pratique est illégale)
soit une vraie TI, avec les logiciels nécessaires pour transferer des fichiers à partir du PC.
* un moniteur
* un cerveau
Si vous avez tout ca, nous pouvons commencer.
Nous allons donc faire un jeu de shoot'em up ensemble. Un hélicoptère qui doit faire face à une attaque. Lancez ETP Studio de façon à avoir un projet vide. Dans le menu système, choisissez File > New > Tile
Un Tile sous le nom de Tile1 apparait dans l'explorateur de projet. Dans la fenetre intitulée Tile1, cliquez sur 16 de façon à avoir un Tile de 16x16, puis dessinez un hélicoptère qui a l'allure suivante:
Vous vous dites peut-être qu'il manque la moitié de l'hélice? C'est normal, vous allez comprendre pourquoi. Mais avant enregistrons le projet. Appuyez sur CTRL+S ou faites File> Save Project
Comme vous allez enregistrer pour la première fois ce projet, ETP Studio va créer un dossier qui va contenir tous les fichiers le concernant. Comme nom du répértoire tapez "helico", de même pour le nom du projet. Vous pouvez laisser Tile1 comme nom du fichier correspondant à Tile1.
Assurez vous que la fenêtre active est celle du Tile1. Dans le menu, cliquez sur Tile> Duplicate. Le nouveau tile s'intitule Tile2. Faites les modifications de façon à avoir l'hélice de l'autre coté. Vos deux tiles doivent rassembler à ça:
Nous voyons bien que ce sont deux images statiques qu'on ne peut pas animer. Il est temps maintenant de créer notre Sprite qui sera le "personnage" controlable de notre jeu.
Faites New>File>Sprite. Un nouveau Sprite intitulé Sprite1 apparait dans Project Explorer. Faites un click gauche sur son nom de manière à le séléctionner, puis un click droit pour faire apparaitre un menu contextuel et choisissez Rename File. Mettez le nom "helicopter".
Dans la fenêtre de l'éditeur de sprite, nous pouvons distinguer deux parties. Tout en haut, il y a les tiles que nous venons de dessiner, c'est donc une partie qui concerne tout le projet en général. Puis une partie spécifique au sprite que nous sommes en train de modifier. Vous pouvez glisser-déplacer les tiles que nous venons de créer qui sont en haut de la fenêtre, sur les tiles du sprite qui sont au milieu de la fenêtre. (Pour plus d'information sur le sprite editor, vous pouvez vous reporter à l'animation ) Une fois que vous avez deplacé les tiles, vous devez avoir ceci à l'écran:
Bravo! Vous venez de créer votre premier sprite, un hélicoptère capable de voler! Desormais, vous pourrez ajouter autant d'hélicoptère que vous voulez dans votre jeu.
En cliquant sur Play 
vous pouvez visualiser
l'animation du sprite. Vous pouvez changer la vitesse de la visualisation en
changeant "delay". Mais attention! La vitesse de l'animation sur PC
ne correspond pas à la vitesse de l'animation dans le jeu final sur la
calculatrice! Nous verrons comment reguler la "vraie" vitesse plus
loin.
C'est bien beau tout ça mais il peut interéssant de d'avancer à définir le jeu non?
Fermez la fenêtre du sprite.
Dans le menu cliquez sur Tools > Loop Wizard. Vous obtenez la question: "There is not any map in your project. Do you want to add now?" Répondez Oui. En fait, ETP Studio nous fait remarquer qu'il n'y a pas de "fond d'écran" défini pour notre jeu. En répondant oui, il va en créer un. Ainsi s'affiche une fenetre avec un grand rectangle blanc, intitulé "Map1". Ce rectangle blanc correspond à notre "fond", comme il est tout blanc, ca signifie que le fond d'écran dans le jeu sera tout blanc. Dans un premier temps nous allons le laisser. En bas de la fenêtre, nous retrouvons le sprite "helicopter" animé. Glissez le sur le rectangle blanc plutot vers la gauche et le haut. Une fois deplacé, le sprite animé apparait dans le rectangle. Ceci est en fait une prévisualisation de notre jeu!
|
|
Sur la liste en bas à droite de la fenêtre, on peut voir tous les sprites qu'on ajoute sur le map et changer leurs propriétés. Il suffit de cliquer sur une cellule pour l'éditer. Cliquez sur les cellules correspondants à la propriété X du sprite que nous venons d'ajouter. Tapez 75 et pour valider appuyez sur Entree. De même pour la propriété Y. On peut observer que le sprite sur le map change de place lorsqu'on valide. |
Une fois ces reglages terminés, votre fenêtre de map doit avoir l'allure suivante:
Il est important de noter une chose, la grille contient deux colonnes différentes "Sprite Name" et "Sprite". En fait, il faut imaginer le sprite que nous venons d'insérer comme une variable. La propriété Sprite Name permet de définir son nom et la propriété Sprite permet de définir son type. Ici, le sprite que nous venons d'ajouter s'appelle helicopter1 et est de type helicopter. Lorsqu'il faudra déplacer ce sprite, le modifier ou lui faire faire d'autres actions par un code, nous utiliserons ce nom helicopter1.
C'est bien beau tout ça mais il peut interéssant de faire afficher notre hélicoptère sur la TI non?
Loop Wizard (assistant encore appelé "j'ai pas envie de programmer 15000 lignes pour gérer l'affichage")
C'est la dernière phase pour construire notre jeu éxécutable.
ETP Studio va générer du code qui nous épargnera d'écrire du code pour l'affichage mais nous pourrons quand même modifier de manière dynamique (c'est-à-dire au moment de l'éxécution) ce qui va être visualisé. Cette phase peut sembler compliqué pour les personnes n'ayant jamais programmé mais une telle conception est vraiment indispenseable pour que les programmeurs puissent personnaliser leurs programmes et avoir un contrôle sur le produit final.
Maintenant que nous avons un map dans le projet, notre tentative de loop wizard devrait aboutir.
Dans le menu, cliquez sur Tools> Loop Wizard. Laissez les options par défaut, et cliquez sur "Generate". ETP Studio affiche un module contenant le code généré. Il peut être interéssant de commenter ces quelques lignes.
Procedure MapDisplay ScreenInit 'This internal macro initializes the display Do ScreenRender 'This internal macro displays sprites 'TO DO: Place your gameplay code here Loop While Not(KEY89_ESC) |
Il s'agit d'une procédure nommé MapDisplay. Cela signifie qu'il faut appeler MapDisplay pour faire afficher notre hélicoptère.
Ce qui est écrit en vert sont des commentaires qui ne sont pas pris en compte par le compilateur. Comme c'est écrit, il y a deux macros ScreenInit et ScreenRender qui permettent gérer l'affichage. En fait, derrière ces mots, il existe un code assembleur extrêmement optimisé en vitesse qui gère l'affichage. Cette optimisation se reflète sur les performances de l'éxécutable final que nous n'allons pas tarder à voir.
On peut observer une structure de boucle Do While, ceci permet de rester dans le jeu et de continuer à afficher tant que l'utilisateur n'appuie pas sur la touche "ESCAPE", car il y a une condition Not(KEY89_ESC).
Il ne nous reste plus qu'à appeler la procédure MapDisplay. Mais où allons-nous l'appeler? En réalité, le point d'entrée du code etp-basic se fait dans la procédure MAIN. Ca veut dire que nous devons créer une procédure MAIN et appeler MapDisplay.
Dans le menu, cliquez sur File>New> Module, ceci crée un module vide. Dans ce module tapez ceci:
Procedure MAIN: Clear GrayOn MapDisplay GrayOff |
(Il n'est pas interdit de faire un copier-coller)
Ces lignes signifient:
|
Procedure MAIN: |
Lorsqu'on entre dans le programme... |
|
Clear |
...efface l'écran,... |
|
GrayOn |
...active le niveau de gris... |
|
MapDisplay |
...appelle MapDisplay qui va afficher mon joli hélicoptère,... |
|
GrayOff |
...au retour désactive le niveau de gris |
Si vous n'avez jamais programmé et que vous n'êtes pas à l'aise avec ces instructions, vous pouvez vous passer de les comprendre jusqu'à un certain niveau.
Nous pouvons enfin compiler, pour cela cliquez sur 
ou appuyez sur
F8. ETP Studio se charge alors de trouver d'éventuels erreurs sur ce que nous
venons de faire. S'il y a une erreur, il faut la corriger (eh oui!), vérifiez
que vous avez bien tapé les 5 lignes de code précédentes.
S'il n'y a pas d'erreur, un fichier éxécutable par la calculatrice est crée dans le répértoire indiqué dans la fenêtre debug.
myprojct.89z est crée dans D:\VB98\ETP
Si vous utilisez VTI:
Une fois VTI lancé appuyez sur F10 ou faites un click droit puis séléctionnez "Send file to VTI", atteignez le répértoire indiqué dans la fenêtre debug de ETP. Ouvrez le fichier myprojct.89z Faites de même avec le fichier Map1.89z
Si vous utilisez votre TI:
Utilisez un logiciel de connexion pour envoyer les fichiers qui se trouvent dans le répértoire indiqué.
N'oubliez pas d'envoyer le fichier Map1.89z!!! Il faut envoyer les deux fichiers. Map1.89z correspond au fond d'écran, si vous oubliez de l'envoyer, le fond d'écran sera rempli de pixels completement aléatoires.
Dans l'écran HOME tapez myprojct( ) puis "ENTER"
|
|
Nous retrouvons le résultat des optimisations dans le code assembleur implicite, nous voyons notre hélicoptère avec une rapidité incroyable! Il faut remercier ici Geoffrey Anneheim. En effet, même si nous ne le voyons pas sur cet exemple, la calculatrice est en train d'éxécuter du code pour gérer l'affichage du map (du fond d'écran) également! Plus loin dans cet article, nous allons ajouter des dizaines d'hélicoptères et leur gestion, et nous allons voir que les performances ne sont pas près de diminuer. |
Lorsqu'on appuie sur la touche "ESC", la calculatrice revient sur l'écran HOME.
Vous pouvez sauvegarder l'ensemble du projet en cliquant sur File> Save project ou en appuyant sur CTRL + S. Vous pouvez laisser les noms des fichiers tels quels.
Si vous n'avez pas suivi toutes les étapes, vous pouvez...
Télécharger le projet helico_step1
Petit détail sur la configuration du projet
Vous avez sans doute remarqué que le nom du fichier sur la calculatrice était tout sauf explicite. Pour changer le nom on-calc, cliquez sur le nom du projet dans la fenêtre Project Explorer, et changez le champs "File name on calculator". Dans cet article, nous allons garder le nom myprojct( ) pour des raisons arbitraires de l'auteur.
Ralentir le jeu!!
Parce que l'affichage est trop rapide, nous allons ralentir le programme. Dans la conception des jeux, les programmeurs doivent à tout prix rendre leur programmes le plus rapide possible. Mais dans ce cas avec ETP, à cause des optimisations de Geoffrey, nous sommes obligés de ralentir! Il n'est pas difficile de ralentir un programme. Souvent les programmeurs le font sans le vouloir.
Ouvrez le module nommé MapDisplay en double-cliquant sur son nom dans le Project Explorer. Nous retrouvons les fameuses lignes de code qui permettent de gérer l'affichage. Après le commentaire "'TO DO ..." et avant "Loop While ...", ajoutez "Wait 1" . La fonction Wait permet de faire attendre. C'est-à-dire pendant une certaine durée la calculatrice ne va rien faire, elle va quand même continuer à afficher, nous avons ainsi ralenti le jeu.
|
|
Si vous avez tapé à la main (sans faire de copier-coller) la ligne "Wait 1", vous avez sans doute constaté qu'un label d'aide syntaxique s'est affiché. ETP Studio étant conçu pour faciliter la programmation, un tel outil ne devrait pas surprendre. |
Après les modifications, le code devrait rassembler à cela:
Procedure MapDisplay ScreenInit 'This internal macro initializes the display Do ScreenRender 'This internal macro displays sprites 'TO DO: Place your gameplay code here Wait 1 Loop While Not(KEY89_ESC) |
Les fichiers sur votre calculatrice ou sur l'émulateur ne peuvent pas savoir ces modifications. Il faut donc recréer l'éxécutable et l'envoyer à la calculatrice ou l'émulateur. Appuyez sur F8 et envoyez les fichiers myprojct.89z et Map1.89z
Testez le nouveau programme. Le jeu a un peu ralenti.
C'est bien beau tout ça mais est-il possible de faire bouger l'hélicoptère? Nous allons le faire tout de suite..
Lecture des touches (interaction avec l'utilisateur)
La lecture des touches est une chose très simple avec ETP. Mais si vous n'avez jamais programmé, vous vous demandez peut-être où doit-on ajouter la gestion des touches. Nous devons l'ajouter dans la procédure MapDisplay. En réalité la procédure MapDisplay va être le coeur du jeu, toutes les actions, les interactions seront gerées dedans. Pour tester quelque chose, nous devons utiliser le mot clé "If". Il s'agit d'un mot clé qu'on retrouve dans pas mal de langages. En ETP-Basic, la syntaxe d'un test est la suivante:
If condition1 Then ...bla bla blaEndIf |
L'équivalent en langue française de ceci serait:
|
If condition1 Then |
Si la condition1 est vraie alors... |
|
...bla bla bla |
...fait bla bla bla |
|
EndIf |
J'ai fini de dire ce que j'avais à dire |
Dans notre cas, nous voulons dire: "Si l'utilisateur appuie sur la touche de Flèche Haut, déplace l'hélicoptère vers le haut"
La condition est donc KEY89_UP, c'est une fonction interne à ETP-Basic qui retourne "Vrai" si l'utilisateur est en train d'appuyer sur la flèche Haut, et "Faux" sinon. Nous savons donc que nous devons écrire:
If KEY89_UP Then ...bla bla blaEndIf |
A une différence près, au lieu d'écrire "...bla bla bla", nous devons lui dire de déplacer le sprite. Rappelez-vous du moment où nous avons inseré le sprite helicopter dans le map. Nous avions dit que cela revenait à déclarer une variable de nom helicopter1 (que nous pouvons changer dans le map editor) et de type helicopter qui est un sprite. Ce syllogisme nous amène incontestablement à l'affirmation suivante: helicopter1 est un sprite! Nous nous en doutions un peu, mais grâce à ce raisonnement rigoureux, nous en sommes sûrs. Grâce à ETP-Basic, vous pouvez changer les propriétés de ce sprite, par exemple sa position. Pour déplacer le sprite helicopter1 de façon à avoir 30 pixels en coordonnée horizontale, il suffit de taper
helicopter1.x = 30 |
C'est exactement ce dont nous avons besoin dans ce cas. Nous voulons déplacer le sprite vers le haut, il faut donc diminuer sa propriété Y, car Y désigne la coordonnée vertical descendante. Il faut donc taper
helicopter1.y = helicopter1.y - 1
Après les modifications, le code de la procédure MapDisplay doit être la suivante:
Procedure MapDisplay ScreenInit 'This internal macro initializes the display Do ScreenRender 'This internal macro displays sprites 'TO DO: Place your gameplay code here Wait 1 If KEY89_UP Then helicopter1.y = helicopter1.y - 1EndIf Loop While Not(KEY89_ESC) |
Ce code ne gère que la touche de flèche Haut. Ajoutons la gestion des autres touches de manière analogue.
Le code devient:
Procedure MapDisplay ScreenInit 'This internal macro initializes the display Do ScreenRender 'This internal macro displays sprites 'TO DO: Place your gameplay code here Wait 1 If KEY89_UP Then helicopter1.y = helicopter1.y - 1EndIf If KEY89_DOWN Then helicopter1.y = helicopter1.y + 1EndIf If KEY89_LEFT Then helicopter1.x = helicopter1.x - 1EndIf If KEY89_RIGHT Then helicopter1.x = helicopter1.x + 1EndIf Loop While Not(KEY89_ESC) |
Compilez en appuyant sur F8 et envoyez l'éxécutable sur la calculatrice.
Avec seulement quelques lignes de code, vous avez votre sprite animé qui peut se déplacer avec les touches!
Télécharger le projet helico_step2
Nous avons vu comment créer un sprite et le faire afficher. Maintenant, il peut être intéressant d'ajouter des actions à notre sprite. Par exemple, lorsque l'utilisateur déplace l'hélicoptère vers la gauche, nous pouvons faire afficher un hélicoptère qui va vers la gauche. Nous allons également ajouter une explosion, la touche 2nd par exemple permettra l'auto-destruction de l'hélicoptère.
Ouvrez le tile Tile1 et dans le menu cliquez sur Tile>Duplicate. Dans la
fenêtre d'outils cliquez sur le bouton qui permet de faire une symétrie selon
l'axe vertical. 
Le dessin de l'hélicoptère
dans le Tile3 a été changé.
Faites de même avec le Tile2 de façon à obtenir un dessin d'hélicoptère se déplaçant vers la gauche dans le Tile4.
Fermez ces fenêtres et ouvrez le sprite helicopter en double cliquant sur son nom dans la fenêtre Project Explorer.
Nous pouvons remarquer que les tiles que nous venons d'ajouter apparaissent en haut de la fenêtre.
Jusqu'à présent nous n'avions qu'une seule action pour l'hélicoptère.
Nous allons changer le nom de l'action Action_1 en FlyRight. Pour cela, cliquez sur "Change action name" et entrez FlyRight. Le bouton play permet de visualiser l'action "voler vers la droite" que nous venons de nommer "FlyRight".
Pour ajouter l'action "voler vers la gauche", cliquez sur "Add action" et entrez le nom "FlyLeft".
Nous remarquons que les tiles correspondant à cette action sont vides.
Utilisez le glisser-déplacer pour mettre les tiles Tile3 et Tile4 dans les tiles de l'action FlyLeft.
|
Dans le menu déroulant Action, nous pouvons choisir l'action à éditer. Il est important de remarquer que l'action FlyRight apparait premier dans le menu et l'action FlyLeft deuxieme. Nous pouvons donc leur associer un index. |
|
|
Index |
Action |
|
1 |
FlyRight |
|
2 |
FlyLeft |
Nous avons ajouté une nouvelle action à notre sprite helicopter. Maintenant il faut changer le code de façon à faire faire l'action FlyLeft lorsque l'utilisateur déplace l'hélicoptère vers la gauche et FlyRight lorsque l'utilisateur déplace l'hélicoptère ver la droite.
Pour cela, il faut modifier la propriété action de la variable déclarée en tant que helicopter de cette manière:
helicopter1.action = 1 ... helicopter1.action = 2 |
Le code du MapDisplay devient donc:
Procedure MapDisplay ScreenInit 'This internal macro initializes the display Do ScreenRender 'This internal macro displays sprites 'TO DO: Place your gameplay code here Wait 1 If KEY89_UP Then helicopter1.y = helicopter1.y - 1EndIf If KEY89_DOWN Then helicopter1.y = helicopter1.y + 1EndIf If KEY89_LEFT Then helicopter1.x = helicopter1.x - 1 helicopter1.action = 2EndIf If KEY89_RIGHT Then helicopter1.x = helicopter1.x + 1 helicopter1.action = 1EndIf Loop While Not(KEY89_ESC) |
Compilez votre programme et envoyez l'éxécutable produit à la calculatrice.
|
|
L'hélicoptère s'affiche avec les actions correspondantes à chaque évenement!
|
Télécharger le projet helico_step3
Pour l'action explosion, nous devons dessiner les tiles.
Dans le menu, faites New>File>Tile ou appuyez sur CTRL + T. Dessinez quelques pixels faisant apparaitre un début d'explosion. Recommencez ceci jusqu'à obtenir 5 tiles pouvant donner une illusion d'explosion:
[ Vous pouvez également télécharger ces 5 tiles: explosion_tiles.zip Après les avoir décompressé, pour les insérer dans votre projet ouvrez chaque tile et faites File> Save project. Une copie de chaque tile sera alors mis dans le dossier contenant les autres fichiers du projet.]
Dans le sprite editor correspondant à helicopter, cliquez sur "Add action" et tapez "explose". Glisser-déplacez les 5 tiles crées dans les tiles de cette action. Une fois que vous avez effectué cela, le sprite editor devrait rassembler à:
Maintenant, il faut ajouter le code nécessaire à faire afficher cette explosion, lorsque l'utilisateur appuie sur 2nd. Dans la procédure MapDisplay, ajoutez
If KEY89_2ND Then helicopter1.action = 3EndIf |
Tout simplement. La procédure MapDisplay en entier est donc:
Procedure MapDisplay ScreenInit 'This internal macro initializes the display Do ScreenRender 'This internal macro displays sprites 'TO DO: Place your gameplay code here Wait 1 If KEY89_UP Then helicopter1.y = helicopter1.y - 1EndIf If KEY89_DOWN Then helicopter1.y = helicopter1.y + 1EndIf If KEY89_LEFT Then helicopter1.x = helicopter1.x - 1 helicopter1.action = 2EndIf If KEY89_RIGHT Then helicopter1.x = helicopter1.x + 1 helicopter1.action = 1EndIf If KEY89_2ND Then helicopter1.action = 3EndIf Loop While Not(KEY89_ESC) |
Compilez, et executez comme vu précédemment. Ainsi, lorsque l'utilisateur appuie sur la touche 2ND, l'hélicoptère s'auto-détruit.
Bien sur, cette action d'auto-destruction ne servira à rien dans le jeu, et avait seulement un but pédagogique. Toutefois, le fait d'avoir défini l'action d'explosion d'un hélicoptère va servir lorsque les hélicoptères ennemis sont touchés.
Une fois que vous avez compris tout ce qui a été fait jusqu'ici, vous pouvez enlever les lignes suivantes:
If KEY89_2ND Then helicopter1.action = 3EndIf |
Télécharger le projet helico_step4
Nous allons désormais programmer le tir. Pour cela, créez un nouveau Tile en appuyant sur CTRL + T. Dessinez un rectangle de façon à l'avoir à peu près à la même hauteur que l'hélicoptère.
Pour pouvoir gérer son affichage automatiquement, nous devons créer un sprite correspondant à ce Tile.
Dans le menu, faites File > New> Sprite ou bien simplement appuyez sur CTRL + L
Glisser-déplacez le nouveau tile dans les tiles de l'action par défaut. Il ne sera pas nécessaire de renommer l'action, car il n'y en aura qu'une. Nous devons renommer le sprite de manière plus approprié. Dans la fenetre "Project Explorer", cliquez une fois sur le nouveau sprite que vous venez de créer. Puis en faisant un click droit, faites afficher le menu contextuel dans lequel vous choisissez "Rename File". Renommez le sprite en "Fire".
Dans la fenêtre "Project Explorer", double cliquez sur Map1 pour faire afficher la carte du jeu. Vous pouvez remarquer que parmi les sprites, il y a notre nouveau sprite "Fire". Par contre il n'apparait pas dans la liste à droite, ce qui est normal car nous ne l'avons pas encore ajouté au jeu.
Faites un glisser-déplacer du sprite "Fire" n'importe où dans le map (le grand rectangle blanc). Les propriété de notre sprite qui va apparaitre dans le jeu, apparaissent désormais dans la liste.
Il faut bien faire la distinction entre Fire2 et Fire. En effet, Fire2 est le nom du sprite qui va apparaitre dans le jeu, tandis que Fire est le nom du modele de sprite, Fire est quelque chose d'abstrait.
Mettez la propriété Visible du sprite Fire2 à False. En effet, nous concevons le jeu de manière à voir le feu que lorsque l'utilisateur appui sur 2ND. Ce qui sera décrit dans la procédure MapDisplay.
Nous nous soucions pas des autres propriétés de Fire2 ici car ils vont etre modifié au moment de l'execution. Il faut donc les attribuer en codant.
Tout d'abord, déclarons une variable locale qui retiendra la vitesse (et donc le sens) du mouvement du Fire2. Nous poserons 0 pour "pas de mouvement", -3 pour "tir vers la gauche", 3 pour "tir vers la droite".
Local FireVel as Integer FireVel = 0 |
Programmons maintenant la gestion de la touche. Si l'utilisateur appuie sur 2ND et que l'hélicoptère n'est pas affiché (KEY89_2ND And fire2.visible = 0) , il faut le faire afficher (fire2.visible = 1), le mettre à la même hauteur que l'hélicoptère (fire2.y = helicopter1.y)
Si l'hélicoptère est dirigé vers la gauche, le tir aura une vitesse de -3, si l'hélicoptère est dirigé vers la droite, le tir aura une vitesse de 3.
If KEY89_2ND And fire2.visible = 0 Then fire2.visible = 1 fire2.y = helicopter1.y If helicopter1.action = 2 Then FireVel=-3 ElseIf helicopter1.action = 1 Then FireVel=3EndIf EndIf |
Maintenant il faut programmer le déplacement du tir. Il suffit d'ajouter la ligne: fire2.x = fire2.x + FireVel
Mais il faut faire ça uniquement lorsqu'un tir est en route. C'est pourquoi il faut le mettre sous condition. On peut aussi mettre une condition pour "finir" le tir lorsqu'il est au dela de la visibilité de l'écran.
If fire2.visible = 1 Then fire2.x = fire2.x + FireVelIf fire2.x > cam.x + 160 Or fire2.x +16 < cam.x Then fire2.visible = 0EndIf EndIf |
Compilez et faites marcher votre programme. Vous verrez que votre hélicoptère peut maintenant faire des tirs!
Si votre programme ne fonctionne pas, vous avez probablement oublié de mettre la propriété "Visible" de "fire" à False. Editez le map pour corriger.
Télécharger le projet helico_step5
Maintenant nous allons ajouter des adversaires à notre hélicoptère. Ouvrez le map Map1, et glissez un sprite helicopter à coté de celui qui est déjà sur le map. Changez les coordonnées de manière à avoir quelque chose d'identique à ce qui suit:
Le sprite correspondant à l'hélicoptère adversaire s'appelle donc helicopter3.
Si vous compilez et executez le programme, vous verrez que le deuxième hélicoptère est en place. Mais il ne bouge pas et n'explose pas lorsqu'on lui tire dessus car nous ne l'avons pas encore programmé.
Dans un premier temps, nous allons programmer l'explosion de l'hélicoptère adverse. Pour cela, il faut faire un test de collision entre le sprite fire et le sprite helicopter3. Il faut donc faire une comparaison entre les coordonnées. La collision peut se traduire avec la condition: If AbsInt(fire2.x - helicopter3.x) < 16 And AbsInt(fire2.y - helicopter3.y)<8 Then
Nous devons placer cette condition à l'intérieur de la condition fire2.visible = 1, en effet si le tir n'est pas visible, la collision ne peut pas avoir lieu.
Une fois qu'on a détécté la collision, il ne nous reste plus qu'à faire afficher l'explosion de l'hélicoptère adverse grâce à l'instruction: helicopter3.action = 3 et il faut rendre le tir invisible: fire2.visible = 0
If fire2.visible = 1 Then fire2.x = fire2.x + FireVelIf fire2.x > cam.x + 160 Or fire2.x +16 < cam.x Then fire2.visible = 0EndIf If AbsInt(fire2.x - helicopter3.x) < 16 And AbsInt(fire2.y - helicopter3.y)<8 Then helicopter3.action = 3 fire2.visible = 0EndIf EndIf |
|
|
A ce stade, le jeu fonctionne mais n'est pas très difficile à jouer! |
Nous allons maintenant faire bouger l'adversaire. L'intelligence artificielle sera très.. artificielle mais vous pouvez l'améliorer à votre guise. Nous allons faire en sorte que l'hélicoptère adverse se déplace aléatoirement. Bien entendu, nous pouvons utiliser la fonction Random directement, et mettre helicopter3.x = helicopter.x + Random(3) par exemple. Mais dans ce cas, nous ne controlerions pas l'éventuelle sortie des limites de l'écran de l'hélicoptère.
Nous allons passer par deux variables qui vont contenir des coordoonées aléatoires (mais dans les limites de l'écran ou du map) et l'hélicoptère adverse se déplacera vers ces coordonnées. Déclarons ces deux variables en début de procédure:
Local HToGoX as Integer Local HToGoY as Integer |
et on les initialise à un endroit visible dès le départ du jeu:
HToGoX = 125 HToGoY = 30 |
Maintenant, il faut dire à l'hélicoptère adverse de se déplacer vers ces coordonnées à chaque pas de l'affichage. Donc quelque part à l'intérieur de la boucle principale. Il faut comparer les coordonnées actuelles de l'hélicoptère avec les coordonnées auxquelles on veut qu'il y aille. Par exemple: If helicopter3.x < HToGoX veut dire: "si la coordoonnée X de l'hélicoptère est inférieure à là où il doit aller". Dans ce cas, il faut aller vers la droite, ainsi on met: helicopter3.x = helicopter3.x + 2 , et ainsi de suite..
If helicopter3.x < HToGoX Then ' déplace toi vers la droite helicopter3.x = helicopter3.x + 1 helicopter3.action = 1 ElseIf helicopter3.x > HToGoX Then ' déplace toi vers la gauche helicopter3.x = helicopter3.x - 1 helicopter3.action = 2 ElseIf helicopter3.y < HToGoY Then helicopter3.y = helicopter3.y + 1 ElseIf helicopter3.y > HToGoY Then helicopter3.y = helicopter3.y - 1 Else 'on est arrivé à destination EndIf |
Une fois que l'hélicoptère est arrivé à destination, nous pouvons affecter de nouvelles valeurs aux coordonnées HToGoX et HToGoY.
If helicopter3.x < HToGoX Then ' déplace toi vers la droite helicopter3.x = helicopter3.x + 1 helicopter3.action = 1 ElseIf helicopter3.x > HToGoX Then ' déplace toi vers la gauche helicopter3.x = helicopter3.x - 1 helicopter3.action = 2 ElseIf helicopter3.y < HToGoY Then helicopter3.y = helicopter3.y + 1 ElseIf helicopter3.y > HToGoY Then helicopter3.y = helicopter3.y - 1 Else 'on est arrivé à destinationHToGoX = 10+Random(160) HToGoY = 10+Random(90) EndIf |
L'hélicoptère se déplace sans problème de façon aléatoire.
Juste une dernière correction. Il faut mettre tous ces déplacement sous condition. En effet, si l'hélicoptère est frappé par un tir et qu'il explose, il ne devrait pas bouger. La version finale est donc:
If helicopter3.action <> 3 Then If helicopter3.x < HToGoX Then helicopter3.x = helicopter3.x + 1 helicopter3.action = 1 ElseIf helicopter3.x > HToGoX Then helicopter3.x = helicopter3.x - 1 helicopter3.action = 2 ElseIf helicopter3.y < HToGoY Then helicopter3.y = helicopter3.y + 1 ElseIf helicopter3.y > HToGoY Then helicopter3.y = helicopter3.y - 1 Else HToGoX = 10+Random(160) HToGoY = 10+Random(90) EndIf EndIf |
Et voilà, votre jeu fonctionne à merveille!
Si vous avez eu du mal à suivre certaines étapes vous pouvez Télécharger le projet helico_step6
Essayer de viser un hélicoptère est simple. Mais qu'en est-il d'une dizaine d'hélicoptères? Vous allez maintenant découvrir comment ETP Studio permet de gérer plusieurs sprites qui ont le même comportement (ici ce sont les hélicoptères adverses). Vous verrez égalament que malgré la présence d'un nombre important de sprite, les performances ne sont pas près de baisser.
Ouvrez le map Map1 et glissez une dizaine de sprite helicopter sur le map. Ajoutez-en de manière à remplir le tableau en bas à droite jusqu'à l'index 13.
Si vous compilez déjà le programme, vous remarquerez que les hélicoptères que nous venons d'ajouter sont affichés mais qu'ils ne bougent pas.
Nous avons déjà programmé le comportement d'un adversaire, nous n'allons pas faire des copier-coller en mettant helicopter4 au lieu de helicopter3 et ainsi de suite.. En réalité, les routines d'affichage automatique qui vous épargnent d'un travail fastidieux et qui font de ETP un outil de programmation facile permettent également d'accéder aux sprites du map comme s'il s'agissait d'un tableau. Le nom de ce tableau est MapSprites [ ..] Vous n'avez pas à savoir le fonctionnement des tableaux pour continuer ce tutoriel mais si vous voulez plus d'informations sur les tableaux en ETP-Basic vous pouvez consulter la documentation sur le site officiel. Vous avez juste à savoir qu'au lieu d'utiliser le nom d'un sprite du map, on peut remplacer son nom par MapSprites[index]. Par exemple, au lieu d'écrire
fire2.visible = 0
nous aurions pu écrire
MapSprites[2].visible=0
car dans le map, fire2 a comme index 2: 
Quel est l'interet? Entre les crochets, au lieu de mettre un nombre constant comme 2, nous pouvons mettre une variable i et ainsi parcourir l'ensemble des sprites du map. Déclarons la variable i en début de procédure:
Local i as Integer |
Avec une boucle For.. nous allons gérer tous les sprites correspondants aux hélicoptères adverses. On remplace tous les helicopter3 par MapSprites[i] et on met le tout dans une boucle For.
For i=2 To 12 If fire2.visible = 1 Then fire2.x = fire2.x + FireVel If fire2.x > cam.x + 160 Or fire2.x +16 < cam.x Then fire2.visible = 0 EndIf If AbsInt(fire2.x - MapSprites[i].x) < 16 And AbsInt(fire2.y - MapSprites[i].y)<8 Then MapSprites[i].action = 3 fire2.visible = 0 EndIf EndIf If MapSprites[i].action <> 3 Then If MapSprites[i].x < HToGoX Then ' déplace toi vers la droite MapSprites[i].x = MapSprites[i].x + 1 MapSprites[i].action = 1 ElseIf MapSprites[i].x > HToGoX Then ' déplace toi vers la gauche MapSprites[i].x = MapSprites[i].x - 1 MapSprites[i].action = 2 ElseIf MapSprites[i].y < HToGoY Then MapSprites[i].y = MapSprites[i].y + 1 ElseIf MapSprites[i].y > HToGoY Then MapSprites[i].y = MapSprites[i].y - 1 Else 'on est arrivé à destination HToGoX = 10+Random(160) HToGoY = 10+Random(90) EndIf EndIf Next |
Regardons le résultat:
|
|
Tous les hélicoptères se déplacent mais ils semblent tous vouloir aller au même endroit. |
Ceci vient du fait que nous n'avons qu'un seul couple de variable auxiliaire (HToGoX et HToGoY) pour retenir la position aléatoire intermédiaire. Tous les sprites utilisent ces deux là et par conséquent "veulent" se déplacer au même endroit. Pour les variables HToGoX et HToGoY, il faut également créer un tableau. Changeons leur déclarations comme suit:
Local HToGoX[13] as Integer Local HToGoY[13] as Integer |
et leurs initialisations:
For i=2 To 12 HToGoX[i] = 125 HToGoY[i] = 30 Next |
Remarque: avec cette initialisation, tous les sprites iront au même endroit au départ, mais puisqu'ils auront une valeur aléatoire différente une fois arrivé à destination, ceci n'est pas très grave.
Il faut également changer tous les HToGoX en HToGoX[i], de même pour les HToGoY.
|
|
Tous les hélicoptères adverses se déplacent aléatoirement et de façon indépendant les uns des autres. |
Télécharger le projet helico_step7
Cet article a été écrit par Onur Celebi et publié par Geoffrey ANNEHEIM le 14/03/06. Toute reproduction de cet article sans l’autorisation de l’auteur est interdite. Je tiens tout particulièrement à remercier Onur pour sa contribution !