Lua Academy · Leçon

Dessiner des formes et des images

Affichez des graphismes à l’écran.

Dessiner des formes et des images est une leçon Lua Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Lua Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Lua Academy comprend 4 leçons au total.

Le module love.graphics

Tout le rendu dans LÖVE passe par love.graphics. Vous appelez ses fonctions dans love.draw, puis le moteur affiche l’image lorsque la fonction de rappel se termine.

Il peut dessiner des formes primitives, des images, du texte et des lignes, ainsi que gérer les couleurs et les transformations. Tout est redessiné à partir de zéro à chaque image.

Dessiner des rectangles

love.graphics.rectangle prend un mode, puis la position et les dimensions. Le mode est soit 'fill' pour une forme pleine, soit 'line' pour le contour uniquement.

Les coordonnées commencent dans l’angle supérieur gauche de la fenêtre ; x augmente vers la droite et y vers le bas.

function love.draw()
  love.graphics.rectangle('fill', 50, 50, 120, 80)
  love.graphics.rectangle('line', 200, 50, 120, 80)
end

Cercles et ellipses

love.graphics.circle(mode, x, y, radius) dessine un cercle centré en x, y. Comme les rectangles, il accepte 'fill' ou 'line'.

Pour dessiner des ovales, utilisez love.graphics.ellipse avec des rayons horizontal et vertical distincts. Vous pouvez transmettre un argument supplémentaire indiquant le nombre de segments pour contrôler la régularité.

function love.draw()
  love.graphics.circle('fill', 150, 150, 40)
  love.graphics.ellipse('line', 300, 150, 60, 30)
end

Définir les couleurs

love.graphics.setColor définit la teinte de tout ce qui est dessiné ensuite. Dans les versions modernes de LÖVE, les composantes vont de 0 à 1 ; le blanc correspond donc à 1, 1, 1.

La couleur est conservée dans l’état : une fois définie, elle s’applique à tous les dessins suivants jusqu’à ce que vous la changiez. Revenez au blanc avant de dessiner des images que vous souhaitez conserver sans teinte.

function love.draw()
  love.graphics.setColor(1, 0, 0)   -- red
  love.graphics.rectangle('fill', 20, 20, 60, 60)
  love.graphics.setColor(1, 1, 1)   -- back to white
end

Lignes et points

love.graphics.line relie une série de points x, y. love.graphics.setLineWidth contrôle l’épaisseur des lignes et des formes dont seul le contour est dessiné.

Vous pouvez transmettre plusieurs points à la fois pour dessiner un tracé continu, ce qui est pratique pour les traînées, les chemins ou les dessins vectoriels simples.

function love.draw()
  love.graphics.setLineWidth(3)
  love.graphics.line(10, 10, 80, 60, 150, 20)
end

Charger une image

Chargez les images une seule fois dans love.load avec love.graphics.newImage. Cette fonction renvoie un objet Image que vous stockez dans une variable pour le réutiliser.

Ne chargez jamais d’images dans love.draw : cela relirait le fichier à chaque image et dégraderait fortement les performances.

function love.load()
  sprite = love.graphics.newImage('player.png')
end

Dessiner une image

love.graphics.draw(image, x, y) affiche une image à la position indiquée. Par défaut, l’angle supérieur gauche de l’image se trouve en x, y.

Des arguments supplémentaires permettent d’ajouter une rotation, une mise à l’échelle et un décalage de l’origine, ce qui vous donne un contrôle total sur l’apparence de chaque sprite.

function love.draw()
  love.graphics.draw(sprite, player.x, player.y)
end

Rotation et mise à l’échelle

La signature complète est draw(image, x, y, r, sx, sy, ox, oy). Ici, r représente la rotation en radians, tandis que sx et sy sont les facteurs d’échelle.

Le décalage de l’origine ox, oy définit le pivot. Pour effectuer une rotation autour du centre d’une image, définissez l’origine à la moitié de sa largeur et de sa hauteur.

local w, h = sprite:getWidth(), sprite:getHeight()
love.graphics.draw(sprite, x, y, angle, 1, 1, w/2, h/2)

Dessiner du texte

love.graphics.print(text, x, y) dessine une chaîne avec la police actuelle. love.graphics.setFont modifie la police active.

Créez des polices personnalisées avec love.graphics.newFont('font.ttf', 24) dans love.load. N’oubliez pas que la couleur teinte également le texte, comme les formes.

function love.draw()
  love.graphics.setColor(1, 1, 1)
  love.graphics.print('Score: ' .. score, 10, 10)
end

Effacement et arrière-plan

LÖVE efface automatiquement l’écran à chaque image, mais vous pouvez définir la couleur d’effacement avec love.graphics.setBackgroundColor dans love.load.

Pour contrôler manuellement l’affichage dans un rendu personnalisé, love.graphics.clear remplit le tampon avec une couleur. La plupart des jeux définissent simplement l’arrière-plan une fois et laissent le moteur gérer l’effacement.

function love.load()
  love.graphics.setBackgroundColor(0.1, 0.1, 0.2)
end

Quadrilatères pour les planches d’images

Un quadrilatère sélectionne une région rectangulaire d’une image, ce qui permet à une seule planche d’images de contenir plusieurs images. Créez-le avec love.graphics.newQuad.

Transmettez le quadrilatère à love.graphics.draw(image, quad, x, y) pour afficher uniquement cette région. C’est la base de l’animation des images.

local sheet = love.graphics.newImage('sheet.png')
local frame = love.graphics.newQuad(0, 0, 32, 32, sheet:getDimensions())
-- love.graphics.draw(sheet, frame, x, y)

Vérification rapide

Vérifiez vos connaissances sur le dessin avec LÖVE.

Récapitulatif

Vous dessinez avec love.graphics dans love.draw : des rectangles, des cercles, des lignes, des images et du texte. setColor teinte les dessins suivants et conserve son état.

Chargez les images une seule fois dans love.load avec newImage, puis affichez-les avec draw, en ajoutant une rotation, une mise à l’échelle et des quadrilatères pour les planches d’images.

Questions Fréquemment Posées

La leçon « Dessiner des formes et des images » est-elle gratuite ?

Oui — le texte complet de « Dessiner des formes et des images » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Lua Academy, passe à CoddyKit PRO. Le cours Lua Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Dessiner des formes et des images » ?

Affichez des graphismes à l’écran. Tu pratiques Lua Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Lua Academy ?

Aucune expérience préalable n'est requise. Lua Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Dessiner des formes et des images » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Lua Academy ?

Oui. Chaque leçon Lua Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Lua Academy