Les images avec LÖVE2D

Créer et utiliser des images est une tâche très facile avec LÖVE. Premièrement, nous avons besoin d’une image. Je vais utiliser celle-ci :

Bien sûr, vous pouvez utiliser l’image de votre choix, à condition qu’elle soit au format .png. Assurez-vous que l’image soit dans le même répertoire que votre fichier main.lua.

Pour commencer, nous devons charger l’image en mémoire et la stocker dans une variable. Pour cela, nous allons utiliser la fonction love.graphics.newImage. Passez le nom de l’image comme une chaîne de caractères en premier argument :

1
2
3

function love.load()
  myImage = love.graphics.newImage("sheep.png")
end

Vous pouvez aussi placer l’image dans un sous-répertoire, mais dans ce cas, assurez-vous d’inclure le chemin complet :

1

myImage = love.graphics.newImage("dossier/sous-dossier/sheep.png")

Maintenant que notre image est chargée dans la variable myImage, nous pouvons utiliser love.graphics.draw pour l’afficher :

1
2
3

function love.draw()
  love.graphics.draw(myImage, 100, 100)
end

Et voilà comment vous affichez une image avec LÖVE.

Les arguments de love.graphics.draw()

Examinons les autres arguments de love.graphics.draw(). Tous les arguments autres que l’image sont optionnels.

r (rotation)

La rotation (ou l’angle). Avec LÖVE, tous les angles sont exprimés en radians. J’en expliquerai davantage dans un prochain chapitre.

sx et sy (échelle)

L’échelle selon les axes x et y. Si vous souhaitez rendre votre image 2 fois plus grande, vous pouvez faire :

1

love.graphics.draw(myImage, 100, 100, 0, 2, 2)

Vous pouvez également créer un effet miroir en utilisant des valeurs négatives :

1

love.graphics.draw(myImage, 100, 100, 0, -1, 1)

ox et oy (origine)

L’origine de l’image selon les axes x et y. Par défaut, la mise à l’échelle et la rotation sont basées sur le coin supérieur gauche de l’image :

Si nous voulons agrandir l’image à partir de son centre, nous devons définir l’origine au centre de l’image :

1

love.graphics.draw(myImage, 100, 100, 0, 2, 2, 50, 39)

kx et ky (cisaillement)

Ces paramètres permettent de cisailler l’image, c’est-à-dire de la déformer en inclinant ses côtés. Cela peut donner des images dans ce style :

Il est intéressant de noter que love.graphics.print, que nous avons déjà utilisé pour afficher du texte, accepte les mêmes arguments :

x, y, r, sx, sy, ox, oy, kx, ky

Encore une fois, tous ces arguments sont optionnels.

L’objet Image

L’objet retourné par love.graphics.newImage est un objet de type Image. Il possède des méthodes que nous pouvons utiliser pour modifier notre image ou obtenir des informations à son sujet.

Par exemple, nous pouvons utiliser les méthodes :getWidth() et :getHeight() pour obtenir la largeur et la hauteur de l’image. Nous pouvons les utiliser pour placer l’origine au centre de notre image :

1
2
3
4
5
6
7
8
9

function love.load()
  myImage = love.graphics.newImage("sheep.png")
  width = myImage:getWidth()
  height = myImage:getHeight()
end

function love.draw()
  love.graphics.draw(myImage, 100, 100, 0, 2, 2, width/2, height/2)
end

La couleur

Vous pouvez modifier la couleur avec laquelle l’image est dessinée en utilisant love.graphics.setColor(r, g, b). Cette fonction définit la couleur de tout ce que vous dessinez ensuite, donc non seulement les images mais aussi les rectangles, les formes et les lignes.

LÖVE utilise le système RGB avec des valeurs allant de 0 à 1 (et non de 0 à 255 comme c’est souvent le cas). Ainsi, au lieu de (255, 200, 40), vous utiliseriez (1, 0.78, 0.15). Si vous ne connaissez que la valeur sur l’échelle 0-255, vous pouvez la convertir en divisant par 255.

Il existe également un quatrième argument, a (alpha), qui contrôle la transparence de tout ce que vous dessinez.

N’oubliez pas de réinitialiser la couleur à blanc (1, 1, 1) si vous ne voulez pas que les prochains éléments dessinés soient affectés par le changement de couleur précédent.

Vous pouvez définir la couleur d’arrière-plan avec love.graphics.setBackgroundColor(r, g, b). Puisque nous ne voulons l’appeler qu’une seule fois, nous pouvons le faire dans love.load :

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

function love.load()
    myImage = love.graphics.newImage("sheep.png")
    love.graphics.setBackgroundColor(1, 1, 1)  -- Fond blanc
end

function love.draw()
    -- Deux façons équivalentes de définir la même couleur (jaune orangé à 50% de transparence)
    love.graphics.setColor(255/255, 200/255, 40/255, 127/255)
    -- ou plus simplement :
    love.graphics.setColor(1, 0.78, 0.15, 0.5)
    
    love.graphics.draw(myImage, 100, 100)
    
    -- Réinitialisation à blanc opaque
    love.graphics.setColor(1, 1, 1)
    love.graphics.draw(myImage, 200, 100)
end

Résumé

Nous chargeons une image avec myImage = love.graphics.newImage("chemin/vers/image.png"), qui retourne un objet Image que nous pouvons stocker dans une variable. Pour afficher cette image, nous utilisons love.graphics.draw(myImage, x, y).

Cette fonction dispose d’arguments optionnels pour définir la position, l’angle, l’échelle et l’origine de l’image. L’objet Image possède des méthodes utiles comme :getWidth() et :getHeight() pour obtenir ses dimensions.

Nous pouvons utiliser love.graphics.setColor(r, g, b, a) pour modifier la couleur et la transparence de l’image, ainsi que de tous les éléments dessinés par la suite. N’oubliez pas de réinitialiser la couleur à (1, 1, 1) après usage.