Les sauts 2D en C

Introduction du cours

Hello les zér0s.

Que peuvent donc bien être les sauts en C avec la bibliothèque SDL ?

Des GoTo, des Lbl ? o_O

Nan, nan, rien de tout cela. :p Dans le forum, il y a souvent eu des questions du genre : « Comment je fais pour faire sauter mon perso ? », et très peu de réponses...

Aujourd'hui, on va donc apprendre à faire sauter vos personnages, en 3 méthodes !

Après un débat long et sanglant, bluestorm et d'autres personnes du Site du Zéro recommandent d'utiliser la troisième méthode. Je ne vous cache pas cependant que je tends plutôt vers les deux premières, ayant créé ce cours pour vous montrer les méthodes les plus rigoureuses possibles. La dernière méthode semble cependant plus acceptée dans l'idée générale, peut-être parce qu'elle est plus intuitive et que les autres méthodes paraissent plus fastidieuses. Tout ce que je peux vous conseiller est de lire les trois méthodes, et de les utiliser au cas par cas. Au fur et à mesure du tutorial, je vous expliquerai leur utilité spécifique.

Il faut quelques mises en garde et des pré-requis.
Ce tutoriel va utiliser des maths de niveau première S pour la méthode 1 et une partie du programme de sciences physiques de terminale. Je vais vous expliquer mais il faudra savoir ce que sont, en maths, une fonction, une parabole, une équation de courbe, la constante gravitationnelle, les fonctions paramétriques... Bref, soyez au moins en troisième pour la méthode 1, et... en terminale pour la méthode 2. De plus, il faut avoir lu et compris le tuto de M@téo21 disponible sur votre gauche (tuto C / SDL), ceci en entier. Ça, c'était les pré-requis.

Venez donc faire un saut dans mon tuto (c'est le cas de le dire) ! :D

Préparer le terrain

Donc, je disais qu'il y a besoin de connaître le tuto de M@teo21 sur le langage C ; ainsi vous savez, en C, initialiser une fenêtre SDL. Notre but est, sur cette fenêtre, d'afficher un personnage qui fait un saut. Commencez par ouvrir une fenêtre :

#include <stdlib.h> #include <SDL/SDL.h> #include <SDL/SDL_image.h> int main ( int argc, char** argv ) { //Init de la SDL SDL_Init( SDL_INIT_VIDEO ); // On crée une fenêtre SDL_Surface* ecran = SDL_SetVideoMode(640, 480, 16,SDL_HWSURFACE|SDL_DOUBLEBUF); // La boucle principale int fin = 0; while (!fin) { SDL_Event event; while (SDL_PollEvent(&event)) { switch (event.type) { case SDL_QUIT: fin = 1; break; case SDL_KEYDOWN: { if (event.key.keysym.sym == SDLK_ESCAPE) fin = 1; break; } } } // Affichage //On vide l'écran SDL_FillRect(ecran, 0, SDL_MapRGB(ecran->format, 0, 0, 0)); // Fin de l'affichage SDL_Flip(ecran); } SDL_Quit(); return 0; }

Voilà : ça, c'est le plus facile. :p Qu'est-ce qu'on obtient ? Un écran noir, pas trop grand, prenant bien sûr tout l'UC à cause de la fonction SDL_PollEvent();.

Notre but sera d'afficher un personnage qui saute du sol, pour revenir jusqu'au sol. Dites bonjour à... Mario !

Téléchargez mon Mario ; il est en PNG donc il va nous falloir ajouter la bibliothèque SDL_Image. Je vous rappelle comment faire. On met un include en haut de la page :

#include <SDL/SDL_image.h>

Et pour charger notre image, il faut ajouter une fonction au début de notre code :

SDL_Surface* mario = IMG_Load("mario.png");

Maintenant qu'on a notre cher Mario, il faudrait peut-être qu'on ait un sol sur lequel il saute. Ne vous tuez pas à ça, faites simplement comme moi :

La ligne, c'est le sol, hein ! :p

Nous avons maintenant tout pour commencer !

Méthode 1 : paraboles

Là, c'est la partie difficile qui commence... En effet, on va faire des maths et de la physique !

Commençons avec la première méthode.

Les sauts, une question de paraboles

Tout est dans le titre. En effet, d'après les lois physiques, un objet est en chute libre si uniquement son poids travaille. Par conséquent, ayant une vitesse initiale plus ou moins grande, sa vitesse horizontale est constante, mais la vitesse verticale devient rapidement négative (dès que l'objet a atteint le plus haut point de son saut)... Ne faites pas attention à ce que je viens de vous dire si vous n'y comprenez rien. :p

En gros, un saut, c'est le mouvement d'un objet en chute libre, ce qui aura pour conséquence que la courbe de sa trajectoire est... une parabole ! Non pas un texte qui cache un enseignement moral ou religieux ( :p ), mais une courbe arrondie au-dessus qui imite les vrais sauts.

