CyBWarrior

Accueil > QBasic > QBasic – Encore plus loin dans le graphisme

QBasic – Encore plus loin dans le graphisme

25/03/2002 cybwarrior Commenter Allez aux commentaires

This entry is part 26 of 30 in the series QBasic - Tutoriel

Mise à part les techniques de dessins détaillées prédédemment, on peut aller beaucoup plus loin
dans le graphisme. Voici l’utilisation de ce qu’on appelle les SPRITES. Imaginons un
jeu avec un petit monstre qui devrait se déplacer sur l’écran. D’abord, sur une feuille de papier
milimétré ou autre, on le dessine à la main, avec les couleurs et les formes.

Ensuite, on va le coder avec des DATA. Comment ? C’est bien simple : on va faire comme si c’était
une grille. Mon monstre que j’ai dessinné fait 20 pixels de large sur 20 pixels de haut. Donc,
ça va me donner 20 lignes de DATA avec 20 données sur chaque lignes :



DATA 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00, 00

Dans ces DATA sont stockés la couleur de chaque pixel du monstre : par exemple, la premiere données
du premier DATA représente le pixel en haut à gauche. La dernière donnée du dernier DATA représente
le pixel en bas à droite.

Partant de ce principe, on peut coder n’importe quel dessin, qu’il soit complexe ou non. Mon
monstre, lui, est codé comme ceci :



DATA 00, 00, 00, 00, 00, 04, 04, 04, 04, 04, 04, 04, 04, 04, 04, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 04, 04, 04, 00, 04, 04, 00, 04, 04, 04, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 04, 04, 00, 00, 02, 02, 00, 00, 04, 04, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 04, 00, 00, 02, 02, 02, 02, 00, 00, 04, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 02, 02, 02, 02, 02, 02, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 02, 02, 14, 02, 02, 14, 02, 02, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 02, 02, 14, 02, 02, 14, 02, 02, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 02, 02, 02, 02, 02, 02, 02, 02, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 02, 02, 06, 06, 02, 02, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 00, 02, 02, 02, 02, 00, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 00, 00, 02, 02, 00, 00, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 00, 02, 02, 02, 02, 00, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 00, 02, 02, 01, 01, 02, 02, 00, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 00, 02, 02, 01, 01, 01, 01, 02, 02, 00, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 00, 02, 02, 01, 01, 01, 01, 01, 01, 02, 02, 00, 00, 00, 00, 00

DATA 00, 00, 00, 00, 02, 02, 01, 01, 01, 01, 01, 01, 01, 01, 02, 02, 00, 00, 00, 00

DATA 00, 00, 00, 02, 02, 01, 01, 01, 01, 01, 01, 01, 01, 01, 01, 02, 02, 00, 00, 00

DATA 00, 00, 02, 02, 01, 01, 01, 01, 01, 01, 01, 01, 01, 01, 01, 01, 02, 02, 00, 00

DATA 00, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 00

DATA 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02

Pour l’instant, ce n’est toujours pas très parlant. Mais ça ne va pas durer. Maintenant on va
le dessiner grace au code suivant. Vu que le monstre fait 20 pixels par 20 pixels, les boucles
vont donc jusqu’à 20 :

SCREEN 7 ‘ 320 x 200
CLS
FOR i = 1 TO 20
FOR j = 1 TO 20
READ Couleur ‘ On lit la couleur du pixel…
PSET(j, i), Couleur ‘ …puis on l’affiche
NEXT j
NEXT i

