Des jeux vidéo pour l’enseignement du langage C

Sophie Dupuis, Didier Crestani, Vincent Creuze, Bertrand Gelis, Eric

Pommier, Vincent Thomas, Isabelle Pinon

To cite this version:

Sophie Dupuis, Didier Crestani, Vincent Creuze, Bertrand Gelis, Eric Pommier, et al.. Des jeux
vidéo pour l’enseignement du langage C. CETSIS: Colloque sur l’Enseignement des Technologies et
des Sciences de l’Information et des Systèmes, May 2017, Le Mans, France. 2017. �lirmm-01522447�

HAL Id: lirmm-01522447

https://hal-lirmm.ccsd.cnrs.fr/lirmm-01522447
Submitted on 15 May 2017

HAL is a multi-disciplinary open access L’archive ouverte pluridisciplinaire HAL, est

archive for the deposit and dissemination of sci- destinée au dépôt et à la diffusion de documents
entific research documents, whether they are pub- scientifiques de niveau recherche, publiés ou non,
lished or not. The documents may come from émanant des établissements d’enseignement et de
teaching and research institutions in France or recherche français ou étrangers, des laboratoires
abroad, or from public or private research centers. publics ou privés.
 Des jeux vidéo pour l'enseignement du langage C
Sophie Dupuis, Didier Crestani, Vincent Creuze,
Bertrand Gelis, Eric Pommier, Vincent Thomas et Isabelle Pinon
[email protected]
IUT de Montpellier, Département GEII, 99 avenue D’Occitanie, 34296 Montpellier, France
RESUME : Cet article présente deux séances de Travaux Pratiques (TPs) du module Informatique du premier semestre
de DUT Génie Electrique et Informatique Industrielle (GEII). Afin de susciter l'intérêt des étudiants et de les motiver
dans l'apprentissage du langage C, ces TPs ont pour but de développer une version du jeu vidéo Pong, proposé par la
société Atari en 1972.
Mots clés : Informatique industrielle, programmation, langage C, jeu vidéo, librairie SDL.

1 INTRODUCTION 2 REGLES DU JEU

