TexturePacker 를 이용하여 Sprite 생성하기

여기서는 간단히 TexturePacker 를 이용하여 Sprite 를 생성하는 방법에 대해서 설명드리겠습니다.

 우선 Sprite 에 관해서 간단히 설명드리자면 이미지의 모음 이라고 보시면 됩니다. 하나의 이미지 파일에 여러개의 이미지를 삽입하여 게임 분야에서는 애니메이션을 만들거나 웹 분야 에서는 이미지 요청 횟수와 용량을 줄일 수 있습니다.

 간단한 예로 아래는 Facebook 의 Sprite 입니다. facebook 의 경우 아래의 이미지를 한번 불러 들입니다. 굳이 용량도 크지 않은 이미지를 각각 하나씩 불러들일 필요가 없어지는거죠.

 이제 TexturePacker 를 이용하여 간단히 소셜 버튼 Sprite 를 만들어 보겠습니다.

우선 이미지를 준비하여 하나의 폴더안에 넣어 두도록 합니다. 그리고 TexturePacker 로 드래그 & 드롭 하도록 합니다. 혹은 폴더를 통째로 드래그 & 드롭 해보도록 합니다. ( * 드래그 & 드롭 : 선택 후 마우스로 끌어다 놓음 ) 

그리고 이미지가 모두 정상적으로 로드된 것을 확인합니다. 

그리고 좌측 상단의 메뉴바에서 File > Publish sprite sheet 를 눌러서 Sprite 를 .png 파일로 퍼블리싱 해주도록 합니다.

이제 Sprite 파일이 생성되었습니다. 용량을 확인해보도록 합니다.

이미지 파일이 하나로 합쳐지고 용량이 절반정도로 줄어 들었습니다.

 이제 웹페이지에서 이미지로드를 한번만 로드 하여 background-position 이라는 css 속성으로 하나의 작은 이미지로 여러 이미지를 이용할 수 있게 되었습니다.

 Sprite 는 게임에서는 애니메이션을 만들 수 있게 해주고 웹에서는 이미지 로드를 줄이는 등의 기능을 해줍니다. 사용 용도에 따라서 유용한 방법이니 개발자, 디자이너 혹은 개발에 관심이 많으신 기획자이시라면 알아두시기 바랍니다.

 즐거운 개발 되시기 바랍니다. ^^