Concepts de Base de l’Utilisation du Buffer Vidéo
Bienvenue à cette deuxième série de leçons sur les éléments du graphisme sur ordinateur. Les concepts de base ont été introduits dans la leçon précédente “Eléments de Graphisme : Dessiner avec des Pixels”. De plus, si vous n’êtes pas familier avec le langage de script Tcl, un tutoriel d’introduction y a été donné.
La dernière fois, nous nous sommes arrêtés avec une fenêtre de jeu que nous avons programmée en utilisant Wish Shell et le langage Tcl. La fenêtre de jeu de 640 pixels de large sur 480 pixels de haut. Nous avons également appris à dessiner sur notre fenêtre de jeu. C’était un point de départ pour vous les futurs développeurs de jeux. Dans cette série de leçons vous allez apprendre à charger un fichier graphique dans votre fenêtre de jeu comme vous pouvez le voir sur les jeux de Game Boy Advance.
Je vais également présenter comment un ordinateur stocke les fichiers et parler du système de fichiers. Avec ces connaissances et de celles de Tcl, vous apprendrez à charger le fichier dans la fenêtre. Et nous combinerons le tout pour voir les concepts de buffer vidéo.
Leçon 1 : Le Système de Fichier de l’Ordinateur
Qu’est-ce-qu’un système de fichiers, et à quoi sert-il ? Tout ordinateur doit stocker des informations, même quand il est éteint. Par exemple, quand vous allumez la Game Boy Advance, vous devez insérer la cartouche du jeu auquel vous voulez jouer. La cartouche de jeu contient le programme de jeu à charger dans votre Game Boy, ainsi que les “sprites” (des images à animer), la musique et les effets sonores. Puisque vous pouvez insérer différentes cartouches de jeu, la cartouche est appelée support amovible.
En revanche, l’ordinateur sur lequel vous travaillez possède un disque dur que vous n’échangez pas avec d’autres avant d’allumer la machine. Il est appelé support fixe. Le disque dur contient un programme spécial appelé système d’exploitation, pour démarrer l’ordinateur ; le système de fichiers est utilisé par le système d’exploitation pour retrouver les programmes et les fichiers sur votre disque dur.
Votre Game Boy et votre ordinateur utilisent tous les deux un système d’exploitation et un système de fichiers. Le système d’exploitation de votre Game Boy est stocké sur une puce appelé la ROM, pour Read Only Memory (Mémoire en Lecture Seule). Chose intéressante, il existe différents styles d’ordinateurs avec différents types de support de stockage. C’est là que le système de fichiers entre en jeu. Le système de fichiers gère les fichiers de votre ordinateur, que ce soit une Game Boy, un Macintosh ou un PC.
Mais qu’est-ce-qu’un fichier alors ? Un fichier est une collection d’informations stockée sur un support. Le support est votre disque dur, CD-ROM, lecteur DVD, stick mémoire USB, cartouche de jeu Game Boy, etc. Les types de fichiers les plus communs de nos jours sont les programmes, les fichiers image, les fichiers de musique et les fichiers texte. Quand vous insérez un nouveau jeu dans votre Game Boy, le programme du système de fichiers va y chercher un programme à charger pour démarrer le jeu. Le jeu est stocké sur la cartouche sous la forme d’un fichier.
Comprendre le Système de Fichiers de Votre Ordinateur
Dans la Figure 1, vous pouvez voir un aperçu de mon système de fichiers. Mon disque dur s’appelle TheMatrix. Vous pouvez y voir les fichiers et répertoires qui se trouvent sur mon disque dur. Vous voyez ici le contenu du répertoire principal. Il s’appelle le répertoire root (ou racine).
Figure1. Aperçu du répertoire racine
Qu’est-ce-qu’un répertoire ?
Un répertoire est un fichier spécial ; dans un système d’exploitation fenêtré, il porte le nom de dossier qui contient des fichiers. Dans mon répertoire racine, on trouve les répertoires Applications, Developer, game_dev et Jeux, pour n’en citer que quelques uns. Un répertoire peut stocker d’autres répertoires tout comme le répertoire racine stocke d’autre répertoires. Un répertoire à l’intérieur d’un autres répertoire s’appelle un sous-répertoire.
Comprendre le Système de Fichier avec Tcl
Lancez Tcl/Tk Wish Shell et commençons à expérimenter le système de fichier de votre ordinateur.
Quand Wish Shell exécute une commande sous Mac OS X, votre répertoire courant est votre répertoire racine.
Mais ne me croyez pas sur parole.
Vérifiez-le vous-même en tapant la commande pwd dans la console de Wish Shell.
() 1 % pwd / () 2 %
La commande pwd est la commande UNIX qui est un acronyme pour print working directory.
Vous constatez que pwd retourne un slash (/) et c’est tout.
Ceci a une signification spéciale pour le système UNIX.
Un simple slash signifie que vous vous trouvez au niveau du répertoire racine.
Créons un répertoire appelé game_dev, comme celui présenté en Figure 1, dans le répertoire racine.
Nous pouvons le faire depuis Wish Shell en utilisant la commande mkdir (”make directory” / “crée un répertoire”).
file mkdir /game_dev
Le slash (/) indique au système d’exploitation où créer le répertoire game_dev.
Dans notre cas, nous demandons la création dans notre répertoire racine.
Nous pouvons nous déplacer dans le système de fichier en utilisant la commande UNIX cd (”change directory” / “changer de répertoire”).
() 4 % cd /game_dev (game_dev) 6 %
Vous remarquerez que maintenant, le prompt affiche le nom du répertoire entre parenthèses : (game_dev).
Votre répertoire courant est maintenant game_dev.
C’est le bon moment pour télécharger le fichier game_art.gif à l’aide de votre navigateur.
Téléchargez le fichier dans votre répertoire /game_dev.
(game_dev) 8 % exec ls game_art.gif
ls est une commande UNIX pour afficher le contenu d’un répertoire (”listing” / “liste”).
Vous pouvez utiliser cette commande depuis Wish Shell pour voir si votre fichier image se trouve dans le bon répertoire.
Vous pouvez utiliser le nom du chemin d’accès complet au fichier si vous voulez expérimenter le chemin d’accès.
(game_dev) 11 % exec ls /game_dev/game_art.gif /game_dev/game_art.gif
Le fichier se trouve dans notre répertoire, alors nous pouvons l’afficher.
Leçon 2 : Afficher des Fichiers Graphiques
Tcl possède des bibliothèques graphiques comprises dans Tk qui nous permettront d’ouvrir et d’afficher les fichiers graphiques.
La bibliothèque graphique de Tk a tous les outils dont nous avons besoin pour cette tâche.
Nous pouvons charger notre sprite dans notre programme en utilisant les lignes de code suivantes :
set filename "/game_dev/game_art.gif" set sprites [image create photo -file $filename]
Rappelez-vous que la variable filename doit représenter le chemin correct vers votre fichier.
Affichons notre fichier pour voir ce qu’il représente.
Nous aurons besoin de déterminer sa hauteur et sa largeur.
Nous pouvons utiliser les outils graphiques pour récupérer ces valeurs.
set max_x [image width $sprites] set max_y [image height $sprites]
Maintenant que nous connaissons la taille de notre image, nous pouvons créer un panneau (canvas) Tk pour y afficher l’image.
Les lignes suivantes nous y aiderons.
# create the canvas canvas .canv -width $max_x -height $max_y -background black pack .canv -side top -expand yes -fill both
Notre prochaine étape consiste à charger l’image dans le panneau.
# load the image to the canvas .canv itemconfigure $sprites -image $sprites .canv create image 0 0 -image $sprites -anchor nw
La dernière ligne de code indique à Tk comment placer notre image dans le panneau.
Nous voulons que l’origine de l’image soit placée sur l’origine du canvas.
Sinon, Tk essayerait de faire le malin et placerait l’image au milieu du panneau.
Nous devons lui forcer la main et lui demander de placer l’image depuis le coin haut gauche (ou northwest, nord-ouest, : -anchor nw).
Vous devriez expérimenter et supprimer la commande -anchor pour voir ce qu’il advient de l’image.
Si vous ne comprenez pas pourquoi l’image est positionnée dans le coin en haut à gauche du panneau, vous devriez lire l’article précédent.
J’y ai expliqué la géométrie des fenêtres et des panneaux.
La Figure 2 montre notre image affichée en utilisant le script load_art.tcl
Figure2. /game_dev/game_art.gif
le script :
set filename "/game_dev/game_art.gif" set sprites [image create photo -file $filename] set max_x [image width $sprites] set max_y [image height $sprites] # create the canvas canvas .canv -width $max_x -height $max_y -background black pack .canv -side top -expand yes -fill both # load the image to the canvas .canv itemconfigure $sprites -image $sprites .canv create image 0 0 -image $sprites -anchor nw
Leçon 3 : Utilisation du Buffer Vidéo
L’affichage du graphique était une leçon simple pour avoir un avant goût de la bibliothèque graphique de Tk.
Maintenant, explorons un autre concept important de la programmation graphique : le buffer vidéo.
Notre but est d’animer les éléments graphiques du jeu, appelés sprites.
Quand nous animons directement les éléments sur l’écran, l’animation apparaît saccadée.
Pour donner une impression de fluidité, les programmeurs de jeu vidéo utilisent la technique du buffer vidéo.
L’idée derrière cette technique est de créer toutes les modifications du jeu sur un écran qui n’est pas visible pour le joueur.
Une fois que votre programme a terminé la réalisation de l’écran de cache, il est alors rendu visible à l’utilisateur.
L’intérêt est que l’utilisateur ne voit pas la réalisation de la scène, ce qui produit une illusion de fluidité.
Figure 3. Utilisation du buffer vidéo
La figure 3 illustre la technique que nous allons utiliser.
En utilisant la bibliothèque graphique Tk, nous allons charger le fichier graphique en entier dans une image que nous appelons sprites.
Nous allons créer un buffer vidéo en utilisant la bibliothèque graphique Tk et nous l’appellerons “offscreen”.
L’image offscreen a exactement les mêmes dimensions que notre panneau .video_game_window.
Le but est de créer l’image dans ce buffer en utilisant les sprites de l’image sprites.
Voyons le code qui effectue cela :
# create the game console window set video_game_width 640 set video_game_height 480 canvas .video_game_window -width $video_game_width -height $video_game_height -background black pack .video_game_window -side top -expand yes -fill both # load the art file set filename "/game_dev/game_art.gif" set sprites [image create photo -file $filename] # create a blank offscreen image set offscreen [image create photo -height $video_game_height -width $video_game_width]
Le code ci-dessus crée la fenêtre du jeu, avec une résolution de 640 pixels de large par 480 pixels de haut.
Nous chargeons le graphique de notre jeu dans l’image sprites, et nous créons une image, dans le buffer, de 640 pixels de large par 480 pixels de haut, comme la fenêtre de notre jeu.
Nous avons les composants nécessaires en place pour expérimenter quelques concepts simples d’animation.
Copier l’Arrière-Plan vers le Buffer Vidéo
Maintenant, nous avons deux images Tk : sprites, qui contient la totalité des éléments graphiques de notre jeu, et offscreen, qui est vide.
Ce qu’il nous reste à faire maintenant, c’est de copier des images –notre fond d’écran et nos sprites– vers le buffer vidéo.
La copie de pixel d’une zone vidéo vers une autre est appelée blitting.
Copions l’image de fond de l’image sprites vers l’image offscreen.
# copy the background mountains image $offscreen copy $sprites -from 0 0 639 479 -to 0 0 639 479
Le blitting s’effectue en utilisant des zones rectangulaires.
Notre fichier graphique a une taille de 640 pixels de large par 1256 pixels de haut.
L’image de fond que nous voulons utiliser fait 640 pixels de large par 480 pixels de haut, ce qui correspond exactement à la taille de notre fenêtre de jeu.
La zone de 640 par 480 pixel en haut de notre fichier graphique est celle que nous voulons copier vers le buffer vidéo.
Ce qui explique pourquoi nous utilisons les coordonnées -from et -to dans la ligne de code.
Pour bien comprendre ce que nous faisons, utilisez un éditeur graphique, tel que Photoshop, et ouvrez le fichier game_art.gif.
Bougez la souris sur l’image et regardez les coordonnées des bords du paysage de fond.
Vous comprendrez alors pourquoi nous utilisons ces coordonnées et comment nous les obtenons à partir du fichier graphique.
La Copie de Sprites
Nous avons copié notre image de fond vers le buffer vidéo et nous avons maintenant besoin de notre cellule d’animation — notre sprite.
En utilisant un éditeur d’image, j’ai localisé un sprite à copier vers le buffer.
Il correspond à une image de l’animation du monstre en train de sauter.
Je vais prendre un sprite du fichier graphique dont les coordonnées de zone correspondent à 256, 767, 328, 800.
Le sprite va être copié au centre de la fenêtre de jeu.
Les sprites font tous 64 pixels de large et de haut.
Le centre de fenêtre de jeu est à 320, 240.
L’opération de copie s’effectue comme suit :
# copy the jumping monster sprite $offscreen copy $sprites -from 265 737 328 800 -to 320 303 383 240
Figure 4. Un sprite copié vers le buffer vidéo
La Figure 4 montre le sprite du monstre sauteur copié sur l’image de fond de notre buffer.
Notre opération de blit est effectuée; la création de notre image est terminée.
Maintenant, nous devons rafraîchir l’écran du jeu.
# update the video game window .video_game_window create image 0 0 -image $offscreen -anchor nw
Et Voilà ! Voici votre séquence animée du jeu.
Il ne s’agit pas vraiment d’un produit que l’on pourrait vendre, mais vous avez maintenant le principe de ce qu’il faut faire pour créer l’animation de votre jeu.
Le script :
# create the game console window set video_game_width 640 set video_game_height 480 canvas .video_game_window -width $video_game_width -height $video_game_height -background black pack .video_game_window -side top -expand yes -fill both # load the art file set filename "/game_dev/game_art.gif" set sprites [image create photo -file $filename] # create a blank offscreen image set offscreen [image create photo -height $video_game_height -width $video_game_width] # copy the background mountains image $offscreen copy $sprites -from 0 0 639 479 -to 0 0 639 479 # copy the jumping monster sprite $offscreen copy $sprites -from 265 737 328 800 -to 320 303 383 240 # update the video game window .video_game_window create image 0 0 -image $offscreen -anchor nw
Le Sommet de l’Iceberg
Nous n’avons fait que dévoiler le sommet de l’iceberg qu’est l’animation de jeu vidéo.
Vous avez ici les concepts de base pour l’utilisation du buffer vidéo.
Des jeux comme Unreal et Quake Arena peuvent utiliser bien plus que deux buffers à la fois pour effectuer des animations rapides.
L’idée derrière le concept du buffer est que vous créez l’image dans le buffer A, pendant que le contenu du buffer B est copié vers la fenêtre d’affichage du jeu.
Puis le buffer B est utilisé pour créer l’image, tandis que le contenu du buffer A est copié vers la fenêtre d’affichage du jeu, etc.
Maintenant il est temps d’expérimenter tout cela.
Si vous êtes vraiment aventureux, je vous recommande de faire une recherche sur Google avec les mots “mega man sprites” ou “sonic the hedgehog sprites”.
De nombreux sprites de vieux jeux sont disponibles sur le Web.
Textes originaux en anglais sur O’Reilly : Basics of Offscreen Buffering par Michael J. Norton
Chargement
Commentaires récents