Durant leur cursus de DUT GEII, les étudiants appré- Voici les règles telles qu’elles sont présentées
hendent la programmation, en utilisant le langage C, aux étudiants dans le fascicule de TP :
dans le module Informatique du 1er semestre. Nous La partie oppose deux adversaires (joueurs) : le
connaissons tous la difficulté actuelle à motiver et mo- camp bleu (à droite de l'écran) et le camp
biliser nos étudiants dans leur apprentissage. Connais- rouge (à gauche de l'écran) (cf. Figure 2).
sant le goût des générations actuelles pour les jeux vi- Initialement, la balle est au centre de la table et
déo, il nous a semblé naturel d'assoir leurs connais- les raquettes, en l'absence d'interaction des
sances des fondements de la programmation en C en joueurs, sont au centre verticalement, et
leur proposant de développer une version simplifiée de horizontalement, à une distance égale à 1/4 de
Pong (cf. Figure 1), le premier jeu vidéo proposé par la la largeur d'écran de leur propre ligne de fond
société Atari au début des années 70. Dans cet objectif, de court.
2 TPs de 3 heures leurs sont proposés dans le cadre du L'appui sur la barre d’espace permet de
module Informatique du 1er semestre. Ces TPs font commencer le jeu.
appel à la librairie Simple DirectMedia Layer (SDL) [2, La raquette bleue peut être déplacée de la façon
3] qui permet le développement de jeux vidéo en 2 di- suivante :
mensions. Ils complètent une série de neuf TDs de 2
o L'appui sur la touche déplace la
heures et 4 TPs de 3 heures. Il nous a semblé intéres-
raquette verticalement vers le haut tant
sant que ces deux derniers TPs soient ludiques, tout en
que la touche est enfoncée.
mettant en pratique les notions fondamentales du lan-
gage C enseignées jusque là (boucles, tableaux, fonc- o L'appui sur la touche déplace la
tions, pointeurs, structures, etc …). raquette verticalement vers le bas tant
Dans la continuité de ces TPs plusieurs projets tuteurés que la touche est enfoncée.
du semestre 2 ont permis le développement de plusieurs o Evidemment la raquette ne peut sortir des
jeux vidéo depuis 3 ans. limites de la table.
La raquette rouge peut être déplacée de la façon
suivante :
o L'appui sur la touche ‘d’ déplace la
raquette verticalement vers le haut tant
que la touche est enfoncée.
o L'appui sur la touche ‘c’ déplace la
raquette verticalement vers le bas tant
que la touche est enfoncée.
o Evidemment la raquette ne peut sortir des
limites de la table.
Les règles de déplacement vertical de la balle
sont les suivantes :
o La balle se déplace verticalement dans un
sens donné (vers le haut ou vers le bas)
jusqu'à ce qu'elle rencontre le bord du
terrain (limite horizontale haute, ou
fig 1 : Pong original [1]
limite horizontale basse).
o Après la collision avec un bord
horizontal du terrain, la balle rebondit
avec un angle de 45° par rapport à la
 verticale et change de sens vertical de Sensibilisation à la structuration des pro-
déplacement. grammes,
Les règles de déplacement horizontal de la balle Compilation séparée, fichiers d'entête
sont les suivantes : Maîtrise des structures de base du langage,
o La balle se déplace horizontalement dans Développement de fonction multi-paramètres
un sens donné (vers la droite ou vers la avec renvoi de données,
gauche) jusqu'à ce qu'elle rencontre : Utilisation des notions de pointeurs et structure,
Une raquette. Elle rebondie alors
Gestion d'un affichage graphique,
dessus avec un angle de 45° par
rapport à l'horizontal en gardant le Interaction asynchrone avec un utilisateur, ges-
même sens vertical de déplacement tion d'événements,
(cf. Figure 2). Notion d'objet graphique virtuel,
La ligne de fond de court. L’échange Interaction virtuelle d'objets graphiques,
est alors terminé. Gestion du mouvement d'objets graphiques.
Les déplacements horizontaux et verticaux sont
évidemment simultanés. 4 BIBLIOTHEQUE SDL
L'appui sur la touche q ou le fait de cliquer sur
la croix de la fenêtre permettent de quitter La bibliothèque Simple DirectMedia Layer (SDL) est
définitivement le jeu. une bibliothèque logicielle dont l’API est utilisée pour
L'appui sur la touche h (help) permet d'afficher créer des applications multimédias en deux dimensions
un écran d'aide résumant le rôle des pouvant comprendre du son. Elle est donc adaptée aux
différentes touches. L'appui sur la touche besoins de la programmation d’un jeu vidéo.
escape permet de l'effacer. Un exemple de programme SDL est présenté dans la
Le score des camps Rouge et Bleu sont affichés figure 3. Ce code permet d’effectuer les actions sui-
dans une zone dédiée à cet effet sous le terrain vantes :
de jeu. A chacune des extrémités de cette zone Initialisation de fenêtre :
un rectangle de couleur montre le joueur ayant o Création d’un pointeur sur une surface
le service. (SDL_Surface), configuration du mode
Au service la balle part aléatoirement vers le vidéo et nommage de la fenêtre,
haut ou le bas du terrain en direction de Affichage d’une image statique :
l'adversaire. o Création d’un pointeur sur une surface,
Le service change tous les points. Le premier o Chargement d’une image
arrivé à 5 points gagne la partie. (SDL_LoadBMP),
o Copie de l'image dans la fenêtre, appelée
un blit (SDL_BlitSurface), aux coor-
données voulues (structure SDL_Rect),
o Mise à jour de la fenêtre (SDL_Flip),
Déplacement (mouvement) d'une image : même
principe que précédemment avec l’utilisation
d’une boucle for pour effectuer les copies de
l’image, avec des coordonnées modifiées, et la
mise à jour du contenu graphique de la fe-
nêtre. Il est à noter que chaque image est affi-
chée de manière superposée, c’est pourquoi il
faut afficher à chaque itération l’image de
fond puis l’image qui s'est déplacée.

Le tableau 1 présente les principales fonctions SDL

utilisées.
fig 2 : Ecran graphique demandé
Outre l’affichage d’images, il est également possible
avec la bibliothèque SDL de gérer des événements i.e.
3 OBJECTIFS VISEES l’utilisateur peut interagir avec l’affichage graphique
par le biais d’actions sur une touche du clavier, un bou-
Malgré ce contexte ludique, outre l'utilisation des con- ton de la souris ou en déplaçant cette dernière. Diffé-
cepts de base de la programmation en langage C, rentes fonctions sont à disposition pour caractériser un
compte tenu du volume du code à développer, les ob- événement détecté.
jectifs de ce TP sont ambitieux et multiples : La figure 4 présente le code permettant de gérer la ges-
tion de l’appui sur la croix d’une fenêtre et l’appui sur
la touche ‘q’ (remarque : les codes claviers des touches
étant gérés pour des claviers QWERTY, l’appui sur ‘q’
est détecté en identifiant l’appui sur ‘a’). // Initialisation
TTF_Init() ;
Enfin, il est possible d’écrire du texte en SDL, pour
cela il faut Blitter (afficher une image sur une autre) // Choix de la couleur du texte
une image représentant le texte voulu. Cela se fait avec SDL_Color couleur_texte_noire = {0, 0, 0} ; // format RGB
la bibliothèque SDL_TTF.h. Un exemple est donné
// Chargement de la police
dans la figure 5. TTF_Font *police = TTF_OpenFont(« arial.ttf », 90) ;

// Création de l’image correspondant à un texte

int main(int argc, char *argv[]) SDL_Surface * image = TTF_RenderText_Blended(police,
{ « Texte à afficher », couleur_texte_noire) ;
// Creation d’une fenêtre
SDL_Surface *ecran = NULL; //Libération mémoire
SDL_Init (SDL_INIT_VIDEO) ; TTF_CloseFont(police) ;
ecran = SDL_SetVideoMode (640, 480, 32, TTF_Quit() ;
SDL_HWSURFACE | SDL_DOUBLEBUF) ;
SDL_WM_SetCaption (« Nom de la fenêtre », NULL) ; fig 5 : Exemple de code SDL (3)
// Chargement d’une image de fond
NOM DE LA FONTION RÔLE
SDL_Surface *fond = NULL ;
fond = SDL_LoadBMP ( « image_fond.bmp ») ; Affichage rapide (en mémoire) de la
SDL_Rect position_fond ; SDL_BlitSurface surface spécifiée dans la surface de
position_fond.x = 0 ; destination
position_fond.y = 0 ; Attente : nombre de millisecondes
// Blitter l’image SDL_Delay
spécifié en argument
SDL_BlitSurface (fond, NULL, ecran, &position_fond) ;
Affichage à l'écran de la superposi-
SDL_Flip
// Mettre à jour la fenêtre tion d'images créées en mémoire
SDL_Flip ( ecran ) ; Libération des ressources utilisées
SDL_FreeSurface par une surface SDL préalablement
// Chargement d’une image qui traverse le fond allouée
SDL_Surface *balle = NULL ;
balle = SDL_LoadBMP (« image_balle.bmp ») ; Chargement d’un fichier Bitmap
SDL_LoadBMP
SDL_Rect position_balle ; Windows dans une surface SDL
position_balle.y = 240 ; SDL_Quit Libération des ressources utilisées
Configuration du mode vidéo (hau-
for(int i=0 ; i<640 ; i+=5){ SDL_SetVideoMode
teur, largeur, nombre de bits)
// Blitter la première image
SDL_BlitSurface (fond, NULL, ecran, &position_fond) ; SDL_WM_SetCaption Nommage de la fenêtre

// Blitter la seconde image par-dessus Tableau 1: Principales fonctions SDL utilisées

position_balle.x = i ;
SDL_BlitSurface (balle, NULL, ecran,
&position_balle) ; 5 EXERCICES
// Mettre à jour la fenêtre Les étudiants doivent récupérer un répertoire qui leur
SDL_Flip (ecran ) ;
est fourni. Dans ce répertoire se trouvent les images à
// Effectuer une petite attente pour « ralentir » la utiliser et un projet Visual C++ déjà créé.
boucle Durant les deux séances de TPs, les étudiants sont gui-
SDL_Delay(10) ; dés par les items suivants :
}
SDL_Quit () ; 1) Créer une fenêtre de jeu nommée « Jeu de Ping-
}
Pong »,
fig 3 : Exemple de code SDL (1) 2) Afficher dans la fenêtre l’image de fond de la par-
while (SDL_PollEvent(&event)) { tie dénommée « Bitmap/Fond.bmp »,
switch (event.type) { 3) Afficher dans la fenêtre la balle au milieu du ter-
case SDL_QUIT:
// Action rain,
break; 4) Faire se déplacer la balle horizontalement entre les
case SDL_KEYDOWN :
switch (event.key.keysym.sym) { deux bords extrêmes du terrain,
case ‘a’ : 5) Faire se déplacer la balle verticalement,
//Action
break; 6) Faire se déplacer la balle en diagonale, et rebondir
} sur les 4 bords,
}
} 7) Gérer la fermeture de la fenêtre en détectant un clic
fig 4 : Exemple de code SDL (2) de la souris sur la croix de la fenêtre,
8) Gérer la fermeture de la fenêtre en détectant b) A chaque début de point, la balle part en haut ou
l’appui sur la touche ‘q’, en bas de façon aléatoire,
9) Faire se déplacer la balle uniquement après l’appui c) L’affichage des points est affiché en bas de
sur la barre d’espace, l’écran,
10) Afficher les raquettes à leur position d’origine res- d) Lorsqu’un joueur atteint 5 points, un affichage
pectives, indique quel joueur a gagné et le programme
11) Gérer le déplacement de la raquette rouge avec les se termine.
touches et , gérer également la gestion des 18) Affichage de l’aide lors de l’appui sur la touche
bords haut et bas : la raquette reste « coincée » ‘h’, et disparition de l’aide lors de l’appui sur la
quand elle atteint un des deux bords touche escape.
12) Gérer de même le déplacement de la raquette bleue
avec les touches c et d, 6 RETOUR D’EXPERIENCE
13) Encapsuler le déplacement de la basse dans une Ces travaux pratiques sont dispensés pour la quatrième
fonction, année pendant le module Informatique du semestre 1 de
14) Encapsuler le déplacement des raquettes dans une DUT GEII.
fonction. En trois ans, nous avons pu constater que l’engouement
des étudiants pour un thème plus ludique est dominé
Le but suivant est de modifier le déplacement de la par la difficulté de la tâche à accomplir. Au fur et à
balle pour prendre en compte les rebonds sur les ra- mesure des années, l’équipe enseignante améliore sa
quettes. Elle doit rebondir en haut, en bas, et sur les façon de présenter le problème, pour décomposer au
raquettes, et revenir immobile à sa position d’origine maximum les étapes à effectuer et aider les étudiants à
quand elle atteint un des bords du terrain. mener à bien ce projet. Seuls quelques binômes arrivent
Il faut commencer par modifier le prototype de la fonc- au bout des tâches à effectuer. Ce sont généralement
tion effectuant le déplacement de la balle. En effet, des étudiants passionnés par la programmation et pre-
pour gérer la collision avec les raquettes, cette fonction nant plaisir à préparer le programme chez eux. Les étu-
doit également prendre en compte la position de chaque diants qui, malheureusement, ne passent que les 6
raquette, ce qui s’avère difficile en utilisant uniquement heures de TP à travailler sur le projet, arrivent généra-
des entiers. Afin de faciliter la gestion et l’affichage des lement à effectuer les 14 premiers points : faire rebon-
images, on propose d’utiliser une structure regroupant dir la balle sur les 4 côtés du terrain et faire bouger les
toutes les informations pertinentes correspondant à raquettes. Les étapes suivantes nécessitant l’utilisation
l’image : de fonctions puis d’une structure sont difficilement
réalisables par les étudiants en difficulté avec ces no-
typedef struct Figure_info tions.
{
char * name;
int hauteur; 7 PROJETS TUTEURES
int largeur; Le thème ludique « programmation d’un jeu vidéo » est
int x_init;
int y_init;
ensuite proposé durant le semestre 2. Ce sont bien sûr
int x; des étudiants ayant apprécié et réussi les TPs précé-
int y; dents qui choisissent ce type de sujet. Différents jeux
int delta_x; sont proposés chaque année et certains étudiants propo-
int delta_y;
};
sent même d’eux même un jeu qu’ils ont envie de pro-
grammer (comme Mario par exemple, qui a toujours
15) Modification de la balle, des raquettes et des fonc- beaucoup de succès).
tions, Durant ces projets, un cahier des charges est établi en
16) Modification de la fonction gérant le déplacement début de projet par les étudiants en accord avec leur
encadrant. A partir du thème principal du jeu, les étu-
de la balle pour qu’elle gère les collisions avec les
diants énoncent les fonctionnalités qu’ils s’engagent à
raquettes, accomplir, et celles qu'ils pourraient aborder si le temps
17) Gestion avancée du jeu : le permet. Il arrive régulièrement que les étudiants pro-
a) Au démarrage du programme, une image posent des fonctionnalités plus avancées (et non vues
s’affiche pour indiquer quel joueur est au ser- en TP) que ce que l’encadrant envisageait : utilisation
de la musique, gestion des mouvements de la souris …
vice, le choix du joueur au service est aléatoire
Les étudiants sont laissés le plus possible en autonomie.
au lancement du jeu, puis change à chaque Le rôle de l’encadrant se limite à les aider en cas de
point, blocage, et à leur faire des propositions pour améliorer
la lisibilité et la structuration de leur code. Le but est de
leur faire comprendre qu’un programme qui fonctionne
n’est pas suffisant si le code correspondant n’est pas
bien écrit. Les encadrants incitent donc fortement à
l’utilisation de fonctions et de structures.
Depuis trois ans, plusieurs jeux vidéo ont vu le jour :
Casse Briques (cf. Figure 6),
Space Invaders (cf. Figure 7),
Démineur (cf. Figure 8),
Candy Crush (cf. Figure 9),
Mario (cf. Figure 10).
Figure 6. Casse Briques
Un jeu de carte a également été développé, avec la pos-
sibilité de jouer en réseau joueur contre joueur, ce qui a
nécessité un gros travail, travail qui n’avait pas été de-
mandé dans le cahier des charges initial.