L'objet monte vite, ralentit, puis redescend lentement en accélérant. C'est donc bien une parabole.

La méthode des paraboles fonctionne tout à fait correctement, on peut même dire que c'est la plus facile et la plus rapide des deux méthodes que je vous propose, et aussi la plus intuitive (vous verrez pourquoi après). Toutefois, comme les équations de paraboles sont diverses et nombreuses, il y a un certain risque de ne pas faire de sauts « réalistes », car, si les lois physiques donnent des paraboles, seule une certaine quantité de paraboles suit ces mêmes lois. Néanmoins, vous pouvez faire de très beaux sauts avec les paraboles ( :p ), et elles sont très facilement ré-adaptables. Sinon, quel intérêt de proposer cette méthode ? :D

Trouver l'équation d'une parabole

Pour définir la trajectoire du saut de l'image, il faut définir l'équation de la parabole correspondante.

Qui connaît les équations des paraboles ?

Bon, je vais vous le dire ( :) ) : une parabole a pour équation y = ax²+bx+c.

C'est là la partie fondamentale de notre saut : on connaît l'altitude de notre personnage (y) en fonction de son déplacement horizontal (x) !

Je vous montre à quoi ressemblerait cette parabole :

On va donc dessiner un repère fictif dans notre programme. o_O Je vous expliquerai ça plus en détail après. :p

On va maintenant s'occuper de trouver les coefficients a, b et c dans cette équation. En effet, si on connaît l'équation de notre parabole, on pourra donner le déplacement horizontal à notre programme pour qu'il calcule le déplacement vertical. :D Très pratique parce que cela s'appelle un saut ! :p

Trouver b

Eh oui je commence bien dans l'ordre ! :p b est le plus facile. En effet, comme on le voit sur mon schéma terrible de la mort qui tue, la courbe est symétrique par rapport à l'axe des ordonnées. Ce qui veut dire que le déplacement horizontal est nul, tout comme b.

Donc : b = 0.

Trouver c

Qui connaît la méthode pour trouver c ? C'est ce qu'on pourrait appeler l'ordonnée à l'origine. C'est en gros l'ordonnée du sommet de la parabole.

Par quoi cette ordonnée est-elle définie ?

Par la hauteur du saut, bien sûr !

Allez : de combien on fait sauter notre Mario ? 50 pixels ? 100 pixels ? Je choisirai 100 pour cet exemple, mais vous pouvez choisir plus, bien entendu.

Donc : c = 100.

Trouver a

Aïe, les choses se corsent encore. :p Où en sommes-nous, d'ailleurs ? L'équation qu'on a pour le moment est :

y = a*x²+100 (car b = 0).

De quoi peut bien dépendre a ? Je vous donne deux pistes :

• si a est positif, la parabole est tournée vers le haut, et inversement ;

• la parabole devient de plus en plus large quand a devient de plus en plus petit.

Pour la première info, a doit bien sûr être négatif. En effet, on ne veut pas que notre personnage tombe et remonte, mais qu'il saute et qu'il redescende.

Exemple de parabole tournée vers le haut, où a est par conséquent positif :

Et une tournée vers le bas, où a est négatif :

J'ai surligné avec mes grands talents artistiques ( :p ) la partie qui va nous intéresser. Les coordonnées négatives, c'est pas pour tout de suite. On prend donc un a négatif !

La seconde information est capitale. Une parabole devient de plus en plus large quand a se rapproche de 0... Il faudrait donc peut-être choisir un point de départ et d'arrivée. Le point de départ est le moment du saut, et le point d'arrivée, le moment de l'atterrissage.

Je choisis comme point de départ 200 px, et 301 px comme moment d'atterrissage. Pourquoi 301 ? Si j'avais choisi un nombre pair, il serait plus difficile de placer notre repère fictif. Les demi-pixels n'existent malheureusement pas... :p

Où sera donc placé notre repère fictif ?

Au point 251, bien sûr ! C'est le milieu entre 200 et 301.

Maintenant, on veut connaître les coordonnées de ces points, que j'appelle A, le point de départ, et B, le point d'arrivée. Le personnage est au sol pendant ces deux moments, non ? Dans ce cas :

A(200;300)
B(301;300)

Je vous rappelle que le sol, le trait que j'ai tracé, est à 300 px du bord inférieur de notre fenêtre. :) D'où le schéma suivant, avec les coordonnées absolues :

