Lua Academy · Lektion

Tegn former og billeder

Placér grafik på skærmen.

Lektion 2 af 413 trin

Tegn former og billeder er en gratis Lua Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Lua Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Lua Academy-kurset indeholder 4 lektioner i alt.

Modulet love.graphics

Al gengivelse i LÖVE sker gennem love.graphics. Du kalder dets funktioner inde i love.draw, og spilmotoren viser billedet, når callback-funktionen returnerer.

Det kan tegne grundformer, billeder, tekst og linjer samt håndtere farver og transformationer. Alt tegnes fra bunden igen for hvert billede.

Tegning af rektangler

love.graphics.rectangle modtager først en tilstand og derefter position og størrelse. Tilstanden er enten 'fill' for en udfyldt form eller 'line' for kun omridset.

Koordinaterne begynder i vinduets øverste venstre hjørne, hvor x vokser mod højre, og y vokser nedad.

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

Cirkler og ellipser

love.graphics.circle(mode, x, y, radius) tegner en cirkel centreret ved x, y. Ligesom rektangler accepterer den enten 'fill' eller 'line'.

Brug love.graphics.ellipse til ovaler med separate vandrette og lodrette radier. Du kan give et ekstra segments-argument for at styre, hvor glat formen bliver.

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

Indstilling af farver

love.graphics.setColor indstiller farvetonen for alt, der tegnes bagefter. I moderne LÖVE går komponenterne fra 0 til 1, så hvid er 1, 1, 1.

Farven er tilstandsbaseret: Når den først er indstillet, gælder den for alle efterfølgende tegninger, indtil du ændrer den igen. Nulstil til hvid, før du tegner billeder, som ikke skal have en farvetone.

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

Linjer og punkter

love.graphics.line forbinder en række x-, y-punkter. love.graphics.setLineWidth styrer tykkelsen på linjer og former med omrids.

Du kan give mange punkter på én gang for at tegne en sammenhængende sti, hvilket er praktisk til spor, stier eller enkel vektorgrafik.

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

Indlæsning af et billede

Indlæs billeder én gang i love.load med love.graphics.newImage. Det returnerer et Image-objekt, som du gemmer i en variabel for at genbruge det.

Indlæs aldrig billeder inde i love.draw, da det ville genlæse filen for hvert billede og ødelægge ydeevnen.

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

Tegning af et billede

love.graphics.draw(image, x, y) gengiver et billede på den angivne position. Som standard placeres billedets øverste venstre hjørne ved x, y.

Yderligere argumenter tilføjer rotation, skalering og forskydning af origo, så du får fuld kontrol over, hvordan hver sprite ser ud.

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

Rotation og skalering

Den fulde signatur er draw(image, x, y, r, sx, sy, ox, oy). Her er r rotationen angivet i radianer, og sx og sy er skaleringsfaktorer.

Forskydningen af origo ox, oy angiver omdrejningspunktet. Hvis du vil rotere omkring et billedes centrum, skal du sætte origo til halvdelen af billedets bredde og højde.

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

Tegning af tekst

love.graphics.print(text, x, y) tegner en tekststreng med den aktuelle skrifttype. love.graphics.setFont ændrer den aktive skrifttype.

Opret brugerdefinerede skrifttyper med love.graphics.newFont('font.ttf', 24) i love.load. Husk, at farven også påvirker tekstens farve, ligesom den gør for figurer.

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

Rydning og baggrund

LÖVE rydder automatisk skærmen for hver billedopdatering, men du kan angive rydningsfarven med love.graphics.setBackgroundColor i love.load.

Hvis du vil styre det manuelt under en brugerdefineret tegning, fylder love.graphics.clear bufferen med en farve. De fleste spil angiver blot baggrunden én gang og lader motoren håndtere rydningen.

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

Quads til spriteark

En Quad vælger et rektangulært område af et billede, så ét spriteark kan indeholde mange billeder. Opret den med love.graphics.newQuad.

Giv quadden til love.graphics.draw(image, quad, x, y) for kun at tegne det pågældende område. Det er grundlaget for spriteanimation.

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)

Hurtigt tjek

Test din viden om tegning i LÖVE.

Besvar den i den interaktive lektion

Opsummering

Du tegner med love.graphics i love.draw: rektangler, cirkler, linjer, billeder og tekst. setColor farvelægger alle efterfølgende tegninger og bevarer sin tilstand.

Indlæs billeder én gang i love.load med newImage, og tegn dem derefter med draw. Tilføj rotation, skalering og quads til spriteark.

Gratis at komme i gang

Lær Lua med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 40
Lektioner: 159

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Tegn former og billeder” gratis?

Ja — alle 3 lektioner i læringssporet Lua Academy, inklusive “Tegn former og billeder”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Lua Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Tegn former og billeder”?

Placér grafik på skærmen. Du øver dig i Lua Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Lua Academy?

Der kræves ingen tidligere erfaring. Lua Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Tegn former og billeder”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Lua Academy-lektion?

Ja. Alle Lua Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Lua Academy