Afficher un sprite à l’écran

Un sprite est un élément graphique (un dessin) qui peut entrer en interaction avec un autre élément graphique.

Par exemple : le héros d’un jeu est un sprite. La balle d’un pistolet tiré par un ennemi est aussi un sprite. Ils peuvent entrer en interaction tous les deux : si la balle touche le héros, il perd une vie.

 

Les sprites utilisés dans le jeu sont regroupés sur une feuille de sprites.

Nous allons donc utiliser une feuille de sprites pour notre héros.
Cette feuille contient toutes les positions que peut avoir notre héros dans le jeu.

Exemple de feuille de sprites pour le héros :
(remarque: le personnage utilisé n’est pas le héros du jeu, c’est une feuille libre de droit récupérée sur internet à cette adresse : https://davidfoxfire.deviantart.com/art/Link-Sprite-with-no-hat-523703499

Étape 1/

Il faut créer une variable, dans laquelle sera stockée notre feuille de sprites :

DIM feuilleHeros AS INTEGER

« feuilleHeros » est le nom que j’ai décidé de donner à la feuille de sprites de mon héros. QB64 n’aime pas les accents, il ne faudra donc jamais en mettre.

Mais au fait, c’est quoi une variable ?

On compare souvent une variable à un tiroir. En effet, un tiroir sert à ranger quelque chose, une variable c’est pareil. Quand on crée une variable, on crée un tiroir, un « espace de stockage » dans lequel, on va ranger quelque chose dedans. On peut y ranger un chiffre, un nombre, une lettre, un mot, une image, une feuille de sprites, etc…

Comme un programme utilise énormément de variables, il faut pouvoir les retrouver, c’est pour cela qu’il faut leur donner un nom.

Par exemple, ici, mon tiroir (ma variable donc) s’appelle feuilleHeros et va me servir à ranger la feuille de sprites de mon héros à l’intérieur.

A tout moment, je peux demander au programme d’aller voir ce qu’il y a à l’intérieur de ma variable, de l’utiliser, de modifier son contenu. Les variables ont d’ailleurs pour vocation à être modifiées. Variable, vient de varier qui veut dire changer. Le contenu d’une variable change. Si le contenu d’une variable ne change pas, cela ne s’appelle pas une variable mais une constante.

Les variables sont très très importantes, il est obligatoire de comprendre leur utilité.

Étape 2/

Il faut créer une fenêtre. La résolution choisie est 800 par 600 en couleur vraies (32)

SCREEN _NEWIMAGE(800, 600, 32)

On efface l’écran :
CLS

 

Étape 3/

Maintenant que la variable est créée, nous allons mettre à l’intérieur la feuille de sprites du héros :

feuilleHeros = SPRITESHEETLOAD(« Ressources\Graphiques\heros.png », 32, 32, AUTOTRANSPARENCY)

Explications : feuilleHeros=SPRITESHEETLOAD signifie que nous allons charger la feuille de sprite du héros dans la variable feuilleHeros.
Ressources\Graphiques\ indique l’endroit où se trouve la feuille de sprite.
heros.png indique le nom de la feuille de sprite et son format.
32,32 indique les dimensions en pixels de chacun des sprites qui composent la feuille de sprites.
AUTOTRANSPARENCY active la transparence autour du héros pour compléter la forme carré du sprite.

 

Étape 4/

Pour l’instant, nous avons créé une feuille de sprite. Maintenant, nous allons créer le sprite de notre héros, celui que nous allons déplacer à l’écran.

heros = SPRITENEW(feuilleHeros, 1, SAVE)

Explications :
heros=SPRITENEW crée un nouveau sprite que l’on va stocker dans la variable heros.
feuilleHeros indique où se trouve le dessin de notre héros, c’est-à-dire sur quelle feuille de sprite (ici feuilleHeros)
1 signifie que l’on va prendre le 1er dessin de la feuille de sprite ici :

SAVE sera expliqué plus tard.

Étape 5/

Enfin, il faut afficher le sprite à l’écran :

SPRITEPUT 399, 500, heros

SPRITEPUT indique que l’on veut placer le sprite à l’écran.
399,500 indique l’endroit à l’écran où l’on veut placer le sprite. Ici, le sprite sera placé en X=399 et Y=500.
heros indique quel sprite on veut placer à l’écran. Ici c’est le sprite heros

Étape 6/

Si l’on veut tester, ça ne marchera pas. Il faut rajouter 2 lignes pour « activer » la gestion des sprites à l’écran:

‘$INCLUDE:’Ressources\SpriteLib\spritetop.bi‘
Cette ligne est à placer, toujours, au début du programme.

‘$INCLUDE:’Ressources\SpriteLib\sprite.bi‘
Cette ligne est à placer, toujours, à la fin du programme.

Voici le programme complet :

'$INCLUDE:'Ressources\SpriteLib\spritetop.bi'

DIM feuilleHeros AS INTEGER
DIM heros AS INTEGER

SCREEN _NEWIMAGE(800, 600, 32)
CLS

feuilleHeros = SPRITESHEETLOAD("Ressources\Graphiques\heros1.png", 32, 32, AUTOTRANSPARENCY)
heros = SPRITENEW(feuilleHeros, 1, SAVE)

SPRITEPUT 399, 500, heros

'$INCLUDE:'Ressources\SpriteLib\sprite.bi’

Étape 7/

Appuyer sur F5 et voilà le résultat :

Étape 8/

Nous allons rajouter un arrière-plan provenant de cette adresse : (je n’arrive pas à retrouver, si quelqu’un sait …)

Voici la marche à suivre :

Créer une variable dans laquelle sera stockée l’image de l’arrière plan :
DIM arPlan AS INTEGER

Charger l’image d’arrière plan dans la variable créée ci-dessus :
arPlan = _LOADIMAGE(« Ressources\Graphiques\chateau.jpg », 32)

Afficher à l’écran l’image contenue dans la variable :
_PUTIMAGE (0, 0), arPlan

Programme complet :

'$INCLUDE:'Ressources\SpriteLib\spritetop.bi‘

DIM feuilleHeros AS INTEGER
DIM heros AS INTEGER

DIM arPlan AS INTEGER

SCREEN _NEWIMAGE(800, 600, 32)
CLS

arPlan = _LOADIMAGE("Ressources\Graphiques\chateau.jpg", 32)

feuilleHeros = SPRITESHEETLOAD("Ressources\Graphiques\heros1.png", 32, 32, AUTOTRANSPARENCY)
heros = SPRITENEW(feuilleHeros, 1, SAVE)

_PUTIMAGE (0, 0), arPlan

SPRITEPUT 399, 500, heros

'$INCLUDE:'Ressources\SpriteLib\sprite.bi'

Après appuie sur F5 :


Nous allons rajouter un 2e sprite à l’écran, ce sera un ennemi. Nous utiliserons la feuille de sprite ci-dessous, récupérée également sur internet à cette adresse (je ne me rappelle plus de l’adresse. Si quelqu’un retrouve…). Chaque sprite de cette feuille fait 64×64 pixels. Nous placerons le sprite 1 aux coordonnées suivantes : x=500, y=500.

Je vous laisse chercher le code à l’aide de ce que nous avons vu ci-dessus.

La solution est en dessous.

Voici les lignes à rajouter :

DIM feuilleMonstre AS INTEGER
DIM monstre AS INTEGER

feuilleMonstre = SPRITESHEETLOAD(« Ressources\Graphiques\monstre.png », 64, 64, AUTOTRANSPARENCY)

monstre = SPRITENEW(feuilleMonstre, 1, SAVE)

SPRITEPUT 500, 500, monstre

Ce qui nous donne :

‘$INCLUDE:’Ressources\SpriteLib\spritetop.bi’

DIM feuilleHeros AS INTEGER
DIM heros AS INTEGER

DIM feuilleMonstre AS INTEGER
DIM monstre AS INTEGER

DIM arPlan AS INTEGER

SCREEN _NEWIMAGE(800, 600, 32)
CLS

arPlan = _LOADIMAGE(« Ressources\Graphiques\chateau.jpg », 32)

feuilleHeros = SPRITESHEETLOAD(« Ressources\Graphiques\heros1.png », 32, 32, AUTOTRANSPARENCY)
heros = SPRITENEW(feuilleHeros, 1, SAVE)

feuilleMonstre = SPRITESHEETLOAD(« Ressources\Graphiques\monstre.png », 64, 64, AUTOTRANSPARENCY)
monstre = SPRITENEW(feuilleMonstre, 1, SAVE)

_PUTIMAGE (0, 0), arPlan

SPRITEPUT 399, 500, heros

SPRITEPUT 500, 500, monstre

‘$INCLUDE:’Ressources\SpriteLib\sprite.bi’

F5 :