Déplacer un sprite – Partie 1

Pour déplacer un sprite il suffit de modifier la valeur de ses coordonnées, c’est à dire la valeur de son X et la valeur de son Y.

Dans notre exemple précédent, notre héros a les coordonnées suivantes :

X= 399 , Y=500

Notre ennemi a les coordonnées suivantes :

X= 500 , Y = 500

 

Étape 1/

Dorénavant, nous placerons ces valeurs dans des variables.

Pourquoi encore des variables ? Car notre ennemi et notre héros doivent pouvoir se déplacer, leur position à l’écran ne sera jamais la même, elle va toujours changer.

Changer veut dire varier donc on utilise des variables.

Ce qui donne, par exemple :

DIM xHeros AS INTEGER
DIM yHeros AS INTEGER
DIM xMonstre AS INTEGER
DIM yMonstre AS INTEGER

On attribue leurs valeurs, par exemple :

xHeros = 99
yHeros = 500
xMonstre = 500
yMonstre = 500

Pour placer les sprites à l’écran, cela donne :

SPRITEPUT xHeros, yHeros, heros
SPRITEPUT xMonstre, yMonstre, monstre

Voici le programme complet :

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

DIM feuilleHeros AS INTEGER
DIM heros AS INTEGER
DIM xHeros AS INTEGER
DIM yHeros AS INTEGER

DIM feuilleMonstre AS INTEGER
DIM monstre AS INTEGER
DIM xMonstre AS INTEGER
DIM yMonstre AS INTEGER

DIM arPlan AS INTEGER

SCREEN _NEWIMAGE(800, 600, 32)
CLS

xHeros = 99
yHeros = 500
xMonstre = 500
yMonstre = 500

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 xHeros, yHeros, heros
SPRITEPUT xMonstre, yMonstre, monstre

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

Maintenant, nous allons faire bouger le sprite ennemi. Il se déplacera de haut en bas pour nous empêcher de passer.

Étape 2/

Pour que l’ennemi se déplace, nous allons devoir utiliser une boucle.

Une boucle permet de répéter des lignes de codes un certain nombre de fois, ou même indéfiniment, c’est nous qui choisissons.

Ici, la boucle tournera et répétera donc le code qu’elle contient, indéfiniment.

Pour cela, nous utiliserons :

DO   

[code à exécuter ]

LOOP

Il existe d’autres façons de faire des boucles que nous verrons plus tard.

Etape 3/

Nous allons faire descendre notre ennemi. Pour cela, nous allons modifier la valeur de son Y à chaque boucle. Pour qu’il descende, nous allons devoir rajouter 1 à la variable yMonstre, à chaque boucle.

Voilà comment il faut faire :

yMonstre=yMonstre+1

Pour vérifier que la valeur de Y de notre ennemi change à chaque boucle, nous allons dire au programme de l’afficher en haut à gauche:

LOCATE 1,1:PRINT yMonstre

Avec cette ligne, nous affichons la valeur contenue dans la variable yMonstre.

Voici une dernière fois, le code complet jusqu’à présent :

Pour la suite, comme nous ne modifierons que l’intérieur de la boucle, je ne placerai que le code contenu dans la boucle.

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

DIM feuilleHeros AS INTEGER
DIM heros AS INTEGER
DIM xHeros AS INTEGER
DIM yHeros AS INTEGER

DIM feuilleMonstre AS INTEGER
DIM monstre AS INTEGER
DIM xMonstre AS INTEGER
DIM yMonstre AS INTEGER

DIM arPlan AS INTEGER

SCREEN _NEWIMAGE(800, 600, 32)
CLS

xHeros = 99
yHeros = 500
xMonstre = 500
yMonstre = 500

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 xHeros, yHeros, heros
SPRITEPUT xMonstre, yMonstre, monstre

DO
yMonstre = yMonstre + 1

 LOCATE 1,1: PRINT yMonstre

LOOP

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

Si on vérifie le code avec F5, on peut constater que le sprite ne bouge pas. Pourtant, sa variable change comme prévu, très rapidement, mais elle change.

Comment faire ?

A chaque fois que 1 a été rajouter à yMonstre, il faut dire au programme d’afficher la nouvelle position du sprite, avec une ligne que nous connaissons déjà :

SPRITEPUT xMonstre, yMonstre, monstre

Ce qui donne, à l’intérieur de la boucle :

DO
yMonstre = yMonstre+ 1

LOCATE 1, 1: PRINT yMonstre
SPRITEPUT xMonstre, yMonstre, monstre

LOOP

Si on appuie sur F5, le monstre n’apparait plus à l’écran et nous pouvons le voir très furtivement à l’écran à certain moment. C’est normal car comme constaté ci-dessus, la valeur de Y change rapidement et donc l’ennemi se déplace très rapidement. Tellement rapidement, que nous ne le voyons pas bouger.

Nous allons améliorer son déplacement.

Étape 4/

Nous allons déjà rajouter, en début de boucle :

_LIMIT 60

qui signifie 60 images par seconde.

puis, en fin de boucle :

_DIPLAY

DO
_LIMIT 60
yMonstre = yMonstre + 1

LOCATE 1, 1: PRINT yMonstre
SPRITEPUT xMonstre, yMonstre, monstre

_DISPLAY
LOOP

Avec F5, nous constatons que l’ennemi se déplace vers le bas. Mais le problème, c’est qu’il sort de l’écran. A l’étape suivante, nous verrons comment l’empêcher de sortir et même comment le faire remonter.

Etape 5/

Notre fenêtre fait 800×600 donc X va de 0 à 800 pixels de large et Y va de 0 à 600 pixels de haut.

La limite est 600, au delà, le sprite sort de l’écran.

