2D게임에 이상한 외각선이 생겼을 때
게임을 개발하다 보면 완벽히 픽셀 아트로 제작할 경우에는 문제가 없지만 조금이라도 효과를 넣기 위해서
포토샵이나 다른 툴로 이미지에 알파 값이나 다른 값이 들어갈 경우 처음에는 눈치를 채지 못하고 있다가
어느 순간 이상한 외각선이 생겨 지저분한 곳이 어디인지 찾게 됩니다.
일반적으로 다시 이미지 파일을 체크하여 투명한 바탕이 되어 있음에도 왜 이상한 픽셀 외각선이 생기는지
알수가 없으며 아무리 검색을 해도 이 상황에 대한 이야기를 하지 않기에 혼자서 여러가지 시도를 한 후
알아낸 소소한 팁에 대해서 이야기 해볼까 합니다.
이상한 외각선이 생기는 이유
좀 전에도 이야기 했지만 Asprite나 Promotion이나 여러가지 픽셀 아트 툴을 사용할 경우 이런 문제가
거의 발생하지 않습니다. 하지만 포토샵에서 작업을 할 경우에는 레이어에 마스킹을 씌워 여러가지
이펙트를 넣어서 저장할 경우 보기에는 위와 같이 투명 배경으로 저장되기에 문제가 없어 보입니다.
하지만 게임 엔진에 가져와서 보면 이상한 외각선이 생겨있으며 이 때 빨리 눈치를 채고 수정을 해야 합니다.
여러가지 방법 중에 가장 편한 것으로 해결하기
흰색이나 검정색이나 투명 제거 툴로 쉽게 제거할만한 배경색을 레이어로 두고
함께 저장한 이후 다시 불러와 배경을 지우는 방식이 있으며 이미지의 배경을 만들기도 귀찮다면,
포토샵에서 내보내기 > 웹용으로 저장하기로 완벽한 2D 이미지로 저장하여 나중에 배경을 지우는 방식입니다.
다른 픽셀 아트 툴도 대부분 Export가 있음으로 활용하기.
이렇게 되면 숨겨져 있던 알파값이 제거되면서 깔끔한 외각선의 픽셀 이미지가 완성됩니다.
그런 문제가 아니라면?
각 게임 엔진에는 게임 옵션들이 존재하는데, 게임메이커 스튜디오2 기준으로 오른쪽 부분에
게임 옵션이 있고 Windows에서 그래픽 그리고 픽셀 간 색상 보간이나 동기화를 사용하여 화면 찢김 방지등
옵션을 활용하는 방식이 있습니다. 뭉개지는 현상이나 윈도우에서 전체화면 같은 변화에 이 옵션으로
대부분 해결이 가능합니다.
이 문제도 아니라면, 픽셀에 대한 이해를 해야 하는데…
다양한 픽셀 깨짐 현상에 대해서
[픽셀 외곽선이 흐릿해지는 현상 (Blurring)]
가장 흔한 문제입니다. 픽셀의 경계가 뚜렷하지 않고 안개가 낀 것처럼 흐릿하게 보입니다.
원인: 게임메이커의 기본 설정인 ‘안티앨리어싱(Interpolation)’이 켜져 있기 때문입니다.
이는 이미지를 부드럽게 만들기 위해 픽셀 사이를 뭉개는 기능인데, 픽셀 아트에서는 치명적입니다.
해결책:
Game Options -> Windows (또는 타겟 플랫폼) -> Graphics로 이동합니다.
Interpolate colors between pixels 옵션을 체크 해제합니다.
코드로 제어하려면 gpu_set_texfilter(false);를 사용하세요.
[픽셀 크기가 제각각인 현상 (Pixel Distortion/Jitter)]
어떤 픽셀은 가로로 길고, 어떤 픽셀은 세로로 길어 보이는 현상입니다. 캐릭터가 이동할 때 미세하게 떨리는 느낌이 듭니다.
원인: **뷰포트(Viewport)**와 **카메라(Camera)**의 해상도 비율이 실제 모니터 출력 해상도와 정수 배율로 맞지 않을 때 발생합니다.
해결책:
정수 배율 유지: 게임의 해상도가 320×180이라면, 창 크기는 640×360, 1280×720처럼 정확히 2배, 4배가 되어야 합니다.
Application Surface 크기 조절: 화면을 그리는 도화지인 application_surface의 크기를 실제 해상도에 맞게 고정하세요.
// 화면 크기를 조절하는 오브젝트의 Create 이벤트
var base_w = 320;
var base_h = 180;
surface_resize(application_surface, base_w, base_h);
[타일셋 사이의 선(틈새) 현상 (Tile Bleeding)]
타일과 타일 사이에 의도치 않은 선이 생기거나 옆 타일의 색상이 1픽셀 정도 섞여 나오는 현상입니다.
원인: 텍스처 페이지 내에서 타일들이 너무 붙어 있어, 그래픽 카드가 렌더링할 때 옆 타일의 픽셀을 참조하기 때문입니다.
해결책:
타일셋 설정: 타일셋 에디터에서 Output Border 값을 최소 2 이상으로 설정하세요.
Texture Page 설정: 도구 모음의 Game Options에서 Texture Pages의 Edge Filtering을 확인하고, 필요하다면
타일 주위에 여백을 주는 설정을 사용하세요.
[소수점 좌표 이동으로 인한 깨짐 (Sub-pixel Positioning)]
오브젝트가 x = 10.5 처럼 소수점 좌표에 위치할 때 픽셀이 뭉개져 보입니다.
원인: 모니터는 0.5픽셀을 표현할 수 없으므로, 게임 엔진이 이를 강제로 표현하려다 픽셀이 왜곡됩니다.
해결책:
그릴 때만 반올림: 이동 계산은 소수점으로 하되, 화면에 그릴 때만 정수로 변환합니다.
// Draw 이벤트
draw_sprite(sprite_index, image_index, round(x), round(y));
카메라 반올림: 카메라가 오브젝트를 따라갈 때 카메라의 좌표도 floor()나 round()를 사용하여 정수 위치에 두어야 합니다.
[스프라이트 회전 및 스케일 왜곡]
스프라이트를 회전(image_angle)시키거나 크기를 조절(image_xscale)할 때 픽셀이 계단처럼 심하게 깨집니다.
원인: 낮은 해상도에서 픽셀을 회전시키면 원래의 격자 구조에서 벗어나기 때문입니다.
해결책:
고해상도 캔버스 기법: 게임 자체는 저해상도로 연산하되, application_surface를 모니터 해상도(예: 1920×1080)만큼
크게 잡고 그립니다. 이렇게 하면 회전할 때 더 세밀한 픽셀 표현이 가능해져 부드럽게 보입니다.
픽셀 퍼펙트 셰이더: 회전 시 발생하는 왜곡을 보정해주는 셰이더를 사용합니다.
마치며
픽셀은 의외로 다루기가 어려우며 색상을 많이 쓴 부드러운 픽셀 아트가 아닌 경우 쉽게 깨짐 현상이나
뭉개짐 혹은 이상한 외각선이나 점 하나로도 그래픽이 이상해 보입니다. 그렇기에 위에 나온 소소한 팁들을
활용하여 적당한 타협을 하며 만들어야 합니다. 참고로 이 이상 지식이 없으니 여기에 나온 내용 외에는
저도 모릅니다…
[유용한 정보 링크 : 영어]
https://forum.gamemaker.io/index.php?threads/how-to-properly-scale-your-game.995/
