Afficher des images BMP avec SDL2

publication: 6 novembre 2024 / mis à jour 6 novembre 2024

Read this page in english

En préambule, l’environnement pour afficher une image est celui-ci :

: main ( -- ) 
    initEnvironement 
    initNewWindow 
    draw 
    begin 
        key drop 
    -1 until 
    freeRessources 
  ; 

Le principe est toujours le même :

• l’environnement graphique SDL2 est initialisé ;
• une nouvelle fenêtre est ouverte ;
• les tracés graphiques sont exécutés
• on attend l’appui sur une touche du clavier
• les ressources SDL sont libérées

Ici, nous ne gérons pas encore les événements. Le contenu de main est volontairement simpliste, car maintenant, on s’attachera surtout à expliquer le contenu de draw au travers de divers exemples.

Chargement d’une image BMP

Ici, le mot ZFILE va pointer vers le chemin de notre image BMP :

z" SDL2/logo01.bmp" constant ZFILE 

L’image BMP choisie est celle-ci :

C’est une toute petite image, de 61 x 54 pixels. Pour cette image, on réserve la surface et la texture de cette image :

0 value IMAGE01     \ is surface 
0 value TEXTURE01 

La surface IMAGE01 pointe vers notre image BMP après ceci :

ZFILE SDL.load-image to IMAGE01 

Le mot SDL.load-image encapsule LoadBMP :

: LoadBMP  ( zstr -- 0|surface ) 
    z" rb" RWFromFile 1 LoadBMP_RW 
  ; 
 
: SDL.load-image  ( zstr -- surface ) 
    LoadBMP ?dup 0= if 
        drop -1 SDL.error 
    then 
  ; 

Ces deux définitions sont pré-implantées dans le fichier SDL2_images.fs. La dernière opération de chargement consiste à affecter le pointeur TEXTURE01 :

REN0 IMAGE01 CreateTextureFromSurface to TEXTURE01 

Résumé des lignes de code de chargement d’une image au format BMP :

: draw  ( -- ) 
    ZFILE SDL.load-image to IMAGE01 
    REN0 IMAGE01 CreateTextureFromSurface to TEXTURE01 
  ; 

Affichage de l’image

L’affichage de notre image au format BMP peut maintenant s’effectuer :

REN0 TEXTURE01 NULL NULL RenderCopy drop 

Voici le contenu complet du mot draw pour tester notre premier affichage d’image :

: draw ( -- ) 
    REN0 255 255 255 255 SetRenderDrawColor drop 
    WIN0 z" Display BMP image with SDL2" SetWindowTitle drop 
    REN0 RenderClear drop 
    \ load an image 
    ZFILE SDL.load-image to IMAGE01 
    REN0 IMAGE01 CreateTextureFromSurface to TEXTURE01 
    REN0 TEXTURE01 NULL NULL RenderCopy drop 
    REN0 RenderPresent drop 
  ; 

Résultat :

Ici, l’image occupe la totalité de la fenêtre. Voyons comment contrôler la taille de l’affichage de notre image au format BMP.

Contrôle des dimensions d’affichage d’une image

Avant d’aller plus avant, il faut revenir sur les paramètres de RenderCopy :

• renderer le contexte de rendu ;
• texture la texture source ;
• srcrect la structure SDL_Rect source ou NULL pour la texture entière ;
• dstrect la structure SDL_Rect de destination ou NULL pour la cible de rendu entière. La texture sera étirée pour remplir le rectangle donné.

Rappelons qu’une structure est un modèle de données. Pour créer un espace de données conforme à SDL_Rect :

create RECT01 
     20 L,   20 L,  61 L,  54 L, 

eForth Windows gère des données sur 64 bits. Dans la structure RECT01 les paramètres sont stockés au format 32 bits qui est le format attendu par

RenderCopy

Ici, les données stockées dans RECT01 indiquent la position x et y de l’affichage de l’image (20 20), w et h étant les dimensions de l’affichage (61 54) :

REN0 TEXTURE01 NULL RECT01 RenderCopy drop 

Contenu complet du code affichant cette image :

z" SDL2/logo01.bmp" constant ZFILE 
 
0 value IMAGE01     \ is surface 
0 value TEXTURE01 
 
create RECT01 
     20 L,   20 L,  61 L,  54 L, 
 
: draw ( -- ) 
    REN0 255 255 255 255 SetRenderDrawColor drop 
    WIN0 z" Display BMP image with SDL2" SetWindowTitle drop 
    REN0 RenderClear drop 
    \ load an image 
    ZFILE SDL.load-image to IMAGE01 
    REN0 IMAGE01 CreateTextureFromSurface to TEXTURE01 
    REN0 TEXTURE01 NULL RECT01 RenderCopy drop 
    REN0 RenderPresent drop 
  ; 

En modifiant les dimensions w et h dans la structure RECT01, on peut modifier la taille d’affichage de notre image.

Legal: site web personnel sans commerce / personal site without seling