Nous allons utilisons une nouveauté dans notre apprentissage. Ce sont les conditions.

Si le sprite dépasse les 600 en Y alors il remonte.

Si ……… alors ….. est une condition. En programmation on utilise : IF …….. THEN …….

On peut utiliser également : si …….. alors ….. sinon………… En progammation : IF …… THEN …. ELSE

Comme le monstre doit prendre 2 directions : direction vers le haut et direction vers le bas, nous allons créer 2 nouvelles variables correspondant à ces deux directions. Par exemple :

DIM dirHMonstre AS INTEGER

et

DIM dirBmonstre AS INTEGER

Rajouter ces 2 variables juste en dessous de celles correspond à notre monstre dans le code. Ce qui donne :

DIM feuilleMonstre AS INTEGER
DIM monstre AS INTEGER
DIM xMonstre AS INTEGER
DIM yMonstre AS INTEGER
DIM dirHmonstre AS INTEGER
DIM dirBmonstre AS INTEGER

Nous allons attribuer des valeurs à ces 2 variables. Comme le monstre va commencer par descendre, nous allons « activer » la descente en attribuant 1 à la variable dirBmonstre et nous allons « désactiver » la montée en attribuant 0 à la variable dirHmonstre.

Rajouter ces 2 lignes en dessous des attributions de valeur concernant notre monstre dans le code :

xMonstre = 500
yMonstre = 500
dirHmonstre = 0
dirBmonstre = 1

Étape 6/

A cette étape, notre monstre est près à descendre car sa direction « Bas » est activée : dirBmonstre =1 et sa direction « Haut » est désactivée : dirHmonstre=0

Nous allons donc dire au programme :

 – Si la direction « Bas » est activée alors tu rajoute 1 à yMonstre. Ainsi le monstre descendra. 

– Si la direction « Haut » est activée alors tu retire 1 à yMonstre. Ainsi le monstre montera.

Ce qui donne :

IF dirHmonstre = 1 THEN
yMonstre = yMonstre – 1
END IF

IF dirBmonstre = 1 THEN
yMonstre = yMonstre + 1
END IF

Donc, lorsque nous allons rajouter cette partie de code à la boucle et que nous allons tester, nous verrons le monstre descendre.

Mais un problème se pose !  A quelle moment le programme va réactiver la montée du monstre et désactiver sa descente pour que le monstre puisse monter ?

Et bien, il va falloir fixer des limites que notre sprite monstre ne devra pas dépasser.

En ce qui concerne la limite basse, comme l’écran fait 600 pixels de haut, elle sera de 600. En ce qui concerne la limite haute, j’ai décidé de la créer en fonction du mur du château de l’image de fond, c’est à dire 400. Vous pourrez adapter ces valeurs par la suite.

En français, on dirait :

Si tu dépasse 600 (donc  > 600) alors c’est que tu as atteint la limite basse donc tu active la montée et tu désactive la descente.

Si tu dépasse 400 (donc < 400) alors c’est que tu as atteint la limite haute donc tu désactive la montée et tu active la descente.

Ce qui se traduit en programmation par :

IF yMonstre > 600 THEN
dirHmonstre = 1
dirBmonstre = 0
END IF

IF yMonstre < 400 THEN
dirHmonstre = 0
dirBmonstre = 1
END IF

Voici le code de la boucle :

_LIMIT 60

IF dirHmonstre = 1 THEN
yMonstre = yMonstre – 1
END IF

IF dirBmonstre = 1 THEN
yMonstre = yMonstre + 1
END IF

IF yMonstre > 600 THEN
dirHmonstre = 1
dirBmonstre = 0
END IF

IF yMonstre < 400 THEN
dirHmonstre = 0
dirBmonstre = 1
END IF

LOCATE 1, 1: PRINT yMonstre
SPRITEPUT xMonstre, yMonstre, monstre

_DISPLAY

Si vous voulez que le monstre se déplace plus vite, vous pouvez modifier les lignes :

yMonstre = yMonstre – 1 et yMonstre = yMonstre + 1 en remplaçant 1 par 2 par exemple. Il ira donc 2 fois plus vite.

Voici le code complet :

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

DIM feuilleHeros AS INTEGER
DIM heros AS INTEGER
DIM xHeros AS INTEGER
DIM yHeros AS INTEGER

DIM feuilleMonstre AS INTEGER
DIM monstre AS INTEGER
DIM xMonstre AS INTEGER
DIM yMonstre AS INTEGER
DIM dirHmonstre AS INTEGER
DIM dirBmonstre AS INTEGER

DIM arPlan AS INTEGER

SCREEN _NEWIMAGE(800, 600, 32)
CLS

xHeros = 99
yHeros = 500
xMonstre = 500
yMonstre = 500
dirHmonstre = 0
dirBmonstre = 1

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 xHeros, yHeros, heros
SPRITEPUT xMonstre, yMonstre, monstre

DO
_LIMIT 60

IF dirHmonstre = 1 THEN
yMonstre = yMonstre – 1
END IF

IF dirBmonstre = 1 THEN
yMonstre = yMonstre + 1
END IF

IF yMonstre > 600 THEN
dirHmonstre = 1
dirBmonstre = 0
END IF

IF yMonstre < 400 THEN
dirHmonstre = 0
dirBmonstre = 1
END IF

LOCATE 1, 1: PRINT yMonstre
SPRITEPUT xMonstre, yMonstre, monstre

_DISPLAY
LOOP

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

 

Pour télécharger le programme complet de cette leçon ainsi que cette page en format pdf : (les pages sont en cours de relecture, il se peut que des erreurs soient présentes dans cette version)

05 Deplacer Un Sprite1
Taille : 203.3 KB, Ajouté le : 21.Nov.2017