메뉴 건너뛰기

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

글 수 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 최근 수정일
65 cocos2d-x 외부파일을 이용한 한글 처리 [1] 똥똥배 1938   2013-07-08 2013-09-13 07:29
cocos2d-x에서는 한글을 그냥 출력하려고 하면 깨져서 나온다. 이유는 VS 편집기에서는 ANSI코드 한글을 사용하는데, cocos2d-x에서 문자는 UTF-8 형식을 쓰기 때문이다. 이것을 해결하는 간단한 방법은 wchar_t wmsg[] = L"한글"; char msg[128]; WideChar...  
64 QT 프로젝트 배포에 필요한 거 똥똥배 602   2013-07-11 2013-07-11 04:25
일단 빌드한 EXE와 리소스 파일은 당연히 필요할 테고, 그 다음으로, QtCore4.dll QtGui4.dll 파일이 필요하다. 디버그 모드라면 QtCored4.dll, QtGuid4.dll 가 필요하겠지만, 디버그 모드를 배포할 생각은 아닐 것이므로 필요없을 듯. 하지만 이것만으로 끝난...  
63 cocos2d-x에서 schedule_selector 정의 변화 [1] 똥똥배 521   2013-08-19 2013-09-13 07:28
예전에 적은 글에는 터치와 업데이트를 활성화 시키는 법을 적어놨다. http://hondoom.com/zbxe/index.php?mid=study&document_srl=385031 이글은 cocos2d-1.0.1-x-0.9.1를 기준으로 적은 글인데, 최신버전으로 오면서 update의 정의에 대해서 변화가 생겼...  
62 cocos2d-x 게임을 iOS에 이식할 때 생기는 문제들 똥똥배 543   2013-08-26 2013-09-13 07:28
1. 윈도우 한정 명령어는 사용할 수 없다. 너무도 당연한 문제. 2. 한글 인코딩 문제 최신 VS을 사용하면 겪지 않을 문제일지 모르겠지만, 보통은 h나 cpp를 ANISI형식 문서로 만들 것이다. XCode에서는 Unicode나 UTF-8 형식을 쓰므로 소스에 박아둔 한글은 ...  
61 cocos2d-x Clipping Layer 수정 똥똥배 670   2013-09-10 2013-09-13 07:28
흔히 구글에서 찾아보면 다음과 같은 Clipping Layer 소스를 찾을 수 있다. CCEGLView::sharedOpenGLView()->setScissorInPoints( // scissorRect is the rectangle you want to show. clippingRegion.origin.x + getPosition().x, clippingRegion.origin.y + ...  
60 cocos2d-x CCMenuItem 자신을 지웠을 때 생기는 에러 똥똥배 442   2013-09-13 2013-09-13 07:28
CCMenuItem으로 메뉴를 생성하고 타겟과 셀렉터를 정해서 그 명령 안에서 자신을 지우게 되었을 경우 activate() 안에서 에러가 발생한다. 아직 activate()를 실행해야 되는데 remove 당했기 때문에 생긴 문제인데, 구글에서 검색해 본 결과, https://github.c...  
59 [Lua] 테이블 노루발 1422   2013-09-17 2013-09-17 08:13
이것은 Lua 문법입니다. Love2D와는 관계가 없습니다.  안녕하세요, 노루발입니다. 오늘은 테이블에 대해서 설명을 해보겠습니다.   테이블이란 쉽게 말해 변수를 묶은 겁니다. Lua상에서 뭔가 쌈빡하게 테이블을 쓰는 법도 있는 듯 하지만 저는 그냥 타 언어...  
58 love.update(dt) 에서 버벅이는 현상. 노루발 256   2013-09-17 2013-09-17 08:15
윈도우를 잡고 흔들거나 윈도우 사이로 잠시 전환하거나.. 등으로 원치 않는 렉이 발생할 시 dt의 값이 평소보다 크게 들어갑니다. (예를 들면, 평소에 0.25가 들어간다면 이번에는 3.1이 들어갑니다.) 이건 평소보다 더 많이 크기 때문에, dt를 가지고 타이...  
57 [Lua] Split 노루발 361   2013-09-17 2013-09-17 08:16
상황을 가정해보자. 웹 서버에 부탁해서 유희왕 덱의 리스트를 가져왔다. 원문은 대략 이렇다고 가정하자.   셰이프스내치x3 모린팬x3 트렌트x3 ...    보기엔 이렇지만 이걸 가져오면 아래와 같이 뜰 것이다. (웹 서버니까 HTML로 줌) 셰이프스내치x3<br>모...  
56 멘탈붕괴의 절정을 부르는 파일입출력 노루발 273   2013-09-17 2013-09-17 08:18
Love2D의 love.filesystem.load는 훼이크입니다. 파일을 로드하는 것 같지만 사실 lua 파일을 불러옴. love.filesystem.read도 그리 믿음직하지 못함. (고정 크기의 파일만 읽어옴) 우리가 믿을 수 있는 최후의 보루는 love.filesystem.lines 이었던 것입니다....  
55 Love2D? 개요, 설치, 실행. 노루발 465   2013-09-17 2013-09-17 08:20
love2d.org/Love2D 홈페이지. Lua로 2D 게임을 만드는 프레임워크입니다. 무료고, 오픈 소스이며, 윈도우, 맥, 리눅스에서 동작하며, 안드로이드에서 동작하게 하는 논의도 활발하다 합니다. 그럼 일단 받아봅시다. 아무리 좋아도 내 컴퓨터에 못 깔면 소용없...  
54 Love2D를 사용하기 위한 Lua 강좌: 입출력과 기본 노루발 706   2013-09-17 2013-09-17 08:21
Love2D 엔진은 Lua 기반이라 좋던 싫던 우리는 이미 Lua를 쓰고 있는 것입니다. 그래서 원활한 개발을 원한다면 Lua 언어를 알아두는 것이 좋습니다. 어 차피 Lua라는 게 알아먹기 쉽고 가벼우므로 게임 업게에 종사하는 디자이너 혹은 작가, 게임 디자이너가 ...  
53 Love2D를 사용하기 위한 Lua 강좌: 코딩 스타일, 변수 노루발 585   2013-09-17 2013-09-17 08:22
안녕하세요, 노루발입니다. 어제는 Lua에 대해 대강 알아보고 입력과 출력을 다뤄봤습니다. 출력은 print([출력할 것]), 입력은 io.read()였습니다. 일단 본격적인 프로그램 작성에 앞서 Lua의 코딩 스타일에 대해 알아보겠습니다. 코드를 작성하는 것을 코딩...  
52 Love2D를 사용하기 위한 Lua 강좌: 변수형 노루발 446   2013-09-17 2013-09-17 08:23
안녕하세요, 노루발입니다. 저번에 변수에 대해 다뤄보았습니다. 변수는 값을 담는 그릇이라고 했습니다. 그리고 루아는 변수 안에 있는 값이 숫자던 문자던 그냥 변수로 취급한다고 했고 "몇개를 살까요?" 라는 질문에 "ㄹ개" 라고 답할 수도 있다고 했습니...  
51 love.graphics.print 한국어 출력 노루발 431   2013-09-17 2013-09-17 08:24
Love2D 사용 시 한국어가 ㅁㅁㅁ이나 ??? 등으로 깨져 나와 해결책을 수소문하여 겨우 찾았다. 원래 중국어 등을 출력하기 위한 것이었으니 적절한 폰트를 쓴다면 한자나 히라가나등도 출력할 수 있을 것이다. function love.load() korfont = love.graphics....  
50 Love2D: 콜백 함수들 노루발 538   2013-09-17 2013-09-17 08:25
Love의 콜백 함수들은 love.run(가장 메인이 되는 겁니다.)에 의해 호출되며, 많은 작업들을 수행합니다. 이것들이 없다고 게임이 실행되지 않는다거나 하지는 않지만 좋은 게임을 만들기 위해선 이것들을 적재적소에 활용해야 합니다. 이미 아시는 분들도 있...  
49 [Love2D] 일단 뭔가 해보자 노루발 457   2013-09-17 2013-09-17 08:27
감기를 딛고 다시 재기... Lua로 초 간단한 원시적인 게임을 만들려고 합니다. 뭐냐하면 소코반이라고, 이렇게 말하시면 모르지만 푸쉬푸쉬라면 아시는 분들이 엄청 많으실겁니다. 이걸 그래픽조차 씌우지 않은 아스키로. ########## #    ..      # #    o  o...  
48 소코반: 맵을 초기화하자. 노루발 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][...  
47 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]...  
46 Lua 소코반: 플레이어를 그리고 움직이게 해보자 노루발 758   2013-09-17 2013-09-17 08:30
오늘자 전체 코드입니다. 어제처럼 바뀐 부분만 설명해 봅니다. -- 플레이어 위치를 저장하는 변수 -- 초기 시작지점은 5, 5로 설정. playerx = 5 playery = 5 -- 움직인 횟수 저장 moves = 0 -- 맵 데이터를 저장하는 8*8의 2차원 배열 Map 생성 map = {} for...  
목록
쓰기