Afficher des images programmation - lecture du tutoriel -

Afficher des images - Programmation - Lecture du tutoriel - Le Site du... http://www.siteduzero.com/tuto-3-5432-1-afficher-des-images.html

1 sur 16 23/08/2007 02:06

Auteur : M@teo21Créé le : 20/03/2006 à 14h40Modifié le : 24/03/2006 à14h30Noter et commenter ce tutorialImprimer ce tutorial

Afficher des images

Dans notre premier chapitre de "vraie" pratique de la SDL, nous avons appris à charger la SDL, ouvrir une fenêtre et gérerles surfaces.

Or, pour le moment nous n'avons appris qu'à créer dessurfaces unies, c'est-à-dire ayant la même couleur. Lessurfaces unies ça va un moment, mais ce serait délicat de

faire un jeu avec juste des carrés de couleur

Dans ce chapitre, nous allons justement apprendre à charger des images dans des surfaces, que ce soit des BMP, desPNG, des GIF, des JPG ou que sais-je encore

Sommaire du chapitre :Charger une image BMPGestion de la transparenceCharger plus de formats d'image avec SDL_ImageQ.C.M.

Charger une image BMP

Allons bon

Pourquoi est-ce qu'on ne va apprendre qu'à charger des images BMP ici ?

En fait, la SDL est une librairie très simple. Elle ne propose à la base que le chargement d'images de type Bitmap(extension ".bmp"). Ne paniquez pas pour autant, car grâce à une extension de la SDL (la librairie SDL_Image) nousverrons qu'il est possible de charger de nombreux autres types.

Pour commencer déjà, nous allons nous contenter de ce que la SDL offre à la base. Nous allons donc étudier lechargement de BMP.

Le format BMP

Un BMP (abréviation de Bitmap) est un format d'image. Les images que vous voyez sur votre ordinateur sont stockées dans des fichiers. Il existe plusieurs formats d'images,c'est-à-dire plusieurs façons de coder l'image dans un fichier. Selon le format, l'image prend plus ou moins d'espacedisque et est de plus ou moins bonne qualité.

Le Bitmap est un format non compressé (contrairement aux JPG, PNG, GIF etc.)


2 sur 16 23/08/2007 02:06

Concrètement, cela signifie les choses suivantes :

Le fichier est très rapide à lire, contrairement aux formats compressés doivent être décompressés, ce qui leurprend un peu plus de temps.La qualité de l'image est parfaite. Certains formats compressés comme le JPG détériorent la qualité del'image, ce n'est pas le cas du BMP.Mais le fichier est aussi bien plus gros puisqu'il n'est pas compressé !

Bref, il y a des avantages et des défauts. Pour la SDL, l'avantage c'est que ce type de fichier est simple et rapide à lire. Si vous avez souvent besoin de chargerdes images au cours de l'exécution de votre programme, il vaut mieux utiliser des BMP : certes le fichier est plusgros, mais il se chargera plus vite qu'un GIF par exemple.

Charger un bitmap

Téléchargement du pack d'images

Nous allons travailler avec plusieurs images dans ce chapitre. Si vous voulez faire les tests en même temps que vouslisez (et vous devriez !), je vous recommande fortement de télécharger ce pack qui contient toutes les images donton va avoir besoin :

Télécharger le pack d'images (1 Mo)

Placez toutes les images dans le dossier de votre projet. Nous allons commencer par travailler avec le fichier lac_en_montagne.bmp. C'est une scène 3D d'exemple livréeavec le logiciel de modélisation Vue d'Esprit (c'était à l'époque où j'espérais me découvrir un talent artistique, mais

ça fait belle lurette que j'ai abandonné )

Charger l'image dans une surface

Nous allons utiliser une fonction qui va charger l'image BMP et la mettre dans une surface.

Cette fonction a pour nom SDL_LoadBMP. Vous allez voir c'est ridicule tellement c'est simple