8 CONCLUSION
La programmation de jeux vidéo est une approche lu-
dique qui permet aux enseignants de motiver les étu-
diants depuis plusieurs décennies [4]. Nous avons pré-
senté 2 séances de Travaux Pratiques qui permettent,
dès le premier semestre, de programmer dans le lan-
gage C le jeu de Pong. Ces séances ont pour but de
mettre à profit les notions apprises précédemment dans
le cadre d’une activité plus ludique. Mettant en œuvre
une programmation que l'on peut qualifier d'"avancée", Figure 7. Space Invaders
nombre d'étudiants ne verront plus les jeux vidéo avec
le même regard.
Les étudiants les plus passionnés par la programmation
peuvent ensuite, s’ils le souhaitent, effectuer un projet
tuteuré dans cette lignée, durent le deuxième semestre.
Depuis 3 ans, chaque année, entre un et trois nouveaux
jeux vidéo voient le jour.

Bibliographie
[1] https://fr.wikipedia.org/wiki/Pong
[2] http://www.libsdl.org
[3] https://fr.wikipedia.org/wiki/Simple_DirectMedia_Layer
[4] T.-T. Dang-Ngoc and T. Liu, « Mario, Warcraft ou Po-
kemon ? La programmation de jeux vidéo comme motivation Figure 8. Démineur
dans l’apprentissage des sciences informatiques », Colloque
d’enseignement des technologies et des sciences de
l’information et des systèmes – CETCIS’14.

Figure 10. Mario