Quad에 대해 알아본댔습니다.

쿼드? 쿼드가 뭐지? 생소한 개념인데?

하나의 큰 그림을 로드해서 쪼개서 쓰는 겁니다. 타일 깔듯이요.

우리가 포켓몬스터 같은 걸 하면, 맵 하나를 커다란 그림 파일로 그려놓은 게 아니라

풀숲 하나 32*32로 그리고(정확한 치수는 아니고 그냥 예임)

물 하나 32*32로 그리고

땅 하나 32*32로 그려가지고

짜맞춰서 하나의 맵을 만드는 겁니다.

그럼 뭐가 좋냐면, 일단 맵을 수정하기 쉽고, 저 3개 가지고 몇십개의 맵을 만들 수 있으니까 리소스가 엄청 절약되는 것입니다.

뭐.. 아무튼 직접 짜보시면 소중함을 경험하게 되실 겁니다.

쿼드도 바로 쓸 수는 없고, 먼저 만들어줘야 한다.

love.graphics.newQuad를 사용한다.

[쿼드이름] = love.graphics.newQuad( x, y, width, height, sw, sh )

뭔 소린고 하니, 하나씩 풀어봅시다.

[쿼드이름]은 쿼드를 식별할 수 있는 적절한 이름을 지어주시면 되겠습니다.

x랑 y는 큰 이미지에서 떼어낼 쿼드가 어디서부터 시작하는지.

width랑 height는 쿼드의 크기 되겠습니다.

sw랑 sh는 전체 이미지의 크기입니다.

참고로, 쿼드는 바로 파일을 불러오는 것이 아니라, 먼저 불러온 이미지를 쪼개서 쓰게 된다.

이미지를 불러오는 방법은 1편을 참조하자.

그래서 newQuad에 파일 경로가 없는 것이다. 일단 어떻게 쪼갤지만 정의해놓는 것이다.

마치 틀 처럼 말이다.

이제 쿼드가 준비되었으니 쿼드를 이미지에 그려보자.

love.graphics.drawq( image, quad, x, y, r, sx, sy, ox, oy, kx, ky )

이 역시 각 인수가 어떤 역할을 하는지 알아보자.

image는 그릴 원본이 있는 이미지이다. 예제를 준비해볼까?

자그마한 파일을 준비했다.

실제 게임의 맵을 처리할 때도 저런 식으로 맵 스프라이트를 처리하고

쿼드라는 것도 스프라이트를 처리할 때 유용하다.

스프라이트라는 것은 2D 게임 만들면서 엄청 많이 나오는 개념이니 알아보자.

역시 필자가 즐겨 플레이하는 모 게임을 예제로 들어 설명하면

실제로 한글화 등을 목적으로 해당 게임을 뜯어보면 저런 그림들이 게임 내에 있음을 볼 수 있다.

여러개의 이미지를 한번에 로드하면 힘드니까 저렇게 큰 이미지를 한번에 로드한 뒤

필요할 때 필요한 부분만 적절히 잘라서 표시해주는 것이다.

여러 개의 스프라이트를 짧은 시간 안에 보여주면 애니메이션 효과도 낼 수 있다.

2D 게임의 전성기에는 그래픽카드가 몇 폴리곤을 보여줄 수 있는가로 성능을 결정하는 것이 아닌

몇 개의 스프라이트를 동시에 올릴 수 있느냐로 성능을 결정하기도 했다 카더라.

쓸데없는 소리를 했는데.. 뭐 어쨌든 우리의 목적은 2D 게임을 제작하는 것이기 때문에 언급하고 넘어가봤다.

설명이 길어져서 글쓰기 힘들다, 무슨 인수 있는지 보려면 스크롤을 올려야 하니..

quad는 만든 틀이다. 우리 저번에 틀을 만들지 않았는가? 틀의 이름도 정해 두었고, 그 이름을 적어주면 된다.

나머지 인수는 지난 편에서의 이미지와 같으므로 과감히 생략한다.

아, 다른 게 하나 있는데, kx, ky이다. 이것은 자르는 점을 의미하는 듯 한데.. 당장은 필요없어보이니 넘어가자!

지금 보니 설명을 영 부실하게 한 것 같다, 뭐 다 아는 척 하고 있지만 사실은 위키를 보면서 배우면서 쓰는 것이니.. 쿼드는 앞으로도 많이 사용하고, 중요한 개념이 될 것 같으니 다음에 다시 다루겠습니다.

