Lua Academy · Lezione

Disegnare forme e immagini

Porti la grafica sullo schermo.

Disegnare forme e immagini è una lezione Lua Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Lua Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Lua Academy include 4 lezioni in totale.

Il modulo love.graphics

In LÖVE tutto il rendering avviene tramite love.graphics. Chiami le sue funzioni all'interno di love.draw e il motore presenta il frame al termine della callback.

Può disegnare forme primitive, immagini, testo e linee, oltre a gestire colori e trasformazioni. Tutto viene ridisegnato da zero a ogni frame.

Disegno dei rettangoli

love.graphics.rectangle accetta una modalità, seguita da posizione e dimensioni. La modalità è 'fill' per una forma piena oppure 'line' per il solo contorno.

Le coordinate iniziano dall'angolo superiore sinistro della finestra: x aumenta verso destra e y aumenta verso il basso.

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

Cerchi ed ellissi

love.graphics.circle(mode, x, y, radius) disegna un cerchio centrato in x, y. Come i rettangoli, accetta 'fill' o 'line'.

Per disegnare ovali utilizzi love.graphics.ellipse con raggi orizzontale e verticale separati. Può passare un argomento aggiuntivo segments per controllare la morbidezza.

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

Impostazione dei colori

love.graphics.setColor imposta la tonalità per tutto ciò che viene disegnato successivamente. Nelle versioni moderne di LÖVE, i componenti vanno da 0 a 1, quindi il bianco è 1, 1, 1.

Il colore è uno stato: una volta impostato, si applica a tutti i disegni successivi finché non lo modifica di nuovo. Reimposti il bianco prima di disegnare immagini che desidera senza tonalizzazione.

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

Linee e punti

love.graphics.line collega una serie di punti x, y. love.graphics.setLineWidth controlla lo spessore delle linee e delle forme con contorno.

Può passare molti punti in una volta per disegnare un percorso continuo, utile per scie, tracciati o semplici disegni vettoriali.

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

Caricamento di un'immagine

Carichi le immagini una sola volta in love.load utilizzando love.graphics.newImage. Questo restituisce un oggetto Image da memorizzare in una variabile e riutilizzare.

Non carichi mai le immagini all'interno di love.draw, perché il file verrebbe riletto a ogni frame, compromettendo le prestazioni.

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

Disegno di un'immagine

love.graphics.draw(image, x, y) visualizza un'immagine nella posizione indicata. Per impostazione predefinita, l'angolo superiore sinistro dell'immagine viene posizionato in x, y.

Gli argomenti aggiuntivi consentono di specificare rotazione, scala e offset dell'origine, offrendo il pieno controllo sull'aspetto di ogni sprite.

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

Rotazione e ridimensionamento

La firma completa è draw(image, x, y, r, sx, sy, ox, oy). Qui r indica la rotazione in radianti, mentre sx e sy sono fattori di scala.

Lo scostamento dall'origine ox, oy definisce il punto di rotazione. Per ruotare attorno al centro di un'immagine, imposti l'origine a metà della larghezza e dell'altezza dell'immagine.

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

Disegnare testo

love.graphics.print(text, x, y) disegna una stringa usando il font corrente. love.graphics.setFont modifica il font attivo.

Crei font personalizzati con love.graphics.newFont('font.ttf', 24) in love.load. Ricordi che anche il colore tinge il testo, proprio come le forme.

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

Pulizia e sfondo

LÖVE pulisce automaticamente lo schermo a ogni frame, ma può impostare il colore di pulizia con love.graphics.setBackgroundColor in love.load.

Per il controllo manuale all'interno di un rendering personalizzato, love.graphics.clear riempie il buffer con un colore. Nella maggior parte dei giochi è sufficiente impostare lo sfondo una volta e lasciare che sia il motore a occuparsi della pulizia.

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

Quad per gli sprite sheet

Un Quad seleziona una regione rettangolare di un'immagine, permettendo di contenere molti fotogrammi in un solo sprite sheet. Lo crei con love.graphics.newQuad.

Passi il quad a love.graphics.draw(image, quad, x, y) per visualizzare solo quella regione. Questa è la base dell'animazione degli sprite.

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)

Verifica rapida

Verifichi le Sue conoscenze sul disegno in LÖVE.

Riepilogo

Si disegna con love.graphics all'interno di love.draw: rettangoli, cerchi, linee, immagini e testo. setColor tinge i disegni successivi e mantiene il proprio stato.

Carichi le immagini una sola volta in love.load con newImage, poi le visualizzi con draw, aggiungendo rotazione, scala e quad per gli sprite sheet.

Domande Frequenti

La lezione «Disegnare forme e immagini» è gratuita?

Sì — il testo completo di «Disegnare forme e immagini» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Lua Academy, passa a CoddyKit PRO. Il corso Lua Academy include 4 lezioni in totale.

Cosa imparerò in «Disegnare forme e immagini»?

Porti la grafica sullo schermo. Eserciti Lua Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Lua Academy?

Non è richiesta alcuna esperienza precedente. Lua Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Disegnare forme e immagini»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Lua Academy?

Sì. Ogni lezione Lua Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Lua Academy