Lua Academy · Урок

Отрисовка фигур и изображений

Размещайте графику на экране.

Урок 2 из 413 шагов

«Отрисовка фигур и изображений» — бесплатный урок Lua Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Lua Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Lua Academy содержит 4 уроков всего.

Модуль love.graphics

Вся отрисовка в LÖVE выполняется через love.graphics. Вы вызываете его функции внутри love.draw, а движок выводит кадр после завершения функции обратного вызова.

Модуль умеет рисовать примитивные фигуры, изображения, текст и линии, а также управлять цветами и преобразованиями. Каждый кадр всё перерисовывается с нуля.

Отрисовка прямоугольников

love.graphics.rectangle принимает режим, а затем положение и размер. Режимом служит либо 'fill' для сплошной фигуры, либо 'line' только для контура.

Координаты начинаются в левом верхнем углу окна: x увеличивается вправо, а y — вниз.

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

Круги и эллипсы

love.graphics.circle(mode, x, y, radius) рисует круг с центром в точке x, y. Как и прямоугольник, он принимает 'fill' или 'line'.

Для овалов используйте love.graphics.ellipse с отдельными горизонтальным и вертикальным радиусами. Можно передать дополнительный аргумент, чтобы управлять плавностью.

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

Настройка цветов

love.graphics.setColor задаёт оттенок для всего, что будет нарисовано после этого. В современных версиях LÖVE компоненты имеют значения от 0 до 1, поэтому белый цвет — это 1, 1, 1.

Цвет сохраняется в состоянии графики: после установки он применяется ко всей последующей отрисовке, пока Вы не измените его снова. Перед отрисовкой изображений, которые должны сохранить исходные цвета, установите белый цвет.

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

Линии и точки

love.graphics.line соединяет последовательность точек x, y. love.graphics.setLineWidth управляет толщиной линий и контурных фигур.

Можно передать сразу много точек, чтобы нарисовать соединённый путь. Это удобно для следов, траекторий или простого векторного рисунка.

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

Загрузка изображения

Загружайте изображения один раз в love.load с помощью love.graphics.newImage. Эта функция возвращает объект изображения, который Вы сохраняете в переменной для повторного использования.

Никогда не загружайте изображения внутри love.draw: в этом случае файл будет перечитываться на каждом кадре, что резко снизит производительность.

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

Отрисовка изображения

love.graphics.draw(image, x, y) выводит изображение в указанной позиции. По умолчанию левый верхний угол изображения оказывается в точке x, y.

Дополнительные аргументы добавляют поворот, масштаб и смещение начала координат, обеспечивая полный контроль над видом каждого спрайта.

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

Вращение и масштабирование

Полная сигнатура: draw(image, x, y, r, sx, sy, ox, oy). Здесь r — угол вращения в радианах, а sx и sy — коэффициенты масштабирования.

Смещение начала координат ox, oy задаёт точку вращения. Чтобы вращать изображение вокруг его центра, задайте началом координат половину ширины и высоты изображения.

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

Рисование текста

love.graphics.print(text, x, y) рисует строку текущим шрифтом. love.graphics.setFont изменяет активный шрифт.

Создавайте пользовательские шрифты с помощью love.graphics.newFont('font.ttf', 24) в love.load. Помните, что цвет также окрашивает текст, как и фигуры.

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

Очистка и фон

LÖVE автоматически очищает экран в каждом кадре, но цвет очистки можно задать с помощью love.graphics.setBackgroundColor в love.load.

Для ручного управления при пользовательском рендеринге love.graphics.clear заполняет буфер цветом. В большинстве игр фон просто задают один раз, а очистку предоставляют движку.

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

Объекты Quad для таблиц спрайтов

Объект Quad выбирает прямоугольную область изображения, позволяя хранить множество кадров в одной таблице спрайтов. Создайте его с помощью love.graphics.newQuad.

Передайте Quad в love.graphics.draw(image, quad, x, y), чтобы отрисовать только эту область. Это основа анимации спрайтов.

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)

Проверка знаний

Проверьте свои знания о рисовании в LÖVE.

Ответь в интерактивном уроке

Итоги

Рисуйте с помощью love.graphics внутри love.draw: прямоугольники, круги, линии, изображения и текст. setColor окрашивает все последующие рисунки и сохраняет своё состояние.

Загружайте изображения один раз в love.load с помощью newImage, а затем отрисовывайте их с помощью draw, добавляя вращение, масштабирование и Quad для таблиц спрайтов.

Можно начать бесплатно

Изучай Lua с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 40
Уроки: 159

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Отрисовка фигур и изображений» бесплатный?

Да — полный текст урока «Отрисовка фигур и изображений» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Lua Academy, подпишись на CoddyKit PRO. Курс Lua Academy содержит 4 уроков всего.

Чему я научусь в уроке «Отрисовка фигур и изображений»?

Размещайте графику на экране. Ты практикуешь Lua Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Lua Academy?

Предыдущий опыт не требуется. Lua Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Отрисовка фигур и изображений»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Lua Academy?

Да. Каждый урок Lua Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Lua Academy