스프라이트 스왑 예제

다음 샘플 프로젝트는 스프라이트 스왑을 사용하여 다양한 효과와 결과를 구현할 수 있는 다양한 방법을 보여 줍니다.

다음 샘플의 씬은 모두 Assets/Samples/2D Animation/[X.Y.Z]/Samples/4 SpriteSwap 경로에서 확인할 수 있습니다.

애니메이션 스왑

이 샘플은 스프라이트 스왑을 사용하여, 스프라이트 스왑과 스프라이트 변형이 모두 포함된 애니메이션에서 재사용 가능한 애니메이션 클립을 생성하는 방법을 보여 줍니다. 참고: 이 샘플을 사용하려면 PSD Importer 패키지를 설치합니다.

1 Animated Swap.unity 씬 파일을 열어 샘플의 실제 동작을 확인합니다.

캐릭터의 컬러 버전과 그레이스케일 버전입니다. 다양한 캐릭터가 하나의 애니메이션 클립을 공유합니다. 이 작업은 Sprite Resolver 상태를 애니메이션화하여 수행할 수 있습니다. 펼친 손에서 엄지 척 포즈로 전환되는 손 애니메이션은 두 개의 스프라이트 간 스왑으로 구현됩니다.
엄지 척 포즈의 손이 표시된 초기 프레임입니다.

이 샘플은 Assets/Samples/2D Animation/[X.Y.Z]/Samples/5 SpriteSwap/Sprites 경로에 있는 두 개의 서로 다른 소스 파일을 사용합니다. 사용된 에셋은 다음과 같습니다.

  • dialog.psb
  • dialog gray.psb

이 에셋은 Character Rig 프로퍼티가 활성화한 상태에서 PSD Importer를 통해 임포트된 것입니다. 두 에셋 모두 동일한 골격으로 리깅되어 있으며, 각 에셋에는 애니메이션 도중에 스왑되는 두 종류의 손 스프라이트가 포함되어 있습니다.

해당 에셋은 Assets/Samples/2D Animation/[X.Y.Z]/Samples/5 Sprite Swap/Sprite Library 경로에 있으며, 사용된 에셋은 다음과 같습니다.

  • dialog.spriteLib: 컬러 캐릭터
  • dialog gray.spriteLib: 그레이스케일 캐릭터

아래 단계를 따라 샘플 씬을 재구성합니다.

  1. dialog.psb와 dialog gray.psb 프리팹을 프로젝트 창에서 씬으로 드래그합니다.

  2. dialog 게임 오브젝트에 Sprite Library 컴포넌트를 추가한 다음 dialog.spriteLib 에셋을 해당 Sprite Library Asset 프로퍼티에 할당합니다.

  3. dialog gray 게임 오브젝트에 Sprite Library 컴포넌트를 추가한 다음 dialog gray.spriteLib 에셋을 해당 Sprite Library Asset 프로퍼티에 할당합니다.

  4. dialog 게임 오브젝트의 계층 구조를 확장하여 R_arm_2 자식 게임 오브젝트를 비활성화합니다. 이 에셋은 애니메이션 도중에 스왑되므로 필요하지 않습니다.

  5. R_arm_1 게임 오브젝트로 이동하여 Sprite Resolver 컴포넌트를 추가합니다. Label 드롭다운 메뉴 또는 썸네일에서 R_arm_2 그래픽을 선택합니다.

  6. dialog gray 게임 오브젝트로 4-5단계를 반복합니다.

  7. dialog 및 dialog gray 게임 오브젝트에 Animator 컴포넌트를 추가합니다. Assets/Samples/2D Animation/[X.Y.Z]/Samples/5 Sprite Swap/Animation/Animators 경로에 있는 dialog Animator 컨트롤러 에셋을 찾아 Animator 컴포넌트의 Controller 프로퍼티에 할당합니다.

이 샘플에서는 Sprite Library 컴포넌트와 Sprite Resolver 컴포넌트가 서로 같은 게임 오브젝트에 부착되어 있지 않습니다. Sprite Resolver는 현재 위치의 게임 오브젝트에서 시작하여 상위 게임 오브젝트 계층 구조를 따라 이동하면서 Sprite Library 컴포넌트를 찾으려고 시도합니다. 대신, 여러 Sprite Resolver 컴포넌트가 달려 있는 공통 루트 게임 오브젝트에 Sprite Library를 부착하는 방식을 사용합니다. 이렇게 하면 하나 또는 여러 개의 Sprite Resolver가 동일한 Sprite Library 컴포넌트를 함께 공유해서 사용할 수 있습니다.

