메뉴 건너뛰기

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

글 수 185

이미지 그리는 방법: 2편. 부제: 쿼드!

노루발

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


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

이 게시물을
조회 수 :
821
등록일 :
2013.09.17
08:37:59 (*.209.135.92)
엮인글 :
게시글 주소 :
https://hondoom.com/zbxe/index.php?mid=study&document_srl=703472
목록
수정 삭제
List of Articles
번호 제목 글쓴이 조회 수 추천 수sort 날짜 최근 수정일
165 cocos2d-x 2.2.2 UILabelBMFont 메모리 누수 해결법 [2] 똥똥배 783   2014-03-10 2014-05-31 19:30
만약 CocoStudio로 UI를 만든 후 GUIReader를 써서 지정 폰트를 불러오면 엔진 버그로 인해서 메모리 누수가 생긴다. 이걸 고치려면 LabelBMFont.cpp를 아래와 같이 수정해야 한다. void LabelBMFont::setFntFile(const char *fileName) { if (!fileName || st...  
164 cocos2d-x 2.2.2 윈도우 환경 기본 메모리 누수 똥똥배 640   2014-03-10 2014-03-11 03:51
cocos2d-x 2.2.2를 윈도우에서 실행시키고 나서 종료하면 기본으로 4바이트의 메모리 누수가 발생한다. 이건 CCScriptEngineManager가 원인인데 CCObject들은 delete를 실행할 때마다 CCScriptEngineManager의 sharedManager를 호출하기 때문이다. 결국 모든 C...  
163 Cocostudio의 ActionNode 메모리 누수 해결법(cocos2d-x 2.2.2) [2] 똥똥배 776   2014-03-09 2014-05-31 19:26
Cocostudio로 액션을 만들고 액션매니저를 이용해서 ActionManager::shareManager()->playActionByName 아래와 같이 실행을 해주면 액션이 실행되는 경우 메모리 누수가 발생한다. (액션을 실행하지 않았을 때는 메모리 누수 없음) 이 메모리 누수를 없애려면 ...  
162 CCTextFieldTTF 0바이트 메모리 누수 버그 해결법 똥똥배 692   2014-01-13 2014-01-13 10:38
CCTextFieldTTF::textFieldWithPlaceHolder("", FONT_NAME, FONT_SIZE); 이런 식으로 텍스트필드를 생성하면 ""가 0바이트라서 해체를 못하고 0바이트 누수가 발생한다. 그냥 스페이스(" ")라도 넣어주면 누수는 발생하지 않는다. 이 버그가 발생하는 버전은 2...  
161 Lua 소코반 EX: 포팅: 3 (머나먼 여행길 안녕 친구여) 노루발 913   2013-09-18 2013-09-18 08:05
안녕하세요, 노루발입니다. 오늘로 그래픽 소코반을 끝내기로 했습니다. 아쉽지만 끝내야죠. 일단 걸음수와 이것저것을 뿌려주기로 합니다. 그런데 이미 화면이 꽉 차버려서 뿌려줄 공간이 없네요... 없으면 만들면 되지. 창을 늘립시다. conf.lua를 수정. fun...  
160 Lua 소코반 EX: 포팅: 2 (키가 눌리면 이동하게 해 보자) 노루발 832   2013-09-18 2013-09-18 08:04
-- 플레이어 위치를 저장하는 변수 -- 초기 시작지점은 5, 5로 설정. playerx = 5 playery = 5 -- 박스의 위치를 저장하는 배열. box = {} -- 박스 목표 지점의 위치를 저장하는 배열. goal = {} -- 움직인 횟수 저장 moves = 0 -- 맵 데이터를 저장하는 8*8의...  
159 Lua 소코반 EX: 포팅: 1 노루발 856   2013-09-18 2013-09-18 08:03
-- 플레이어 위치를 저장하는 변수 -- 초기 시작지점은 5, 5로 설정. playerx = 5 playery = 5 -- 박스의 위치를 저장하는 배열. box = {} -- 박스 목표 지점의 위치를 저장하는 배열. goal = {} -- 움직인 횟수 저장 moves = 0 -- 맵 데이터를 저장하는 8*8의...  
158 Lua 소코반 EX: 그래픽 준비 노루발 1084   2013-09-18 2013-09-18 08:00
안녕하세요, 노루발입니다. 얼마 전 만든 Lua 소코반을 게임다운 게임을 만들기 위해 그래픽을 씌워보려고 합니다. 저번에 한 Love2D로 살펴본 뭐가 뭔지 모르는 복잡한 그리기 함수들도 사실은 모두가 소코반을 그래픽으로 만들기 위한 훼이크였습니다. 후후....  
157 게임의 기본 설정을 담당하는 love.conf 노루발 763   2013-09-17 2013-09-17 08:39
안녕하세요, 노루발입니다. 여태까지 이것저것 많이 Love2D를 다뤄와서 제가 만든 소코반에 그래픽을 씌울 수준까지 되었지만 (물론 키 입력은 논외로 치죠, 나중에 다룰게요.) 아직 이걸로 정식 게임을 만든다면 모자라도 한참 모자랍니다. 창의 이름도 실행...  
» 이미지 그리는 방법: 2편. 부제: 쿼드! 노루발 821   2013-09-17 2013-09-17 08:37
(역시 이미지가 중요한 글인데 이미지가 모두 잘렸습니다. 문화재 손실에 슬픔을 표합니다.) Quad에 대해 알아본댔습니다. 쿼드? 쿼드가 뭐지? 생소한 개념인데? 하나의 큰 그림을 로드해서 쪼개서 쓰는 겁니다. 타일 깔듯이요. 우리가 포켓몬스터 같은 걸 하...  
155 이미지 그리는 방법 1편 노루발 812   2013-09-17 2013-09-17 08:35
이미지가 중요한 글인데 이미지가 다 짤렸네요. 압박. 준비물은 일단 이미지입니다. 예제 이미지로 럭키♥를 준비했습니다. 럭키! 럭키! 럭키! 와아아아! 어쨌든 이 럭키를 가지고 예제를 진행하겠습니다! 와아아! 글쓸 맛 난다! 일단 Love2D에서 뭔가 그린다는...  
154 Lua 소코반: 목표 지점을 만들고, 상자가 모두 옮겨지면 게임을 끝내자! 노루발 754   2013-09-17 2013-09-17 08:33
-- 플레이어 위치를 저장하는 변수 -- 초기 시작지점은 5, 5로 설정. playerx = 5 playery = 5 -- 박스의 위치를 저장하는 배열. box = {} -- 박스 목표 지점의 위치를 저장하는 배열. goal = {} -- 움직인 횟수 저장 moves = 0 -- 맵 데이터를 저장하는 8*8의...  
153 Lua 소코반: 상자를 만들고 옮기고 상자와 상자가 겹치거나 상자와 벽이 겹치지 않게 해 보자! 노루발 677   2013-09-17 2013-09-17 08:32
-- 플레이어 위치를 저장하는 변수 -- 초기 시작지점은 5, 5로 설정. playerx = 5 playery = 5 -- 박스의 위치를 저장하는 배열. box = {} -- 움직인 횟수 저장 moves = 0 -- 맵 데이터를 저장하는 8*8의 2차원 배열 Map 생성 map = {} for a = 1, 8 do     ma...  
152 Lua 소코반: 벽을 뚫고 나가지 않게 해보자! 노루발 696   2013-09-17 2013-09-17 08:31
전체 코드입니다.슬슬 길어지니 요약글 기능이 필요해진달지.. -- 플레이어 위치를 저장하는 변수 -- 초기 시작지점은 5, 5로 설정. playerx = 5 playery = 5 -- 움직인 횟수 저장 moves = 0 -- 맵 데이터를 저장하는 8*8의 2차원 배열 Map 생성 map = {} for ...  
151 Lua 소코반: 플레이어를 그리고 움직이게 해보자 노루발 758   2013-09-17 2013-09-17 08:30
오늘자 전체 코드입니다. 어제처럼 바뀐 부분만 설명해 봅니다. -- 플레이어 위치를 저장하는 변수 -- 초기 시작지점은 5, 5로 설정. playerx = 5 playery = 5 -- 움직인 횟수 저장 moves = 0 -- 맵 데이터를 저장하는 8*8의 2차원 배열 Map 생성 map = {} for...  
150 Lua 소코반: 맵을 뿌리자. 노루발 833   2013-09-17 2013-09-17 08:29
-- 맵 데이터를 저장하는 8*8의 2차원 배열 Map 생성 map = {} for a = 1, 8 do     map[a] = {}     for b = 1, 8 do         map[a][b] = 0     end end -- 맵 데이터 초기화 map[1][1] = 1 map[1][2] = 1 map[1][3] = 1 map[1][4] = 1 map[1][5] = 1 map[1]...  
149 소코반: 맵을 초기화하자. 노루발 588   2013-09-17 2013-09-17 08:27
8*8 맵의 데이터가 담길 2차원 배열(테이블)을 초기화하는 코드이다. Map = {} for a = 1, 8 do     Map[a] = {}     for b = 1, 8 do         Map[a][b] = 0     end end Map 테이블의 [1][1]부터 [8][8]까지 모두 0이라는 값이 담기고 Map[0][0]이나 Map[1][...  
148 [Love2D] 일단 뭔가 해보자 노루발 457   2013-09-17 2013-09-17 08:27
감기를 딛고 다시 재기... Lua로 초 간단한 원시적인 게임을 만들려고 합니다. 뭐냐하면 소코반이라고, 이렇게 말하시면 모르지만 푸쉬푸쉬라면 아시는 분들이 엄청 많으실겁니다. 이걸 그래픽조차 씌우지 않은 아스키로. ########## #    ..      # #    o  o...  
147 Love2D: 콜백 함수들 노루발 538   2013-09-17 2013-09-17 08:25
Love의 콜백 함수들은 love.run(가장 메인이 되는 겁니다.)에 의해 호출되며, 많은 작업들을 수행합니다. 이것들이 없다고 게임이 실행되지 않는다거나 하지는 않지만 좋은 게임을 만들기 위해선 이것들을 적재적소에 활용해야 합니다. 이미 아시는 분들도 있...  
146 love.graphics.print 한국어 출력 노루발 431   2013-09-17 2013-09-17 08:24
Love2D 사용 시 한국어가 ㅁㅁㅁ이나 ??? 등으로 깨져 나와 해결책을 수소문하여 겨우 찾았다. 원래 중국어 등을 출력하기 위한 것이었으니 적절한 폰트를 쓴다면 한자나 히라가나등도 출력할 수 있을 것이다. function love.load() korfont = love.graphics....  
목록
쓰기