Malheureusement, on ne peut utiliser ça pour notre parabole, car cette dernière a un autre repère que notre fenêtre (l'origine est (251;300)). Réfléchissons donc : A et B sont distants de 101 px ; l'origine est au milieu de cette distance ; par conséquent, on peut dire que B est distant de 50 px de l'origine, et A aussi. Mais A est à gauche de l'axe des ordonnées. Donc, les abscisses de A sont négatives.

Ce qui nous donne ces points relatifs :

A(-50;0)
B(50;0)

D'où le second schéma, avec les coordonnées dans le repère fictif :

On met 0 en ordonnées car les ordonnées de l'origine sont identiques à celles de nos points. Il est capital d'avoir compris cette partie, n'hésitez pas à relire. ;)

Maintenant qu'on a ces nouveaux points (dont vous pouvez personnaliser les abscisses, d'ailleurs), on reconsidère notre équation :

y = a*x²+100.

On peut remplacer x et y par les coordonnées de l'un de ces points. Je choisis A ; par conséquent,

0 = a*(-50)² + 100 ; on résout l'équation :
2500a = -100.

Donc : a = -0,04.

a est-il bien négatif ? Oui, donc nous pouvons continuer !

Pourquoi faire tout ça

Eh bien, parce que nous allons l'utiliser dans notre programme. Le repère choisi sera fictif, non dessiné, et ce qui sera surtout intéressant, c'est que nous allons positionner Mario selon un intervalle régulier du temps, pour créer un mouvement fluide.

Argh ( :pirate: ) pourquoi on était là, déjà ? Ah oui, pour programmer !

Mario, il est présent dans 2 repères : un fictif, et le repère de notre fenêtre. L'ennui avec le repère de notre fenêtre, c'est qu'il est inversé ; le 0 est tout en haut. On ne va pas s'embêter, on verra ça plus tard. :)

2 repères, ça veut dire... 2 positions ! Eh oui ! J'ai nommé...

SDL_Rect posMarioAbs; posMarioAbs.x = 200; posMarioAbs.y = 300; SDL_Rect posMarioRel; posMarioRel.x = -50; posMarioRel.y = 0;

Hein ? Abs et Rel ?

Eh oui, il y a une position que j'appelle absolue : c'est la position de Mario dans la fenêtre. La seconde position est relative : c'est la position de Mario dans notre nouveau repère.

J'ai pris les coordonnées du point A pour la première position de notre Mario ; cf. ci-dessus.

Pourquoi en faire 2 ? Eh bien, parce que la SDL ne comprend rien aux repères relatifs : lui, y a que la fenêtre ! Et nous, on ne peut pas travailler dans le repère de la fenêtre ; conséquence, on travaille autre part, et ça nous fait deux positions. :p

Ne vous inquiétez pas, elles sont liées, c'est ça le plus grand intérêt. :)

Ne nous reposons pas sur nos lauriers tout de suite ; notre Mario est toujours immobile. :p

Nous allons donc nous intéresser au code, et plus particulièrement à la partie qui suit la gestion d'évènements, la partie que j'appelle « l'évolution ».

L'évolution

Ici, on va travailler sur les coordonnées de notre Mario.

L'évolution se situe ici :

main() { initialisation(); while { gestion_évènements(); EVOLUTION(); affichage(); } quitter(); }

Je vous ai fait un schéma bien sympathique de là où on va travailler. On va d'abord s'intéresser au temps.

Le temps

Comme vous travaillez tous avec des ordis 4.0 GHz, le code va s'exécuter super vite. :p Vous n'aurez même pas le temps de voir votre pauvre Mario sauter... On va donc mettre un intervalle de temps régulier entre chaque affichage :

SDL_Delay(10);

SDL_Delay interrompt le programme pendant un temps exprimé en ms. L'intervalle est de 10 ms, assez petit pour qu'on voie un mouvement bien fluide. On place cette fonction à la fin du code de l'évolution.

Maintenant, on veut qu'à chaque fois que la boucle passe, Mario avance. On va d'abord s'intéresser à sa vitesse horizontale.

La vitesse horizontale

Dans une chute libre, la vitesse horizontale ne varie pas. Si vous ne savez pas ce qu'est la vitesse horizontale, sachez que tout objet a une vitesse que l'on peut décomposer en vitesse horizontale et une vitesse verticale. Sous forme de vecteurs, on obtient ça :

Conséquence : on incrémente les abscisses de notre Mario à chaque fois que la boucle passe.

Les abscisses absolues ou relatives ?

Bonne question. :) Nous travaillons dans le repère fictif, donc ce seront les abscisses relatives :

posMarioRel.x++;

Voilà pour la vitesse horizontale.

La vitesse verticale

Pour la vitesse verticale, c'est là que notre équation de parabole va venir en aide. En effet, on avait dit qu'on pouvait trouver y en fonction de x :

y = -0,04x² + 100;

Donc :

posMarioRel.y=(-0.04*(posMarioRel.x*posMarioRel.x)+100);

En C, « ² » n'existe pas, il faut donc le faire manuellement.

Voilà, nous avons géré nos variables relatives. Quant aux...