부위별 스왑

이 샘플은 제공된 API를 사용해 Sprite Resolver 데이터를 변경하여 스프라이트 에셋을 스왑하는 방법을 보여 줍니다. 2 Part Swap.unity 씬을 열어 샘플의 실제 동작을 확인합니다.

다양한 신체 부위를 선택할 수 있는 드롭다운이 포함된 기사 캐릭터입니다. 캐릭터의 각 부위에서 SpriteResolver의 Label 프로퍼티를 변경하여 스왑할 수 있습니다.

씬에서는 각 부위별로 스왑할 수 있는 세 가지 시각적 옵션이 제공됩니다. 그래픽 에셋은 Assets/Samples/2D Animation/[X.Y.Z]/Samples/5 SpriteSwap/Sprites 경로에 있습니다.

  • Knight.psb
  • Skeleton.psb
  • Witch.psb

위의 세 가지 그래픽 에셋으로 만든 스프라이트를 포함하는 스프라이트 라이브러리 에셋이 생성됩니다. 액터의 각 신체 부위에 카테고리가 생성되고, 각 카테고리에는 캐릭터의 세 가지 다른 버전에서 파생된 세 개의 엔트리가 포함됩니다. 해당 에셋은 Assets/Samples/2D Animation/[X.Y.Z]/Samples/5 SpriteSwap/Sprite Library/Part Swap.spriteLib 경로에 있습니다.

Sprite Library 컴포넌트를 KnightRig 씬의 게임 오브젝트에 부착합니다. Part Swap.spriteLib 에셋을 해당 Sprite Library Asset 프로퍼티에 할당합니다.

Sprite Resolver 컴포넌트를 KnightRig 게임 오브젝트 아래의 모든 스프라이트 렌더러에 추가합니다. 게임 오브젝트가 나타내는 신체 부위에 따라 해당 게임 오브젝트와 일치하는 스프라이트를 할당합니다. 예를 들어, KnightRig 게임 오브젝트에 부착된 Sprite Resolver에서 'Body' 카테고리의 스프라이트 중 하나를 선택합니다.

이 설정을 통해 액터의 각 부분을 개별적으로 다른 스프라이트로 스왑할 수 있습니다.

부위별 스왑 스크립트

KnightRig 게임 오브젝트에는 SwapPart라는 커스텀 MonoBehaviour 스크립트가 부착되어 있습니다. 이 스크립트는 Assets/Samples/2D Animation/[X.Y.Z]/Samples/5 SpriteSwap/Scripts/Runtime/SwapPart.cs 경로에 있습니다.

이 스크립트는 스왑 가능한 스프라이트를 가져오기 위해 Sprite Library 컴포넌트에 대한 참조를 유지합니다. 또한 Sprite Resolver 컴포넌트로 변경할 수 있는 스프라이트 라이브러리 내 스프라이트의 카테고리 정보를 담은 데이터 배열도 포함하고 있습니다.

부위별 스왑 스크립트가 시작되면 Sprite Library 컴포넌트에서 사용 중인 스프라이트 라이브러리 에셋을 가져오려고 시도합니다.

var libraryAsset = spriteLibrary.spriteLibraryAsset;

이 스프라이트 라이브러리 에셋에서 카테고리에 있는 엔트리와 레이블 이름을 가져옵니다.

var labels = libraryAsset.GetCategoryLabelNames(swapOption.category);

이 정보는 UI 드롭다운 목록을 채우는 데 사용됩니다.

UI 드롭다운 목록에서 값이 변경되면 Sprite Resolver 컴포넌트가 관련 스프라이트를 사용하도록 설정됩니다.

swapOption.spriteResolver.SetCategoryAndLabel(swapOption.category, swapOption.dropdown.options[x].text);

전체 스킨 스왑

이 샘플은 제공된 API를 사용해 Sprite Library 컴포넌트가 참조하는 스프라이트 라이브러리 에셋을 변경하여 스프라이트 시각적 요소를 스왑하는 방법을 보여 줍니다. 3 Full Swap.unity 씬을 열어 샘플의 실제 동작을 확인합니다.