Code : C

La fonction SDL_LoadBMP remplace 2 fonctions que vous connaissez :

SDL_CreateRGBSurface : qui se chargeait d'allouer de la mémoire pour stocker une surface de la tailledemandée (= malloc).SDL_FillRect : qui remplissait la structure d'une couleur unie.

Pourquoi est-ce que ça remplace ces 2 fonctions ? C'est très simple :

La taille à allouer en mémoire pour la surface dépend de la taille de l'image : si l'image fait une taille de 250x 300, alors votre surface aura une taille de 250 x 300.D'autre part, votre surface sera remplie pixel par pixel par le contenu de votre image BMP.

Codons sans plus tarder

maSurface = SDL_LoadBMP("image.bmp");


3 sur 16 23/08/2007 02:06

Code : C

J'ai donc créé un pointeur vers une surface ( imageDeFond) ainsi que les coordonnées correspondantes(positionFond). La surface est créée en mémoire et remplie par la fonction SDL_LoadBMP. On la blitte ensuite sur la surface ecran et c'est tout ! Admirez le résultat :

int main(int argc, char *argv[])

{

SDL_Surface *ecran = NULL, *imageDeFond = NULL; SDL_Rect positionFond;

positionFond.x = 0; positionFond.y = 0;

SDL_Init(SDL_INIT_VIDEO);

ecran = SDL_SetVideoMode(800, 600, 32, SDL_HWSURFACE);

SDL_WM_SetCaption("Chargement d'images en SDL", NULL);

/* Chargement d'une image Bitmap dans une surface */ imageDeFond = SDL_LoadBMP("lac_en_montagne.bmp"); /* On blitte par-dessus l'écran */

SDL_BlitSurface(imageDeFond, NULL, ecran, &positionFond);

SDL_Flip(ecran); pause();

SDL_FreeSurface(imageDeFond); /* On libère la surface */ SDL_Quit();

return EXIT_SUCCESS;}


4 sur 16 23/08/2007 02:06

C'est aussi simple que cela

Donner une icône à son application

Maintenant que nous savons charger des images, nous pouvons voir comment donner une icône à notre programme.L'icône sera affichée en haut à gauche de la fenêtre (et aussi dans la barre des tâches). Pour le moment on a uneicône par défaut.

Mais, les icônes des programmes ne sont pas des .ico normalement ?

Non pas forcément ! D'ailleurs les .ico n'existent que sous Windows, sur les autres OS on n'en trouve pas ! La SDL réconcilie tout le monde en utilisant un truc bien à elle : une surface !

Eh oui, l'icône d'un programme SDL n'est rien d'autre qu'une bête surface

Votre icône doit normalement être de taille 16x16 pixels. Toutefois, sous Windows il faut que l'icône soit de taille 32x32 pixels sinon elle sera déformée. Ne vous enfaites pas, la SDL "réduira" les dimensions de l'image pour qu'elle rentre dans 16x16 pixels (vous imaginez

pas le temps que j'ai mis pour comprendre ça )

Pour ajouter l'icône à la fenêtre, on utilise la fonction SDL_WM_SetIcon Cette fonction prend 2 paramètres : la surface qui contient l'image à afficher ainsi que des informations sur latransparence (NULL si on ne veut pas de transparence).

La gestion de la transparence d'une icône est un peu compliquée (il faut dire un à un quels sont lespixels transparents), nous ne l'étudierons donc pas.

On va combiner 2 fonctions en une :

Code : C

L'image est chargée en mémoire par SDL_LoadBMP et l'adresse de la surface est directement envoyée àSDL_WM_SetIcon.

La fonction SDL_WM_SetIcon doit être appelée avant que la fenêtre ne soit ouverte, c'est-à-direqu'elle doit se trouver avant SDL_SetVideoMode dans votre code source.

