Les caméras et les cadres avec love2d

Info

Nous utilisons le code du chapitre précédent

Caméra

Lorsque vous avez un gros niveau qui ne correspond pas à l’écran, nous utilisons une « caméra » qui suit le joueur. Ajoutons une caméra au jeu que nous avons créé dans le chapitre précédent, où nous avons un joueur qui collecte des pièces.

Alors, que fait exactement une caméra ? Fondamentalement, il déplace tout ce que nous dessinons d’une certaine manière afin que le joueur soit au centre. Maintenant, comment résoudriez-vous cela ? Nous pourrions avoir une variable comme camera_offset et la transmettre à tout ce que nous dessinons.

1

love.graphics.circle("line", player.x - camera.offset.x, player.y - camera.offset.y, player.size)

Mais si nous avons un très gros jeu avec beaucoup de choses à dessiner, c’est beaucoup de travail supplémentaire. Ce que nous pouvons faire à la place, c’est utiliser love.graphics.translate(). Cette fonction fait partie du système de coordonnées. Tout comme vous pouvez déplacer, faire pivoter et mettre à l’échelle une image, nous pouvons déplacer, faire pivoter et mettre à l’échelle ce sur quoi nous dessinons. Ce que nous dessinons s’appelle la toile (plus de détails à ce sujet plus tard).

Normalement, lorsque vous dessinez quelque chose en position (x = 0, y = 0), il sera dessiné dans le coin supérieur gauche. Avec love.graphics.translate(400, 200) nous déplaçons notre toile. Maintenant, si nous dessinons quelque chose sur (0,0), il sera plutôt dessiné sur la position (400,200). Si nous utilisons love.graphics.scale(2), tout ce que nous dessinons sera agrandi. Jouez avec pour vraiment comprendre ce qu’il fait.

Utilisons donc love.graphics.translate(x, y) pour créer une caméra. La question est de savoir comment déplacer l’écran pour que le joueur apparaisse au centre. Commençons par placer le lecteur en haut à gauche de l’écran. Nous faisons cela en faisant de la valeur négative de la position du joueur le point (0,0).

Avec le coin supérieur gauche sur (0,0) (par exemple la valeur par défaut), le joueur est dessiné sur sa position (100, 50) comme d’habitude. Mais si nous devions déplacer ce point avec love.graphics.translate (-100, -50), c’est maintenant le joueur qui est dessiné dans le coin supérieur gauche. Mais nous ne le voulons pas là-bas, nous le voulons au centre. On ajoute donc la moitié de la largeur et la moitié de la hauteur de l’écran (400 et 300).

Une démonstration de ce qui se passe. Tout d’abord, nous traduisons avec love.graphics.translate(-player.x, -player.y) pour placer le joueur dans le coin supérieur gauche. Ensuite, nous déplaçons le joueur au centre avec love.graphics.translate (-player.x + 400, -player.y + 300).

Démonstration des possibilités avec une caméra

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


--code
function love.draw()
  love.graphics.translate(-player.x + 400, -player.y + 300)
  love.graphics.circle("line", player.x, player.y, player.size)
  love.graphics.draw(player.image, player.x, player.y,
    0, 1, 1, player.image:getWidth()/2, player.image:getHeight()/2)
  for i,v in ipairs(coins) do
    love.graphics.circle("line", v.x, v.y, v.size)
    love.graphics.draw(v.image, v.x, v.y,
      0, 1, 1, v.image:getWidth()/2, v.image:getHeight()/2)
  end
end

Ça marche! Maintenant, gardons le score du nombre de pièces que nous avons ramassées. Le score est quelque chose que vous voulez toujours voir à l’écran. Ça ne fait pas partie de l’aire de jeu, ça fait partie du HUD. Ajoutons d’abord le score

1
2
3
4
5
6
7
8
9


-- In love.load()
score = 0
for i=#coins,1,-1 do
  if checkCollision(player, coins[i]) then
    table.remove(coins, i)
    player.size = player.size + 1
    score = score + 1
  end
