창작에 관련된 질문이나 간단한 팁, 예제를 올리는 곳
이미지 그리는 방법 1편
노루발이미지가 중요한 글인데 이미지가 다 짤렸네요. 압박.
준비물은 일단 이미지입니다.
예제 이미지로 럭키♥를 준비했습니다.
럭키! 럭키! 럭키! 와아아아!
어쨌든 이 럭키를 가지고 예제를 진행하겠습니다! 와아아! 글쓸 맛 난다!
일단 Love2D에서 뭔가 그린다는 건 좌표입니다.
저번의 배열에서 [y][x]로 처리했던것과 달리 이번엔 진짜 (x, y)꼴입니다.
와아아!
이런 럭키가 있으면 럭키의 x는 30, y는 10이 됩니다.
x 30, y 10에 그리면 저렇게 그려지는 겁니다.
(어쩐지 위키에 있는 그림이랑 똑같이 그려졌지만 럭키가 있으니 이쪽을 쓰겠습니다.)
하지만 파일이 있다고 바로 그릴 수 있는 게 아닙니다.
파일을 먼저 불러와야 합니다.
이것을 love.graphics.newImage로 불러옵니다.
[이미지] = love.graphics.newImage([파일경로])
[이미지] 부분에는 불러온 이미지를 식별할 수 있는 이름을,
[파일경로]에는 파일의 경로를 넣습니다.
Love2D의 main.lua와 같은 경로에 있으면 파일 이름만 적어도 됩니다.
이것을 유식한 말로 상대경로라고 합니다.
저는 pokemon이라는 이미지를 생성해보겠습니다.
pokemon = love.graphics.newImage("lucky.png")
공 식 위키에 따르면, 여러 번 실행되는 콜백(뭔지는 다뤘죠?)에서 저런 짓을 하면 상당히 게임이 느려진다고 합니다. 그러니까 그냥 한번만 불러온 뒤 (love.load 같은 콜백에서요!) 나중에 여러 번 호출하는 것이 훨씬 더 효율적이겠죠.
love.update나 love.draw같은 콜백에는 넣지 맙시다.
예제 코드:
function love.load()
pokemon = love.graphics.newImage("lucky.png")
end
이미지를 불러왔으니 이제 그릴 수 있습니다.
이미지를 그리는 것은 보통 love.draw 콜백에서 하게 됩니다.
love.graphics.draw(drawable, x, y, r, sx, sy, ox, oy, kx, ky) <br />
이게 뭔 개소리야?!
하나하나 뜯어봅시다.
Lua 글에서 설명했듯, 괄호 안에는 인수가 들어갑니다.
저기에 넣는 값에 따라 어떻게 그려질지가 달라지겠지요.
drawable는 그릴 수 있는 것이니, 이미지가 되겠네요.
방금 생성한 이미지 (예제에서는 pokemon)를 넣어주면 되겠습니다.
x랑 y는 뭔지 감이 잡히지 않습니까? 그림이 어디에 그려질지를 넣어주면 됩니다.
위의 그림이라면 x가 30이고 y가 10이겠지요.
r은 뭘까요? 회전시키는 겁니다.
그냥 그리고 싶을 때는 0을 넣습니다.
love.graphics.draw(pokemon, 100, 100, 0, 1, 1, 0, 0, 0, 0)
모르는 건 그냥 다 눈치껏 넣었을 때 어떻게 그려지냐면..
그럼 회전이니까 30도 돌리고 싶으면 어떻게 하나요? 30 넣으면 되나요?
위키에 조건이 있네요, 라디안으로 넣어달라고 합니다. 그게 뭐죠? 우걱우걱?
그래서 그냥 위키의 예제를 배껴서 math.rad(30) 를 넣었습니다.
love.graphics.draw(pokemon, 100, 100, math.rad(30), 1, 1, 0, 0, 0, 0)
얍.
주의할 점(?)은.. 기울어지면 좌표도 같이 기울어지는 듯 합니다.
90을 넣었더니 90도로 기울어지면서 아주 좌측의 창 테두리에 달라붙어 버리는 현상이;;
좀 더 파보면 좋겠지만 귀찮아서 생략,
sx랑 sy의 s는 scale의 약자입니다.
크기 조절!
기본값은 1이며, 넣은 만큼 크기가 줄어나거나 늘어듭니다.
0.5를 넣으면 반으로 줄어들고, 2를 넣으면 두배로 커집니다.
sx와 sy가 같을 필요는 없으며, 음수가 들어가면 그 쪽으로 잡아당겨서 커집니다.
그러니까.. -2를 넣으면 반으로 줄어드는 게 아니라 2배로 커지는데 좌표가 이동하면서 커집니다.
직접 한번 여러가지 해 보세요,
love.graphics.draw(pokemon, 100, 100, 0, 0.5, 1, 0, 0, 0, 0)
(가로를 반으로 축소)
love.graphics.draw(pokemon, 100, 100, 0, 1, 2, 0, 0, 0, 0)
(세로를 2배로 확대)
여담이지만 게임 엔진의 편리함을 몸으로 체험하고 있습니다.
빌려온 '세가의 신입 사원 교육 과정에서 배우는 게임 프로그래밍의 정석' 에서는 이미지의 확대, 축소, 회전을 큰 비중으로 다루고 있는데 엔진을 쓰면 코드 한 줄 쓰면 끝입니다.
얼핏 보니 회전을 다룰 때 삼각함수를 썼던가... 하지만 엔진을 쓰면 복잡한 수학은 그리 필요 없습니다.
하지만 엔진을 써도 어떻게 돌아가는지 원리는 알아야 합니다.
아니면, 엔진이 문제를 일으키면 속수무책이 되어버리던지, 엔진이 아직 없는 새로운 플랫폼에서 뭔가 개발하려면 무능해진다던지 하는 문제가 생깁니다.
ox와 oy는 뭘까요?
o는 아마 Origin, 시초? 뭐 그런 뜻입니다.
어디서부터 그릴지를 알려주는 것이라고 할 수 있습니다.
(위 그림은 예를 위해 그린 그림으로 실제 픽셀수와는 다릅니다.)
ox가 20, oy가 20이라면 그림의 20, 20 되는 점에서부터 그리기를 시작한다는 것입니다.
결과적으로 저렇게 잘린 럭키 이미지를 그리게 되는 것입니다.
이것만으로 '이미지를 다 그리게 되었다!' 라고 생각하면 좋겠지만...
타일 처리(뭔지는 나중에 설명해 드리겠습니다.)와 같은 것을 하기에는 아직 모자랍니다.
그래서 좀 더 찾아봤더니 Quad라는 것이 있는 고로 다음부터는 그 이야기를 해보겠습니다.
이미지 그리는 방법 2편, 기다려 주세요.
다음에는 Quad에 대해 파 보고, Quad가 뭔지, 어떻게 쓰는지 알아보겠습니다.
그리고는 Lua 소코반을 그래픽으로 옮기겠습니다... 모든 계획이 순조롭게 진행된다면요.
요약:
- Love2D에서 이미지를 그리기 전에 먼저 불러와야 한다.
- 불러오는 방법은 [이미지] = love.graphics.newImage([파일경로])
- 이미지를 그리기 위해서는 love.graphics.draw(drawable, x, y, r, sx, sy, ox, oy, kx, ky) .
- 일반적인 경우에 drawable, x, y만 지정해주고 sx, sy는 1, 나머지 인수는 다 0으로 지정해준다.
- 적절한 경우에 적절한 인수들을 적절히 사용하면 적절한 효과를 낼 수 있으며 이것을 적절히 사용하면 적절히 도움이 된다.