Spine Web Player로 에셋 임베딩
April 6th, 2020
때로는 살면서 멋진 Spine 스켈레톤, 애니메이션 및 스킨을 돋보이게 하는 데 필요한 모든 에셋이 들어있는 간단한 .html 파일이 있었으면 좋겠다고 생각하신 적이 있으실 겁니다. 성가신 웹 서버가 필요하지 않습니다. 디스크의 .html 파일을 두 번 클릭만 하시면 브라우저에 아름다운 예술 작품이 표시됩니다.
이 기능을 Spine Web Player에 추가하고, 확장하여 WebGL 또는 Canvas용 spine-ts 및 모든 백엔드에도 추가했습니다! 이 기능이 어떻게 작동되는지 한 번 보시죠.
데이터 URI - 에셋 준비
브라우저에 .png 파일과 같은 에셋을 로드하도록 지시하려면 URL을 지정하세요, 예:
또는 상대 URL, 예:
브라우저에서 이러한 URL을 발견하면 서버에 해당 파일의 데이터를 전송하도록 요청합니다.
서버와 전혀 통신하지 않는 방법을 찾아야 합니다. 다행스럽게도 최신 브라우저 표준에서는 그러한 작업을 할 수 있는 도구를 제공합니다: 데이터 URI.
데이터 URI는 data:로 시작하고, 그 뒤에 MIME 타입이 오고, 그 뒤에 파일의 실제 데이터가 오는 긴 텍스트입니다. 데이터 자체는 Base64로 인코딩됩니다. 이런 식으로 하면 바이너리 데이터조차도 .html 파일에 안전하게 저장할 수 있습니다.
파일을 데이터 URI로 변환하려면 많은 데이터 URI 인코더 중 하나를 사용할 수 있습니다. 기본 원칙은 항상 다음과 같이 동일합니다.
- 파일 또는 파일의 URL을 지정합니다.
- "업로드" 또는 "인코드" 또는 표시되는 어떤 버튼이든 클릭합니다.
- 데이터 URI 텍스트를 복사합니다.
저는 http://esotericsoftware.com/files/examples/raptor/export/raptor-pma.png 에 있는 랩터 예제의 아틀라스 페이지에 대해 그러한 작업을 했습니다. 다음 HTML 요소 사용하기:
이렇게 멋진 이미지로 마무리됩니다.
파일의 데이터 URI 버전을 사용한 경우, 태그의 모양은 다음과 같습니다.
위의 데이터 URI가 매우 길기 때문에 99.999%를 잘라 내었습니다. 이것이 모든 것을 하나의.html 파일에 임베딩하려고 할 때 치러야 하는 대가입니다.
이제 데이터 URI에 대해 알게 되었으므로 내보낸 Spine 에셋을 임베딩하기 위한 다음의 몇 가지 준비 단계만 거치면 됩니다.
- Spine에서 Spine 프로젝트를 열고 스켈레톤 데이터를
.json또는.skel로, 아틀라스를.atlas및 하나 이상의.png파일로 내보냅니다. - 각 파일을 데이터 URI 인코더로 인코드하고 각 결과 텍스트를 파일에 저장하거나 선택한 텍스트 편집기에 임시로 저장합니다.
다 됐습니다! 이제 Spine Web Player로 에셋을 함께 임베딩할 준비가 되었습니다.
임베딩된 에셋으로 Spine Web Player 설정
이전에 이 블로그에서 Spine Web Player에 대해 토론했습니다. 세부 사항들에 대해 기억이 잘 나지 않으시면 해당 블로그 게시물로 빨리 가셔서 기억을 되살리시는 것이 좋습니다.
다음은 Spine Web Player를 사용하여 랩터를 표시하는 기본 .html 파일입니다.
<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/3.8/spine-player.css">
<div id="player"></div>
<script>
new spine.SpinePlayer("player", {
jsonUrl: "https://esotericsoftware.com/files/examples/raptor/export/raptor-pro.json",
atlasUrl: "https://esotericsoftware.com/files/examples/raptor/export/raptor-pma.atlas",
animation: "walk",
backgroundColor: "#666666",
});
</script>
이 멋진 플레이어의 결과는 다음과 같습니다.
플레이어에 raptor-pro.json 과 raptor-pma.atlas라는 두 개의 파일을 로드하도록 지시하는 것을 알 수 있습니다. 플레이어가 .atlas 파일을 읽으면 첫 번째(그리고 유일한) 아틀라스 페이지를 구성하는 이미지인 raptor-pma.png라는 다른 파일도 로드해야 한다는 것을 알 수 있습니다.
이 모든 파일은 서버에서 로드됩니다. 그러한 것을 피하고, 대신 모든 것을 하나의 .html 파일에 보관하기 위해 새로운 구성 속성인 rawDataURIs를 사용할 수 있습니다. 저는 마지막 섹션에서 설명드린 바와 같이 raptor-pro.json, raptor-pma.atlas 및 raptor-pma.png 파일을 데이터 URI로 변환했습니다. 그다음에 위 스크립트의 일부를 다시 작성했습니다.
<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/3.8/spine-player.css">
<div id="player"></div>
<script>
new spine.SpinePlayer("player", {
jsonUrl: "raptor-pro.json",
atlasUrl: "raptor-pma.atlas",
rawDataURIs: {
"raptor-pro.json": "data:application/json;base64,ewoic2tlbGV0b...",
"raptor-pma.atlas": "data:application/octet-stream;base64,CnJhcHRvc...",
"raptor-pma.png": "data:image/png;base64,iVBORw0KGgoAAAANSUhEU..."
},
animation: "walk",
backgroundColor: "#666666",
});
</script>
저는 위의 스니펫에 있는 데이터 URI가 너무 길어서 다시 잘라 냈습니다. 무엇을 변경했는지 한 번 보시죠.
먼저 jsonUrl과 atlasUrl 속성을 다시 작성했습니다. 전체 URL을 지정하는 대신 파일 이름만 지정합니다. 그다음에 rawDataURIs 속성을 추가했습니다. 이것은 "filename": "data URI" 쌍으로 구성되며, 랩터를 로드하고 렌더링하는 데 필요한 각 파일마다 하나씩 있습니다. 다 됐습니다!
그러면 Spine Web Player는 jsonUrl을 로드하려고 시도합니다. raptor-pro.json 데이터는rawDataURIs 속성에 제공되므로, 플레이어는 서버에 데이터를 제공하도록 요청하는 대신 서버에서 데이터를 직접 가져옵니다. raptor-pma.atlas 파일에서도 마찬가지입니다. 아틀라스 파일이 로드되면 플레이어는 아틀라스에 raptor-pma.png 이미지가 필요하다는 것을 알게 됩니다. 그리고 rawDataURIs에서도 그러한 것을 지정했기 때문에, 임베딩할 수 있는 플레이어 JavaScript와 CSS를 제외하고는 서버에 대한 요청은 단 한 건도 없습니다.
물론 이 기능은 [바이너리 스켈레톤 데이터]에서도 작동합니다!
<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/3.8/spine-player.css">
<div id="player"></div>
<script>
new spine.SpinePlayer("player", {
skelUrl: "raptor-pro.skel",
atlasUrl: "raptor-pma.atlas",
rawDataURIs: {
"raptor-pro.skel": "data:application/json;base64,ewoic2tlbGV0b...",
"raptor-pma.atlas": "data:application/octet-stream;base64,CnJhcHRvc...",
"raptor-pma.png": "data:image/png;base64,iVBORw0KGgoAAAANSUhEU..."
},
animation: "walk",
backgroundColor: "#666666",
});
</script>
jsonUrl 속성을 사용하는 대신 skelUrl 속성을 사용합니다. rawDataURIs 섹션에서 .skel 파일의 데이터 URI를 지정합니다. 다 됐습니다!
바이너리 스켈레톤 파일은 평균적으로 해당 .json 파일보다 상당히 작습니다. 가능하면 바이너리 스켈레톤 파일을 사용하세요.
참고: 스켈레톤
.json또는.png파일에 대한 데이터 URI를 임베딩할 때 선택한 편집기가 잠시 동안 정지되거나 느려질 수 있습니다. 때로는 자동 줄 바꿈을 해제하면 도움이 됩니다. 다른 솔루션에서는 Sublime Text 또는 Visual Studio Code와 같은 훌륭한 편집기를 사용하며, 이러한 편집기는 더 큰 파일에서도 잘 작동됩니다.
다음 일정
Spine 3.9에는 새로운 내보내기 옵션을 추가하여 위의 모든 작업을 수행할 수 있는 원 클릭 솔루션을 제공해드릴 예정입니다. 최종 결과는 웹 브라우저를 사용하여 디스크에서 열 수 있는 .html 파일이 될 것입니다. 그리고 작업 결과물을 쉽게 보도록 친구와 동료에게 보낼 수 있습니다. 채널을 고정하시고 3.9베타 채널을 시청하세요!
Spine 포럼에서 의견을 공유하세요!