Chapitre 1: animer l'ecran avec des sprites

Lire ceci presuppose que vous manipulez sans probleme les conditions, les boucles et les variables. Si ce n'est pas le cas, ce chapitre va vous paraitre plutot difficile. Ce que nous allons apprendre ici n'est pas tellement complique, mais demande une connaissances minimale du Basic.

Marre d'afficher du texte, de faire des jeux a base d'Input? Vous voulez programmer des Super Mario, des Castlevania pour vous la peter devant vos potes? Je vous comprends, mais on en est pas la. Meme une fois que vous aurez lu tous les chapitres de ce tutorial, vous ne serez pas forcement a meme de programmer un jeu tel que Metroid Prime. Programmer demande de la patience, et des mois vous seront necessaires pour maitrisez le Basic.



Si vous n'etes pas decourages par ce petit discours, alors allons y. Faisons une partie du chemin vers le graal qu'est Metroid.

Lecon 1A: sprites en ASCII

Citation :

-Mais, c'est quoi un sprite?

Un sprite c'est un dessin que l'on peut deplacer a l'ecran. Il peut etre de n'importe quelle taille,mais est generalement plutot petit. Quand on joue au casse briques, la balle est un sprite qui se deplace suivant une trajectoire definie par ses rebonds.

Citation :

-Et un sprite en ASCII?

La table des codes ASCII etendus est un tableau de 16 lignes sur 16 colonnes ou sont regroupes les caracteres qui forment l'alphabet ASCII (American Standard Code for Information Interchange). Vous l'aurez compris, un sprite en ASCII est... une lettre ou un symbole.
Quand vous tapez le code suivant:

Code:

  Output ( 4,6, "A" )

Vous affichez le caractere "A" aux coordonnees precisees. Vous affichez en fait un sprite deja definie par l'OS de votre Ti.
Je suis sur que vous vous etes deja amuse a dessiner quelque chose sur votre Ti avec les symboles. Recommencons, mais cette fois ci avec un programme.

Code:

   Output ( 1,2,"O" )
   Output ( 2,1,"-I-" )
   Output ( 3,2,"I" )
   Output ( 4,1,"I I" )

Quand on lance ce programme, on affiche ceci:

Citation :

-Super! Mais... Ca bouge pas, c'est tout pourri...

Soit patient, jeune padawan, j'y viens. Je suis sur que vous avez deja une petite idee de la maniere dont on va s'y prendre. Au lieu de mettre des coordonnees precises, on va mettre deux variables, A et B. Vous aviez trouve? Bravo!

Code:

   1->A
   1->B
   Output ( A,B+1,"O" )
   Output ( A+1,B,"-I-" )
   Output ( A+2,B+1,"I" )
   Output ( A+3,B,"I I" )

Amusez vous a changer A et B. Le bonhomme s'affiche a differents endroits de l'ecran.

Citation :

-Pas mal! Mais il faut changer les coordonnees a la main a chaque fois?

Pas du tout! On peut tres bien le deplacer suivant les indications de l'utilisateur en utilisant Getkey. Petit rappel: cette fonction retourne une valeur suivant la touche pressee, et 0 si aucune touche n'a ete pressee. La touche Enter correspond au code 105, 2nd a 21, la touche flechee gauche a 24, haut a 25, droite a 26 et bas a 34. Mais normalement vous savez deja tout ca, et tout ce que j'explique depuis tout a l'heure, vous le lisez d'un air condescendant. Mais attendez que ca se complique!
Cette partie la, vous allez la faire tout seul comme un grand. Je vous juste les grandes lignes du programme, et un petit screen de ce que vous devez obtenir:

Code:

   1) on initialise les variables
   2) debut de la boucle du programme
   3) on efface le sprite
   4) on recupere le code de la touche pressee
   5) on change les variables en consequence
   6) on affiche le sprite
   7) retour en (2)

Allez, c'est parti!



Correction:
Si vous lisez ceci, c'est soit que vous avez fini, soit que vous n'avez pas reussi. Si tel est votre cas, ce n'est pas grave! Continuez a travailler, a force de patience vous y arriverez, un programme ne marche jamais du premier coup.
Voici un des solutions possible:

Code:

   1->A
   1->B
   While 1      // boucle infinie, nous verrons plus tard pourquoi
   ClrHome      // on efface l'ecran
   Getkey->G   // on recupere le code de la touche pressee
   If G=24
   B-1->B
   If G=25
   A-1->A      // on change les coordonnees du sprite
   If G=26
   B+1->B
   If G=34
   A+1->A   
   Output ( A,B+1,"O" )
   Output ( A+1,B,"-I-" )
   Output ( A+2,B+1,"I" )
   Output ( A+3,B,"I I" )
         //on affiche le sprite
   End      // fin de la boucle, la calculatrice retourne au "While 1" en lisant ce End

