<script src="/files/spine-player/4.2/spine-player.js"></script>
<link rel="stylesheet" href="/files/spine-player/4.2/spine-player.css">
<div class="units-row-end">		
	<div class="unit-100">
		<div class="examples-header">
			<div class="units-row">
				<div class="unit-60">
					<div id="player"></div>
				</div>
				<div class="unit-40">
					<div class="examples-header-info">
						<div class="examples-header-info-tags">
							<span>태그: </span>
							<p>기본형, 전문가형, 변형, 메쉬, 변형 제약조건, 가중치</p>
						</div>
<div class="examples-header-download">[example-download:alien]</div>
					</div>
				</div>
				
			</div>
		</div>
	</div>
</div>
<script>
new spine.SpinePlayer(document.getElementById("player"), {
   jsonUrl: "/files/examples/4.2/alien/export/alien-pro.json",
   atlasUrl: "/files/examples/4.2/alien/export/alien-pma.atlas",
	animation: "death",
   viewport: {
      animations: {
         death: { padTop: "-33%" }
      }
   },
   backgroundColor: "#555555FF",
   fullScreenBackgroundColor: "#555555FF"
});
</script>

!!
#에일리언#

에일리언 프로젝트는 Spine에서 제공하는 고급 애니메이션 툴을 사용하여 기존의 프레임별 애니메이션을 결합하는 방법을 보여줍니다. 이 프로젝트에서는 프레임별로 몇 개의 이미지만 손으로 그린 다음, Spine의 [메쉬 변형](/spine-meshes#Deformation)과 부드러운 보간에 의해 이미지가 늘어났습니다. `죽음` 애니메이션은 터지는 머리, 튀어나오는 눈 및 그린 슬라임 스플랫과 같은 이러한 기법을 여러 곳에서 사용합니다. [변형 제약조건](/spine-transform-constraints)은 턱을 떼어내는 데 사용됩니다.

에일리언은 [슈퍼 스파인보이](https://github.com/EsotericSoftware/spine-superspineboy) 데모 게임에서 움직이는 것을 볼 수 있습니다. 다양성을 주기 위해 에일리언에 각각 약간 다른 색조가 묘사됩니다. 또한 강도가 다른 에일리언에 4가지의 다른 크기가 사용됩니다. 가장 큰 에일리언이 죽으면, 터진 후 작은 에일리언을 많이 낳습니다.
 
## 머리 터지게 하기

### 설정
![](/img/spine-examples/alien/alien-burst-setup-01.jpg)

머리는 두 개의 슬롯(`head`와 `burst-bg`)을 포함하고 있는 `head`라는 하나의 뼈로 모형화됩니다. 

`head` [슬롯](/spine-basic-concepts#Slots)에는 `head`, `burst01`, `burst02` 및 `burst03-fg`라는 4개의 어태치먼트가 있습니다. 이 어태치먼트는 각각 다른 이미지를 가리키는 [메쉬](/spine-meshes) 어태치먼트입니다. `head` 어태치먼트는 모든 애니메이션에서 사용됩니다. 이 어태치먼트는 기본적으로 "터지지 않은" 에일리언의 머리 상태입니다. `burst01`, `burst02` 및 `burst03-fg` 어태치먼트는 3개의 터지는 머리 프레임입니다. `head` 어태치먼트과 함께 이 프레임은 기존의 프레임별 애니메이션의 키 프레임을 구성합니다.

슬롯 `burst-bg`에 있는 `burst03-bg` 어태치먼트는 애니메이션에 좀 더 끈적끈적한 녹색의 터짐 효과를 추가합니다.

눈, 턱 및 그린 슬라임 스플랫은 머리 뼈 계층구조의 일부가 아닙니다. 이들은 애니메이션 프로세스를 쉽게 할 수 있도록 분리되어 있습니다. 이것은 각 슬롯의 [도로우 오더](/spine-images#Draw-order)에도 반영됩니다.

### 애니메이션
![](/img/spine-examples/alien/alien-burst-animate-01.jpg)

위와 같이 `죽음` 애니메이션에서 머리가 터지는 부분을 구성하는 [타임라인](/spine-dopesheet#Timeline)은 `애니메이트` 모드의 [도프 시트](/spine-dopesheet#Dopesheet-view)에 표시됩니다. 머리 슬롯(`Attach: head`)의 어태치먼트 타임라인은 `머리` 슬롯의 모든 [어태치먼트 변경](/spine-key-frames#Attachments)에 대한 키를 포함하고 있습니다. 애니메이션은 슬롯의 `머리` 어태치먼트로 시작한 다음 `burst01`, `burst02` 및 `burst03-fg` 어태치먼트로 전환됩니다. 이러한 키는 기존의 프레임별 애니메이션과 유사합니다. `39`프레임 에서 `burst03-bg` 어태치먼트는 키가 설정되어 보이게 되고, 터지는 머리 어태치먼트 뒤에 그린 슬라임이 추가됩니다.

프레임별 애니메이션은 변형 타임라인에서 볼 수 있듯이, 메쉬 어태치먼트를 [변형](/spine-meshes#Deformation)함으로써 더 흥미로워집니다.

## 턱과 눈

### 설정
![](/img/spine-examples/alien/alien-jaw-setup-01.jpg)

턱뼈(`metaljaw`)와 눈 뼈(`eye-root`)는 `머리` 뼈가 아니라 스켈레톤의 `루트` 뼈의 부모가 됩니다. 이렇게 하면 독립적인 움직임을 감안하여 `죽음` 애니메이션의 머리에서 턱과 눈을 떼어내는 것을 더 쉽게 애니메이션화할 수 있습니다.

턱과 눈 뼈는 [변형 제약조건](/spine-transform-constraints)을 이용하여 머리 뼈를 따라가게 됩니다. 변형 제약조건의 오프셋과 믹스 값은 기본적으로 턱과 눈이 머리 뼈의 움직임을 따라가도록 설정되며, 정상적인 부모/자식 관계처럼 효과적으로 움직이게 됩니다.

`죽음` 애니메이션에서 턱이 공중으로 날아가는 경우와 같이 턱과 눈이 더 이상 머리 뼈를 따라갈 필요가 없으면, 이러한 변형 제약조건의 [믹스](/spine-transform-constraints#Mix) 값이 `0`으로 설정되어 제약된 뼈는 자체의 변형을 기반으로 자유롭게 움직일 수 있습니다.

### 애니메이션
![](/img/spine-examples/alien/alien-jaw-animate-01.jpg)

`죽음` 애니메이션의 머리에서 턱과 눈을 떼어내기 위해, 변형 제약조건의 믹스 키를 그에 맞춰 설정함으로써 뼈 변형에 대한 변형 제약조건의 영향을 줄입니다. 믹스는 타임라인 `Transform: eye-root`, `Transform: jaw` 및 `Transform: eye`에서 애니메이션화됩니다.

<div class="toc-home"><p><a href="/spine-examples">Spine 예제 프로젝트</a></p></div>