게임 개발 · 기술 동향미로의 개발노트
카테고리

Pixora

외곽선에도 표면색이 필요할 때

모아보기 · 개발 기록 · 블로그 공개

같은 텍스처 안에서도 경계마다 어울리는 선색을 고르도록 외곽선 계산을 바꿨습니다.

표면색을 따르는 외곽선 변경 전
표면색을 따르는 외곽선 변경 전

한 가지 선색으로는 경계가 뭉칩니다

시장과 숲처럼 가까이에 여러 색이 놓인 장면에서는, 외곽선이 어느 표면에 붙어 있는지에 따라 어울리는 색이 달라집니다. 한 오브젝트에 하나의 색을 적용하면 같은 텍스처에 있는 서로 다른 색의 경계가 비슷하게 보입니다.

표면색을 따르는 외곽선 변경 전

경계가 놓인 자리의 색을 읽습니다

외곽선 계산에 하이라이트가 섞이기 전의 현재 표면색을 넣었습니다. 텍스처 안에서 경계 위치가 달라지면 그 자리에 해당하는 색도 달라집니다. 시장 프리셋에는 기존 표면색 기반 옵션을 켰습니다.

표면색을 따르는 외곽선 변경 후

전후 화면을 보는 법

비교할 때는 오브젝트 전체의 밝기보다 서로 다른 색이 만나는 가장자리를 보면 차이가 드러납니다. 변경 범위는 외곽선의 색을 고르는 단계이며, 원본 개발 기록에 확인한 장면과 검증 범위를 남겼습니다.

선과 면이 같은 색을 읽는지 보는 방법

나무와 천막이 한 화면에 있을 때 외곽선이 전부 같은 갈색이면 어떤 물체의 경계인지 모호해질 수 있어요. 반대로 밝은 면의 강조색까지 선에 섞으면 광원 위치에 따라 선이 갑자기 밝아져 윤곽이 흐려집니다. 그래서 표면의 색을 읽는 위치와 경계를 찾아내는 조건을 구분했습니다. 빨강과 초록을 하나의 텍스처에 놓은 시험은 오브젝트별로 색을 한 번만 정해도 되는 구현과, 경계 위치마다 다른 색을 읽는 구현의 차이를 보여줍니다.

시장 장면에서는 차양과 지붕이 닿는 부분, 숲에서는 잎 사이로 배경이 보이는 부분을 보면 변화가 잘 드러납니다. 확대 화면에서는 선색을 확인하기 쉽지만, 실제 플레이 크기에서도 경계가 읽히는지는 따로 봐야 합니다. 색 제한과 픽셀 격자를 지키는 조건을 함께 확인한 이유도 하나의 선을 고치면서 화면 전체의 픽셀 규칙이 흐트러지지 않게 하기 위해서였습니다.

모든 가장자리를 같은 갈색으로 그리면

시장의 지붕과 차양이 다른 색인데 선이 같은 갈색이면 둘이 붙어 보일 때가 있어요. 가장자리에서도 그 자리에 있는 표면색을 읽게 하니 천막의 선과 나무의 선을 구분하기 쉬웠습니다. 밝은 부분의 반짝임까지 선에 섞기보다, 표면이 원래 가진 색을 따라가게 두는 쪽을 택했어요.

외곽선 계산 수정 기록

같은 카테고리의 글

내 개발일지 전체 보기 ↗