벡터 애니메이팅과 픽셀 애니메이팅의 접목에 대해-도파인

픽셀 모션에 대한 분석-연속성과 비연속성 (tistory.com)

픽셀 모션에 대한 분석-연속성과 비연속성

저번에 우리는 픽셀 애니메이션의 가장 큰 특징인 "비연속성"에 대해 얘기를 해보았었다. 하지만 벡터 애니메이션은, 슬피지만 연속적이기에 그 사이의 괴리감이 나타난다고 볼 수 있다. 나는 이 부분에 대해 적정한 합의점을 연구해왔다. 그 결과 스파인과 aesprite의 접목 방법에 대해 면밀이 관찰을 했고, 그 부분에 가능성이 있다 생각하게 되어 이것에 대해 서술을 해보려 한다. 

 

나는 개인적으로 이 방법을 도티+스파인 방법이라 도파인이라 명명하고 설명해두고 있다

 

들어가기 앞서 

최단 입점과 rotsprite

원본-최단입점 회전(우리가 아는 평범한 회전)-rotsprite

rotsprite란, aesprite에 독자적으로 쓰는 회전에 따른 픽셀 보간 방법이다. 해당 보간 방법은 인접한 픽셀간의 색체를 인식하고, 그 것에 연결점을 사전에 적용을 해두는 방식에 가깝다. 그렇기에 비트맵 단위로 이동하는 것보다, 옆의 픽셀에 대해 영향을 받다보니, 보다 유기적이고 부드러운 회전에 대한 이미지를 얻을 수 있는 강점을 가지고 있다.

원본(최단 입점의 사이즈 확대) 와 rotsprite의 사이즈 확대 비교

이를 난 사이즈 변경에 이용을 했었다.  왜냐면 스파인에 쓰이기 위해서는 아무래도 업스케일링이 필요했고, 그것에 저연스러운 보간이 필요헀기 때문이다. 그 이유는 아웃풋에 달려 있기 때문이다.

1. 최단입점으로 업스케일링 이후 다운스케일링/2. rotsprite를 이용한 다운스케일링/3.다운스케일링 없는 원본으로 만들어진 모션

해당 모션들을 보면, 꺽이거나 회전되는 지점에 rotsprite가 분명 우수한 퍼포먼스를 보여지고 있다. 이 부분은 주변 픽셀에 영향을 받는 rotsprite에서 나온 회전에 강점을 보여주고 있다. 하지만 이 rotsprite에 문제점이 있는데, 이 부분은 연속적인 모션을 가지고 오기에 비연속적인 픽셀의 느낌이 안산다는 것이다.

 

 

작업 방식에 대해

리소스 제작

 

업스케일링 이후 익스포트

해당 리소스를 기조로 리깅-애니메이팅

이후 gif를 익스포트 한 후 다시 aesprite를 통해 스프라이트 시트를 익스포트 한 후 파일에 이식하도록 하는 방식. 여기서 우리는 리소스를 스파인에 접목하기 위한 이미지 리소스의 익스포트방식에 대해 알아볼 것이다.

 

프리뷰

1. 최단입점 확대를 이용한 리깅과 애니메이팅./ 2.스파인 자체 렌더링을 이용한 애니메이팅/ 3, rotsprite 보정을 이용한 애니메이팅/4. 2번 3번을 통한 리소스를 섞은 애니메이팅.

ㅇ기서 나는 4번에 방법에 대해 서술을 해 볼 생각이다. 그 이유는 한가지 사진에 대해 그 사실을 알 수 있다. 

 

원본 리소스

보다시피 3,4번이 원본에 가까운 것을 알수 있으며, 보다 보정에 있어 더 자연스러운 도트의 느낌을 가진 것을 볼 수 있다. 이러한 것은 머리카락의 외곽과 명암의 표현에서 알 수 있다. 

최단 입점 보간을 통한 2번과 달리, 3번은 아주 매끄럽게 나옴을 확인 할 수 있다. 물론 아직 손으로 후보정의 필요는 있으나 확실히 그림 자체가 깔끔하게 떨어지게 되어 있다. 

하지만, 이 2번(최간입점)이 우세한 부분이 있는데, 그 부분은 "비연속적인 부분"이라 볼 수 있다. 

1. 최단입점/ 2. rotsprite

얼굴과 손의 모습을 보면 그것을 알 수 있다, rotsprite로 만들어진 리소스는 연속성을 잃은 모습을 보이나, 최단입점은 께질 지언정 비연속적으로 보여야 할 부분(눈, 얼굴, 손 등)은 픽셀의 느낌 그대로 잘 나타나고 있다. 그런 이유로 정말 단순한 솔루션을 둘 수 있게 되는데, 바로 그거는 "비연속적"으로 보여지는 부분만 최단입점으로, 부드러운 모션이 나와야 하는 대부분의 부분에서는 rotsprite로 보여지게 하는 방식이다. 

이렇게. 차피 익스포트 하면 파일명같으니까, 최단입점 업스케일링 한 리소스랑, rotsprite 업스케일링 한 리소스를 둔 다음 애니메이팅 하면서 상황에 맞게 덮어쓰던, 슬롯에서 어태치먼트를 변경하던 그렇게 하면 되는 것이다.

또한 이렇게 "비연속적"으로 된 부분은 보다 명확하게 리깅된 부모 본으로부터 영향을 덜 받아야 하는 데 이 방법은 아주 간단하게

이렇게 회전의 영향을 받지 않게 해두면 되는 것이다.

이를 통해 우리는 스파인과 픽셀에 대해 좋은 접근을 할 수 있게 된다.

 

+++추가적인 스파인 세팅 방식 정리

rotsprite를 통한 이미지 뷰를 위해서는 이렇게 세팅을 하는 편이 좋다. 

이렇게 하면 보여준ㄴ 뷰에서는 이러한 자연스러운 렌더링이 된 상태의 애니메이팅이 지원 가능해지기 때문.