‘ Ci dessous, c’est mon monstre
DATA 00, 00, 00, 00, 00, 04, 04, 04, 04, 04, 04, 04, 04, 04, 04, 00, 00, 00, 00, 00
DATA 00, 00, 00, 00, 00, 04, 04, 04, 00, 04, 04, 00, 04, 04, 04, 00, 00, 00, 00, 00
DATA 00, 00, 00, 00, 00, 04, 04, 00, 00, 02, 02, 00, 00, 04, 04, 00, 00, 00, 00, 00
DATA 00, 00, 00, 00, 00, 04, 00, 00, 02, 02, 02, 02, 00, 00, 04, 00, 00, 00, 00, 00
DATA 00, 00, 00, 00, 00, 00, 00, 02, 02, 02, 02, 02, 02, 00, 00, 00, 00, 00, 00, 00
DATA 00, 00, 00, 00, 00, 00, 02, 02, 14, 02, 02, 14, 02, 02, 00, 00, 00, 00, 00, 00
DATA 00, 00, 00, 00, 00, 00, 02, 02, 14, 02, 02, 14, 02, 02, 00, 00, 00, 00, 00, 00
DATA 00, 00, 00, 00, 00, 00, 02, 02, 02, 02, 02, 02, 02, 02, 00, 00, 00, 00, 00, 00
DATA 00, 00, 00, 00, 00, 00, 00, 02, 02, 06, 06, 02, 02, 00, 00, 00, 00, 00, 00, 00
DATA 00, 00, 00, 00, 00, 00, 00, 00, 02, 02, 02, 02, 00, 00, 00, 00, 00, 00, 00, 00
DATA 00, 00, 00, 00, 00, 00, 00, 00, 00, 02, 02, 00, 00, 00, 00, 00, 00, 00, 00, 00
DATA 00, 00, 00, 00, 00, 00, 00, 00, 02, 02, 02, 02, 00, 00, 00, 00, 00, 00, 00, 00
DATA 00, 00, 00, 00, 00, 00, 00, 02, 02, 01, 01, 02, 02, 00, 00, 00, 00, 00, 00, 00
DATA 00, 00, 00, 00, 00, 00, 02, 02, 01, 01, 01, 01, 02, 02, 00, 00, 00, 00, 00, 00
DATA 00, 00, 00, 00, 00, 02, 02, 01, 01, 01, 01, 01, 01, 02, 02, 00, 00, 00, 00, 00
DATA 00, 00, 00, 00, 02, 02, 01, 01, 01, 01, 01, 01, 01, 01, 02, 02, 00, 00, 00, 00
DATA 00, 00, 00, 02, 02, 01, 01, 01, 01, 01, 01, 01, 01, 01, 01, 02, 02, 00, 00, 00
DATA 00, 00, 02, 02, 01, 01, 01, 01, 01, 01, 01, 01, 01, 01, 01, 01, 02, 02, 00, 00
DATA 00, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 00
DATA 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02, 02

Si jamais vous essayez ce code, je vous en supplie, ne riez pas de mon monstre. Si vous en faites
de plus beau, envoyez moi vos DATA…

Sans rire, c’est une bonne méthode pour réaliser des dessins avec pas mal de détails. Mais et
si maintenant, on voulait déplacer ce monstre ? On pourrait par exemple l’effacer avec CLS ou
en dessinant un carré de 20 par 20 pixels par dessus de la couleur de fond d’écran. Ensuite, on
le redessinerai, en ayant pris soint d’utiliser RESTORE pour réinitialiser les DATA.

C’est une possibilité. Mais cette méthode n’est guère rapide et si on réalisait un jeu avec des aliens
à tuer, le jeu ne serait pas vraiment agréable à jouer.

C’est pourquoi qu’une fois le monstre dessiné une première fois, on va le stocker en mémoire,
ce qui sera beaucoup plus rapide.

Pour stocker un graphisme en mémoire, on utilise GET (à ne pas confondre avec le GET permettant
d’accéder au fichiers). La syntaxe de GET est la suivante :



GET (x1, y1)-(x2, y2), Tableau

Enfantin ! on déssine un carré fictif de la taille du monstre (à son emplacement, bien entendu)
et on le stocke dans un tableau. Pour les dimensions du tableau, la formule donné dans l’aide
du QBasic est compliquée à mettre en oeuvre et est parfois fausse. C’est pourquoi on se contente
souvent de multiplier la largeur par la longeur , et diviser le tout par 2 (ce qui donne une demi-surface) pour avoir la taille
du tableau (dans notre cas, 20 x 20 / 2 = 200).

Voici la formule, pour information :



