TS-LOG

프로그래밍/개발 일기

로컬 서버에서 스파인 플레이어 실행하기

최근 교육회사 팀장으로 이직 했다.교육앱에 들어가는 애니메이션으로AnimateCC, Spine, Lottie를 사용한다고 한다. AnimateCC는 그동안 다룰줄 아는 개발자도 없었고애니메이터 분들도 선호하지도 않았다. 개발팀에서는 Spine을 사용하고 싶었지만Spine을 할 줄 아는 애니메이터들이 없어서이 역시 제대로 활용을 못하고 있었다. 그래서 그동안 Lottie로 작업을 했다고 하는데성능이 나오지 않아서 개발팀 원성이 자자하더라..(벡터 기반이 용량은 가볍지.. 렌더링은 가볍지 않다.) 내가 합류한 시점에 Spine 애니메이터 분들도 계시고,Spine이 애니메이션 표준처럼 되었기에 Spine을 기준으로 R&D를 진행하게 되었다. 그전에 애니메이터분이 Spine 애니를 바로 볼 수 있었으면좋겠다는 ..

프로그래밍/Pixi.js7

PIXI.AnimatedSprite #1 애니메이션 재생

앱을 개발하다 보면 모션을 구현해야 하는 경우가 있다. 간단한 움직임이라면 Tweener나 Ticker를 이용해서 구현하면 된다. 하지만 캐릭터가 달리거나 뛰는 것은 이런 방법으로 구현이 어렵다. 그래서 실제 애니메이션 제작 방식과 동일한 방법으로 구현한다. 프레임별 이미지를 하나씩 제작하고 순차적으로 렌더링하는 것이다. PIXI.Js 에서는 AnimatedSprite() 메서드를 사용하여 쉽게 구현할 수 있다. 개별 이미지를 불러와서 재생하기 위 이미지는 캐릭터가 걸어가는 애니메이션 프레임이다. 이 이미지들을 로드해서 애니메이션을 구현한다. 이미지의 가로, 세로는 모두 동일하다. 코드 설명 코드는 어렵지 않다. Assets.load() 메서드로 이미지를 로드하고, 로드된 이미지 텍스처를 하나의 배열에 ..