서브픽셀 애니메이션

무엇인가

작은 스프라이트에서 가장 작은 정수 움직임은 1픽셀이고, 1픽셀은 클 수 있습니다. 16 픽셀 캐릭터가 숨을 쉬느라 가슴을 1픽셀 올리면 딸꾹질하는 것처럼 보입니다.

서브픽셀 애니메이션이 이 문제를 해결합니다. 형태를 움직이는 대신 가장자리를 따라 픽셀의 색을 바꿉니다. 가장자리 픽셀이 배경색에서 중간 톤으로, 다시 형태의 완전한 색으로 바뀌면, 가장자리가 3분의 1픽셀, 이어서 3분의 2픽셀만큼 바깥으로 번지는 것처럼 보입니다. 눈은 이를 부드럽고 작은 움직임으로 읽습니다.

아티스트가 이렇게 하는 이유

• 잔잔한 대기 동작. 숨쉬기, 떠 있기, 위아래 흔들기가 덜컥거리지 않고 차분하게 보입니다.
• 작은 스프라이트. 16이나 32픽셀에서는 큰 움직임을 넣을 공간이 없으므로 소수 단위가 중요합니다.
• 픽셀을 늘리지 않고도 부드럽게. 더 큰 크기로 다시 그리지 않고도 움직임에 겉보기 해상도를 더합니다.

흔한 실수

• 중간 색이 너무 많음. 가장자리만을 위해 새 색을 더하면 팔레트가 커지고 스프라이트가 흐릿해 보입니다. 이미 램프에 있는 색을 쓰세요.
• 큰 움직임에 쓰기. 달리기 사이클이나 칼 휘두르기는 정수 픽셀의 분명한 포즈가 더 잘 읽힙니다.
• 일관성 없는 가장자리. 모양의 한쪽은 서브픽셀 단계를 쓰고 다른 쪽은 건너뛰면 모양이 늘어나는 것처럼 보입니다.
• 깜빡임. 뚜렷한 방향 없이 프레임마다 픽셀이 바뀌었다 돌아왔다 하면 움직임이 아니라 노이즈처럼 보입니다.

손으로 하는 방법

1. 시작 포즈와 끝 포즈를 1픽셀 차이로 그리세요.
2. 그 사이에 가장자리 픽셀만 바뀌는 프레임을 한두 개 넣으세요.
3. 이동으로 가려질 가장자리 픽셀마다 램프의 중간 색을 한 단계 거치게 하세요.
4. 루프를 게임 속도와 1× 확대로 재생해 보세요. 프레임을 더하기 전에 타이밍을 조정하세요.
5. 스프라이트의 다른 픽셀은 모두 가만히 두어, 변화가 가장자리의 움직임으로 읽히게 하세요.

Pixor가 맡는 부분

Pixor의 서브픽셀 움직임 스타일 노드는 프레임당 1픽셀보다 적게 움직이는 파츠를 아티스트처럼 가장자리 픽셀로 표현합니다. 그 밖에도 Pixor는 렌더링한 애니메이션을 충분히 안정적으로 유지해 서브픽셀 손질을 더할 가치가 있게 합니다. 피벗은 모든 프레임과 방향에서 한 픽셀에 고정되어 몸이 떨리지 않습니다. 명암 띠는 표면이 확실히 돌아갈 때까지 유지되고, 디더링은 표면에 고정되며, 정리 패스가 떠도는 픽셀과 한 프레임에만 나타나는 선을 지웁니다. Pixor는 클립 전체의 깜박임도 측정합니다.

거기서 Aseprite로 내보내면 액션과 방향마다 자체 태그가 생기고, 별도 레이어에 서브픽셀 손질을 더할 수 있습니다. 다시 렌더링해도 손으로 칠한 레이어는 그 프레임에 남습니다.

관련 항목

• 믹셀: 움직임이 픽셀 격자를 지켜야 하는 이유
• 프리렌더 스프라이트
• 애니메이션, Aseprite, 내보내기 설명서