Lua Academy · Lektion

Formen und Bilder zeichnen

Bringen Sie Grafiken auf den Bildschirm.

Lektion 2 von 413 Schritte

Formen und Bilder zeichnen ist eine kostenlose Lua Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Lua Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Lua Academy-Kurs umfasst insgesamt 4 Lektionen.

Das love.graphics-Modul

Die gesamte Darstellung in LÖVE erfolgt über love.graphics. Sie rufen dessen Funktionen innerhalb von love.draw auf, und die Engine zeigt den Frame an, sobald der Callback zurückkehrt.

Damit können Sie primitive Formen, Bilder, Text und Linien zeichnen sowie Farben und Transformationen verwalten. In jedem Frame wird alles von Grund auf neu gezeichnet.

Rechtecke zeichnen

love.graphics.rectangle erwartet zunächst einen Modus und anschließend Position und Größe. Der Modus ist entweder 'fill' für eine ausgefüllte Form oder 'line' für den reinen Umriss.

Die Koordinaten beginnen an der oberen linken Ecke des Fensters. x nimmt nach rechts zu, y nach unten.

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

Kreise und Ellipsen

love.graphics.circle(mode, x, y, radius) zeichnet einen Kreis mit dem Mittelpunkt x, y. Wie bei Rechtecken werden 'fill' oder 'line' akzeptiert.

Für Ovale verwenden Sie love.graphics.ellipse mit getrennten horizontalen und vertikalen Radien. Sie können zusätzlich ein segments-Argument übergeben, um die Glätte zu steuern.

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

Farben festlegen

love.graphics.setColor legt die Farbtönung für alles fest, was anschließend gezeichnet wird. In modernen LÖVE-Versionen reichen die Komponenten von 0 bis 1; Weiß ist also 1, 1, 1.

Die Farbe bleibt als Zustand gesetzt: Nach dem Festlegen gilt sie für alle folgenden Zeichenoperationen, bis Sie sie erneut ändern. Setzen Sie die Farbe vor dem Zeichnen von Bildern, die nicht eingefärbt werden sollen, auf Weiß zurück.

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

Linien und Punkte

love.graphics.line verbindet eine Reihe von x-, y-Punkten. love.graphics.setLineWidth steuert die Stärke von Linien und umrandeten Formen.

Sie können viele Punkte auf einmal übergeben, um einen verbundenen Pfad zu zeichnen. Das ist praktisch für Spuren, Pfade oder einfache Vektorgrafiken.

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

Ein Bild laden

Laden Sie Bilder einmalig in love.load mit love.graphics.newImage. Dadurch erhalten Sie ein Image-Objekt, das Sie zur Wiederverwendung in einer Variablen speichern.

Laden Sie Bilder niemals innerhalb von love.draw, da sonst in jedem Frame die Datei erneut eingelesen würde und die Leistung stark beeinträchtigt wäre.

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

Ein Bild zeichnen

love.graphics.draw(image, x, y) stellt ein Bild an der angegebenen Position dar. Standardmäßig liegt die obere linke Ecke des Bildes bei x, y.

Zusätzliche Argumente ermöglichen Rotation, Skalierung und einen Versatz des Ursprungs und geben Ihnen damit vollständige Kontrolle über die Darstellung jedes Sprites.

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

Rotation und Skalierung

Die vollständige Signatur lautet draw(image, x, y, r, sx, sy, ox, oy). Dabei steht r für die Rotation im Bogenmaß, sx und sy für die Skalierungsfaktoren.

Der Ursprungsoffset ox, oy legt den Drehpunkt fest. Um eine Rotation um die Bildmitte zu erreichen, setzen Sie den Ursprung auf die halbe Bildbreite und -höhe.

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

Text zeichnen

love.graphics.print(text, x, y) zeichnet eine Zeichenkette mit der aktuellen Schriftart. Mit love.graphics.setFont ändern Sie die aktive Schriftart.

Erstellen Sie mit love.graphics.newFont('font.ttf', 24) in love.load benutzerdefinierte Schriftarten. Denken Sie daran, dass die Farbe auch den Text einfärbt, genau wie Formen.

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

Leeren und Hintergrund

LÖVE leert den Bildschirm automatisch in jedem Frame. Sie können die Löschfarbe jedoch mit love.graphics.setBackgroundColor in love.load festlegen.

Für die manuelle Steuerung innerhalb einer benutzerdefinierten Darstellung füllt love.graphics.clear den Puffer mit einer Farbe. In den meisten Spielen wird der Hintergrund einmal festgelegt und das Leeren dann der Engine überlassen.

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

Quads für Sprite-Sheets

Ein Quad wählt einen rechteckigen Bereich eines Bildes aus, sodass ein Sprite-Sheet viele Frames enthalten kann. Erstellen Sie es mit love.graphics.newQuad.

Übergeben Sie das Quad an love.graphics.draw(image, quad, x, y), um nur diesen Bereich darzustellen. Das ist die Grundlage für Sprite-Animationen.

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)

Kurzer Test

Testen Sie Ihr Wissen über das Zeichnen mit LÖVE.

Beantworte es in der interaktiven Lektion

Zusammenfassung

Mit love.graphics innerhalb von love.draw zeichnen Sie Rechtecke, Kreise, Linien, Bilder und Text. setColor färbt alle folgenden Zeichnungen ein und behält diesen Zustand bei.

Laden Sie Bilder einmalig in love.load mit newImage und stellen Sie sie anschließend mit draw dar. Für Sprite-Sheets können Sie Rotation, Skalierung und Quads hinzufügen.

Kostenlos starten

Lerne Lua mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 40
Lektionen: 159

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Formen und Bilder zeichnen“ kostenlos?

Ja — der vollständige Text von „Formen und Bilder zeichnen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Lua Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Lua Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Formen und Bilder zeichnen“?

Bringen Sie Grafiken auf den Bildschirm. Du übst Lua Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Lua Academy zu starten?

Keine Vorkenntnisse erforderlich. Lua Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Formen und Bilder zeichnen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Lua Academy-Lektion Code schreiben und ausführen?

Ja. Jede Lua Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Lua Academy