Les images avec love2d

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

Exemple d’une image à afficher, ici un mouton
Exemple d’une image à afficher, ici un mouton

Bien sur, vous pouvez utiliser l’image que vous voulez tant qu’elle est a l’extension .png. Assurez-vous que l’image soit dans le même répertoire que votre main.lua.

Premièrement, nous avons besoins de charger l’image en mémoire et de la stocker dans une variable. Pour ça nous allons utiliser love.graphics.newImage. Passez le nom de l’image en paramètre comme une chaîne en premier argument. Donc vous obtenez :

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

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

1
myImage = love.graphics.newImage("emplacement/vers/votre/sheep.png")

Maintenant que notre image est enregistrée dans myImage, nous pouvons utiliser love.graphics.draw pour la dessiner :

1
2
3
function love.draw()
  love.graphics.draw(myImage, 100, 100)
end

Et c’est ainsi que vous dessinez une image.

Les arguments de .draw()

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

r

La rotation (ou l’angle). Avec Löve, tous les angles sont radians. J’en expliquerai plus dans un prochain chapitre.

sx et sy

L’échelle de x et y. Si vous souhaitez rendre votre image 2x plus grande vous faites :

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

Vous pouvez l’utiliser pour faire un miroir de l’image avec :

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

ox et oy

L’origine de x et y de l’image. Par défaut la mise à l’échelle et la rotation sont basées sur la partie supérieure gauche de l’image :

L’origine d’une image avec love2d
L’origine d’une image avec love2d

Si nous voulons agrandir l’image à partir du centre, nous devrons mettre l’origine au centre de l’image :

1
love.graphics.draw(myImage, 100, 100, 0, 2, 2, 50, 39)
L’origine d’une image avec love2d
L’origine d’une image avec love2d

kx et ky

C’est pour cisailler l’image c’est à dire ne pas respecter la hauteur en fonction de la largeur (je ne l’ai jamais utilisé donc je ne suis pas sur de ce qu’il faut faire). Avec ça, vous aurez des images dans ce style :

Cisaillement d’une image
Cisaillement d’une image

love.graphics.print, que nous avons déjà utilisé pour dessiner du texte, a les mêmes arguments.

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

Encore une fois, tous ces arguments peuvent être omis comme ils sont optionnels

L’objet image

L’image que love.graphics.newImage retourne est un objet. Un objet d’image.
Il a des fonctions que nous pouvons utiliser pour éditer notre image, obtenir des données à ce sujet. Par exemple nous pouvons utiliser :getWidth() et :getHeight() pour obtenir la largeur et la hauteur de l’image. Nous pouvons l’utiliser pour mettre 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.ghaphics.newImage("sheep.png", 100, 100, 0, 2, 2, width/2, height/2)
end

La couleur

Vous pouvez changer dans quelle couleur l’image est dessinée avec love.graphics.setColor (r, g, b). Il définit la couleur de tout ce que vous dessinez, donc non seulement les images mais aussi les rectangles, les formes et les lignes. Il utilise le système RGB. Bien que cela varie officiellement de 0 à 255, avec LÖVE, cela va de 0 à 1. Ainsi, au lieu de (255, 200, 40), vous utiliseriez (1, 0.78, 0.15). Si vous ne connaissez que la couleur en utilisant la plage 0-255, vous pouvez calculer le nombre souhaité avec le nombre / 255. Il y a aussi le quatrième argument, a, qui signifie alpha et décide de la transparence de tout ce que vous dessinez. N’oubliez pas de remettre la couleur au blanc si vous ne voulez pas la couleur pour tout autre appel de dessin. 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 l’appeler dans love.load.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
function love.load()
    myImage = love.graphics.newImage("sheep.png")
    love.graphics.setBackgroundColor(1, 1, 1)
end

function love.draw()
    love.graphics.setColor(255/255, 200/255, 40/255, 127/255)
    love.graphics.setColor(1, 0.78, 0.15, 0.5)
    -- Or ...
    love.graphics.draw(myImage, 100, 100)
    -- Not passing an argument for alpha automatically sets it to 1 again.
    love.graphics.setColor(1, 1, 1)
    love.graphics.draw(myImage, 200, 100)
end

Résumé

Nous chargeons une image avec myImage = love.graphics.newImage(“emplacement/de/image.png”) qui retourne un d’objet d’image que nous pouvons stocker dans une variable. Nous pouvons passer cette variable à love.graphics.draw(myImage) pour la dessiner. Cette fonction dispose d’arguments optionnels pour la position, l’angle et la taille de l’image. Un objet Image possède des fonctions que vous pouvez utiliser pour obtenir des données à ce sujet. Nous pouvons utiliser love.graphics.setColor(r, g, b) pour changer la couleur de l’image et tout le reste.