Lua Academy · Lekcja

Rysowanie kształtów i obrazów

Umieści Pan/Pani grafikę na ekranie.

Lekcja 2 z 413 kroki

Rysowanie kształtów i obrazów to bezpłatna lekcja Lua Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Lua Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Lua Academy zawiera 4 lekcji w sumie.

Moduł love.graphics

Całe renderowanie w LÖVE odbywa się za pomocą love.graphics. Jego funkcje wywołuje się wewnątrz love.draw, a silnik wyświetla klatkę po zakończeniu funkcji callback.

Moduł może rysować podstawowe figury, obrazy, tekst i linie, a także zarządzać kolorami oraz transformacjami. Wszystko jest rysowane od początku w każdej klatce.

Rysowanie prostokątów

love.graphics.rectangle przyjmuje tryb, a następnie pozycję i rozmiar. Tryb to 'fill' dla pełnego kształtu albo 'line' dla samego obrysu.

Współrzędne zaczynają się w lewym górnym rogu okna, przy czym x rośnie w prawo, a y w dół.

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

Koła i elipsy

love.graphics.circle(mode, x, y, radius) rysuje koło wyśrodkowane w punkcie x, y. Podobnie jak prostokąty, przyjmuje tryb 'fill' lub 'line'.

Do rysowania owali należy użyć love.graphics.ellipse z osobnymi promieniami poziomym i pionowym. Można przekazać dodatkowy argument segments, aby kontrolować gładkość.

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

Ustawianie kolorów

love.graphics.setColor ustawia odcień dla wszystkiego, co zostanie narysowane później. W nowoczesnym LÖVE składowe mają wartości od 0 do 1, więc kolor biały to 1, 1, 1.

Kolor jest częścią stanu: po ustawieniu obowiązuje dla wszystkich kolejnych operacji rysowania, dopóki nie zostanie zmieniony. Przed rysowaniem obrazów, które mają zachować oryginalne kolory, należy przywrócić biel.

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

Linie i punkty

love.graphics.line łączy serię punktów x, y. love.graphics.setLineWidth steruje grubością linii i obrysów figur.

Można przekazać wiele punktów jednocześnie, aby narysować połączoną ścieżkę. Jest to przydatne w przypadku smug, ścieżek lub prostej grafiki wektorowej.

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

Wczytywanie obrazu

Obrazy należy wczytywać raz, w love.load, za pomocą love.graphics.newImage. Funkcja zwraca obiekt Image, który należy zapisać w zmiennej i wykorzystywać ponownie.

Nie należy wczytywać obrazów wewnątrz love.draw, ponieważ spowodowałoby to ponowne odczytywanie pliku w każdej klatce i znaczny spadek wydajności.

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

Rysowanie obrazu

love.graphics.draw(image, x, y) renderuje obraz w podanej pozycji. Domyślnie lewy górny róg obrazu trafia do punktu x, y.

Dodatkowe argumenty umożliwiają dodanie obrotu, skalowania i przesunięcia punktu początku, zapewniając pełną kontrolę nad wyglądem każdego sprite'a.

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

Obracanie i skalowanie

Pełna sygnatura to draw(image, x, y, r, sx, sy, ox, oy). Parametr r określa obrót w radianach, a sx i sy są współczynnikami skalowania.

Przesunięcia początku układu ox, oy wyznaczają punkt obrotu. Aby obracać obraz wokół jego środka, należy ustawić początek układu na połowę szerokości i wysokości obrazu.

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

Rysowanie tekstu

love.graphics.print(text, x, y) rysuje ciąg znaków przy użyciu bieżącej czcionki. love.graphics.setFont zmienia aktywną czcionkę.

Niestandardowe czcionki należy tworzyć za pomocą love.graphics.newFont('font.ttf', 24) w love.load. Należy pamiętać, że kolor również zabarwia tekst, tak samo jak kształty.

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

Czyszczenie i tło

LÖVE automatycznie czyści ekran w każdej klatce, ale kolor czyszczenia można ustawić za pomocą love.graphics.setBackgroundColor w love.load.

W przypadku ręcznego sterowania podczas niestandardowego renderowania love.graphics.clear wypełnia bufor kolorem. W większości gier tło ustawia się tylko raz, a czyszczenie pozostawia silnikowi.

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

Obiekty Quad w arkuszach sprite'ów

Obiekt Quad wybiera prostokątny fragment obrazu, dzięki czemu jeden arkusz sprite'ów może zawierać wiele klatek. Należy utworzyć go za pomocą love.graphics.newQuad.

Przekazanie obiektu Quad do love.graphics.draw(image, quad, x, y) powoduje wyrenderowanie tylko tego fragmentu. Jest to podstawa animacji sprite'ów.

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)

Szybki test

Sprawdź swoją wiedzę na temat rysowania w LÖVE.

Odpowiedz w interaktywnej lekcji

Podsumowanie

Do rysowania w funkcji love.draw służy moduł love.graphics: można rysować prostokąty, okręgi, linie, obrazy i tekst. setColor zabarwia kolejne rysowane elementy i zachowuje ustawiony stan.

Obrazy należy wczytać raz w love.load za pomocą newImage, a następnie renderować je przy użyciu draw, dodając obrót, skalowanie i obiekty Quad dla arkuszy sprite'ów.

Bezpłatny start

Ucz się Lua dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 40
Lekcje: 159

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Rysowanie kształtów i obrazów” jest bezpłatna?

Tak — pełny tekst „Rysowanie kształtów i obrazów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Lua Academy, przejdź na CoddyKit PRO. Kurs Lua Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Rysowanie kształtów i obrazów”?

Umieści Pan/Pani grafikę na ekranie. Ćwiczysz Lua Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Lua Academy?

Nie wymagamy żadnego doświadczenia. Lua Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Rysowanie kształtów i obrazów”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Lua Academy?

Tak. Każda lekcja Lua Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Pętla gry LOVE
Rysowanie kształtów i obrazów
Obsługa wejścia
Ruch i kolizje

← Powrót do Lua Academy