Voici le code source complet (j'ai juste ajouté le SDL_WM_SetIcon par rapport à la dernière fois) :

Code : C

SDL_WM_SetIcon(SDL_LoadBMP("sdl_icone.bmp"), NULL);


5 sur 16 23/08/2007 02:06

Résultat, l'icône est chargée

Gestion de la transparence

Le problème de la transparence

Nous avons chargé une jolie image bitmap tout à l'heure dans notre fenêtre. Supposons que l'on veuille blitter une image par-dessus. Ca vous arrivera très fréquemment, car dans un jeu engénéral le personnage que l'on déplace est un bitmap, et il se déplace sur une image de fond.

On va blitter l'image de Zozor (la mascotte du Site du Zér0 !) sur la scène :

Code : C


{

SDL_Surface *ecran = NULL, *imageDeFond = NULL; SDL_Rect positionFond;

positionFond.x = 0; positionFond.y = 0;


/* Chargement de l'icône AVANT SDL_SetVideoMode */




imageDeFond = SDL_LoadBMP("lac_en_montagne.bmp");



SDL_FreeSurface(imageDeFond); SDL_Quit();

return EXIT_SUCCESS;

}


6 sur 16 23/08/2007 02:06

On a juste rajouté une surface pour y stocker Zozor, que l'on blitte ensuite à un endroit sur la scène. Le résultat est le suivant :


{

SDL_Surface *ecran = NULL, *imageDeFond = NULL, *zozor = NULL; SDL_Rect positionFond, positionZozor;

positionFond.x = 0; positionFond.y = 0; positionZozor.x = 500; positionZozor.y = 260;





imageDeFond = SDL_LoadBMP("lac_en_montagne.bmp");


/* Chargement et blittage de zozor sur la scène */ zozor = SDL_LoadBMP("zozor.bmp");

SDL_BlitSurface(zozor, NULL, ecran, &positionZozor);


SDL_FreeSurface(imageDeFond); SDL_FreeSurface(zozor); SDL_Quit();


}


7 sur 16 23/08/2007 02:06

C'est moche hein ?

Bah oui, c'est parce que t'as mis un fond bleu tout moche sur l'image de Zozor !

Parce que vous croyez qu'avec un fond noir ou un fond marron derrière Zozor ça aurait été plus joli ?

Ben non, le problème ici c'est que notre image est forcément rectangulaire, donc si on la colle sur la scène on voitson fond et ça fait moche.

Heureusement, la SDL gère la transparence !

Rendre une image transparente

Etape 1 : préparer l'image

Pour commencer, il faut préparer l'image que vous voulez blitter sur la scène. Les BMP ne sont pas des images gérant la transparence, contrairement aux GIF et PNG. Il va donc falloir utiliser uneastuce.

Il faut mettre la même couleur de fond sur toute l'image. Celle-ci sera rendue transparente par la SDL au moment dublit. Observez à quoi ressemble mon zozor.bmp de plus près :


8 sur 16 23/08/2007 02:06

J'ai mis un fond bleu uni exprès. Notez que j'ai choisi le bleu au hasard, j'aurais très bien pu mettre un fond vert ourouge par exemple. Ce qui compte, c'est que cette couleur soit unique et unie. J'ai choisi le bleu parce qu'il n'y en avait pas dans l'image de zozor. Si j'avais choisi le vert, j'aurais pris le risque que l'herbe que machouille Zozor (en bas à gauche de l'image) soit rendue transparente.

A vous donc de vous débrouiller avec votre logiciel de dessin (Paint, Photoshop, chacun ses goûts ) pour donner

un fond uni à votre image.

Etape 2 : indiquer la couleur transparente

Pour indiquer à la SDL quelle est la couleur qui doit être rendue transparente, vous devez utiliser la fonctionSDL_SetColorKey. Cette fonction doit être appelée avant de blitter l'image. Voici comment je m'en sers pour rendre le bleu derrière Zozor transparent :

Code : C

Il y a 3 paramètres :