end

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


function love.draw()
  love.graphics.translate(-player.x + 400, -player.y + 300)
  love.graphics.circle("line", player.x, player.y, player.size)
  love.graphics.draw(player.image, player.x, player.y,
    0, 1, 1, player.image:getWidth()/2, player.image:getHeight()/2)
  for i,v in ipairs(coins) do
    love.graphics.circle("line", v.x, v.y, v.size)
    love.graphics.draw(v.image, v.x, v.y,
      0, 1, 1, v.image:getWidth()/2, v.image:getHeight()/2)
  end
  love.graphics.print(score, 10, 10)
end

Lorsque vous exécutez le jeu, vous pouvez maintenant voir un numéro. Maintenant, comment faire pour que la position du score ne soit pas relative à la caméra ? Une chose que nous pourrions faire est de revenir à la position normale

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


function love.draw()
  love.graphics.translate(-player.x + 400, -player.y + 300)
  love.graphics.circle("line", player.x, player.y, player.size)
  love.graphics.draw(player.image, player.x, player.y,
    0, 1, 1, player.image:getWidth()/2, player.image:getHeight()/2)
  for i,v in ipairs(coins) do
    love.graphics.circle("line", v.x, v.y, v.size)
    love.graphics.draw(v.image, v.x, v.y,
      0, 1, 1, v.image:getWidth()/2, v.image:getHeight()/2)
  end
  love.graphics.translate(player.x - 400, player.y - 300)
  love.graphics.print(score, 10, 10)
end

Nous pouvons également utiliser love.graphics.origin(). Cela réinitialise toutes les transformations de coordonnées. Cela n’affecte pas ce que vous avez déjà dessiné.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


function love.draw()
  love.graphics.translate(-player.x + 400, -player.y + 300)
  love.graphics.circle("line", player.x, player.y, player.size)
  love.graphics.draw(player.image, player.x, player.y,
    0, 1, 1, player.image:getWidth()/2, player.image:getHeight()/2)
  for i,v in ipairs(coins) do
    love.graphics.circle("line", v.x, v.y, v.size)
    love.graphics.draw(v.image, v.x, v.y,
      0, 1, 1, v.image:getWidth()/2, v.image:getHeight()/2)
  end
  love.graphics.origin()
  love.graphics.print(score, 10, 10)
end

Mais ce n’est pas toujours la meilleure option. Peut-être que vous voulez faire évoluer votre jeu, vous voulez donc toujours avoir love.graphics.scale(2) et ne pas le réinitialiser. Pour résoudre ce problème, nous pouvons utiliser love.graphics.push() et love.graphics.pop(). Avec love.graphics.push(), nous enregistrons nos transformations de coordonnées actuelles et les ajoutons à une pile. Avec love.graphics.pop(), nous prenons les transformations de coordonnées enregistrées du haut de la pile et les appliquons. Utilisons ces fonctions pour dessiner correctement notre score.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


--- code
function love.draw()
  love.graphics.push() -- Make a copy of the current state and push it onto the stack.
  love.graphics.translate(-player.x + 400, -player.y + 300)
  love.graphics.circle("line", player.x, player.y, player.size)
  love.graphics.draw(player.image, player.x, player.y,
    0, 1, 1, player.image:getWidth()/2, player.image:getHeight()/2)

  for i,v in ipairs(coins) do
    love.graphics.circle("line", v.x, v.y, v.size)
    love.graphics.draw(v.image, v.x, v.y,
      0, 1, 1, v.image:getWidth()/2, v.image:getHeight()/2)
  end

  love.graphics.pop() -- Pull the copy of the state of the stack and apply it.
  love.graphics.print(score, 10, 10)
end

Bien, nous avons maintenant une caméra avec un score qui est dessinée en haut. Maintenant, faisons bouger les choses.

Screenshake

Que diriez-vous d’ajouter un screenshake ? Nous avons d’abord besoin d’une minuterie pour combien de temps la secousse doit durer, puis la faire descendre.

