<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:dragon]</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
new spine.SpinePlayer(document.getElementById("player"), {
	jsonUrl: "/files/examples/4.2/dragon/export/dragon-ess.json",
	atlasUrl: "/files/examples/4.2/dragon/export/dragon-pma.atlas",
	animation: "flying",
	viewport: {
		x: -383,
		y: -313,
		width: 779,
		height: 712
	},
	backgroundColor: "#555555FF",
	fullScreenBackgroundColor: "#555555FF"
});
</script>

!!
# 드래곤
드래곤 프로젝트는 기본적인 Spine 애니메이션과 Spine의 기존 프레임별 애니메이션의 간단한 예제입니다.

## 설정
`right-wing` [슬롯](/spine-basic-concepts#Slots)은 기존의 프레임별 날개 애니메이션의 각 프레임마다 하나씩 9개의 [영역 어태치먼트](/spine-regions)를 포함합니다.

![](/img/spine-examples/dragon/dragon-01.jpg)

드래곤의 다른 날개에도 동일한 설정이 사용됩니다.

## 애니메이션
날개를 애니메이션화하기 위해 영역 어태치먼트의 가시성은 날개가 보여야 하는 순서와 타이밍을 이용하여 [키](/spine-key-frames#Attachments)가 설정됩니다.

![](/img/spine-examples/dragon/dragon-02.jpg)

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