size% = 4 + INT(((PMAP (x2!, 0) – PMAP (x1!, 0) + 1) *

        (bitsPixelPlan%) + 7) /  * plans% *

        (PMAP (y2!, 1) – PMAP (y1!, 1) + 1)

Et voici comment stocker le fameux monstre :

SCREEN 7 ‘ 320 x 200
CLS
FOR i = 1 TO 20
FOR j = 1 TO 20
READ Couleur ‘ On lit la couleur du pixel…
PSET(j, i), Couleur ‘ …puis on l’affiche
NEXT j
NEXT i

DIM Monstre(200) AS INTEGER
GET(1, 1)-(20, 20), Monstre ‘ Capture du monstre

Puis, pour mouvoir le monstre, on va utiliser PUT (comme pour GET, à ne pas confondre).
La syntaxe de PUT est la suivante :



PUT (X, Y), Tableau, Action

X et Y représentent le coin supérieur gauche de l’endroit où placer l’image. Le tableau est celui
où est stocké l’image. Action précise que faire :

AND : fusionne l’image mémorisée avec l’image présente

OR : superpose l’image mémorisée sur l’image présente

PSET : trace l’image mémorisée, effaçant l’image présente

PRESET : trace l’image mémorisée en couleurs inverses, effaçant l’image présente

XOR : trace l’image mémorisée ou efface une image tracée précédemment tout en conservant
le fond de l’image, ce qui permet de produire des effets de mouvements

Vous l’aurrez compris, on va utiliser XOR. Vu que XOR est l’action par défaut, je ne l’ai pas
écrite. Notre monstre sera lié aux flêches du clavier, d’où la boucle imbriquée :

SCREEN 7 ‘ 320 x 200
CLS
FOR i = 1 TO 20
FOR j = 1 TO 20
READ Couleur ‘ On lit la couleur du pixel…
PSET(j, i), Couleur ‘ …puis on l’affiche
NEXT j
NEXT i

DIM Monstre(200) AS INTEGER
GET(1, 1)-(20, 20), Monstre ‘ Capture du monstre
X = 1
Y = 1
DO
DO
t$ = INKEY$
LOOP UNTIL t$ <> « »
PUT(X, Y), Monstre ‘ On efface le monstre
SELECT CASE t$
CASE CHR$(27) ‘ Touche Echap
END
CASE CHR$(0) + CHR$(72) ‘ Touche Haut
Y = Y – 1
CASE CHR$(0) + CHR$(80) ‘ Touche Bas
Y = Y + 1
CASE CHR$(0) + CHR$(75) ‘ Touche Gauche
X = X – 1
CASE CHR$(0) + CHR$(77) ‘ Touche Droite
X = X + 1
END SELECT
PUT(X, Y), Monstre ‘ Puis on le remet
LOOP

Petite explication :

On affiche l’image au même endroit avec XOR. Sans rentrer dans le détail, XOR effectue
une inversion de Bits, ce qui a pour effet d’effacer l’image.

On rentre dans une boucle. On en sort dès qu’une touche est appuyée. On aurrait très bien
pu ne pas en mettre, mais il y aurait eu un clignotement très rapide en raison du réaffichage
permanent.

Ensuite, on regarde la touche qui a été appuyée. Pour comprendre ces codes ASCII, vous
devez aller dans l’aide de QBasic et consulter dans un premier temps la table de caractères
ASCII. On voit qu’au caractère 27 est associé le (esc). Le programme sera
donc quitté lors de l’appui sur la touche Echap. Pour les autre codes, il vous faut consulter
la table des ‘Codes de balayage clavier’. Les codes de balayage clavier sont composés d’un
caractère nul (CHR$(0)) et du code correspondant dans la table. Par exemple,
on voit que pour la touche HAUT, c’est le code 72. La touche HAUT sera alors symbolisée
par CHR$(0) + CHR$(72)

Puis, on affiche l’image au nouvel endroit. Cette fois, comme il n’y a rien derrière, l’image
est affichée.

Vous pouvez, si vous voulez réaliser un PACKMAN par exemple, créer plusieurs tableaux avec autant
d’image que vous désirez (en fait cela dépend de la mémoire de votre machine).

En parlant de mémoire, déclarez toujours des tableaux d’INTEGER, c’est largement sufisant.

Series Navigation«QBasic – La manette de jeuQBasic – La mémoire»

Categories: QBasic Tags:

Commentaires (0) Trackbacks (0) Commenter Trackback

Pas encore de commentaire

Pas encore de trackbacks

QBasic – Le clavier QBasic – Maths, logique et divers

QBasic – Encore plus loin dans le graphisme

Categories

Recent Posts

Blogroll

Archives

Meta

CyBWarrior

QBasic – Encore plus loin dans le graphisme

Categories

Recent Posts

Mots-clefs

Blogroll

Archives

Meta