💫Sprite Image Animation

프로젝트에 애니메이션을 점점 적용하게 되면서 여러 애니메이션 구현 방법을 찾아보던 중 스프라이트 이미지를 이용하는 방법도 알게 되었다.

스프라이트 이미지

스프라이트 이미지는 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미한다.
애니메이션을 위해 연속된 이미지를 하나의 이미지로 관리할 수도 있고, 브랜드 로고 등 여러 종류의 이미지를 보여줄 때 네트워크에 n개의 이미지에 대해 n번 요청하는 대신 스프라이트 이미지 1번만 요청하는 식으로 관리할 수도 있다.

애니메이션 구현

애니메이션에 사용할 이미지 단위를 보통 프레임이라고 한다.
프레임의 가로 길이와 세로 길이, 개수, 진행 방향(horizontal, vertical)을 알면 애니메이션을 만들 수 있다.
아래 이미지는 1차원 이미지로 3개의 프레임이 수평 방향(horizontal)으로 이어지는 스프라이트 이미지로, 한 프레임의 가로 길이만큼 움직이면 캐릭터가 움직이는 것처럼 보여줄 수 있다.
파란색 선으로 표시한 부분이 화면에 보여질 프레임이다.

구체적으로 background-image를 설정하고 background-position을 프레임의 가로(혹은 세로 길이)만큼 순차적으로(steps()) 이동하면서 해당 위치의 이미지를 보여주는 방식으로 구현할 수 있다.

더 알아보기

스프라이트 이미지를 활용한 애니메이션 라이브러리를 찾고 있다면 react-sprite-animator를 추천한다.
리액트 한정 라이브러리이긴 하지만, 코드가 간단하며 아이디어를 얻기 좋은 라이브러리라고 생각한다.
만약 애니메이션을 위한 스프라이트 이미지를 직접 만들어보고 싶다면 piskel이라는 툴을 추천한다.
piskel은 스프라이트 이미지를 픽셀로 제작할 수 있는 툴이며, 오픈소스이기 때문에 커스텀할 수도 있다.