로컬 서버에서 스파인 플레이어 실행하기
천둥상어
·2024. 8. 22. 21:13
반응형
최근 교육회사 팀장으로 이직 했다.
교육앱에 들어가는 애니메이션으로
AnimateCC, Spine, Lottie를 사용한다고 한다.
AnimateCC는 그동안 다룰줄 아는 개발자도 없었고
애니메이터 분들도 선호하지도 않았다.
개발팀에서는 Spine을 사용하고 싶었지만
Spine을 할 줄 아는 애니메이터들이 없어서
이 역시 제대로 활용을 못하고 있었다.
그래서 그동안 Lottie로 작업을 했다고 하는데
성능이 나오지 않아서 개발팀 원성이 자자하더라..
(벡터 기반이 용량은 가볍지.. 렌더링은 가볍지 않다.)
내가 합류한 시점에 Spine 애니메이터 분들도 계시고,
Spine이 애니메이션 표준처럼 되었기에
Spine을 기준으로 R&D를 진행하게 되었다.
그전에 애니메이터분이 Spine 애니를 바로 볼 수 있었으면
좋겠다는 요청을 했다. ?!?!
나도 Spine은 Pixi 사용시 붙여서 보기만 했지...
로컬에서 리소스만 가지고 확인한 적은 없다.
Spine 사이트에서 찾아보니...
웹용 스파인 플레이어가 있더라~
그럼 간단하게 VSC 깔고 라이브 서버로 돌리면
누구나 쉽게 로컬에서 확인이 가능하겠다는 생각이 들었다.
약간의 시행착오를 거쳤지만 역시나 잘 된다.
경로를 바꾸는게 귀찮긴 하지만 아쉬운데로 쓸만 하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script src="/js/spine-player.min.js"></script>
<link rel="stylesheet" href="/css/spine-player.min.css" />
</head>
<body>
<!-- 크기 조정 -->
<div id="player-container" style="width: 640px; height: 480px"></div>
<script>
new spine.SpinePlayer("player-container", {
jsonUrl: "/assets/spineboy-ess.json", // skeleton 파일 경로
atlasUrl: "/assets/spineboy-pma.atlas", // atlas 파일 경로
animation: "walk", // 기본 애니메이션 설정
alpha: true,
backgroundColor: "#000000",
});
</script>
</body>
</html>
반응형
'프로그래밍 > 개발 일기' 카테고리의 다른 글
| Parcel & 플러그인 설치 (3) | 2024.09.20 |
|---|---|
| [에러] 이 시스템에서 스크립트를 실행할 수 없으므로... (0) | 2024.09.11 |
| [서적 구입] 개발자가 영어도 잘해야 하나요? (0) | 2024.07.06 |
| [에러] opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ] (0) | 2024.04.02 |
| 애증의 Pixi.js (0) | 2024.03.12 |
