Déplacer un rectangle avec LÖVE2D

Maintenant nous pouvons commencer par ce que j’aime appeler “la partie amusante”. Nous allons faire bouger les choses !

Commençons avec les 3 principales fonctions de rappel (callbacks) :

1
2
3
4
5
6
7
8

function love.load()
end

function love.update()
end

function love.draw()
end

Ensuite, nous dessinons un rectangle :

1
2
3

function love.draw()
  love.graphics.rectangle("line", 100, 50, 200, 150)
end

Le deuxième et troisième argument (ici 100 et 50) de cette fonction sont les positions x et y.

x représente la “position horizontale sur l’écran”. 0 se trouve à gauche de l’écran.

y représente la “position verticale sur l’écran”. 0 se trouve en haut de l’écran.

Voici un petit schéma explicatif :

Maintenant, nous voulons faire bouger le rectangle. Il est temps de penser comme un programmeur.
Que devons-nous faire pour que le rectangle se déplace vers la droite ?
La position x doit être augmentée : 100, 101, 102, 103, 104…, mais nous ne pouvons pas simplement changer 100 en 101. 100 est une valeur fixe. Nous avons besoin de quelque chose qui puisse évoluer comme nous le souhaitons. C’est là qu’intervient une variable !

Dans love.load, créons une nouvelle variable appelée x et remplaçons le 100 dans love.graphics.rectangle par x :

1
2
3
4
5
6
7

function love.load()
  x = 100
end

function love.draw()
  love.graphics.rectangle("line", x, 50, 200, 150)
end

Maintenant, la position x de notre rectangle correspond à la valeur de notre variable x.

Notez que le nom de la variable x est juste un nom. Nous aurions pu l’appeler “icecream” pour cet exemple. Les fonctions ne se préoccupent pas des noms de variables, mais uniquement de leur valeur.

Maintenant, nous voulons faire bouger le rectangle. Nous devons le faire dans love.update. À chaque mise à jour, nous voulons incrémenter x de 5. En d’autres termes, x doit prendre la valeur de x + 5, et c’est exactement ce que nous allons écrire :

1
2
3

function love.update()
  x = x + 5
end

Ainsi, quand x est égal à 100, il devient 100 + 5 = 105, puis à la prochaine mise à jour, x vaut 105 et devient 105 + 5 = 110, et ainsi de suite.

Exécutez ce code et le rectangle devrait maintenant se déplacer.

Delta time (intervalle de temps)

Nous avons un rectangle qui bouge, mais nous avons un petit problème. Si nous exécutons le programme sur différents ordinateurs, le rectangle pourrait se déplacer à des vitesses différentes. C’est parce que tous les ordinateurs ne rafraîchissent pas l’écran à la même fréquence, ce qui peut causer des incohérences.

Par exemple, supposons que l’ordinateur A fonctionne à 100 fps (frames per second ou images par seconde) et l’ordinateur B à 200 fps.

$100 \times 5 = 500$
$200 \times 5 = 1000$

Donc en 1 seconde, x aura été incrémenté de 500 sur l’ordinateur A, alors que sur l’ordinateur B, x aura été incrémenté de 1000.

Heureusement, il existe une solution à ce problème : le delta time.

Quand LÖVE appelle love.update, il lui passe un argument. Ajoutons le paramètre dt (abréviation de delta time) dans love.update et affichons sa valeur :

1
2
3
4

function love.update(dt)
  print(dt)
  x = x + 5
end

Le delta time est le temps écoulé entre la mise à jour précédente et la mise à jour actuelle. Ainsi, sur l’ordinateur A, qui fonctionne à 100 fps, le delta time moyen serait de $\frac{1}{100}$, soit 0,01 seconde.

Sur l’ordinateur B, le delta time serait $\frac{1}{200}$, soit 0,005 seconde.

Ainsi, en 1 seconde, l’ordinateur A effectue 100 mises à jour et augmente x de $5 \times 0,01$ à chaque fois, tandis que l’ordinateur B effectue 200 mises à jour et augmente x de $5 \times 0,005$ à chaque fois :

$100 \times 5 \times 0,01 = 5$
$200 \times 5 \times 0,005 = 5$

En utilisant le delta time, notre rectangle se déplacera à la même vitesse sur tous les ordinateurs.

1
2
3

function love.update(dt)
  x = x + 5 * dt
end

Maintenant, notre rectangle se déplace de 5 pixels par seconde, quelle que soit la puissance de l’ordinateur. Changez 5 par 100 pour le faire aller plus vite.

Résumé

Nous utilisons une variable que nous incrémentons à chaque mise à jour pour faire déplacer notre rectangle. Pour garantir une vitesse constante sur tous les ordinateurs, nous multiplions cette incrémentation par le delta time. Le delta time représente l’intervalle de temps entre deux mises à jour consécutives. L’utilisation du delta time assure que notre rectangle se déplacera à la même vitesse sur n’importe quel ordinateur, indépendamment de sa puissance ou de sa fréquence de rafraîchissement.