1
2


-- In love.load()
shakeDuration = 0

1
2
3
4


-- In love.update(dt)
if shakeDuration > 0 then
  shakeDuration = shakeDuration - dt
end

Ensuite, nous traduisons quelques pixels dans des directions aléatoires tant que la minuterie est supérieure à 0.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


function love.draw()
  love.graphics.push() -- Make a copy of the current state and push it onto the stack.
  love.graphics.translate(-player.x + 400, -player.y + 300)

  if shakeDuration > 0 then
    -- Translate with a random number between -5 an 5.
    -- This second translate will be done based on the previous translate.
    -- So it will not reset the previous translate.
    love.graphics.translate(love.math.random(-5,5), love.math.random(-5,5))
  end

  love.graphics.circle("line", player.x, player.y, player.size)
  love.graphics.draw(player.image, player.x, player.y,
    0, 1, 1, player.image:getWidth()/2, player.image:getHeight()/2)

  for i,v in ipairs(coins) do
    love.graphics.circle("line", v.x, v.y, v.size)
    love.graphics.draw(v.image, v.x, v.y,
      0, 1, 1, v.image:getWidth()/2, v.image:getHeight()/2)
  end

  love.graphics.pop() -- Pull the copy of the state of the stack and apply it.
  love.graphics.print(score, 10, 10)
end

Enfin, nous réglons la minuterie sur une certaine valeur, par exemple 0,3, chaque fois que nous prenons une pièce.

1
2
3
4
5
6
7
8


for i=#coins,1,-1 do
  if checkCollision(player, coins[i]) then
    table.remove(coins, i)
    player.size = player.size + 1
    score = score + 1
    shakeDuration = 0.3
  end
end

Résultat de l’effet screensnake grâce à la caméra

Essaye le. Il se peut que l’écran tremble trop vite. Et si ce n’est pas votre cas, cela peut arriver sur d’autres ordinateurs. Encore une fois, nous devons utiliser le temps delta. Nous pouvons ajouter un deuxième temporisateur pour résoudre ce problème. Mais nous avons également besoin d’un objet pour stocker notre décalage.

1
2
3
4


-- In love.load()
shakeDuration = 0
shakeWait = 0
shakeOffset = {x = 0, y = 0}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


-- In love.update(dt)
if shakeTimer > 0 then
  shakeTimer = shakeTimer - dt
  if shakeWait > 0 then
    shakeWait = shakeWait - dt
    shakeOffset.x = love.math.random(-5,5)
    shakeOffset.y = love.math.random(-5,5)
  else
    shakeWait = 0.05
  end
end

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


function love.draw()
  love.graphics.push()
  love.graphics.translate(-player.x + 400, -player.y + 300)

  if shakeTimer > 0 then
      love.graphics.translate(shakeOffset.x, shakeOffset.y)
  end

  love.graphics.circle("line", player.x, player.y, player.size)
  love.graphics.draw(player.image, player.x, player.y,
    0, 1, 1, player.image:getWidth()/2, player.image:getHeight()/2)

  for i,v in ipairs(coins) do
    love.graphics.circle("line", v.x, v.y, v.size)
    love.graphics.draw(v.image, v.x, v.y,
      0, 1, 1, v.image:getWidth()/2, v.image:getHeight()/2)
  end

  love.graphics.pop()
  love.graphics.print(score, 10, 10)
end

Et maintenant, c’est cohérent.

Maintenant, que diriez-vous de faire de ce jeu un jeu multijoueur et d’ajouter un écran partagé ?

Les cadres

Chaque fois que vous utilisez love.graphics pour dessiner quelque chose, il est dessiné sur une toile. Cette toile est un objet, et nous pouvons créer nos propres objets de toile. Cela peut être très utile, pour un jeu multijoueur avec écran partagé par exemple. Vous dessinez le jeu sur une toile distincte pour chaque joueur, puis dessinez ces toiles sur la toile principale. Parce qu’une toile est dessinable. Il s’agit d’une superclasse, et tous les objets LÖVE qui ont cette superclasse peuvent être dessinés avec love.graphics.draw().

