[💬] Love2D로 게임 만들기 2편 (대충 씀)

[토끼주문(icyselec)]

Love2D로 게임 만들기 시리즈

이전 글 : https://gall.dcinside.com/game_dev/156920

이번 강의에서는 저번 강의에서 부족하다고 생각했던 점, 피드백을 받은 점들을 개선하여 독자의 수준이 Lua 프로그래밍에 대한 일반적인 지식이 부족하다고 가정하고 모바일 가독성을 높이는데 주력함. 물론 강의의 목적은 어디까지나 Love2D로 간단한 게임 만드는 법에 대한 내용이니 Lua에 대한 아주 기본적인 내용은 다루지 않을 것임. 필요하다면 따로 배우거나 추후에 Lua 프로그래밍 강의를 쓸 수도 있으니 기다리기를...

11. 소스코드가 너무 복잡해! 모듈화를 해보자.
우리는 main.lua 파일에 모든 정의를 다 밀어넣었다. 한 파일에 베이스 객체 정의, 파생 객체 정의, 콜백 함수 정의가 모두 다 들어가게 되었고 그 결과 소스코드를 읽기가 매우 힘들어졌다. 일반적으로 한 파일에 코드를 몰아쓰게되면 어떤 문제가 발생할까?

(1). 이름 공간이 충돌할 수 있다.
예를 들어, Data라는 이름으로 객체를 두번 정의할 수 없다. 문제는 Data는 흔한 이름이라서 자주 쓰인다는 점이다.

(2). 소스코드 읽기가 너무 힘들어진다.
현재 소스코드의 문맥이 코드에 필요한 객체를 정의하는 단계라면 그 곳에는 그저 객체의 이름만 써두고 실제 정의는 개별 파일로 분리할 수도 있다.
하지만 모듈화가 안된다면 실제 정의가 하나의 파일에 전부 와야하므로 매우 긴 파일을 읽어야 다음 문맥을 읽을 수 있을 거다.

(3). 잘못된 방법으로 프로그래밍을 할 가능성을 높힌다.
1번의 문제점을 해결하기 위해 접두어를 붙힌다! 이건 Lua에서 전혀 좋은 생각이 아니다. Lua는 테이블로 이름 공간을 만들 수 있다! 그 외에도 많은 문제점을 만든다.

그래서 11장에서는 main.lua를 객체 단위로 나누어 여러 파일에 분산하는 법을 설명한다.

일반적으로 Lua에서 모듈은 다음과 같이 구성된다.

local M = {} -- 객체를 담을 수 있는 테이블을 생성.

-- 이곳에 소스코드를 작성, 함수를 function M:name

-- 형식으로 작성하면 name은 테이블 M의 멤버가 되고

-- 매개변수 목록 제일 앞에 self가 자동으로 추가된다.

-- 만약 모듈 정의와 전혀 상관없고 모듈 안에서만

-- 쓰이는 함수를 정의하고 싶다면 local function을

-- 사용할 수 있다. 그 외에 M이 붙지 않으면 멤버가

-- 아니다.

-- 아래는 모듈을 객체처럼 사용하기 위해서 생성자를

-- 정의했다.

function M:new (o)

o = o or {}

setmetatable(o, self)

self.__index = self

return o

end

return M -- 정의한 객체를 반환한다.

모듈을 사용하기 위해서는 require 함수를 사용한다. (주의할 점은, 모듈의 경로를 지정할때는 확장자를 사용하지 않는다. '.'은 디렉터리 구분자로 사용되기 때문이다.)
local M = require "M"
local N = M:new()

우리는 main.lua 파일 하나를 쪼개어서 GameObject.lua, Bomb.lua 파일로 분리할 수도 있다. 아래는 모듈 방식으로 작성된 GameObject.lua의 예시를 보인다.

local GameObject = {

x = 0,

y = 0,

width = 0,

height = 0,

radius = 0,

color = {

red = 1,

green = 1,

blue = 1,

alpha = 1,

},

rotation = 0,

direction = 1,

speed = 300,

}

function GameObject:new (o)

o = o or {}

setmetatable(o, self)

self.__index = self

return o

end

function GameObject:isCollide (that)

local distance = math.sqrt(

(self.x - that.x)^2 + (self.y - that.y)^2)

return distance < self.radius + that.radius

end

function GameObject:update (dt)

local width = love.graphics.getWidth()

local height = love.graphics.getHeight()

-- Implementing wall reflection

if self.x+self.radius > width then

self.direction = self.direction ==

1 and 2 or 3

elseif self.y-self.radius < 0 then

self.direction = self.direction ==

2 and 3 or 4

