Cocos Creator 3에 애니메이션 가져오기

내보낸 파일 이해

cocos_creator_pack을 선택하세요. ZIP에는 spritesheet.png, spritesheet.plist, AnimGenSpritePlayer.ts, animgen-manifest.json, README가 있습니다.

PLIST는 Cocos2d-x 아틀라스 형식 3을 사용합니다. TypeScript는 Sprite 컴포넌트 플레이어 예제이며 네이티브 AnimationClip이나 완성된 게임 컨트롤러는 포함하지 않습니다.

아틀라스를 함께 가져오기

PNG·PLIST 이름을 유지하고 같은 Assets 폴더에 동시에 가져오세요. 생성된 SpriteAtlas에는 개별 SpriteFrame 하위 에셋이 있습니다. Cocos의 Atlas 에셋 가이드에 이 절차가 설명되어 있습니다.

플레이어 스크립트를 가져와 컴파일을 기다리세요. Sprite 노드를 만들고 AnimGenSpritePlayer를 연결한 뒤 atlas 속성에 SpriteAtlas를 할당하세요.

플레이어 설정

스크립트는 프레임 이름을 숫자순으로 정렬하고 첫 프레임 표시 후 경과 시간에 따라 진행합니다. 통합용 play(), stop()이 있습니다. 동작을 수정했다면 생성 예제와 같다고 가정하지 말고 자신의 컴포넌트를 테스트하세요.

여러 내보내기에 컴포넌트 하나 재사용

모든 패키지는 같은 AnimGenSpritePlayer 클래스 이름을 사용합니다. 프로젝트의 애니메이션마다 같은 클래스를 추가로 가져오지 마세요.

플레이어 하나를 재사용하고 각 노드의 아틀라스, FPS, 루프를 명시하세요. 스크립트에는 그 스크립트를 생성한 내보내기의 피벗이 포함됩니다. 다른 피벗이 필요하면 applyExportedPivot을 끄고 노드별 UITransform 앵커를 설정하거나 재사용 플레이어를 명시적으로 수정하세요.

결과 검증

프레임 수·FPS를 animgen-manifest.json과 맞추세요. 게임 로직 통합 전 작은 장면에서 마지막→첫 프레임, 노드 크기, 앵커, 투명도, 그리기 순서를 확인하세요.

빈 노드는 컴파일, 아틀라스 할당, Sprite 컴포넌트, 아틀라스 하위 에셋을 확인하세요. 시트 전체가 보이면 단독 텍스처 대신 SpriteAtlas를 사용했는지 확인하세요.

누락된 프레임은 PNG·PLIST가 같은 내보내기에서 왔고 함께 가져왔는지 확인하세요. 애니메이션 전환 시 앵커가 튀면 위 피벗 처리를 확인하세요. 캔버스 및 피벗, 투명 형식도 참고하세요.

예제 대상은 Cocos Creator 3.x입니다. 패키지 검사는 실제 에디터·대상 빌드의 가져오기 및 실행 테스트를 대체하지 않습니다.