Lua Academy · 강의

도형과 이미지 그리기

화면에 그래픽을 배치해 보세요.

레슨 2/413개 단계

도형과 이미지 그리기은(는) CoddyKit의 무료 Lua Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 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

스프라이트 시트용 쿼드

쿼드는 이미지에서 직사각형 영역을 선택하므로 하나의 스프라이트 시트에 여러 프레임을 저장할 수 있습니다. 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을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 40
레슨: 159

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“도형과 이미지 그리기” 강의는 무료인가요?

네 — “도형과 이미지 그리기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Lua Academy 강의 전체를 잠금 해제할 수 있습니다. Lua Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“도형과 이미지 그리기”에서 뭘 배우나요?

화면에 그래픽을 배치해 보세요. 브라우저에서 직접 실행하는 실습 코드로 Lua Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Lua Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Lua Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“도형과 이미지 그리기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Lua Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Lua Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Lua Academy(으)로 돌아가기