유니티의 최신 2D 샘플 프로젝트인 드래곤 크래셔에 대해 알아보기
유니티는 2019년 출시 주기에 2D 아티스트와 크리에이터에게 완벽한 2D 툴 세트를 제공한다는 비전을 실현했습니다. 이번에 출시된 2D 패키지에는 캐릭터 스켈레탈 애니메이션과 역운동학(IK), 타일맵을 사용한 레벨 디자인, 스플라인 모양, 픽셀 아트 툴이 포함되어 있습니다. 2D 웹사이트에서 개요를 확인하세요.
이후 유니티의 2D 팀은 이러한 워크플로를 최적화하고 그래픽 기술인 유니버설 렌더 파이프라인 내 2D 렌더러를 개선했습니다. 새로운 샘플 프로젝트를 살펴보는 것만큼 이러한 툴을 테스트하고 2D 비주얼을 돋보이게 하는 방법을 확인할 수 있는 좋은 방법은 없습니다. 이제 에셋 스토어에서 드래곤 크래셔를 무료로 이용할 수 있습니다.
드래곤 크래셔는 Unity 2020.2로 제작된 공식 샘플 프로젝트로, 유니티의 기본 2D 툴과 그래픽 기술을 선보입니다. 이 게임 플레이는 오늘날 모바일 플랫폼에서 인기 있는 횡스크롤 방치형 RPG의 세로형 조각입니다.
영웅 파티가 적을 자동 공격하는 동안 다른 아바타를 터치/클릭하는 것만으로 특수 공격을 발동할 수 있습니다.
샘플 프로젝트는 데스크톱, 모바일 및 웹 플랫폼에서 테스트되었습니다.
이 글에서 공유한 정보 외에도 4월 14일 오전 11시(동부 표준시 오후 5시)에 진행되는 온라인 드래곤 크래셔스 개요 웨비나에 참여하여 주요 팁과 글로벌 콘텐츠 개발자인 앤디 터치의 라이브 안내를 받아보세요. 등록 섹션으로 이동합니다.
에셋 스토어에서 프로젝트를 받으려면 Unity 2020.2 또는 2020 LTS가 있어야 합니다. 먼저 새 2D 프로젝트를 시작한 다음 패키지 관리자 > 내 에셋으로 이동하여 드래곤 크래셔를 임포트합니다. 프로젝트 설정 팝업 메시지가 표시될 수 있으니 모두 수락하세요.
문제가 발생하면 2D 전용 드래곤 크래셔 포럼에 알려주세요.
프로젝트를 가져오면 메뉴 표시줄에 프로젝트의 장면에 대한 바로 가기를 제공하는 새 옵션이 표시됩니다. 게임 메뉴 로드를 선택하고 플레이를 눌러 시도해 보세요.
게임 보기에서 풀 HD(1920×1080) 설정 또는 4K UHD(3840×2160)와 같은 고화질 디스플레이 설정을 사용하는 것이 좋습니다.
영웅과 기본 적으로 구성된 파티는 다양한 의상, 액세서리 및 변형으로 꾸며져 있습니다. 그러나 이들은 모두 비슷한 구조를 가진 이족보행 동물입니다.
각각의 2D IK 제약 조건으로 애니메이션을 일일이 적용하지 않기 위해 마네킹을 만들었습니다. 애니메이터는 이 마네킹을 사용했고 캐릭터 아티스트는 캐릭터의 독특한 스킨과 액세서리를 제작했습니다.
각 캐릭터의 프리팹 배리언트를 생성하는 데 마네킹 프리팹(PV_Character_Base_Bipedal.prefab)을 사용했습니다. 이 변형의 유일한 차이점은 스프라이트 라이브러리 에셋으로, 이족보행 캐릭터의 시각적 외관을 바꾼 것입니다.
모든 캐릭터 스프라이트 라이브러리 에셋에는 신체 부위와 그 변형을 정의하는 동일한 카테고리와 레이블이 있습니다. 예를 들어 기사와 스켈레톤 적 모두 '입'이라는 카테고리가 있으며 애니메이션 중에 '입 벌리기', '입 이빨', '입 일반'으로 레이블이 지정된 스프라이트 변형이 사용됩니다.
모든 캐릭터에 애니메이션을 적용하려면 각 캐릭터의 비주얼 에셋 또는 PSB에 유사한 릭이 있는지 확인합니다. 즉, 동일한 카테고리 및 레이블의 신체 부위에 동일한 방식으로 이름이 지정된 뼈가 부착되어 있어야 합니다. 시간을 절약하려면 마네킹의 골격(또는 참조 캐릭터 뼈대)을 복사하여 다른 캐릭터에 붙여넣을 수 있습니다. 이 옵션은 스프라이트 에디터의 일부인 스키닝 에디터에서 사용할 수 있습니다.
프리팹에는 2D 라이팅 환경에서의 통합을 개선하기 위한 역 키네마틱, 노멀 및 마스크 맵과 같이 캐릭터를 더욱 생동감 있게 만드는 기능이 포함되어 있습니다.
프로토타입 제작 과정에서 레벨 디자인을 너무 일찍 확정할 필요는 없습니다. Unity에 포함된 월드 빌드 2D 툴을 사용하면 레벨을 재미있게 디자인한 다음 쉽게 반복 작업할 수 있습니다. 타일맵 에디터와 스프라이트 셰이프는 오브젝트나 지형 모양에 맞게 충돌기를 설정하는 등의 작업을 자동화하는 데 도움이 되며, 씬 뷰는 게임을 더욱 흥미롭고 미적으로 즐겁게 만들 수 있는 놀이터입니다.
가장 중요한 측면은 타일 팔레트에 반복 가능한 타일, 애니메이션 타일, 아이소메트릭 또는 육각형 타일, 심지어 이 모든 타일을 단 하나의 렌더러(타일맵 렌더러)로 고성능으로 렌더링하는 게임 오브젝트를 포함할 수 있는 모든 "브러시"를 준비해 두는 것입니다. 그리드의 모든 요소는 팔레트_지반 및 벽 타일 팔레트를 참조하세요.
레벨 디자인에서 종종 간과되는 또 다른 기능은 스프라이트 그리기 모드입니다. 배경 레이어에 사용되는 타일 스프라이트는 작은 스프라이트로 넓은 씬 영역을 커버하여 멋진 시차 효과를 만들 수 있습니다.
타일맵 그리드는 프로젝트에 유기적으로 보이는 오브젝트나 스플라인 기반 요소를 추가하는 데 가장 실용적인 솔루션이 아닐 수 있습니다. 대신 벡터 드로잉 소프트웨어처럼 그리는 2D 스프라이트 셰이프와 같은 스플라인 기반 도구를 사용하는 것이 좋습니다. 배경 소품이나 게임플레이의 일부로 사용하세요. 스프라이트 셰이프 렌더러를 사용하면 셰이프의 스플라인이나 테두리에 부착된 많은 스프라이트를 효율적으로 렌더링할 수 있습니다. 스플라인 선으로 트랙이 어떻게 그려지고 스프라이트 셰이프 프로파일의 채우기 텍스처로 지지 구조 아트워크가 만들어지는지 관찰하려면 프리팹 P_MineCartTracks_A를 참조하세요.
프리팹 P_Bridge 또는 P_MineCartTracks_B는 스프라이트 모양 테두리가 단순한 선이 아니라 보다 정교한 요소(이 경우 다리와 철로)를 나타내는 방법을 보여주는 다른 예시입니다.
2D 렌더러에서 고급 조명 효과를 위해 스프라이트 조명 셰이더를 사용하세요. 스프라이트에 보조 텍스처를 부여하여 이러한 효과를 최대한 활용하세요.
노멀 맵은 스프라이트 에디터에서 추가할 수 있습니다. 이러한 RGB 이미지는 픽셀이 향하고 있는 XYZ 방향을 나타내며 2D 조명에 영향을 줄 수 있는 정도를 알려줍니다. 마스크 맵은 라이트 블렌드 스타일 기능의 일부인 2D 렌더러 데이터 에셋( 프로젝트의RenderData_2D.asset) 에서도 활용할 수 있습니다. "프레넬"이라는 라이트 블렌드 스타일은 캐릭터와 스프라이트 주변의 테두리 조명을 강조하는 데 사용됩니다. 예를 들어 프레넬 효과를 얻으려면 마스크 맵에서 R 채널 정보를 사용하도록 선택합니다. 이 특정 프로젝트에서는 라이트 블렌드 스타일이 하나뿐이므로 R, G, B의 세 채널이 모두 동일하게 보입니다(흑백). 이렇게 하면 마스크 맵을 만드는 과정이 더 편리해집니다.
데모에서 셰이더 그래프는 CPU에 부담을 주지 않고 소품에 애니메이션을 적용하는 데 자주 사용됩니다. 거미줄을 움직이는 바람(P_SpiderWeb_Blur 프리팹), 빛나는 크리스탈(P_Crystals_Cluster), 용암이 흐르는 애니메이션(P_Lava_Flowing_Vertical) 등의 요소는 플로우 맵 텍스처를 활용하여 메인 텍스처의 UV 좌표 방향을 제어하는 것을 관찰할 수 있습니다. 흐름 텍스처는 빨간색과 녹색을 사용하여 모든 프레임에서 픽셀이 따르는 XY 방향을 나타냅니다. 서브그래프 플로우맵을 열어 이 효과를 얻는 방법을 알아보세요.
같은 드래곤 전투 장면에는 단일 텍스처에서 부드러운 애니메이션을 만드는 '애니메이션 알파 클리핑'이라는 또 다른 셰이더 애니메이션 기법이 있습니다. 이는 각 프레임에서 알파 값에 따라 특정 범위의 픽셀을 표시하는 방식으로 이루어집니다. 용암 튄자국(ParticleSystem_Splatters)이나 타격 애니메이션(P_VFX_HitEffect) 과 같은 시각 효과는 셰이더 그래프에서 이 기술을 사용하여 만들었습니다.
데모의 아트 스타일은 2D 조명과 그 다양한 가능성을 고려하여 제작되었습니다. 보시다시피 수작업으로 제작된 노멀 맵과 마스크 맵으로 향상된 스프라이트는 비교적 평평합니다. 타일맵 바닥과 같은 일부 스프라이트는 그레이 스케일로, 타일맵 렌더러의 색상 옵션을 사용하여 환경의 조명 영역과 결합하여 색상을 지정합니다.
실시간 2D 라이트를 사용하면 Unity 에디터에서 최종 게임 씬에 더 많은 시간을 할애할 수 있습니다. 조명과 오브젝트로 씬을 구성하거나 레벨을 플레이하면서 직접 결과물을 관찰하면 원하는 게임 분위기와 분위기를 더 잘 설정할 수 있습니다.
또한 이러한 요소에 애니메이션을 적용하여 몰입도를 높일 수 있습니다. 예를 들어, P_Lantern_HangingFromPost 프리팹은 애니메이션 오브젝트에 조명을 부착하거나 마녀 캐릭터에 스프라이트 라이트 파티클이 있는 지팡이를 부여하는 방법을 보여줍니다.
프로젝트에서 2D 조명을 사용하면 얻을 수 있는 또 다른 이점은 요소를 재사용할 수 있다는 점입니다. 환경과 소품은 조명 조건에 따라 매우 다르게 보일 수 있으므로 동일한 스프라이트로 다양한 레벨을 재현할 수 있습니다.
게임플레이를 생성, 구조화, 관리 및 반복하기 위해 데모 프로젝트에서는 스크립터블 오브젝트와 프리팹을 조합하여 사용했습니다.
영웅이든 악당이든 일곱 캐릭터는 모두 기본 유닛 조립식으로부터 핵심 구조를 상속받으며 동일한 행동 코드를 사용합니다. 캐릭터 간 값을 구분하기 위해 단위 기반 값의 다양한 '블록'에 스크립터블 오브젝트를 사용했습니다. 하드코딩된 값은 프로그래머가 아닌 사람이 게임 밸런스를 맞추기 어렵고 게임플레이를 경직되게 만들 수 있으므로 '공격 피해량', '능력 쿨다운 시간(초)', '유닛 체력' 등의 단위 값을 스크립터블 오브젝트에 설정하여 프로젝트에 참여하는 모든 사람이 빠르게 조정할 수 있도록 했습니다. 그런 다음 이러한 값 변경은 게임플레이 코드에서 동적으로 처리됩니다.
각 유닛 프리팹에는 유닛의 '두뇌' 역할을 하며 내부 프리팹 스크립트 참조 및 동작 순서를 처리하는 핵심 'UnitController' 스크립트가 있습니다. 예를 들어 드래곤이 공격을 받으면 '유닛 컨트롤러'는 움찔 애니메이션으로 전환하고 포효 사운드 효과를 재생하며 드래곤의 체력을 감소시키는 등 관련 동작 이벤트를 실행합니다. 이러한 핵심 동작은 캡슐화 개념을 준수하며 각각의 목적과 작업만 처리합니다. 예를 들어, 유닛의 생명력 값 설정 및 제거, 'HealthChanged' 또는 'HealthIsZero'와 같은 중요한 이벤트 콜백 보고 등의 로직만 처리하는 UnitHealthBehaviour가 있습니다. 그러나 'UnitController'는 게임플레이 중에 발생하는 시나리오와 동작에 따라 'UnitHealthBehaviour'에 값을 전송합니다.
특정 이벤트가 발생하면 유닛 외부의 시스템을 업데이트해야 하는 경우도 있습니다. 이러한 설정에는 델리게이트가 사용됩니다.
예를 들면 다음과 같습니다. 마녀가 공격으로 피해를 받고 'UnitHealthBeaviour'가 'HealthChanged(int healthAmount)' 이벤트를 실행하면 외부에서 구독하는 'UIUnitHealthBeaviour'가 해당 값에 따라 마녀의 체력 바를 업데이트할 수 있습니다.
델리게이트를 사용하면 다른 시스템에 대한 의존성 없이 영역을 격리하고 테스트할 수 있습니다. 예를 들어, 전투 게임플레이를 시뮬레이션할 필요 없이 별도의 장면에서 팝업 데미지 표시 번호 시스템의 성능을 테스트하는 것이 포함되었습니다.
타임라인을 사용하여 각 유닛에 대해 미리 제작된 어빌리티 시퀀스를 만들었습니다. 이를 통해 각 유닛은 MOBA 게임의 챔피언 능력과 유사하게 캐릭터와 연결되고 연관된 고유한 특수 능력을 가질 수 있습니다.
각 유닛에는 '기본' 자동 공격과 수동으로 활성화하는 '특수' 공격의 두 가지 능력 타임라인이 있습니다. 'UnitAbilitiesBehaviour' 스크립트는 현재 재생 중인 능력, 능력 순서 대기열, 능력 재사용 대기시간 시작/중지(인트로 컷신 재생 여부 또는 유닛 사망 여부 등 높은 수준의 게임플레이 로직에 따라 다름)의 두 능력 타임라인에 대한 로직을 처리합니다. 어빌리티 타임라인 트랙은 유닛 프리팹의 로컬 시스템에 바인딩되며, 여기에는 공격 애니메이션을 위한 캐릭터 애니메이터와 VFX를 위한 파티클 시스템이 포함됩니다. 이를 통해 프로그래머와 아티스트 모두 프리팹 편집 모드를 사용하여 유닛의 특정 능력을 개별적으로 생성, 재생 및 반복한 후 게임 내 유닛 프리팹의 각 인스턴스에 변경 사항을 적용할 수 있었습니다.
타임라인 신호는 유닛 대상의 체력에 일종의 값 수식어를 적용하는 능력에 사용되었습니다. 예를 들어 기사가 검을 휘두를 때 애니메이션의 시작이나 끝이 아니라 검이 임계점에 도달하자마자 대미지가 적용되기를 원합니다. 개발 과정에서 애니메이션과 VFX의 타이밍이 반복될 때 아티스트는 프로그래머에게 코드의 값을 변경할 필요 없이 매우 빠른 워크플로에서 '어빌리티 발생' 신호를 시퀀스의 새로운 원하는 지점으로 재배치했습니다.
또한 영웅 그룹에게 불을 뿜는 용과 같이 연속 공격에서 여러 '능력 발생' 신호를 추가할 수 있었습니다.
선임 글로벌 콘텐츠 개발자인 앤디 터치(Andy Touch )는 프로젝트 제작에 사용된 캐릭터 파이프라인 워크플로우의 에디터 내 데모를 통해 웨비나를 진행했습니다. 이 웨비나에서 그 방법을 알아보세요:
- 포토샵에서 Unity로 2D 캐릭터 익스포트
- 캐릭터의 스프라이트 릭 설정
- 캐릭터의 팔다리에 IK 설정하기
- 스프라이트 스와핑을 사용하여 다양한 캐릭터 비주얼 구현하기
- 무기 부착물에 중첩된 조립식 사용
- 2D 조명 스타일에 스프라이트 노멀 및 마스크 맵 적용
- 타임라인을 사용하여 캐릭터 능력 순서 지정하기
드래곤 크래셔를 함께 즐겨주신 것에 대한 감사의 표시로 2D 게임 개발 여정에서 영감을 얻을 수 있는 배경화면, Zoom 배경 및 기타 비주얼 세트를 공유해드리고자 합니다. 드래곤 크래셔 배경은 여기에서 다운로드하세요.