elseif self.x-self.radius < 0 then

self.direction = self.direction ==

3 and 4 or 1

elseif self.y+self.radius > height then

self.direction = self.direction ==

4 and 1 or 2

end

local move = math.sin(math.pi/4)

if self.direction == 1 then

self.x = self.x + self.ref.speed *

move * dt

self.y = self.y - self.ref.speed *

move * dt

elseif self.direction == 2 then

self.x = self.x - self.ref.speed *

move * dt

self.y = self.y - self.ref.speed *

move * dt

elseif self.direction == 3 then

self.x = self.x - self.ref.speed *

move * dt

self.y = self.y + self.ref.speed *

move * dt

elseif self.direction == 4 then

self.x = self.x + self.ref.speed *

move * dt

self.y = self.y + self.ref.speed *

move * dt

end

end

function GameObject:isClicked () end

function GameObject:onClick () end

function GameObject:draw ()

love.graphics.setLineStyle("rough")

love.graphics.setColor(

self.color.red,

self.color.green,

self.color.blue,

self.color.alpha

)

love.graphics.circle(

"line",

self.x-self.radius,

self.y-self.radius,

self.radius

)

end

return GameObject

12. 게임의 점수 규칙과 패배 조건을 구현하자.
"오래 살아남을수록 점수가 높고, 폭탄과 부딪히거나 게임 화면 밖으로 나가면 패배하며 점수를 표시한다."

어제 5개의 게임 규칙을 설명한 바 있다. 이번 강의에서는 3번째 규칙을 구현할 거다.

1단계: 마우스의 움직임을 감지하자.

Love2D는 love.mousemoved라는 콜백을 지원한다. 이 함수를 다음과 같이 작성하자.

function love.mousemoved (x, y, _, _)

cursor.x = x

cursor.y = y

end

이는 마우스가 매번 움직일때마다 cursor 객체의 x 및 y값을 갱신해주는 역할을 한다. 이 값은 0부터 최대 화면 크기에 1을 뺀 값 사이로 정해진다.

그리고 cursor 객체의 정의가 안되었으니 main.lua 상단에 다음 코드를 추가한다.

cursor = {

x = 0,

y = 0,

radius = 0,

}

radius는 나중에 충돌 감지에서 사용될 것이다. isCollide는 GameObject를 비교 대상으로 갖는데 이때 마우스는 GameObject가 아니지 않냐고 물을 수도 있다.

하지만 마우스가 위치한 점은 사실 반지름이 0인 원으로 생각할 수 있고 마우스가 움직일 때마다 이 원이 따라서 움직인다고 생각하면 된다. 마우스와 원의 충돌을 감지하는 함수를 새로 만드는 것보다는 재활용이 낫다.

2단계: 폭탄이 마우스와 충돌하는지 검사한다.

이건 정말 쉽다. 그저 main.lua 파일에 있는 update 콜백을 다음과 같이 변경해주자.

function love.update (dt)

if not isGameovered then

for _, v in ipairs(bombs) do

if v:isCollide(cursor) then

isGameovered = true

return

end

v:update(dt)

end

local width = love.graphics.getWidth()-1

local height = love.graphics.getHeight()-1

if cursor.x == 0 or cursor.x == width or

cursor.y == 0 or cursor.y == height then

isGameovered = true

return

end

end

end

폭탄과 접촉을 감지하는 부분은 isCollide 함수로 충돌을 검사하고 충돌이 확인되면 isGameovered를 true로 설정해서 게임 패배로 만드는 간단한 구조이다.

마우스가 화면을 벗어나는 것을 감지하는 부분은 마우스 위치가 0 또는 화면 경계와 일치하는지를 검사한다. 아까 마우스 커서 위치의 범위가 0부터 시작한다고 했기 때문에 getWidth와 getHeight로 얻어낸 화면 크기에서 1을 빼준다.

3단계: 게임 패배 화면을 설정하자.

draw 콜백을 다음과 같이 바꾸자.

function love.draw ()

local width = love.graphics.getWidth()

local height = love.graphics.getHeight()

if not isGameovered then

for _, v in ipairs(bombs) do

v:draw()

end

else

love.graphics.setColor(1, 1, 1)

love.graphics.print(

"Game Over",

width/2,

height/2

)

end

end

게임 오버가 아니라면 폭탄을 표시하고, 게임 오버 상태면 게임 오버 메시지를 화면 중앙에 표시한다.

13. 점수 시스템을 구현하자.

이제 화면보호기 수준은 벗어난 것 같다. 하지만 해결해야할 문제가 하나 더 남았다. 아무리 오랫동안 폭탄을 피해 살아남아도 점수가 없으니 게임을 하는 의미가 없다.