Bien entendu, vos variables peuvent avoir des noms differents, et votre boucle peut etre construite differemment (Lbl A / Goto A par exemple), mais cela revient au meme.

Par contre, je vois trois gros problemes dans ce programme, pas vous?

Premierement, le seul moyen de sortir du programme est d'appuyer sur la touche On. Pas tres classe. Pourquoi ne pas quitter le programme des qu'on appuie sur la touche Enter? Il suffit pour cela de rajouter une condition au sein de la boucle:

Code:

   If G=105
   Stop

C'est deja mieux. Mais ce n'est pas tout. Le second probleme est esthetique: ca clignote, c'est moche, pourquoi? Le mechant de l'histoire est ce ClrHome recurrent qui s'execute meme quand on en a pas besoin. Pas tres sympa tout ca. Pour y remedier, on ne va faire un ClrHome que quand une touche est pressee, c'est a dire lorsque le bonhomme est deplace, et qu'il faut l'effacer avant de le reafficher plus loin. Pour cela, il faut faire deux choses: deplacer le ClrHome afin qu'il soit execute apres le Getkey, et tester si G est positif avant de l'executer:

Code:

   If G != 0       // != signifie different de
   ClrHome

Bien. Le dernier souci est un bug. En programmation, il faut toujours penser a tout. Et si on fait sortir le bonhomme de l'ecran, que se passe t'il? Le systeme affiche une erreur et interrompt le programme. Il faut donc empecher que cela arrive. Comment? En posant de nouvelles conditions au deplacement du perso:

Code:

   If G=24 and B != 1   // on ne deplace pas vers la gauche si le perso est deja au bord
   B-1->B
   ... et ainsi de suite

Voyons ce que cela donne a present:

Code:

   1->A
   1->B
   While 1      // boucle infinie, nous verrons plus tard pourquoi
   Getkey->G   // on recupere le code de la touche pressee
   If G=105
   Stop      // enter a ete pressee, on arrete le programme
   If G != 0
   ClrHome      // on efface l'ecran
   If G=24 and B !=1
   B-1->B
   If G=25 and A !=1
   A-1->A      // on change les coordonnees du sprite
   If G=26 and B !=13   // pourquoi 13 et pas 16? parce que le bonhomme est large de 3 caracteres
   B+1->B
   If G=34 and A !=4   // meme chose, le bonhomme est haut de 4 caracteres
   A+1->A   
   Output ( A,B+1,"O" )
   Output ( A+1,B,"-I-" )
   Output ( A+2,B+1,"I" )
   Output ( A+3,B,"I I" )
         //on affiche le sprite
   End      // fin de la boucle, la calculatrice retourne au "While 1" en lisant ce End

Voila, vous avez deplace votre premier sprite. Alors, heureux?

Citation :

-Oh oui, tres heureux!

/!\ ATTENTION: ce tutorial expose une methode pour afficher des sprites, mais pas forcement la meilleure. De plus quelques erreurs d'appreciations font que les codes presentes ne sont pas tout a fait corrects. Il y a moyen de faire mieux. Mais j'ai la flemme de modifier. Veuillez m'en excuser, et consulter d'autres tutos pour faire votre propre appreciation de la chose

To be continued.

La suite est en cours d'ecriture, vous pouvez repondre, de toute facon j'editerais le premier post.

Le tuto pour les menus arrivera apres.

Dites moi ce que vous en pensez, si c'est trop simple, mal dit ou autres.

franchement, çà promet

bon courage

pas mal du tout !
j'te donne...allez, 70 TO pour ce tuto

au fait, tu comptes faire plusieurs sujets ou tout écrire à la suite ?

Il me reste un peu a faire a la fin de celui ci, puis je ferais d'autres sujets.

aïe ^^ plus que 20 TO de différence avec Syfo ^^

tu l'as mis sur le wiki, ou t'attends d'abord la version finale ?

J'attends qu'il soit fini. Mais si tu veux le mettre a ma place sur le wiki une fois qu'il sera fini, te gene pas, j'ai la flemme de refaire la mise en page une nouvelle fois.

edit: fin de la lecon ajoutee.

Ca à l'air très bien, c'est résenté comme une FaQ, mais structuré comme un tuto.

Ouaip, j'ai copie le style des tutos du site du zero, qui sont tres bien faits. Je te remercie.

Mais de rien, mon cher!

oulala ouai t'as raison, la mise en page, ca va être un peu chaud ^^


quoique ... pas forcément, avec l'éditeur wysiwyg ..

le copier-coller marche pas ? :p
ProgVal>ça, ça s'appelle rédiger ^^
sinon c'est vrai que ça ressemble bien aux tutos du sdz :)

Tu trouves?

euh ?