스파인의 활용과 적용사례

도프시트라는 시스템을 사용하며, 2D, 3D 에니메이션을 정말 부드럽게 만들 수 있다.

http://ko.esotericsoftware.com/

장점

= 본 애니메이션의 장점
그림 파일 요구량이 적다.
애니메이션이 부드럽다.

어테치먼트 - 뼈에 붙은 이미지를 다른 이미지로 바꾸면 스킨개념식으로 제작이 가능
믹싱 - 여러가지 애니메이션을 합침
ex)총 쏘는 것과 걷는거 합침
자연스러운 애니메이션 - 코드를 통해서 다룰 수 있고 마우스 커서와 연동할 수 있다.

특징

도프시트
타임라인과 조금 다른의미, 타임라인은 자동보정이 되지만, 애니메이터가 도프시트는 다 수정해야한다.

FFD(Free-Form Deformation)
메쉬를 외곡시켜서 입체적인 느낌을 줄 수 있는 기능

IK(Inverse Kinematics)
본을 컨트롤 하는 녀석- 나중에 자세히 설명

그래프 에디터
베지어 커브를 사용할 수 있다.

텍스쳐 패커
Sprine은 텍스처 아틀라스 또는 스프라이트시트로 이미지를 패킹할 수 있다.
작업한 이미지를 분할해서 작업하기 편한 파일로 export 할 수 있는 기능이라고 생각하면 된다.

런타임
다른 에니메이션에 비해 훨씬 런타임적으로 잘 사용할 수 있다.

부드러울 수 있는 이유는 프레임간의 보간을 자동으로 해준다.
프레임 기반 에니메이션을 이용한 Spine
장면 전환 및 레이어링
메쉬 변형 = FFD를 사용해서 가능 3D도 자연스러운 IDLE을 보여줄 수 있다.
스킨 = 같은 뼈를 스킨만 바꿔서 재사용 가능
역 운동학 = IK 코드와 결합가능
경로 제약 조건 = 간혹 가다가 사용한다.
클리핑 마스크 = 원하는 부분에서 보이게 할 수 있다.
변환 제약 조건 = 선에 따라 조정하는 기능

준비 및 리소스 작업

스파인 애니메이션 제작 순서 및 폴더 구조

애니메이션 파트는 개발에 있어서 직접적으로 적용되는 파트이다. 프로그래머에게 바로 넘어가는 작업물, 정리가 잘 안되어있거나 리소스화가 잘 안되면 안된다.

작업 진행 순서

원화> 리소스화(그래픽 분리) > 리깅 > 매쉬 심기 > 애니메이션 작업 > 프로그래머에게 넘기기

포토샵에서 스파인에서 지원하는 스크립트 LayerToPNG 를 사용해서 리소스화 된 이미지를 PNG로 뽑아내라(일러스트도 지원 한다.)
이미지 파일(PNG)을 뽑아내면 JSON파일(이미지의 포지션 값)이 나오는데 이걸 사용해서 스파인에서 사용하면 된다.

폴더 구조

ani - 프로그램과 상관없이 볼 수 있는 결과물(기획자나 다른 사람들이 볼 자료)을 담아두는 곳이다.
docs - 기획 문서, 요구사항, 웹에서 찾은 자료 담아두기
images - 이미지 파일(리소스화 된 PNG 소스들)들
psd - 원화.psd 기초 파일(원본을 두는 편으로 관리)
refs - 참고 자료들

포토샵 세팅 및 리소스화 기초

좋은 리소스가 어떤건지?

작은 등신 케릭터가 작업하기 유리하다. 5등신 이하까진 괜찮은데 실사 등신까지 가게 되면 사람의 모습을 본능적으로 생각하기 때문에 더욱 어려워진다.
45도(반측면) 각도가 좋다. 정면이나, 옆면으로도 표현하기 쉬우므로 (그리고 퀄리티를 해치지 않는 선에서 최소한의 리소스를 사용해서 작업을 하는게 좋다.)
원근감(투시)을 잘 살려서 그린 2D그림이 좋다. 3D를 45도 돌린것처럼
시선은 카메라를 보는게 좋지 않다. 45도(반측면)를 바라보는게 좋다.
리소스가 또렷하게 보이고 너무 작지 않은 원화가 좋다.

포토샵 스크립트 등록하기

LayersToPNG.jsx 파일을 Program Files/Adobe/Adobe Photoshop ~/Presets/Scripts에 붙여넣기 하고 포토샵 재실행하면 File/Scripts에 들어 있음.

Curookie/1장-스파인의 활용과 적용사례.md