그래서 이번에는 점수 시스템을 구현하고 생존 시간에 따라 점수를 부여하자.

먼저, gameScore 변수를 정의해준다.

local gameScore = 0

우리 게임은 살아남은 시간에 비례하여 점수가 결정되는 시스템을 채택하였다. 간단하게 1초에 타이머가 60번 증가하고 1번 증가할때를 1점으로 삼자. 게임의 시간을 측정하는 변수를 정의해준다.

local gameTimer = 0

이제 update 콜백에 gameTimer의 값을 1씩 증가시키는 코드를 작성하면 된다.

gameTimer = gameTimer + 1

참고로 Lua는 복합 대입 연산자를 지원하지 않는다. 1을 더하려면 gameTimer += 1과 같이 할 수 없다.

마지막으로 게임 오버시 점수를 표시할 수 있도록 draw 콜백을 수정하자.

function love.draw ()

local width = love.graphics.getWidth()

local height = love.graphics.getHeight()

gameScore = gameTimer

if not isGameovered then

for _, v in ipairs(bombs) do

v:draw()

end

else

love.graphics.setColor(1, 1, 1)

love.graphics.print(

"Game Over",

width/2,

height/2

)

love.graphics.print(

"Score: " .. tostring(gameScore),

width/2,

height/2+10

)

end

end

14. 버그를 수정하자.

우리 게임은 별 이상이 없는 것처럼 보인다. 그러나 게임을 시작하고 나서 준비할 시간을 주지 않는다는 것이 문제다. 버그는 게임의 로직이 오작동해서도 일어나지만 가끔은 나쁜 사용자 경험이 버그처럼 보이는 경우가 있다. 하지만 그건 버그가 맞다. 왜냐하면 저번 편에서 이미 준비 시간을 5초 준다고 설명했기 때문이다.

준비 시간동안에는 폭탄에 닿거나 화면 밖을 벗어나도 게임 오버가 되면 안된다. 단, 준비 시간은 게임 점수로 인정하지 않거나 무의미해야 한다. 이는 모든 게임 오버와 관련된 로직에 다음 조건문을 넣는 것으로 해결 가능하다.

if gameTimer-300 > 0 then

isGameovered = true

return

end

이 조건문은 게임 타이머가 0에서 300인 구간까지는 절대로 성립하지 않는다. 300프레임이면 5초이다. 그럼 이제 5초의 준비 시간이 주어진 거다.

버그는 알고 보면 아주 작은 원인으로 일어나는 경우가 있다. 실제로 Lua는 빠른 개발 속도가 장점인 언어이지만 그 많큼 덕-타이핑으로 인해 많은 버그를 발생시킬 수 있다. 물론 이번 경우는 덕-타이핑이 아니고 코드를 짠 놈의 머리가 덕-수준이라 그런거니 Lua를 탓하지 말자.

강의를 두번째로 써보는데 디시 에디터가 워낙 구려서 편집하기 힘듬. 필력도 좋은 편이 아니라서 어려움. 한 글에 몰아쓰는 이유가 이거 빨리 끝내고 싶어서 그런데 그냥 좀 길게 써도 되니까 자세하게 쓸까 생각 중임 근데 나보다 Lua랑 Love2D를 잘 가르치는 양반들이 차고 넘쳐서 어려울수도 (물론 죄다 영어임)

https://drive.google.com/drive/folders/1jJYUduwm6jUcpqsjRKhm1Xmuf4nywrRz?usp=sharing

소스코드는 드라이브에 올림.

아 다 쓰고나니까 글자 수 제한 걸렸다 그래서 일부 내용 타노스됨 주의

[ㅇㅇ 1(121.161)]

이분 love2d 전도사네 고도 전도사 김메가 보는 느낌 화이팅

[ㅇㅇ 2(222.107)]

코드 문법이 js 랑 python 섞은거 같노

[익명(58.29)]

GameObject의 color는 생성할 때 따로 선언 안 해주고 나중에 안 값을 수정하면 메타테이블 거쳐서 기본값을 바꿔버릴 수도 있겠네 예전에 한 번 당한 적 있음ㅋㅋㅋㅋ

[토끼주문(icyselec)]

그럴때는 o = o or {} 테이블 생성자 부분에 최소한 필수로 있어야 하는 멤버들을 미리 정의해놓는 것도 하나의 방법.

[ㅇㅇ 3(114.202)]

love2d는 확실한 수요층이 있을 듯 난 이거 노트북에서도 가볍게 돌아가서 좋더라

[익명(lyokivjfp04q)]

요즘 제일 관심가는 거였는데 연재추 - dc App