메뉴 건너뛰기

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

글 수 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
번호 제목 글쓴이 조회 수 추천 수 날짜 최근 수정일
» 이미지 그리는 방법: 2편. 부제: 쿼드! 노루발 821   2013-09-17 2013-09-17 08:37
(역시 이미지가 중요한 글인데 이미지가 모두 잘렸습니다. 문화재 손실에 슬픔을 표합니다.) Quad에 대해 알아본댔습니다. 쿼드? 쿼드가 뭐지? 생소한 개념인데? 하나의 큰 그림을 로드해서 쪼개서 쓰는 겁니다. 타일 깔듯이요. 우리가 포켓몬스터 같은 걸 하...  
144 이미지 그리는 방법 1편 노루발 812   2013-09-17 2013-09-17 08:35
이미지가 중요한 글인데 이미지가 다 짤렸네요. 압박. 준비물은 일단 이미지입니다. 예제 이미지로 럭키♥를 준비했습니다. 럭키! 럭키! 럭키! 와아아아! 어쨌든 이 럭키를 가지고 예제를 진행하겠습니다! 와아아! 글쓸 맛 난다! 일단 Love2D에서 뭔가 그린다는...  
143 Lua 소코반: 목표 지점을 만들고, 상자가 모두 옮겨지면 게임을 끝내자! 노루발 753   2013-09-17 2013-09-17 08:33
-- 플레이어 위치를 저장하는 변수 -- 초기 시작지점은 5, 5로 설정. playerx = 5 playery = 5 -- 박스의 위치를 저장하는 배열. box = {} -- 박스 목표 지점의 위치를 저장하는 배열. goal = {} -- 움직인 횟수 저장 moves = 0 -- 맵 데이터를 저장하는 8*8의...  
142 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...  
141 Lua 소코반: 벽을 뚫고 나가지 않게 해보자! 노루발 696   2013-09-17 2013-09-17 08:31
전체 코드입니다.슬슬 길어지니 요약글 기능이 필요해진달지.. -- 플레이어 위치를 저장하는 변수 -- 초기 시작지점은 5, 5로 설정. playerx = 5 playery = 5 -- 움직인 횟수 저장 moves = 0 -- 맵 데이터를 저장하는 8*8의 2차원 배열 Map 생성 map = {} for ...  
140 Lua 소코반: 플레이어를 그리고 움직이게 해보자 노루발 758   2013-09-17 2013-09-17 08:30
오늘자 전체 코드입니다. 어제처럼 바뀐 부분만 설명해 봅니다. -- 플레이어 위치를 저장하는 변수 -- 초기 시작지점은 5, 5로 설정. playerx = 5 playery = 5 -- 움직인 횟수 저장 moves = 0 -- 맵 데이터를 저장하는 8*8의 2차원 배열 Map 생성 map = {} for...  
139 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]...  
138 소코반: 맵을 초기화하자. 노루발 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][...  
137 [Love2D] 일단 뭔가 해보자 노루발 457   2013-09-17 2013-09-17 08:27
감기를 딛고 다시 재기... Lua로 초 간단한 원시적인 게임을 만들려고 합니다. 뭐냐하면 소코반이라고, 이렇게 말하시면 모르지만 푸쉬푸쉬라면 아시는 분들이 엄청 많으실겁니다. 이걸 그래픽조차 씌우지 않은 아스키로. ########## #    ..      # #    o  o...  
136 Love2D: 콜백 함수들 노루발 538   2013-09-17 2013-09-17 08:25
Love의 콜백 함수들은 love.run(가장 메인이 되는 겁니다.)에 의해 호출되며, 많은 작업들을 수행합니다. 이것들이 없다고 게임이 실행되지 않는다거나 하지는 않지만 좋은 게임을 만들기 위해선 이것들을 적재적소에 활용해야 합니다. 이미 아시는 분들도 있...  
135 love.graphics.print 한국어 출력 노루발 430   2013-09-17 2013-09-17 08:24
Love2D 사용 시 한국어가 ㅁㅁㅁ이나 ??? 등으로 깨져 나와 해결책을 수소문하여 겨우 찾았다. 원래 중국어 등을 출력하기 위한 것이었으니 적절한 폰트를 쓴다면 한자나 히라가나등도 출력할 수 있을 것이다. function love.load() korfont = love.graphics....  
134 Love2D를 사용하기 위한 Lua 강좌: 변수형 노루발 446   2013-09-17 2013-09-17 08:23
안녕하세요, 노루발입니다. 저번에 변수에 대해 다뤄보았습니다. 변수는 값을 담는 그릇이라고 했습니다. 그리고 루아는 변수 안에 있는 값이 숫자던 문자던 그냥 변수로 취급한다고 했고 "몇개를 살까요?" 라는 질문에 "ㄹ개" 라고 답할 수도 있다고 했습니...  
133 Love2D를 사용하기 위한 Lua 강좌: 코딩 스타일, 변수 노루발 585   2013-09-17 2013-09-17 08:22
안녕하세요, 노루발입니다. 어제는 Lua에 대해 대강 알아보고 입력과 출력을 다뤄봤습니다. 출력은 print([출력할 것]), 입력은 io.read()였습니다. 일단 본격적인 프로그램 작성에 앞서 Lua의 코딩 스타일에 대해 알아보겠습니다. 코드를 작성하는 것을 코딩...  
132 Love2D를 사용하기 위한 Lua 강좌: 입출력과 기본 노루발 704   2013-09-17 2013-09-17 08:21
Love2D 엔진은 Lua 기반이라 좋던 싫던 우리는 이미 Lua를 쓰고 있는 것입니다. 그래서 원활한 개발을 원한다면 Lua 언어를 알아두는 것이 좋습니다. 어 차피 Lua라는 게 알아먹기 쉽고 가벼우므로 게임 업게에 종사하는 디자이너 혹은 작가, 게임 디자이너가 ...  
131 Love2D? 개요, 설치, 실행. 노루발 464   2013-09-17 2013-09-17 08:20
love2d.org/Love2D 홈페이지. Lua로 2D 게임을 만드는 프레임워크입니다. 무료고, 오픈 소스이며, 윈도우, 맥, 리눅스에서 동작하며, 안드로이드에서 동작하게 하는 논의도 활발하다 합니다. 그럼 일단 받아봅시다. 아무리 좋아도 내 컴퓨터에 못 깔면 소용없...  
130 멘탈붕괴의 절정을 부르는 파일입출력 노루발 273   2013-09-17 2013-09-17 08:18
Love2D의 love.filesystem.load는 훼이크입니다. 파일을 로드하는 것 같지만 사실 lua 파일을 불러옴. love.filesystem.read도 그리 믿음직하지 못함. (고정 크기의 파일만 읽어옴) 우리가 믿을 수 있는 최후의 보루는 love.filesystem.lines 이었던 것입니다....  
129 [Lua] Split 노루발 361   2013-09-17 2013-09-17 08:16
상황을 가정해보자. 웹 서버에 부탁해서 유희왕 덱의 리스트를 가져왔다. 원문은 대략 이렇다고 가정하자.   셰이프스내치x3 모린팬x3 트렌트x3 ...    보기엔 이렇지만 이걸 가져오면 아래와 같이 뜰 것이다. (웹 서버니까 HTML로 줌) 셰이프스내치x3<br>모...  
128 love.update(dt) 에서 버벅이는 현상. 노루발 256   2013-09-17 2013-09-17 08:15
윈도우를 잡고 흔들거나 윈도우 사이로 잠시 전환하거나.. 등으로 원치 않는 렉이 발생할 시 dt의 값이 평소보다 크게 들어갑니다. (예를 들면, 평소에 0.25가 들어간다면 이번에는 3.1이 들어갑니다.) 이건 평소보다 더 많이 크기 때문에, dt를 가지고 타이...  
127 [Lua] 테이블 노루발 1422   2013-09-17 2013-09-17 08:13
이것은 Lua 문법입니다. Love2D와는 관계가 없습니다.  안녕하세요, 노루발입니다. 오늘은 테이블에 대해서 설명을 해보겠습니다.   테이블이란 쉽게 말해 변수를 묶은 겁니다. Lua상에서 뭔가 쌈빡하게 테이블을 쓰는 법도 있는 듯 하지만 저는 그냥 타 언어...  
126 cocos2d-x CCMenuItem 자신을 지웠을 때 생기는 에러 똥똥배 442   2013-09-13 2013-09-13 07:28
CCMenuItem으로 메뉴를 생성하고 타겟과 셀렉터를 정해서 그 명령 안에서 자신을 지우게 되었을 경우 activate() 안에서 에러가 발생한다. 아직 activate()를 실행해야 되는데 remove 당했기 때문에 생긴 문제인데, 구글에서 검색해 본 결과, https://github.c...  
목록
쓰기