Big Tuto SDL 2 : Rabidja v. 3.0
Chapitre 9 : Déplacement et scrolling
Tutoriel présenté par : Jérémie F. Bellanger (Jay81)
Ecriture : 12 octobre 2014
Dernière mise à jour : 9 novembre 2015
Prologue
Bon, c'est bien sympa, on a un héros dans notre jeu ! 
Mais il est nul : il ne sait même pas marcher ! 
Il va donc être temps de remédier au problème ! 
Cela dit, nous allons procéder en plusieurs chapitres car il y a quand même pas mal de points assez complexes à gérer. 
En effet, il va nous falloir gérer les inputs clavier pour faire se déplacer le héros dans la bonne direction, et puis il va y avoir la gestion de la physique avec la chute et les sauts, et pour cela, il va aussi falloir gérer les collisions avec la map ! 
En plus de ça, on va aussi devoir créer un système de caméra pour mettre en place le scrolling autour de notre héros (sinon, il va sortir de l'écran et basta ! ).
Comme vous le voyez, ça fait beaucoup de choses ! Dans ce chapitre, on va donc se limiter aux déplacements gauche / droite du personnage (avec gestion du changement d'animation pour le faire marcher) et on va mettre en place notre scrolling avec un système de caméra, un peu plus avancé que dans le Big Tuto SDL 1.2 / 2, pour éviter le phénomène de motion sickness (déplacements qui rendent malade) ! 
Voilà, donc avant de passer au code, vous pouvez charger, comme d'habitude, les archives complètes du jeu ci-dessous :
Le code
Nous allons d'abord commencer par rajouter quelques nouvelles defs dont nous allons avoir besoin par la suite.
Ouvrez donc le fichier defs.h et rajoutez les valeurs suivantes :
Fichier : defs.h : Rajoutez :
|
//Constante pour les limites de la caméra avant scrolling
#define LIMITE_X 400
#define LIMITE_Y 220
#define LIMITE_W 100
#define LIMITE_H 80
//Constantes définissant la gravité et la vitesse max de chute
#define GRAVITY_SPEED 0.6
#define MAX_FALL_SPEED 15
#define JUMP_HEIGHT 10
|
Les 4 premières defs vont nous servir à définir la sous-boîte limite autour de notre personnage dont le franchissement lancera le scrolling de la caméra.
Nous expliquerons tout cela ci-dessous, en même temps que nous verrons la fonction centerScrollingOnPlayer(), mais sachez que ces valeurs pourront être modifiées ici.
Des 3 valeurs suivantes, seule MAX_FALL_SPEED va nous servir ici (enfin, virtuellement, car nous ne pourrons pas encore tomber dans ce chapitre ). Concrètement, GRAVITY_SPEED correspond à la gravité que nous aurons dans le jeu (vous voyez qu'elle est plutôt légère par rapport à celle de la terre, qui se situerait entre 0,8 et 0,9 - mais cela nous permettra de faire de super sauts ! ), MAX_FALL_SPEED à la vitesse de chute maxiamale (soit 15 pixels / frame ! ) et JUMP_HEIGHT à la valeur de nos sauts quand nous les ajouterons dans le chapitre suivant.
Voilà, passons maintenant au fichier player.c, dans lequel on va trouver l'essentiel des nouveautés de ce chapitre :
Fichier : player.c : Rajoutez :
|
void updatePlayer(Input *input)
{
//Pour l'instant, on place automatiquement le joueur
//sur le sol à 302 pixels du haut de l'écran, car
//on ne gère pas encore les collisions avec le sol.
player.onGround = 1;
player.y = 302;
//Si on détecte un appui sur la touche fléchée gauche
if (input->left == 1)
{
//On diminue les coordonnées en x du joueur
player.x -= PLAYER_SPEED;
//Et on indique qu'il va à gauche (pour le flip
//de l'affichage, rappelez-vous).
player.direction = LEFT;
//Si ce n'était pas son état auparavant et qu'il est bien sur
//le sol (car l'anim' sera différente s'il est en l'air)
if (player.etat != WALK && player.onGround == 1)
{
//On enregistre l'anim' de la marche et on l'initialise à 0
player.etat = WALK;
player.frameNumber = 0;
player.frameTimer = TIME_BETWEEN_2_FRAMES_PLAYER;
player.frameMax = 8;
}
}
//Si on détecte un appui sur la touche fléchée droite
else if (input->right == 1)
{
//On augmente les coordonnées en x du joueur
player.x += PLAYER_SPEED;
//Et on indique qu'il va à droite (pour le flip
//de l'affichage, rappelez-vous).
player.direction = RIGHT;
//Si ce n'était pas son état auparavant et qu'il est bien sur
//le sol (car l'anim' sera différente s'il est en l'air)
if (player.etat != WALK && player.onGround == 1)
{
//On enregistre l'anim' de la marche et on l'initialise à 0
player.etat = WALK;
player.frameNumber = 0;
player.frameTimer = TIME_BETWEEN_2_FRAMES_PLAYER;
player.frameMax = 8;
}
}
//Si on n'appuie sur rien et qu'on est sur le sol, on charge l'animation marquant
//l'inactivité (Idle)
else if (input->right == 0 && input->left == 0 && player.onGround == 1)
{
//On teste si le joueur n'était pas déjà inactif, pour ne pas recharger l'animation
//à chaque tour de boucle
if (player.etat != IDLE)
{
//On enregistre l'anim' de l'inactivité et on l'initialise à 0
player.etat = IDLE;
player.frameNumber = 0;
player.frameTimer = TIME_BETWEEN_2_FRAMES_PLAYER;
player.frameMax = 8;
}
}
//On gère le scrolling (fonction ci-dessous)
centerScrollingOnPlayer();
}
|
Et voici notre fonction updatePlayer() (enfin son ébauche, car elle n'est pas finie ). On avait, en effet, nos fonctions d'initialisation, de nettoyage et de dessin, mais il nous manquait celle de mise à jour !
En fait, elle n'est pas très compliquée, assez répétitive et déjà largement commentée !
On commence par considérer que le joueur est sur le sol (onGround = 1), et que sa coordonnée y est à 302. Ceci n'est que temporaire et disparaîtra dès le chapitre prochain, quand nous aurons établi les collisions avec la map. En attendant, cela va nous permettre de pouvoir déplacer notre héros, en le considérant comme étant sur le sol, et sans se soucier de la map (il passera donc à-travers les murs, et flottera constamment à 302 pixels du haut de l'écran, qu'il y ait du sol ou non ).
Vous aurez remarqué que notre fonction prend les inputs en arguments (qu'on lui passera depuis le main ). On va ainsi pouvoir gérer les déplacements de notre héros en fonction des appuis sur les touches fléchées du clavier.
, soit qu'il est déjà en train de marcher, et si on réinitialisait l'anim' à ce moment-là, il resterait coincé sur la première frame (pas top ! 
).Eh voilà, on termine notre fonction par un appel à centerScrollingOnPlayer() qui va gérer la caméra et le scrolling, et que nous allons implémenter de ce pas, à la suite du même fichier :
Fichier : player.c : Rajoutez :
|
void centerScrollingOnPlayer(void)
{
// Nouveau scrolling à sous-boîte limite :
//Pour éviter les effets de saccades dus à une caméra qui se centre
//automatiquement et constamment
//sur le joueur (ce qui peut en rendre malade certains...), on crée
//une "boîte" imaginaire autour du joueur.
//Quand on dépasse un de ses bords (en haut, en bas, à gauche ou à
//droite), on scrolle.
//Mais là encore, au lieu de centrer sur le joueur, on déplace
//simplement la caméra jusqu'à arriver au joueur.
//On a choisi la valeur de 3 pixels pour pouvoir avoir le plaisir
//d'aller plus vite que le cameraman
//(Cours, Johnny, cours!!). On accélère aussi la vitesse de la caméra
//en cas de chute rapide (pour ne pas
//perdre le joueur de vue non plus.
int cxperso = player.x + player.w / 2;
int cyperso = player.y + player.h / 2;
int xlimmin = getStartX() + LIMITE_X;
int xlimmax = xlimmin + LIMITE_W;
int ylimmin = getStartY() + LIMITE_Y;
int ylimmax = ylimmin + LIMITE_H;
//Si on dépasse par la gauche, on recule la caméra de 3 pixels (vous
//pouvez modifier cette valeur)
if (cxperso < xlimmin)
{
setStartX(getStartX() - 3);
}
//Si on dépasse par la droite, on avance la caméra de 3 pixels (vous
//pouvez modifier cette valeur)
if (cxperso > xlimmax)
{
setStartX(getStartX() + 3);
}
//Si on arrive au bout de la map à gauche, on stoppe le scrolling
if (getStartX() < 0)
{
setStartX(0);
}
//Si on arrive au bout de la map à droite, on stoppe le scrolling à la
//valeur Max de la map - la moitié d'un écran (pour ne pas afficher du noir).
else if (getStartX() + SCREEN_WIDTH >= getMaxX())
{
setStartX(getMaxX() - SCREEN_WIDTH);
}
//Si on dépasse par le haut, on remonte la caméra de 3 pixels (vous
//pouvez modifier cette valeur)
if (cyperso < ylimmin)
{
setStartY(getStartY() - 3);
}
//Si on dépasse par le bas, on descend la caméra de 3 pixels (vous
//pouvez modifier cette valeur)
if (cyperso > ylimmax)
{
//Sauf si on tombe très vite, auquel cas, on accélère la caméra :
if (player.dirY >= MAX_FALL_SPEED - 2)
{
setStartY(getStartY() + MAX_FALL_SPEED + 1);
}
else
{
setStartY(getStartY() + 3);
}
}
//Si on arrive au bout de la map en haut, on stoppe le scrolling
if (getStartY() < 0)
{
setStartY(0);
}
//Si on arrive au bout de la map en bas, on stoppe le scrolling à la
//valeur Max de la map - la moitié d'un écran (pour ne pas afficher du noir).
else if (getStartY() + SCREEN_HEIGHT >= getMaxY())
{
setStartY(getMaxY() - SCREEN_HEIGHT);
}
}
|
Là encore, j'ai largement commenté la fonction !
Si vous comparez avec la fonction équivalente du Big Tuto SDL 1.2 / 2, vous remarqeurez qu'elle est largement plus complexe ! En effet, à l'époque, on se contentait de calculer le centre de notre personnage et d'adapter la caméra (et donc le scrolling) autour. C'est simple, mais l'inconvénient c'est que la caméra se déplace par saccades, et à chaque mouvement du perso (même si ce n'est que d'un pixel). Et cela peut causer de la motion sickness chez certaines personnes (qui sont malades à cause du mouvement - un peu comme en voiture, en fait ).
Pour éviter cela, nous allons créer une nouvelle caméra plus fluide, qui ne se déplace que si le héros sort du cadre central et qui reste fluide en ayant un mouvement continu et toujours identique.
Le schéma suivant vous montre comment cela fonctionne :
On va, en effet, considérer un cadre central (ou sous-boîte limite), dans lequel le joueur pourra se déplacer sans faire scroller la caméra (il est ici assez petit, mais vous pourrez l'adapter comme bon vous semblera à l'aide des defs que nous avons définies ci-haut ).
Dès que le joueur va sortir de ce cadre, on fera scroller la map dans la direction dans laquelle se dirige le perso, de 3 pixels.
J'ai choisi cette valeur de 3 pixels pour bien que vous voyiez le fonctionnement de ce scrolling. Avec cette valeur, notre héros va aller plus vite que le caméraman (Cours Johnny ! Cours ! ), et il pourra même semer la caméra !
Vous pourrez cependant jouer avec cette valeur, et en la mettant à 4, le caméraman sera plus sportif et quittera moins notre héros de sa caméra.
Cet effet est notamment utilisé dans certains jeux Sonic en 2D (à partir du 3 et Sonic & Knuckles, il me semble), pour augmenter l'impression de vitesse dégagée par son héros.
Bien entendu, ce cadre agit aussi bien horizontalement que verticalement. Et c'est pourquoi, nous avons dû moduler son effet en cas de chute (même si pour l'instant, notre héros ne peut pas encore tomber). En effet, quand le héros tombe, il peut atteindre la vitesse hallucinante (mais plutôt réaliste) de 15 pixels / frame, alors que la caméra est limitée à 3. Inutile de dire que le caméraman se retrouverait vite licencié car incapable de suivre l'action ! On le booste donc aux amphétamines dans ce cas-là, et on lui permet de suivre la chute, en utilisant la valeur de MAX_FALL_SPEED + 1, ce qui veut dire, qu'il peut même être plus rapide, car celui-ci a déjà pris de l'avance à cause de la bordure basse du cadre. Mais, vous vous rendrez plus facilement compte de tout ça quand notre héros pourra tomber, of course !
Les limites de la map :
Une dernière chose : vous noterez que le scrolling s'arrêtera automatiquement aux limites de la map, et cela pour éviter de blitter du noir, qui ne ferait pas très joli ! Il ne pourra donc pas avoir de valeurs négatives (en-dehors de la map en haut et à gauche) ou supérieures à maxX - la moitié de la taille de l'écran en largeur, à droite, et maxY - la moitié de la taille de l'écran en hauteur, en bas. Il ne faut pas oublier de compter la moitié de la taille de l'écran dans ce calcul, sinon vous vous retrouveriez avec une moitié d'écran noire voire un beau plantage, car la fonction irait chercher en-dehors des limites du tableau de notre map (vous pouvez tester ).
Voilà, il ne nous reste maintenant plus qu'à relier tout ça au reste de notre jeu. Ouvrons donc le fichier main.c, pour rajouter un appel à la fonction updatePlayer() :
Fichier : main.c : Modifiez :
|
// Boucle infinie, principale, du jeu
while (go == 1)
{
//Gestion des inputs clavier
gestionInputs(&input);
// On met à jour le jeu, en commençant par le joueur
updatePlayer(&input);
//On dessine tout
drawGame();
|
Plus qu'à compléter notre catalogue de prototypes pour éviter les warnings / erreurs : implicit declaration of xxxxx, qui signifient simplement que le compilo ne trouve pas le prototype de la fonction que vous appelez.
Fichier : prototypes.h : Remplacez par :
|
#ifndef PROTOTYPES
#define PROTOTYPES
#include "structs.h"
/* Catalogue des prototypes des fonctions utilisées.
On le complétera au fur et à mesure. */
extern void centerScrollingOnPlayer(void);
extern void changeLevel(void);
extern void cleanMaps(void);
extern void cleanPlayer(void);
extern void cleanup(void);
extern void delay(unsigned int frameLimit);
extern void drawGame(void);
extern void drawImage(SDL_Texture *, int, int);
extern void drawMap(int);
extern void drawPlayer(void);
extern void drawTile(SDL_Texture *image, int destx, int desty, int srcx, int srcy);
extern void gestionInputs(Input *input);
extern SDL_Texture *getBackground(void);
extern int getBeginX(void);
extern int getBeginY(void);
extern void getInput(Input *input);
extern int getLevel(void);
extern int getMaxX(void);
extern int getMaxY(void);
extern GameObject *getPlayer(void);
extern int getPlayerDirection(void);
extern int getPlayerx(void);
extern int getPlayery(void);
extern SDL_Renderer *getrenderer(void);
extern int getStartX(void);
extern int getStartY(void);
extern void init(char *);
extern void initializePlayer(void);
extern void initMaps(void);
extern void initPlayerSprites(void);
extern void loadGame(void);
extern SDL_Texture *loadImage(char *name);
extern void loadMap(char *name);
extern void setNombreDeVies(int valeur);
extern void setNombreDetoiles(int valeur);
extern void setStartX(int valeur);
extern void setStartY(int valeur);
extern void SetValeurDuNiveau(int valeur);
extern void updatePlayer(Input *input);
#endif
|
Et voilà, plus qu'à compiler et Tadaaaa !
On peut désormais déplacer notre héros à droite et à gauche et la caméra le suit !
Mais, mais !!?!! 
Il ne touche pas toujours le sol !! 
Et parfois, il sort même de l'écran !!!!!! 
Eh oui, c'est normal ! Je vous avais prévenu en début de chapitre. On verra tout ça la prochaine fois !
Alors, @ bientôt pour la suite !
Jay.
