메뉴 건너뛰기

창작에 관련된 질문이나 간단한 팁, 예제를 올리는 곳

(역시 이미지가 중요한 글인데 이미지가 모두 잘렸습니다. 문화재 손실에 슬픔을 표합니다.)


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로 소코반을 구현해보겠습니다. 안녕.

조회 수 :
819
등록일 :
2013.09.17
08:37:59 (*.209.135.92)
엮인글 :
게시글 주소 :
https://hondoom.com/zbxe/index.php?mid=study&document_srl=703472
List of Articles
번호 제목 글쓴이 날짜 조회 수
» 이미지 그리는 방법: 2편. 부제: 쿼드! 노루발 2013-09-17 819
144 이미지 그리는 방법 1편 노루발 2013-09-17 812
143 Lua 소코반: 목표 지점을 만들고, 상자가 모두 옮겨지면 게임을 끝내자! 노루발 2013-09-17 752
142 Lua 소코반: 상자를 만들고 옮기고 상자와 상자가 겹치거나 상자와 벽이 겹치지 않게 해 보자! 노루발 2013-09-17 677
141 Lua 소코반: 벽을 뚫고 나가지 않게 해보자! 노루발 2013-09-17 695
140 Lua 소코반: 플레이어를 그리고 움직이게 해보자 노루발 2013-09-17 757
139 Lua 소코반: 맵을 뿌리자. 노루발 2013-09-17 832
138 소코반: 맵을 초기화하자. 노루발 2013-09-17 588
137 [Love2D] 일단 뭔가 해보자 노루발 2013-09-17 455
136 Love2D: 콜백 함수들 노루발 2013-09-17 537
135 love.graphics.print 한국어 출력 노루발 2013-09-17 429
134 Love2D를 사용하기 위한 Lua 강좌: 변수형 노루발 2013-09-17 446
133 Love2D를 사용하기 위한 Lua 강좌: 코딩 스타일, 변수 노루발 2013-09-17 584
132 Love2D를 사용하기 위한 Lua 강좌: 입출력과 기본 노루발 2013-09-17 701
131 Love2D? 개요, 설치, 실행. 노루발 2013-09-17 462
130 멘탈붕괴의 절정을 부르는 파일입출력 노루발 2013-09-17 273
129 [Lua] Split 노루발 2013-09-17 359
128 love.update(dt) 에서 버벅이는 현상. 노루발 2013-09-17 255
127 [Lua] 테이블 노루발 2013-09-17 1422
126 cocos2d-x CCMenuItem 자신을 지웠을 때 생기는 에러 똥똥배 2013-09-13 441