코인

코인 프로젝트는 Spine의 클리핑과 틴트 블랙 기능을 사용하여 반짝이는 코인을 만드는 방법을 보여줍니다.

설정

코인은 두 면으로 구성되어 있으며, 한 면에는 스파인보이의 머리가 있고 다른 면에는 Spine 로고가 있습니다. 이 두 면은 영역 어태치먼트인 coin-front-logo와 coin-front-spineboy로 coin-front 슬롯의 coin-front 뼈 아래에 있습니다.

이 외에도 당사는 두 개의 어태치먼트인 coin-front-shine-logo와coin-front-shine-spineboy가 있는 coin-front-shine 슬롯의 어태치먼트를 그립니다.

이미지의 밝고 어두운 부분은 별도로 약간의 색깔을 넣을 수 있기 때문에 이와 같은 흑백 이미지에는 틴트 블랙 기능을 사용하면 특히 유용합니다. 당사는 이 어태치먼트가 들어있는 coin-front-shine 슬롯에 틴트 블랙 기능을 활성화했습니다.

또한 당사는 슬롯에 가산 블렌딩을 활성화했습니다. 밝은 이미지가 밑에 있는 코인 이미지의 밝기를 변경할 수 있도록 coin-front 슬롯 상단에 coin-front-shine 슬롯을 추가적으로 블렌딩하고, 틴트 블랙 색상을 변경함으로써 빛나는 효과 부분이 이루어집니다.

당사가 코인의 어느 면을 보고 있는지에 따라 코인의 앞면 또는 뒷면 어태치먼트가 보이도록 할 수 있습니다.

coin-front 뼈에는 clipping이라는 또 하나의 뼈가 들어 있으며, 그 뼈 자체에는 같은 이름의 슬롯 clipping과 클리핑 어태치먼트가 들어 있습니다. 이 clipping 어태치먼트는 원에 가까운 다각형 클리핑 영역을 정의합니다. 클리핑 영역은 shine 슬롯과 그 어태치먼트 shine에만 영향을 미칩니다.

클리핑 어태치먼트에 의해 클리핑되는 슬롯은 드로우 오더에서 클리핑 어태치먼트의 위치와 클리핑 어태치먼트의 종료 슬롯 속성에 의해 정의됩니다. 클리핑 어태치먼트의 영향을 받는 슬롯은 트리 체계 보기의 드로우 오더 섹션에서 강조 표시됩니다. 이 프로젝트에서는shine과 clipping 슬롯만이 영향을 받습니다.

드로우 오더 섹션의 images/shine 슬롯 위에 마우스를 올려놓으면 에디터 뷰포트의 해당 슬롯에 있는 영역 어태치먼트의 원래 모양이 나타납니다.

어태치먼트는 클리핑 어태치먼트에 의해 정의된 원형 영역에 클리핑됩니다.

마지막으로, 당사는 측면에서 보았을 때 코인에 입체감을 더하기 위해 뼈와 슬롯의 coin-sides 계층구조를 추가했습니다. coin-side-round 슬롯은 마치 3D로 보는 것처럼 코인이 회전할 때 코인의 측면 보기를 점진적으로 추가하는 데 사용됩니다. 코인이 측면에서 완전히 보일 때 coin-side-straight 슬롯이 나타납니다.

애니메이션

이 애니메이션은 총 80개의 프레임으로 구성되어 있으며, 이 중 40개는 Spine 로고를 보여주고 나머지 40개는 스파인보이의 머리를 보여줍니다. coin-front와 coin-front-shine 슬롯에 있는 각 어태치먼트의 가시성에 대한 키를 설정함으로써 측면 전환이 이루어집니다.

coin-side-round와 coin-side-straight 슬롯과 함께 X축의 coin-front 뼈의 크기를 조정하고 오른쪽으로 약간 움직여 원근감 왜곡 효과를 얻음으로써 코인의 회전이 이루어집니다.

clipping 뼈는 부모 뼈 coin-front에서 모든 움직임과 변형을 상속받습니다.

코인이 회전하는 동안, 당사는 coin-front-shine와 coin-front 슬롯의 틴트 블랙 색상을 변경하여 밝은 효과 부분을 만들어 냅니다. 동시에 shine 뼈는 오른쪽에서 왼쪽으로 그리고 다시 뒤로 움직입니다. 이 뼈는 clipping 어태치먼트로 클리핑되고 코인에 하이라이트가 추가됩니다.

위의 플레이어에서 전체 애니메이션을 볼 수 있습니다.