0Pricing
Lua Academy · Aula

Desenhando formas e imagens

Coloque gráficos na tela.

Desenhando formas e imagens é uma aula grátis de Lua Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Lua Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Lua Academy inclui 4 aulas no total.

O módulo love.graphics

Toda a renderização no LÖVE acontece por meio de love.graphics. Você chama suas funções dentro de love.draw, e o mecanismo apresenta o quadro quando a função de retorno termina.

Ele pode desenhar formas primitivas, imagens, texto e linhas, além de gerenciar cores e transformações. Tudo é redesenhado do zero a cada quadro.

Desenhando retângulos

love.graphics.rectangle recebe um modo e depois a posição e o tamanho. O modo é 'fill', para uma forma sólida, ou 'line', para desenhar apenas o contorno.

As coordenadas começam no canto superior esquerdo da janela, com x aumentando para a direita e y aumentando para baixo.

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

Círculos e elipses

love.graphics.circle(mode, x, y, radius) desenha um círculo centralizado em x, y. Assim como os retângulos, ele aceita 'fill' ou 'line'.

Para usar ovais, use love.graphics.ellipse com raios horizontal e vertical separados. Você pode passar um argumento adicional de segments para controlar a suavidade.

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

Definindo cores

love.graphics.setColor define a tonalidade de tudo o que for desenhado depois. No LÖVE moderno, os componentes variam de 0 a 1, portanto o branco é 1, 1, 1.

A cor mantém seu estado: depois de definida, ela se aplica a todos os desenhos seguintes até que você a altere novamente. Redefina-a para branco antes de desenhar imagens que você queira sem tonalidade.

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

Linhas e pontos

love.graphics.line conecta uma série de pontos x, y. love.graphics.setLineWidth controla a espessura das linhas e das formas com contorno.

Você pode passar muitos pontos de uma só vez para desenhar um caminho conectado, o que é útil para rastros, trajetos ou arte vetorial simples.

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

Carregando uma imagem

Carregue imagens uma vez em love.load usando love.graphics.newImage. Isso retorna um objeto Image que você armazena em uma variável para reutilizar.

Nunca carregue imagens dentro de love.draw, pois isso faria o arquivo ser lido novamente a cada quadro e prejudicaria o desempenho.

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

Desenhando uma imagem

love.graphics.draw(image, x, y) renderiza uma imagem na posição indicada. Por padrão, o canto superior esquerdo da imagem fica em x, y.

Argumentos adicionais acrescentam rotação, escala e deslocamento da origem, dando a você controle total sobre a aparência de cada elemento gráfico.

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

Rotação e Escala

A assinatura completa é draw(image, x, y, r, sx, sy, ox, oy). Aqui, r é a rotação em radianos, e sx e sy são fatores de escala.

O deslocamento da origem ox, oy define o pivô. Para girar em torno do centro de uma imagem, defina a origem como metade da largura e da altura da imagem.

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

Desenhando Texto

love.graphics.print(text, x, y) desenha uma cadeia de caracteres usando a fonte atual. love.graphics.setFont altera qual fonte está ativa.

Crie fontes personalizadas com love.graphics.newFont('font.ttf', 24) em love.load. Lembre-se de que a cor também aplica uma tonalidade ao texto, assim como às formas.

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

Limpeza e Plano de Fundo

O LÖVE limpa a tela automaticamente a cada quadro, mas você pode definir a cor de limpeza com love.graphics.setBackgroundColor em love.load.

Para ter controle manual dentro de uma renderização personalizada, love.graphics.clear preenche o buffer com uma cor. A maioria dos jogos simplesmente define o plano de fundo uma vez e deixa o mecanismo cuidar da limpeza.

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

Recortes para Folhas de Elementos Gráficos

Um recorte seleciona uma região retangular de uma imagem, permitindo que uma única folha de elementos gráficos contenha vários quadros. Crie-o com love.graphics.newQuad.

Passe o recorte para love.graphics.draw(image, quad, x, y) para renderizar apenas essa região. Essa é a base da animação de elementos gráficos.

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)

Verificação Rápida

Teste seus conhecimentos sobre desenho no LÖVE.

Recapitulação

Você desenha com love.graphics dentro de love.draw: retângulos, círculos, linhas, imagens e texto. setColor aplica uma tonalidade aos desenhos subsequentes e mantém estado.

Carregue as imagens uma vez em love.load com newImage e depois renderize-as com draw, adicionando rotação, escala e recortes para folhas de elementos gráficos.

Perguntas Frequentes

A aula “Desenhando formas e imagens” é grátis?

Sim — o texto completo de “Desenhando formas e imagens” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Lua Academy, atualize para CoddyKit PRO. O curso de Lua Academy inclui 4 aulas no total.

O que vou aprender em “Desenhando formas e imagens”?

Coloque gráficos na tela. Você pratica Lua Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Lua Academy?

Nenhuma experiência prévia é necessária. Lua Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Desenhando formas e imagens”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Lua Academy?

Sim. Cada aula de Lua Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. O laço de jogo do LOVE
  2. Desenhando formas e imagens
  3. Lidando com entradas
  4. Movimento e colisões
← Voltar para Lua Academy