<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>Professional、メッシュ、ウェイト、パス・コンストレイント、トランスフォーム・コンストレイント、IKコンストレイント</p>
						</div>
						<div class="examples-header-download">[example-download:stretchyman]</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
new spine.SpinePlayer(document.getElementById("player"), {
	jsonUrl: "/files/examples/4.2/stretchyman/export/stretchyman-pro.json",
	atlasUrl: "/files/examples/4.2/stretchyman/export/stretchyman-pma.atlas",
	animation: "sneak",
	viewport: { 
		x: -187,
		y: -72,
		width: 1102,
		height: 622
	},
	backgroundColor: "#555555FF",
	fullScreenBackgroundColor: "#555555FF"
});
</script>

!!
# Stretchyman(ストレッチーマン)
このStretchymanのプロジェクトは[IK](/spine-ik-constraints)、[パス](/spine-path-constraints)、[ウェイト](/spine-weights)を使用して簡単なコントロールで伸縮自在な手足を作成し、アニメーションプロセスを容易にする方法をご紹介しています。以下ではStretchymanの後脚を主に説明しますが、前脚のセットアップも同じです。

## コンストレイント
![](/img/spine-examples/stretchyman/stretchyman-constraints-01.jpg)

後脚は`hip`ボーンの子になっている2つのボーン`back-leg-ik1`と`back-leg-ik2`から構成されています。これらは2つボーンによるIKコンストレイント`back-leg-ik`により制御されています。このIKコンストレイントのターゲットは`back-leg-ik-target`です。このボーンを動かすと`back-leg-ik1`と`back-leg-ik2`ボーンが追従し、脚の動作のアニメーションを簡単にコントロールできます。

また`back-leg-ik`IKコンストレイントは、`Stretch(ストレッチ)`プロパティが有効にされています。`Stretch(ストレッチ)`を有効にすると、2本のIKボーンがスケーリングされ、これらのボーンの元の長さに関わらず、常にIKターゲットに達するようになります。

`hip`ボーンは`back-leg-path`と呼ばれるパス・アタッチメントを含むスロット`back-leg-path`を含みます。このパスの頂点は`back-leg-ik1`および`back-leg-ik2`ボーンにウェイト付けされています。これらの2本のボーンが`back-leg-ik`IKコンストレイントにより動かされると、パスがこれに従って変形されます。

`hip`ボーンにもう一つ子になっているのは、`back-leg1`～`back-leg8`の8本のボーンチェーンです。これらの8本のボーンの長さと配置は`back-leg-path`パス・コンストレイントによりコントロールされます。パス・コンストレイントの`Spacing(間隔)`タイプは`Percent(パーセント)`に設定されており、この場合、値は`100 / 8 = 12.5`に設定されます。これによりボーンは常にパスの全長で示され、8本のそれぞれのボーンはパスの長さの`12.5%`を占めます。

制約された脚ボーンにパスの回転とトランスレーションを完全に適用するために、`Rotate(回転)`と`Translate(トランスレート)`の`Mix(ミックス)`値は`100`に設定します。最後にボーンがパスに密接するように、`Chain Scale(チェーンスケール)`が使用されます。

## ウェイト

パスが選択される時、[`Weights(ウェイト)`ビュー](/spine-weights) に見られる通り、`back-leg-path`パスの頂点は`back-leg-ik1`と`back-leg-ik2`ボーンにウェイト付けされています。

パスを操作するために、ウェイトの生成には`Auto(自動)`を使用していません。その代わりに各頂点のウェイトと頂点ハンドルはマニュアルで設定されています。ウェイトペインティングを少し使用するだけで、このような設定が出来上がりました：

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

`back-leg-ik-target`ボーンを動かすと、パスとパスに制約される`back-leg1`～`back-leg8`ボーンが`back-leg-ik1`および`back-leg-ik2`というIKボーンをフォローします。


![](/img/spine-examples/stretchyman/stretchyman-weights-02.gif)

ウェイト付けプロセスの最後のステップとして、脚を示すメッシュの頂点にウェイトを割り当てました。このメッシュがボーンチェーン、`back-leg1`～`back-leg8`にウェイト付けされます：

![](/img/spine-examples/stretchyman/stretchyman-weights-03.jpg)

このステップ後、IKターゲットを動かすと、脚のメッシュがウェイトに従って変形します。

## パス変形

脚を動かすことでアニメーションされるIKターゲットボーンはすでにかなり柔軟ですが、[パス頂点の変形](/spine-paths#ウェイト)を使用することで、さらにコントロール性を高めることができます。

[`Animate(アニメ化)`モード](/spine-animating)で`sneak`（忍び足）アニメーションを選択すると、`back-leg-path`のフレームの変形キーが`43`、`45`、`47`、`50`にあることが分かります。これらのキーはStretchymanが脚を自分に引き寄せるとき、脚が少し折りたたまれるように見せています。 

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

最終的な`sneak`アニメーションはこのページの一番上のプレーヤーで見ることができます。

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