렌파이에서 그림을 적극 활용하거나 게임을 꾸미려면 렌파이에서는 위치를 어떻게 나타내는지 알아야합니다.
위치를 나타내는 법은 사실 렌파이 튜토리얼 게임에 전부 나와있습니다. 그래서 이곳에는 튜토리얼 게임의 내용을 정리해서 적어두려고 합니다.
그러니까 -123, 0, 50 은 정수고, 0.5, 0.234, -0.4는 부동소수점수2입니다.
위치를 나타낼 때 정수를 적으면 그 수는 절대 좌표를 가리킵니다. 그러니까 100이라고 적으면 100 만큼의 위치를 가리킵니다.
부동소수점수를 적으면 그 수는 특정 그림이나 게임 화면에 대한 비율로 인식됩니다. 0.5라 적으면 5/10, 즉 1/2의 비율을 가리키게 됩니다.
예를 들어봅시다. 그림의 왼쪽 변에서 오른쪽으로 100픽셀만큼 떨어진 위치라고 하면 어떤 그림에서든지 똑같이 오른쪽으로 100픽셀 떨어진 위치를 가리킬 것입니다. 그러나 그림 왼쪽에서 가로길이의 절반정도 오른쪽으로 떨어진 위치, 즉 0.5만큼 떨어진 위치는 각 그림의 가로길이에 따라 달라지게 됩니다. 가로길이가 300픽셀인 그림에서 0.5는 150을, 500인 그림에서는 250을 가리키게 되는 것입니다.
위치값의 단위는 모두 픽셀입니다. 부동소수점은 비율을 뜻하기 때문에 0.5은 해당 영역에서의 비율을 계산하고 나온 값이 픽셀 단위입니다.
그림은 클릭해서 봐주세요;
xpos 값을 올리면, 그러니까 0보다 큰 값을 가지면 xpos 가 가리키는 위치는 오른쪽으로 이동하게 됩니다. 그림에 표시한 부분은 xpos 값이 0.5 로, 이는 화면 가로 길이의 절반에 위치해있다는 것을 뜻합니다.
xpos 값이 1.0 이 되면 오른쪽 끝을 가리키게 됩니다.
0.5나 1.0같은 비율 외에도 물론 정수를 적어 절대위치를 줄 수 있습니다. 위에서 사용하는 게임 화면은 가로 길이가 800픽셀이니까, xpos 를 400으로 적으면 화면 가운데를 가리키게 됩니다.
y축 위치, 그러니까 세로도 마찬가지로 작동합니다. 현재는 xpos값만 바뀌었을 뿐 ypos 는 0.0 그대로입니다. 즉 화면 맨 위쪽을 가리키는 것입니다.
여기는 ypos 값을 .5로 바꾸었을 때의 위치입니다.
화면 맨 밑바닥은 ypos 1.0 으로 나타냅니다. 대사창에 가려져서 잘 보이지는 않습니다만..
ypos 값도 xpos처럼 정수로 줄 수 있습니다. 위에서 게임 화면의 세로 길이가 600이니까 정수로 밑바닥을 가리키려면 600을 적으면 됩니다.
정확한 픽셀값을 몰라도 대략의 위치를 알면 부동소수점으로 위치를 정할 수 있습니다. 위 화면에서 정확한 픽셀값은 바로 알 수는 없지만 부동소수점 값으로 대략 짐작할 수는 있습니다. 스크린샷에 빨간 십자로 표시된 저 곳은 xpos .75, ypos .25 입니다.
예를 들어 아이린의 그림을 보시면 현재 그림에서 표시된 곳, 그러니까 왼쪽 위 구석은 xanchor 와 yanchor 가 0.0 값입니다. 위치 가리킬 때와 마찬가지로 기준점 정할 때의 원점 역시 왼쪽 위가 됩니다.
xanchor 를 1.0 으로 정하면 기준점이 그림의 오른쪽 모서리라는 이야기가 됩니다.
위치 정할 때와 마찬가지로 xanchor 와 yanchor 가 둘 다 1.0값을 가지면 그림의 오른쪽 아래 모서리로 이동합니다.
그 두 값을 정해주면 기준점과 위치가 화면상의 같은 점에 있게 됩니다.
기준점과 위치를 왼쪽 위 모서리로 지정하면, 그러니까 그림에 xpos, ypos, xanchor, yanchor 네 값 모두를 0 으로 지정하면 그림은 게임 화면의 왼쪽 위 모서리에 놓이게 됩니다.
따라서 위치와 기준점값을 적절하게 정하면 그림의 크기를 몰라도 화면에서 원하는 위치에 그림을 놓을 수 있습니다.
이미지를 가운데로 정렬하고 싶을 때는 위치와 기준점 값을 똑같이 정해야 합니다. 그림의 가운데를 기준점으로 하고, 화면의 가운데에 그림이 나타내도록 하려면 네 값을 모두 .5 로 지정해줘야하니 말입니다. 혹은 가로선 상의 가운데나 세로선 상의 가운데에 놓으려면 xpos 와 xanchor 를, ypos 와 yanchor 값을 .5로 맞춰야 합니다. 이런 때처럼 간혹 pos와 anchor값을 똑같이 줘야 할 때가 있는데, 이 때는 align 을 이용하면 됩니다.
예를 들어 xalign 을 0.0으로 하면 그림은 게임 화면의 왼쪽에 딱 달라붙어 나타납니다. xalign 을 1.0으로 하면 그림은 게임 화면 오른쪽으로 가게 됩니다. .5로 하면 화면 가운데로 오겠고요.
yalign 도 마찬가지입니다. 이 때는 세로 방향의 위치와 기준점을 똑같이 정하는 것만 다를 뿐이지요.
xalign 은 xpos 와 xanchor 값만을 일치시키고, yalign은 ypos 와 yanchor 값만을 일치시킵니다.
위치 정하는 법을 전부 이해했다면 이제는 ATL 등을 이용하여 그림에 움직임을 줄 수 있습니다.
마찬가지로 ypos -10은 화면 위로 10 픽셀을 가리킵니다. 부동소수점수로 위치를 정할 때도 방식은 같습니다.
좀 더 정확히 말하면 위치가 음수값이 되면 anchor 로 정한 기준점에서 왼쪽으로 위치를 정하게 됩니다.
xanchor, yanchor 값는 기본값이 0입니다. 특별히 설정하지 않는다면 맨 처음에 말 한 왼쪽 위 모서리 구석이 기준점으로 쓰인다는 얘기입니다. 필요에 따라 anchor로 기준점을 설정하면 됩니다.
위치를 나타내는 법은 사실 렌파이 튜토리얼 게임에 전부 나와있습니다. 그래서 이곳에는 튜토리얼 게임의 내용을 정리해서 적어두려고 합니다.
숫자
위치는 숫자로 나타내는데, 이 때 사용되는 숫자의 종류는 두 가지입니다. 하나는 정수, 다른 하나는 부동소수점수입니다. 정수는 아시다시피 -1, 0, 1처럼 부호와 0부터 9까지의 숫자로 이루어진 수입니다. 부동소수점수란 소수점이 있는 수를 가리킵니다.1그러니까 -123, 0, 50 은 정수고, 0.5, 0.234, -0.4는 부동소수점수2입니다.
위치를 나타낼 때 정수를 적으면 그 수는 절대 좌표를 가리킵니다. 그러니까 100이라고 적으면 100 만큼의 위치를 가리킵니다.
부동소수점수를 적으면 그 수는 특정 그림이나 게임 화면에 대한 비율로 인식됩니다. 0.5라 적으면 5/10, 즉 1/2의 비율을 가리키게 됩니다.
예를 들어봅시다. 그림의 왼쪽 변에서 오른쪽으로 100픽셀만큼 떨어진 위치라고 하면 어떤 그림에서든지 똑같이 오른쪽으로 100픽셀 떨어진 위치를 가리킬 것입니다. 그러나 그림 왼쪽에서 가로길이의 절반정도 오른쪽으로 떨어진 위치, 즉 0.5만큼 떨어진 위치는 각 그림의 가로길이에 따라 달라지게 됩니다. 가로길이가 300픽셀인 그림에서 0.5는 150을, 500인 그림에서는 250을 가리키게 되는 것입니다.
전제
무언가를 어디에 놓는다, 위치시킨다고 할 때 어디에는 보통 게임 화면의 특정 위치를 가리킵니다.위치값의 단위는 모두 픽셀입니다. 부동소수점은 비율을 뜻하기 때문에 0.5은 해당 영역에서의 비율을 계산하고 나온 값이 픽셀 단위입니다.
그림은 클릭해서 봐주세요;
위치 Position
게임 화면에 맨 위 왼쪽 모서리는 보통 거리 계산이 시작되는 곳입니다. 좌표로 따지면 원점입니다. 좌표에서 가로는 x, 세로는 y로 나타냈듯이 게임화면에서도 가로 위치는 x position, 세로 선상의 위치는 y position 이라고 합니다. 각각 줄여서 xpos , ypos 라고 적습니다. 그리고 맨 위 왼쪽 구석이 원점이라 했으니 xpos 와 ypos 값은 이 위치에서는 0이 됩니다.
xpos
xpos 값을 올리면, 그러니까 0보다 큰 값을 가지면 xpos 가 가리키는 위치는 오른쪽으로 이동하게 됩니다. 그림에 표시한 부분은 xpos 값이 0.5 로, 이는 화면 가로 길이의 절반에 위치해있다는 것을 뜻합니다.
xpos 값이 1.0 이 되면 오른쪽 끝을 가리키게 됩니다.
0.5나 1.0같은 비율 외에도 물론 정수를 적어 절대위치를 줄 수 있습니다. 위에서 사용하는 게임 화면은 가로 길이가 800픽셀이니까, xpos 를 400으로 적으면 화면 가운데를 가리키게 됩니다.
ypos
y축 위치, 그러니까 세로도 마찬가지로 작동합니다. 현재는 xpos값만 바뀌었을 뿐 ypos 는 0.0 그대로입니다. 즉 화면 맨 위쪽을 가리키는 것입니다.
여기는 ypos 값을 .5로 바꾸었을 때의 위치입니다.
화면 맨 밑바닥은 ypos 1.0 으로 나타냅니다. 대사창에 가려져서 잘 보이지는 않습니다만..
ypos 값도 xpos처럼 정수로 줄 수 있습니다. 위에서 게임 화면의 세로 길이가 600이니까 정수로 밑바닥을 가리키려면 600을 적으면 됩니다.
정확한 픽셀값을 몰라도 대략의 위치를 알면 부동소수점으로 위치를 정할 수 있습니다. 위 화면에서 정확한 픽셀값은 바로 알 수는 없지만 부동소수점 값으로 대략 짐작할 수는 있습니다. 스크린샷에 빨간 십자로 표시된 저 곳은 xpos .75, ypos .25 입니다.
기준점 Anchor
무언가를 어디에 놓을 때 염두해야 할 두 번째 위치는 기준점입니다. 기준점이란 무언가가 xpos, ypos 에 놓일 때 기준이 되는 부분을 뜻합니다. 다시 말하자면 xpos, ypox 의 위치에 그림을 놓을 때 그림의 기준점으로 지정한 픽셀이 xpo와 ypos 로 정해준 위치와 일치하는 곳에 놓인다는 뜻입니다.예를 들어 아이린의 그림을 보시면 현재 그림에서 표시된 곳, 그러니까 왼쪽 위 구석은 xanchor 와 yanchor 가 0.0 값입니다. 위치 가리킬 때와 마찬가지로 기준점 정할 때의 원점 역시 왼쪽 위가 됩니다.
xanchor 를 1.0 으로 정하면 기준점이 그림의 오른쪽 모서리라는 이야기가 됩니다.
위치 정할 때와 마찬가지로 xanchor 와 yanchor 가 둘 다 1.0값을 가지면 그림의 오른쪽 아래 모서리로 이동합니다.
그림을 화면에 놓기
그 두 값을 정해주면 기준점과 위치가 화면상의 같은 점에 있게 됩니다.
기준점과 위치를 왼쪽 위 모서리로 지정하면, 그러니까 그림에 xpos, ypos, xanchor, yanchor 네 값 모두를 0 으로 지정하면 그림은 게임 화면의 왼쪽 위 모서리에 놓이게 됩니다.
따라서 위치와 기준점값을 적절하게 정하면 그림의 크기를 몰라도 화면에서 원하는 위치에 그림을 놓을 수 있습니다.
정렬 align
이미지를 가운데로 정렬하고 싶을 때는 위치와 기준점 값을 똑같이 정해야 합니다. 그림의 가운데를 기준점으로 하고, 화면의 가운데에 그림이 나타내도록 하려면 네 값을 모두 .5 로 지정해줘야하니 말입니다. 혹은 가로선 상의 가운데나 세로선 상의 가운데에 놓으려면 xpos 와 xanchor 를, ypos 와 yanchor 값을 .5로 맞춰야 합니다. 이런 때처럼 간혹 pos와 anchor값을 똑같이 줘야 할 때가 있는데, 이 때는 align 을 이용하면 됩니다.
예를 들어 xalign 을 0.0으로 하면 그림은 게임 화면의 왼쪽에 딱 달라붙어 나타납니다. xalign 을 1.0으로 하면 그림은 게임 화면 오른쪽으로 가게 됩니다. .5로 하면 화면 가운데로 오겠고요.
yalign 도 마찬가지입니다. 이 때는 세로 방향의 위치와 기준점을 똑같이 정하는 것만 다를 뿐이지요.
xalign 은 xpos 와 xanchor 값만을 일치시키고, yalign은 ypos 와 yanchor 값만을 일치시킵니다.
위치 정하는 법을 전부 이해했다면 이제는 ATL 등을 이용하여 그림에 움직임을 줄 수 있습니다.
7.FAQ
정수나 부동소수점수를 음수로 정하면 어떻게 되나요.
xpos 10은 화면 왼쪽 변에서 오른쪽으로 10 픽셀 떨어진 곳이지만, xpos -10 은 왼쪽으로 10 픽셀 떨어진 곳을 가리킵니다.마찬가지로 ypos -10은 화면 위로 10 픽셀을 가리킵니다. 부동소수점수로 위치를 정할 때도 방식은 같습니다.
좀 더 정확히 말하면 위치가 음수값이 되면 anchor 로 정한 기준점에서 왼쪽으로 위치를 정하게 됩니다.
pos로 이미지를 배치할 때마다 anchor로 기준점을 매번 정해야 하나요.
xanchor, yanchor 값는 기본값이 0입니다. 특별히 설정하지 않는다면 맨 처음에 말 한 왼쪽 위 모서리 구석이 기준점으로 쓰인다는 얘기입니다. 필요에 따라 anchor로 기준점을 설정하면 됩니다.