Les supertypes de Canvas dans l’ordre sont :

Texture
Étirable
Objet

La texture est un sous-type de Drawable. L’image et le canevas sont tous deux un sous-type de texture, et les deux peuvent être dessinés à l’aide d’un Quad. Tous les objets LÖVE sont du type Objet. Que cela ne vous confonde pas avec la variable que nous utilisons pour les classes, que nous nommons également Objet. Ces deux-là ne sont en aucun cas liés, nous les nommons simplement de la même manière.

Vous pouvez créer un canevas avec love.graphics.newCanvas.

Utilisons une toile pour créer un écran partagé dans notre jeu. Nous commençons par ajouter un autre joueur qui peut se déplacer avec WASD, et supprimons le tremblement d’écran et le système de sauvegarde / chargement.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100


function love.load()
  player1 = {
    x = 100,
    y = 100,
    size = 25,
    image = love.graphics.newImage("face.png")
  }

  player2 = {
    x = 300,
    y = 100,
    size = 25,
    image = love.graphics.newImage("face.png")
  }

  coins = {}

  for i=1,25 do
    table.insert(coins,
      {
        x = math.random(50, 650),
        y = math.random(50, 450),
        size = 10,
        image = love.graphics.newImage("dollar.png")
      }
    )
  end

  score1 = 0
  score2 = 0
end

function love.update(dt)
  if love.keyboard.isDown("left") then
    player1.x = player1.x - 200 * dt
  elseif love.keyboard.isDown("right") then
    player1.x = player1.x + 200 * dt
  end

  if love.keyboard.isDown("up") then
    player1.y = player1.y - 200 * dt
  elseif love.keyboard.isDown("down") then
    player1.y = player1.y + 200 * dt
  end

  if love.keyboard.isDown("a") then
    player2.x = player2.x - 200 * dt
  elseif love.keyboard.isDown("d") then
    player2.x = player2.x + 200 * dt
  end

  if love.keyboard.isDown("w") then
    player2.y = player2.y - 200 * dt
  elseif love.keyboard.isDown("s") then
    player2.y = player2.y + 200 * dt
  end

  for i=#coins,1,-1 do
    if checkCollision(player1, coins[i]) then
      table.remove(coins, i)
      player1.size = player1.size + 1
      score1 = score1 + 1
    elseif checkCollision(player2, coins[i]) then
      table.remove(coins, i)
      player2.size = player2.size + 1
      score2 = score2 + 1
    end
  end
end

function love.draw()
  love.graphics.push()
  love.graphics.translate(-player1.x + 400, -player1.y + 300)

  love.graphics.circle("line", player1.x, player1.y, player1.size)
  love.graphics.draw(player1.image, player1.x, player1.y,
    0, 1, 1, player1.image:getWidth()/2, player1.image:getHeight()/2)

  love.graphics.circle("line", player2.x, player2.y, player2.size)
  love.graphics.draw(player2.image, player2.x, player2.y,
    0, 1, 1, player2.image:getWidth()/2, player2.image:getHeight()/2)

  for i,v in ipairs(coins) do
    love.graphics.circle("line", v.x, v.y, v.size)
    love.graphics.draw(v.image, v.x, v.y,
      0, 1, 1, v.image:getWidth()/2, v.image:getHeight()/2)
  end

  love.graphics.pop()
  love.graphics.print("Player 1 - " .. score1, 10, 10)
  love.graphics.print("Player 2 - " .. score2, 10, 30)
end

function checkCollision(p1, p2) 
  -- Calculating distance in 1 line
  -- Subtract the x's and y's, square the difference, sum the squares and find the root of the sum.
  local distance = math.sqrt((p1.x - p2.x)^2 + (p1.y - p2.y)^2)
  -- Return whether the distance is lower than the sum of the sizes.
  return distance < p1.size + p2.size
