<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>Essential、コマ撮り</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で使用するシンプルな例です。

## セットアップ
`right-wing` [スロット](/spine-basic-concepts#スロット)には9個の[領域アタッチメント](/spine-regions)があり、古典的なフレーム・バイ・フレーム(コマ撮り)アニメーションのように翼の各フレームに対応しています。
![](/img/spine-examples/dragon/dragon-01.jpg)

ドラゴンのもう一方の翼にも同様のセットアップが行われています。

## アニメーション
翼をアニメーションさせるために、領域アタッチメントの表示の[キー](/spine-key-frames#アタッチメント)を、それらが表示されるべき表示順序とタイミングに合わせて切り替えています。

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

<div class="toc-home"><p><a href="/spine-examples">Spineプロジェクト例</a></p></div>