Chapitre XVI : Alpha Blending avec SDL

image SDL

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

XVI. Alpha Blending

XVI-1. Définition

L'alpha blending est une technique consistant à ajouter de la transparence à des objets dont les surfaces.
Les surfaces sont généralement caractérisées par une texture ou par une couleur. La technique d'alpha blending consiste à ajouter à la surface, dont on souhaite donner la possibilité de devenir transparente, un octet (nombre de 0 à 255) définissant le caractère translucide de la surface.

Lorsque la valeur alpha est à 255, l'objet est totalement opaque et au contraire, si la valeur alpha est à 0, l'objet est complètement invisible.

XVI-2. Programme exemple

Vous savez déjà utiliser la transparence en utilisant le color key comme sur le Chapitre V : Transparence.

Dans ce tutoriel, nous allons poser deux surfaces dont celle de devant sera capable de s'effacer/revenir en changeant simplement sa valeur alpha. Cela aura pour effet de donner un fondu entre les deux images.

Voici une image du passage d'une image à l'autre sur notre programme :

image_programme

La transparence alpha SDL est de notoriété lente car elle n'utilise aucune accélération matérielle. Quelque soit votre carte graphique, ça ne changera rien.
Si vous souhaitez avoir une accélération matérielle, il vous faudra passer par OpenGL. Sachez que SDL marche très bien en compagnie d'OpenGL.

Commençons notre programme exemple par l'initialisation de notre valeur alpha dans le main() :

initialisation valeur alpha
Sélectionnez
//La valeur alpha de la surface de devant
	    int alpha = SDL_ALPHA_OPAQUE;

SDL nous permet d'utiliser une variable globale nommé SDL_ALPHA_OPAQUE qui est la valeur maximale que peu prendre une valeur alpha.
Cette variable globale est définie comme suit :

SDL_ALPHA_OPAQUE
Sélectionnez
#define SDL_ALPHA_OPAQUE 255

De même, il existe une autre variable globale pour définir la valeur minimale que peut prendre la valeur alpha :

SDL_ALPHA_TRANSPARENT
Sélectionnez
#define SDL_ALPHA_TRANSPARENT 0

Ces deux variables sont définies dans le fichier SDL_video.h.

Pour gérer le passage d'une image à l'autre, nous allons utiliser les flèches haut et bas du clavier.
Lorsque la flèche haut sera pressée, nous allons augmenter la valeur alpha jusqu'à ce qu'elle atteigne son maximum. De même, lorsque la flèche bas sera pressée, nous allons baisser la valeur alpha jusqu'à son minimum.

changement de la valeur alpha
Sélectionnez
        //Recuperation du keystates
	        Uint8 *keystates = SDL_GetKeyState( NULL );
	
	        //Si la fleche haut a ete pressee
	        if( keystates[ SDLK_UP ] )
	        {
	            //Si la valeur alpha n'est pas à son maximum
	            if( alpha < SDL_ALPHA_OPAQUE )
	            {
	                //Augmentation de la valeur alpha
	                alpha += 5;
	            }
	        }
	
	        //Si la fleche bas a ete pressee
	        if( keystates[ SDLK_DOWN ] )
	        {
	            //Si la valeur alpha n'est pas à son minimum
	            if( alpha > SDL_ALPHA_TRANSPARENT )
	            {
	                //Diminution de la valeur alpha
	                alpha -= 5;
	            }
	        }

La valeur alpha va donc de 0 à 255 (ou inversement) et l'image passe de l'opacité à la transparence complète.

Pour appliquer la valeur alpha a notre surface, il va falloir passer par la fonction SDL_SetAlpha() :

SDL_SetAlpha()
Sélectionnez
//Mise en place de la surface alpha
	        SDL_SetAlpha( front, SDL_SRCALPHA | SDL_RLEACCEL, alpha );

La variable alpha est donc la valeur alpha pour notre surface front. SDL_SRCALPHA doit être passé en paramètre, sinon toutes les informations alpha sont ignorées. Pour le paramètre SDL_RLEACCEL, il permet d'avoir l'accélération RLE (voir Chapitre V).

La suite, vous la connaissez, on applique les surfaces et on met à jour l'écran :

application des surfaces
Sélectionnez
//On applique la surface de derriere
	        apply_surface( 0, 0, back, screen );
	
	        //On applique la surface de devant
	        apply_surface( 0, 0, front, screen );
	
	        //Mise a jour de l'ecran
	        if( SDL_Flip( screen ) == -1 )
	        {
	            return 1;
	        }

Voila, vous devriez obtenir un beau fondu entre les deux images en appuyant sur les flèches haut et bas de votre clavier.

Télécharger les sources du chapitre XVI (110 ko)
Version pdf (85 ko - 7 pages)logo_pdf

Remerciements

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Ce document est issu de http://www.developpez.com et reste la propriété exclusive de son auteur. La copie, modification et/ou distribution par quelque moyen que ce soit est soumise à l'obtention préalable de l'autorisation de l'auteur.