end

Maintenant, nous avons besoin d’une toile pour dessiner. Nous allons dessiner la toile à gauche et à droite, elle devrait donc être 400×600.

1
2


-- In love.load()
screenCanvas = love.graphics.newCanvas(400, 600)

Ensuite, nous devons dessiner le jeu sur notre nouvelle toile. Avec love.graphics.setCanvas(), nous pouvons définir la toile sur laquelle nous voulons dessiner. Si nous ne transmettons aucun argument à cette fonction, elle sera réinitialisée sur le canevas par défaut.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


function love.draw()
  love.graphics.setCanvas(screenCanvas)
  love.graphics.push()
  love.graphics.translate(-player1.x + 400, -player1.y + 300)

  love.graphics.circle("line", player1.x, player1.y, player1.size)
  love.graphics.draw(player1.image, player1.x, player1.y,
    0, 1, 1, player1.image:getWidth()/2, player1.image:getHeight()/2)

  love.graphics.circle("line", player2.x, player2.y, player2.size)
  love.graphics.draw(player2.image, player2.x, player2.y,
    0, 1, 1, player2.image:getWidth()/2, player2.image:getHeight()/2)

  for i,v in ipairs(coins) do
    love.graphics.circle("line", v.x, v.y, v.size)
    love.graphics.draw(v.image, v.x, v.y,
      0, 1, 1, v.image:getWidth()/2, v.image:getHeight()/2)
  end

  love.graphics.pop()
  love.graphics.setCanvas()

  love.graphics.print("Player 1 - " .. score1, 10, 10)
  love.graphics.print("Player 2 - " .. score2, 10, 30)
end

Si vous lancez le jeu, vous ne verrez rien. En effet, le jeu est dessiné sur notre nouveau canevas, mais nous ne dessinons pas notre canevas sur le canevas par défaut. Comme je l’ai déjà dit, un Canvas est un Drawable et Drawable peut être dessiné avec love.graphics.draw.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


function love.draw()
  love.graphics.setCanvas(screenCanvas)
  love.graphics.push()
  love.graphics.translate(-player1.x + 400, -player1.y + 300)

  love.graphics.circle("line", player1.x, player1.y, player1.size)
  love.graphics.draw(player1.image, player1.x, player1.y,
    0, 1, 1, player1.image:getWidth()/2, player1.image:getHeight()/2)

  love.graphics.circle("line", player2.x, player2.y, player2.size)
  love.graphics.draw(player2.image, player2.x, player2.y,
    0, 1, 1, player2.image:getWidth()/2, player2.image:getHeight()/2)

  for i,v in ipairs(coins) do
    love.graphics.circle("line", v.x, v.y, v.size)
    love.graphics.draw(v.image, v.x, v.y,
      0, 1, 1, v.image:getWidth()/2, v.image:getHeight()/2)
  end
  love.graphics.pop()
  love.graphics.setCanvas()

  --Draw the canvas
  love.graphics.draw(screenCanvas)

  love.graphics.print("Player 1 - " .. score1, 10, 10)
  love.graphics.print("Player 2 - " .. score2, 10, 30)
end

Vous devriez maintenant pouvoir voir votre jeu. Mais vous remarquerez quelque chose de bizarre lorsque vous commencez à bouger. Vous laissez une trace derrière. C’est parce que nous n’effaçons pas la toile, ce qui signifie que tout ce que nous dessinons dessus reste sur la toile. Cela se fait par défaut sur notre toile. Nous pouvons effacer la toile avec love.graphics.clear(), et nous devons corriger cela avant de dessiner le jeu. Et comme nous n’utilisons que la moitié de l’écran, nous devons repositionner la caméra pour placer le joueur au centre. La moitié de l’écran est désormais 200 au lieu de 400.

Puisque nous dessinons le jeu deux fois, mettons tout ce que nous dessinons pour notre jeu dans une fonction.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39