기사 캐릭터에 기사, 늑대, 마녀로 전환할 수 있는 드롭다운이 표시되어 있습니다. SpriteLibrary에서 사용 중인 SpriteLibraryAsset을 변경하여 전체 캐릭터의 시각적 요소를 스왑할 수 있습니다.

씬에는 스왑할 수 있는 세 가지 시각적 에셋 옵션이 있습니다. 해당 에셋은 Assets/Samples/2D Animation/[X.Y.Z]/Samples/5 SpriteSwap/Sprites 경로에 있습니다.

  • Knight.psb
  • Wolf.psb
  • Witch.psb

스프라이트 라이브러리 에셋의 카테고리, 엔트리, 레이블 이름은 동일하지만, 선택된 스프라이트는 다릅니다. 해당 에셋은 Assets/Samples/2D Animation/[X.Y.Z]/Samples/5 SpriteSwap/Sprite Library 경로에 있습니다.

  • Knight.spriteLib
  • Wolf.spriteLib
  • Witch.spriteLib

Sprite Library 컴포넌트를 KnightRig 게임 오브젝트에 부착합니다. Knight.spriteLib 에셋을 해당 Sprite Library Asset 프로퍼티에 할당합니다.

Sprite Resolver 컴포넌트를 KnightRig 게임 오브젝트 하위에 있는 각 스프라이트 렌더러에 추가합니다. 각 Sprite Resolver가 부착된 신체 부위에 맞게 해당 스프라이트를 할당합니다. 예를 들어, torso 게임 오브젝트에 부착된 Sprite Resolver에는 torso 스프라이트를 선택합니다.

전체 스킨 스왑 스크립트

KnightRig 게임 오브젝트에는 SwapFullSkin이라는 커스텀 MonoBehaviour 스크립트가 부착되어 있습니다. 해당 스크립트는 Assets/Samples/2D Animation/[X.Y.Z]/Samples/5 SpriteSwap/Scripts/Runtime/SwapFullSkin.cs 경로에 있습니다.

UI 드롭다운 목록에서 값이 변경되면 컴포넌트는 Sprite Library 컴포넌트에 사용할 관련 스프라이트 라이브러리 에셋을 설정합니다.

spriteLibraryTarget.spriteLibraryAsset = spriteLibraries[value];

DLC 스왑

이 샘플은 제공된 API를 사용해 Sprite Library 컴포넌트가 참조하는 스프라이트 라이브러리 에셋을 변경하여 스프라이트 시각적 요소를 스왑하는 방법을 보여 줍니다. 이 샘플은 전체 스킨 스왑 샘플을 기반으로 합니다.

전체 스킨 스왑 방법과의 차이점은 스프라이트 라이브러리 에셋이 런타임 중에 에셋 번들에서 로드되고 나중에 Sprite Library 컴포넌트에 추가된다는 점입니다. 4 DLC Swap.unity 씬을 열어 샘플의 실제 동작을 확인합니다.

두 명의 기사 캐릭터에 스킨을 각각 선택할 수 있는 드롭다운이 표시되어 있습니다. 이 캐릭터는 추가 시각적 요소가 포함된 다운로드 가능한 콘텐츠를 제공합니다. 이는 에셋 번들에서 스프라이트 라이브러리 에셋을 익스포트하여, 이후에 로드되도록 구현할 수 있습니다.

에셋 번들이 올바르게 작동하려면 Assets/Samples/2D Animation/[X.Y.Z]/Samples/5 SpriteSwap/Sprite Library 경로에 있는 Skeleton.spriteLib 에셋에 해당 에셋 번들 태그 레이블이 적용되어 있어야 합니다.

로드 스왑 DLC 스크립트

Load DLC 게임 오브젝트에는 LoadSwapDLC라는 커스텀 MonoBehaviour 스크립트가 부착되어 있습니다. 해당 스크립트는 Assets/Samples/2D Animation/[X.Y.Z]/Samples/5 SpriteSwap/Scripts/Runtime/LoadSwapDLC.cs 경로에 있습니다.

DLC가 로드되면 스크립트가 실행되면서, 에셋 번들에서 스프라이트 라이브러리 에셋이 있는지 스캔합니다. 스프라이트 라이브러리 에셋이 로드되면 전체 스킨 스왑 샘플의 SwapFullSkin 스크립트에 해당 엔트리를 추가합니다.