La surface qui doit être rendue transparente (ici c'est zozor)Une liste de flags. Utilisez SDL_SRCCOLORKEY pour activer la transparence, 0 pour la désactiver.Indiquez ensuite la couleur qui doit être rendue transparente. J'ai utilité SDL_MapRGB pour créer la couleurau format nombre (Uint32) comme on l'a déjà fait par le passé. Comme vous le voyez, c'est le bleu pur (0, 0,255) que je rends transparent.

En résumé, on charge d'abord l'image avec SDL_LoadBMP, on indique la couleur transparente avec SDL_SetColorKey,puis on peut blitter avec SDL_BlitSurface :

Code : C

Résultat, Zozor est parfaitement intégré à la scène !

SDL_SetColorKey(zozor, SDL_SRCCOLORKEY, SDL_MapRGB(zozor->format, 0, 0, 255));

/* On charge l'image : */zozor = SDL_LoadBMP("zozor.bmp");/* On rend le bleu derrière Zozor transparent : */SDL_SetColorKey(zozor, SDL_SRCCOLORKEY, SDL_MapRGB(zozor->format, 0, 0, 255));/* On blitte l'image maintenant transparente sur le fond : */



9 sur 16 23/08/2007 02:06

Ca, c'est LA technique de base que vous réutiliserez tout le temps dans vos futurs programmes. Apprenez à bien

manier la transparence car c'est fondamental si on veut avoir un jeu un minimum réaliste

La transparence Alpha

C'est un autre type de transparence. Jusqu'ici, on se contentait de définir UNE couleur de transparence (par exemple le bleu). Cette couleurn'apparaissait pas une fois l'image blittée.

La transparence Alpha c'est autre chose. Elle permet de réaliser un "mélange" entre une image et le fond. C'est unesorte de fondu.

La transparence Alpha d'une surface peut être activée par la fonction SDL_SetAlpha :

Code : C

Il y a là encore 3 paramètres :

La surface en question (zozor)Une liste de flags. Mettez SDL_SRCALPHA pour activer la transparence, 0 pour la désactiver.Très important : la valeur Alpha de la transparence. C'est un nombre compris entre 0 (image totalement transparente, donc invisible) et 255 (image totalement opaque, comme s'il n'y avait pas de transparencealpha)

SDL_SetAlpha(zozor, SDL_SRCALPHA, 128);


10 sur 16 23/08/2007 02:06

Plus le nombre Alpha est petit, plus l'image est transparente et fondue.

Voici par exemple un code qui met une transparence alpha de 128 à notre Zozor :

Code : C

Vous noterez que j'ai conservé la transparence de SDL_SetColorKey. Les 2 types de transparence sonten effet combinables.

Ce tableau vous montre à quoi ressemble Zozor selon la valeur de Alpha :

Alpha Aperçu

255 (entièrement opaque)

190

zozor = SDL_LoadBMP("zozor.bmp");SDL_SetColorKey(zozor, SDL_SRCCOLORKEY, SDL_MapRGB(zozor->format, 0, 0, 255));/* Transparence Alpha moyenne (128) : */SDL_SetAlpha(zozor, SDL_SRCALPHA, 128);



11 sur 16 23/08/2007 02:06

Alpha Aperçu

128 (transparence moyenne)

75

0 (entièrement transparente)

La transparence Alpha 128 (transparence moyenne) est une valeur spéciale qui est optimisée par laSDL. Ce type de transparence est plus rapide à calculer pour votre ordinateur que les autres. C'est peutêtre bon à savoir si vous utilisez beaucoup de transparence Alpha dans votre programme.

Charger plus de formats d'image avec SDL_Image


12 sur 16 23/08/2007 02:06

La SDL ne gère que les Bitmaps (BMP) comme on l'a vu. A priori, ce n'est pas un très gros problème parce que la lecture des BMP est rapide pour la SDL, mais il fautreconnaître qu'aujourd'hui on est plutôt habitué à utiliser d'autres formats. En particulier, nous sommes habitués auxformats d'images "compressés" comme le PNG, le GIF et le JPEG. Ca tombe bien, il existe justement une librairieSDL_Image qui gère tous les formats suivants :

TGABMPPNMXPMXCFPCXGIFJPGTIFLBMPNG

Il est possible de rajouter des extensions à la SDL. Ce sont des librairies qui ont besoin de la SDL pour fonctionner. On peut voir ça comme des add-ons. SDL_Image est l'une d'entre elles.

Installer SDL_image

Téléchargement

Il y a une page spéciale sur le site de la SDL qui référence les librairies utilisant la SDL. Cette page s'intituleLibraries, vous trouverez un lien dans le menu de gauche. Vous pourrez voir qu'il y a pas mal de librairies disponibles. Celles-ci ne proviennent pas des auteurs de la SDLgénéralement, ce sont plutôt des utilisateurs de la SDL qui proposent leurs librairies. Certaines sont très bonnes et méritent le détour, d'autres sont moins bonnes et encore buggées. Il faut arriver à faire

le tri

Cherchez SDL_Image dans la liste... Bon allez, je suis de bonne humeur : voici un lien direct vers la page de téléchargement de SDL_Image pour vous aider

Téléchargez la version de SDL_Image qui vous correspond dans la section Binary (ne prenez PAS la source, on n'en a pas besoin !) Si vous êtes sous Windows téléchargez SDL_image-devel-1.2.4-VC6.zip même si vous n'utilisez pas Visual C++ !

Installation

Dans ce zip vous trouverez :

SDL_image.h : le seul header dont a besoin la librairie SDL_image. Placez-le dans mingw32/include/SDL/,c'est-à-dire à côté des autres headers de la SDL.SDL_image.lib : placez-le dans mingw32/lib. Oui, je sais, je vous ai dit que normalement les .lib étaient desfichiers réservés à Visual, mais ici exceptionnellement le .lib fonctionnera même avec le compilateur mingw.Plusieurs DLL : placez-les toutes dans le dossier de votre projet (à côté de SDL.dll donc).

Ensuite, vous devez modifier les options de votre projet pour "linker" avec le fichier SDL_image.lib.

Si vous êtes sous Code::Blocks par exemple, allez dans le menu Projects / Build options. Dans l'onglet Linker, cliquezsur le bouton "Add" et indiquez où se trouve le fichier SDL_image.lib Si on vous demande "Keep as a relative path ?", répondez ce que vous voulez ça ne changera rien dans l'immédiat. Je

recommande de répondre "Non" personnellement


13 sur 16 23/08/2007 02:06

Ensuite, vous n'avez plus qu'à inclure le header SDL_image.h dans votre code source comme ceci :

Code : C

Et voilà, la librairie SDL_image devrait maintenant fonctionner (à condition que vous ayez bien fait exactement tout

ce que j'ai indiqué bien sûr )

Si vous êtes sous Dev-C++ ou Visual Studio, la manipulation est quasiment la même. Si vous avez

réussi à installer la SDL, vous n'aurez aucun problème pour installer SDL_image

Charger les images

En fait, installer SDL_image est 100 fois plus compliqué que de l'utiliser, c'est vous dire la complexité du truc

Il y a UNE fonction à connaître : IMG_Load. Elle prend un paramètre : le nom du fichier à ouvrir.

Ce qui est génial, c'est que cette fonction est capable d'ouvrir tous les types de fichiers que gère SDL_image (GIF,PNG, JPG, mais aussi BMP, TIF...). Elle détectera toute seule le type du fichier en fonction de son extension.

Comme SDL_image peut aussi ouvrir les BMP, vous pouvez même oublier la fonction SDL_LoadBMPmaintenant et n'utiliser plus que IMG_Load pour le chargement de n'importe quelle image.

Autre bon point : si l'image que vous chargez gère la transparence (comme c'est le cas des PNG et des GIF), alorsSDL_image activera automatiquement la transparence pour cette image ! Cela vous évite donc d'avoir à appeler

SDL_SetColorKey

Voici le code source complet qui charge sapin.png et l'affiche. Notez bien que j'inclue SDL/SDL_image.h et que je ne fais pas appel à SDL_SetColorKey car mon PNG esttransparent. Vous allez voir que j'utilise IMG_Load partout dans ce code en remplacement de SDL_LoadBMP.

Code : C

#include <SDL/SDL_image.h>


14 sur 16 23/08/2007 02:06

Résultat :

#include <stdlib.h>#include <stdio.h>#include <SDL/SDL.h>#include <SDL/SDL_image.h> /* Inclusion du header de SDL_image */

void pause();


{

SDL_Surface *ecran = NULL, *imageDeFond = NULL, *sapin = NULL;

SDL_Rect positionFond, positionSapin;

positionFond.x = 0; positionFond.y = 0; positionSapin.x = 500; positionSapin.y = 260;


SDL_WM_SetIcon(IMG_Load("sdl_icone.bmp"), NULL);



imageDeFond = IMG_Load("lac_en_montagne.bmp");


/* Chargement d'un PNG avec IMG_Load Celui-ci est automatiquement rendu transparent car les informations de transparence sont codées à l'intérieur du fichier PNG */ sapin = IMG_Load("sapin.png");

SDL_BlitSurface(sapin, NULL, ecran, &positionSapin);


SDL_FreeSurface(imageDeFond); SDL_FreeSurface(sapin); SDL_Quit();


}

void pause(){

int continuer = 1;

SDL_Event event;

while (continuer)

{ SDL_WaitEvent(&event);

switch(event.type)

{

case SDL_QUIT: continuer = 0; } }}


15 sur 16 23/08/2007 02:06

Quand même bien pratique cette petite librairie

Q.C.M.

Quelle fonction permet d'ajouter une icône à la fenêtre ?

nmlkj SDL_WM_SetIcon

nmlkj SDL_WM_Set_Icon

nmlkj SDL_SetIcon

Qu'est-ce que la transparence Alpha ?

nmlkj Une couleur rendue invisible

nmlkj Plusieurs couleurs rendues invisibles

nmlkj Un fondu entre deux images


16 sur 16 23/08/2007 02:06

Auteur : M@teo21Noter et commenter ce tutorialImprimer ce tutorial

Pourquoi peut-on parfois se passer de la fonction SDL_SetColorKey si on charge une image GIF ou PNG avec SDL_image ?

nmlkj Parce que les formats GIF et PNG contiennent des informations de transparence

nmlkj Parce que SDL_image est intelligente et devine toute seule la couleur de transparence

nmlkj Parce que la couleur de transparence peut être indiquée lors de l'appel à IMG_Load

Quel est le seul format d'image que permet de lire la librairie SDL à la base ?

nmlkj JPG

nmlkj XPM

nmlkj BMP

nmlkj GIF

nmlkj PNG

Correction !

Vous êtes maintenant capables d'afficher de nombreux type d'images dans vos programmes SDL, et, surtout, derendre ces images transparentes. Avec ces fonctions pourtant très simples de la SDL, vous allez pouvoir réaliser à peu près tous les programmes quevous voulez.

Mais avant ça, il va falloir étudier un chapitre très important de la SDL : les évènements. Cela vous permettra de

gérer le clavier, la souris et le joystick, rien de moins que ça !

Au lieu d'avoir un programme "passif" comme maintenant où vous vous contentez de regarder votre fenêtre, vousallez pouvoir contrôler un personnage au clavier, cliquer dans la fenêtre etc.

Afficher des images programmation - lecture du tutoriel -

Technology

Transcript of Afficher des images programmation - lecture du tutoriel -