Délpacer un rectangle avec love2d

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

Commençons avec les 3 principaux 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 second et troisième argument (ici 100 et 50) de cette fonction sont les positions x et y.

x veut dire “position horizontale de l’écran”. 0 se trouve à gauche de l’écran.

y veut dire “position verticale de 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.
Qu’est-ce que nous avons besoin de faire pour que le rectangle se déplace sur la droite ?
La position x a besoin d’être augmentée : 100, 101, 102, 103, 104 …, mais nous ne pouvons pas changer 100 en 101. 100 est simplement 100. Nous avons besoin de quelque chose qui puisse évoluer comme nous le souhaitons. C’est une variable !

Dans love.load, créez une nouvelle variable appelée x et remplacer 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

Donc maintenant la position x de notre rectangle est une valeur de 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 elles ne se soucient que de leur valeur.

Maintenant, nous voulons faire bouger le rectangle. Nous devons faire ça dans love.update. À chaque mise à jour, nous voulons incrémenter x par 5. En d’autres termes, x a besoin d’être une valeur de x + 5 et c’est exactement ce que nous allons écrire.

1
2
3

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

Donc quand x sera égale à 100, il changera en 100 + 5 puis à la prochaine mise à jour x vaudra 105 puis x changera en 105 + 5 … .

Exécutez ce jeu et le rectangle devrait maintenant bouger.

Delta time (laps 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 devrait bouger avec une vitesse différente. C’est parce qu’ils ne rafraîchissent pas tous à la même vitesse et cela peut causer des problèmes.

Par exemple, disons à l’ordinateur A de le faire à 100 fps (frame per second ou nombre d’images par seconde) et à l’ordinateur B de le faire à 200.

$100×5=500$
$200×5=1000$
Donc en 1 seconde, x aura été incrémenté de 500 sur l’ordinateur A alors que sur le B x aura été incrémenté de 1000.

Heureusement, il y a une solution à ça: le delta time.

Quand LÖVE appelle love.update, il passe un argument. Ajouter le paramètre dt (raccourci pour delta time) dans love.update et affichons ceci :

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. Donc, sur l’ordinateur A, qui fonctionne avec 100 fps, le delta time moyen serait de $\dfrac{1}{100}$ soit 0,01.

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

Ainsi, en 1 seconde, l’ordinateur A se met à jour 100 fois et augmente x de 5×0,01, et l’ordinateur B se met en 200 fois et augmente x de $5×0,005$ :

$100×5×0,01=5$
$200×5×0,005=5$
En utilisant le delta time, notre rectangle se déplacera avec la même vitesse sur tous les ordinateurs.

1
2
3

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

Maintenant, notre rectangle bouge de 5 pixels par seconde sur tous les ordinateurs. Changez 5 par 100 pour le faire aller plus vite.

Résumé

Nous utilisons une variable que nous augmentons sur chaque mise à jour pour que le rectangle se déplace. En augmentant, nous multiplions la valeur ajoutée par le delta time. Le delta time est le temps entre la mise à jour précédente et la mise à jour actuelle. L’utilisation du delta time assure que notre rectangle se déplacera avec la même vitesse sur n’importe quel ordinateur.