function love.draw()
  love.graphics.setCanvas(screenCanvas)
  love.graphics.clear()
  drawGame()
  love.graphics.setCanvas()
  love.graphics.draw(screenCanvas)

  love.graphics.setCanvas(screenCanvas)
  love.graphics.clear()
  drawGame()
  love.graphics.setCanvas()
  love.graphics.draw(screenCanvas, 400)

  -- Add a line to separate the screens
  love.graphics.line(400, 0, 400, 600)

  love.graphics.print("Player 1 - " .. score1, 10, 10)
  love.graphics.print("Player 2 - " .. score2, 10, 30)
end

function drawGame()
  love.graphics.push()
  love.graphics.translate(-player1.x + 200, -player1.y + 300)

  love.graphics.circle("line", player1.x, player1.y, player1.size)
  love.graphics.draw(player1.image, player1.x, player1.y,
    0, 1, 1, player1.image:getWidth()/2, player1.image:getHeight()/2)

  love.graphics.circle("line", player2.x, player2.y, player2.size)
  love.graphics.draw(player2.image, player2.x, player2.y,
    0, 1, 1, player2.image:getWidth()/2, player2.image:getHeight()/2)

  for i,v in ipairs(coins) do
    love.graphics.circle("line", v.x, v.y, v.size)
    love.graphics.draw(v.image, v.x, v.y,
      0, 1, 1, v.image:getWidth()/2, v.image:getHeight()/2)
  end
  love.graphics.pop()
end

Nous avons maintenant un écran partagé. Le seul problème est que l’écran gauche et l’écran droit se concentrent sur le joueur 1. Nous devons faire en sorte que la caméra se concentre sur le joueur 2 la deuxième fois que nous dessinons. Nous pouvons résoudre ce problème en ajoutant un paramètre de mise au point à drawGame, et faire en sorte que la caméra se concentre sur ce que nous passons comme argument, qui seront les joueurs.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38


function love.draw()
  love.graphics.setCanvas(screenCanvas)
  love.graphics.clear()
  drawGame(player1)
  love.graphics.setCanvas()
  love.graphics.draw(screenCanvas)

  love.graphics.setCanvas(screenCanvas)
  love.graphics.clear()
  drawGame(player2)
  love.graphics.setCanvas()
  love.graphics.draw(screenCanvas, 400)

  love.graphics.line(400, 0, 400, 600)

  love.graphics.print("Player 1 - " .. score1, 10, 10)
  love.graphics.print("Player 2 - " .. score2, 10, 30)
end

function drawGame(focus)
  love.graphics.push()
  love.graphics.translate(-focus.x + 200, -focus.y + 300)

  love.graphics.circle("line", player1.x, player1.y, player1.size)
  love.graphics.draw(player1.image, player1.x, player1.y,
    0, 1, 1, player1.image:getWidth()/2, player1.image:getHeight()/2)

  love.graphics.circle("line", player2.x, player2.y, player2.size)
  love.graphics.draw(player2.image, player2.x, player2.y,
    0, 1, 1, player2.image:getWidth()/2, player2.image:getHeight()/2)

  for i,v in ipairs(coins) do
    love.graphics.circle("line", v.x, v.y, v.size)
    love.graphics.draw(v.image, v.x, v.y,
      0, 1, 1, v.image:getWidth()/2, v.image:getHeight()/2)
  end
  love.graphics.pop()
end

Bibliothèques

Nous avons fait une caméra assez simple, mais il y a bien plus. Comme un zoom avant et des bordures. Je recommande de consulter ces bibliothèques qui fournissent des fonctionnalités avancées de camera :

Résumé

Avec le système de coordonnées, nous pouvons changer la façon dont les choses sont dessinées à l’écran. Nous pouvons utiliser love.graphics.translate(x, y) pour créer une caméra. Tout ce que nous dessinons est dessiné sur une toile. Nous pouvons créer notre propre toile que nous pouvons dessiner comme une image, car ils sont tous les deux de la texture de type LÖVE. En utilisant une toile, nous pouvons créer un écran partagé.