<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>전문가형, 메쉬, 가중치, 경로 제약조건, 변형 제약조건, 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>

!!
# 스트레치맨
스트레치맨 프로젝트는 [IK](/spine-ik-constraints), [경로](/spine-path-constraints) 및 [가중치](/spine-weights)를 이용하여 간단한 제어를 통해 늘어나는 팔다리 만들어 애니메이션 프로세스를 쉽게 처리할 수 있는 방법에 대한 예제입니다. 아래에서 당사는 스트레치맨의 뒷다리에 중점을 둘 것입니다. 앞다리는 같은 방식으로 설정됩니다.

## 제약조건
![](/img/spine-examples/stretchyman/stretchyman-constraints-01.jpg)

뒷다리는 `hip` 뼈에 붙어 있는 두 개의 뼈인 `back-leg-ik1`과 `back-leg-ik2`로 구성됩니다. 이 뼈는 두 개의 뼈 IK 제약조건인 `back-leg-ik`에 의해 구현됩니다. `back-leg-ik-target` 뼈는 IK 제약조건의 타겟입니다. 이 타겟 뼈를 움직이면 `back-leg-ik1`과 `back-leg-ik2` 뼈가 따라가게 되며, 당사는 간단한 제어를 통해 다리 움직임을 애니메이션화합니다.

또한 당사는 IK 제약조건인 `back-leg-ik`의 `늘어남` 속성을 활성화했습니다. `늘어남` 기능을 활성화하면 두 개의 IK 뼈가 원래 길이와 관계없이 항상 IK 타겟에 닿을 수 있도록 크기가 조정됩니다.

`hip` 뼈에는 `back-leg-path`라는 이름의 슬롯이 들어 있으며, 이 슬롯에는 `back-leg-path`라는 이름의 경로 어태치먼트가 들어 있습니다. 이 경로의 정점에는 `back-leg-ik1`과 `back-leg-ik2` 뼈의 가중치가 부여됩니다. 이 두 뼈가 IK 제약조건인 `back-leg-ik`에 의해 움직이게 되면 그에 맞춰 경로가 변형됩니다.

또한 `hip` 뼈에 붙어있는 것은 `back-leg1`~`back-leg8`이라는 이름의 8개 뼈 체인입니다. 이 8개 뼈의 길이와 배치는 `back-leg-path` 경로 제약조건에 의해 제어됩니다. 경로 제약조건의 `간격` 유형은 `퍼센트`로 설정되고, 그 값은 `100/8 = 12.5`로 설정됩니다. 이렇게 하면 뼈가 항상 경로의 전체 길이를 채우게 됩니다. 경로에 있는 각각의 8개 뼈는 경로 길이의 `12.5%`를 차지합니다.

`회전`과 `이동`에 대한 `믹스` 값이 `100`으로 설정되어 경로의 회전과 이동이 제약된 다리뼈에 완전히 적용됩니다. 마지막으로, `체인 크기 조정`은 뼈가 경로에 최대한 가깝게 고정되도록 하는 데 사용됩니다.

## 가중치

경로가 선택되면 [`가중치` 보기](/spine-weights)에서 볼 수 있듯이 `back-leg-path` 경로의 정점에는 `back-leg-ik1`과 `back-leg-ik2` 뼈의 가중치가 부여됩니다.

당사는 경로를 작업 대상으로 하기 때문에, 가중치를 생성하기 위해 `자동` 기능을 사용하지 않았습니다. 대신 각 정점 및 정점 핸들의 가중치를 수동으로 설정합니다. 당사는 약간의 가중치 페인팅을 사용하여 다음과 같은 구성을 완성했습니다.

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

`back-leg-ik-target` 뼈를 움직이면 경로에 제약된 `back-leg1`~`back-leg8` 뼈뿐만 아니라 경로도 IK 뼈인 `back-leg-ik1`과 `back-leg-ik2`를 따라갑니다.

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

가중치 부여 프로세스의 마지막 단계로서, 다리를 나타내는 메쉬의 정점에 가중치를 부여했습니다. 메쉬에는 뼈 체인 `back-leg1`~`back-leg8`의 가중치가 부여됩니다.

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

이 단계 다음에 IK 타겟을 움직이면, 이제 가중치에 따라 다리 메쉬도 변형됩니다.

## 경로 변형

IK 타겟 뼈를 움직여 다리를 애니메이션화하는 것은 이미 매우 유연하지만, 당사는 [경로 정점을 변형](/spine-paths#Weights)함으로써 훨씬 더 많은 제어 기능을 추가할 수 있습니다.

`스닉` 애니메이션을 선택한 [`애니메이트` 모드](/spine-animating)에서 당사는 `back-leg-path`의 `43`, `45`, `47` 및 `50`프레임에서 변형 키를 볼 수 있습니다. 이 키는 스트레치맨이 다리를 자기 쪽으로 당기면 마치 다리가 약간 접히는 것처럼 보이도록 합니다.

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

페이지 상단의 플레이어에서 최종 `스닉` 애니메이션을 볼 수 있습니다.

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