Lua Academy · 课时

绘制形状和图像

Q: 「绘制形状和图像」这节课中我会学到什么？

将图形显示在屏幕上。 你通过在浏览器中直接运行的动手代码来练习 Lua Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

将图形显示在屏幕上。

绘制形状和图像 是 CoddyKit 上的免费 Lua Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 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，并分别指定水平半径和垂直半径。您还可以传入额外的 segments 参数来控制平滑度。

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 一次性加载图像。它会返回一个 Image 对象，您可以将其存储在变量中以便重复使用。

切勿在 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.load 中使用 love.graphics.newFont('font.ttf', 24) 创建自定义字体。请记住，颜色也会像影响形状一样为文本添加色调。

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

清屏与背景

LÖVE 会在每帧自动清除屏幕，但您可以在 love.load 中使用 love.graphics.setBackgroundColor 设置清屏颜色。

若要在自定义渲染中手动控制，love.graphics.clear 会使用某种颜色填充缓冲区。大多数游戏只需设置一次背景，然后让引擎负责清屏。

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

精灵表中的四边形区域

Quad 可以选取图像中的矩形区域，让一张精灵表容纳多个帧。请使用 love.graphics.newQuad 创建它。

将四边形区域传递给 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.draw 中使用 love.graphics 绘制矩形、圆形、线条、图像和文本。setColor 会为后续绘制添加色调，并且会保留当前状态。

请在 love.load 中使用 newImage 加载一次图像，然后使用 draw 进行渲染，并为精灵表添加旋转、缩放和四边形区域。

常见问题解答

「绘制形状和图像」课时是免费的吗？

是的 — 「绘制形状和图像」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Lua Academy 课程的其余内容，请升级到 CoddyKit PRO。 Lua Academy 课程共包含 4 节课。

「绘制形状和图像」这节课中我会学到什么？

将图形显示在屏幕上。你通过在浏览器中直接运行的动手代码来练习 Lua Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Lua Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Lua Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「绘制形状和图像」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Lua Academy 课中编写并运行代码吗？

能。每节 Lua Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Lua Academy