어쨌든 이제 쿼드와 위의 이미지를 사용해서 맵을 만들어보자!

function love.load()
    img = love.graphics.newImage("quadexample1616.png")
    map1 = love.graphics.newQuad(0, 0, 16, 16, 48, 64)
    map2 = love.graphics.newQuad(0, 16, 16, 16, 48, 64)
    map3 = love.graphics.newQuad(0, 32, 16, 16, 48, 64)
   
    map4 = love.graphics.newQuad(16, 0, 16, 16, 48, 64)
    map5 = love.graphics.newQuad(16, 16, 16, 16, 48, 64)
    map6 = love.graphics.newQuad(16, 32, 16, 16, 48, 64)
   
    map7 = love.graphics.newQuad(32, 0, 16, 16, 48, 64)
    map8 = love.graphics.newQuad(32, 16, 16, 16, 48, 64)
    map9 = love.graphics.newQuad(32, 32, 16, 16, 48, 64)
   
    map10 = love.graphics.newQuad(0, 48, 16, 16, 48, 64)
    map11 = love.graphics.newQuad(16, 48, 16, 16, 48, 64)
    map12 = love.graphics.newQuad(32, 48, 16, 16, 48, 64)
end


function love.draw()
    love.graphics.drawq(img, map12, 0, 0)
    love.graphics.drawq(img, map12, 0, 16)
    love.graphics.drawq(img, map12, 0, 32)
    love.graphics.drawq(img, map12, 0, 48)
    love.graphics.drawq(img, map4, 0, 64)
   
    love.graphics.drawq(img, map12, 16, 0)
    love.graphics.drawq(img, map12, 16, 16)
    love.graphics.drawq(img, map12, 16, 32)
    love.graphics.drawq(img, map12, 16, 48)
    love.graphics.drawq(img, map4, 16, 64)
   
    love.graphics.drawq(img, map12, 32, 0)
    love.graphics.drawq(img, map12, 32, 16)
    love.graphics.drawq(img, map5, 32, 32)
    love.graphics.drawq(img, map12, 32, 48)
    love.graphics.drawq(img, map12, 32, 64)
   
    love.graphics.drawq(img, map12, 48, 0)
    love.graphics.drawq(img, map12, 48, 16)
    love.graphics.drawq(img, map12, 48, 32)
    love.graphics.drawq(img, map12, 48, 48)
    love.graphics.drawq(img, map4, 48, 64)
   
    love.graphics.drawq(img, map12, 64, 0)
    love.graphics.drawq(img, map12, 64, 16)
    love.graphics.drawq(img, map12, 64, 32)
    love.graphics.drawq(img, map12, 64, 48)
    love.graphics.drawq(img, map4, 64, 64)
end

drawq 부분에서 뒷부분은 생략했습니다. 자동으로 다 0으로 들어갑니다.

실제 맵 처리를 저렇게 막장으로 하는 건 아닙니다.

중요한 건 drawq지 테이블이나 For문의 처리가 아니니까요. 사실은 귀찮았습니다.

나중에 소코반을 Love2D 엔진으로 옮기면서 제대로 된 걸 만들어보겠습니다.

모든 것이 계획대로라면 위와 같은 이미지가 나옵니다.

만세! 여러분은 이제 쿼드를 어떻게 쓰시는지 대충 감을 잡으셨습니다.

요약

- 쿼드는 틀이다

- 쿼드에 명시된대로 미리 로드된 이미지를 사각형으로 잘라서 표시할 수 있다.
- 이것은 맵 타일이나 스프라이트 등을 구현하는 데 매우 유용하고, 자주 쓰인다.

- 새 쿼드 틀을 만들고 싶으면 [쿼드이름] = love.graphics.newQuad( x, y, width, height, sw, sh )

- x랑 y는 쿼드가 시작하는 곳, width랑 height는 쿼드의 크기를 말한다.

- 쿼드를 그리고 싶으면 love.graphics.drawq( image, quad, x, y, r, sx, sy, ox, oy, kx, ky ) 를 사용한다.

- image는 자를 이미지, quad는 앞서 생성한 틀 이름, 나머지는 이미지를 그릴 때의 인수 사용법과 같다.

다음부터 Lua로 소코반을 구현해보겠습니다. 안녕.