러버덕 게임즈가 이블 위저드에서 보스전을 개발한 방법
GDC 2023 베스트 인 플레이 수상작 중 하나인 Rubber Duck Games가 매력적인 보스전을 만든 비결을 공개합니다. 이 게스트 블로그에서는 팀원 Banki와 Sergio Wajswol이 디자인 및 프로토타입 제작부터 애니메이션, 테스트, 밸런싱, 시각 효과 및 오디오 마무리까지 전체 과정을 안내하는 Evil Wizard의 시각 효과와 오디오에 대해 설명합니다.
독자 여러분, 안녕하세요! 저는 러버덕 게임즈의 게임 디자이너이자 프로듀서인 Banki입니다. 유머 가득한 액션 RPG 이블 위저드 가 Steam과 Xbox에 출시되었는데요, 보스전 개발 비하인드 스토리를 소개해드리고자 합니다.
이블 위저드는 저주받은 영웅에 대한 복수를 위해 패배한 '최종 보스'의 입장이 되어 게임을 플레이하는 메트로배니아풍의 게임입니다.
복수를 위한 이 퀘스트에서 플레이어는 자신의 것을 되찾기 위해 극복해야 하는 수많은 적들로 가득한 매력적인 픽셀 아트 환경을 통과하게 됩니다. 주인공은 한때 강력한 마법사였지만, 영웅의 손에 패배하여 힘을 빼앗겼고, 성에 잠입하여 파괴적인 복수를 펼치기 위해 노력하면서 각각을 되찾아야 합니다.
게임에서 가장 먼저 쓰러뜨려야 할 영웅은 강력한 얼음 마법사 하일가입니다. 이번 심층 분석의 예시 보스로 그녀를 사용하겠습니다.
처음부터 다시 시작하겠습니다. 이블 위저드의 보스(와 모든 적)를 디자인하는 것은 조금 까다로웠습니다. 플레이어가 선한 편에 맞서 싸우더라도 적으로 인식될 만큼 위협적으로 보여야 한다고 생각했습니다.
보스의 경우 유명 게임 속 영웅에게서 영감과 레퍼런스를 찾았습니다. 헤일가는 워크래프트의 제이나에서 많은 영감을 얻었는데, 두 캐릭터가 비슷한 점이 많았기 때문입니다.
첫 번째 단계는 캐릭터의 주요 특징, 메커니즘, 참고 자료를 자세히 설명하는 스프레드시트(게임 내 모든 보스에 사용)를 준비하는 것이었습니다.
메커니즘이 설계되었으므로 다음 단계인 프로토타입 제작으로 넘어갈 수 있었습니다.
팀원들에게 새 상사의 디자인을 발표할 때가 되어 회의에 들어가서 문서를 살펴보고 제가 결정한 몇 가지 사항을 설명합니다.
여기서 디자인을 약간 조정합니다. 메카닉을 개발하기 너무 어렵거나 애니메이션을 그리기 너무 복잡한 경우 등 경우에 따라 디자인을 조정합니다. 우리는 제 시간에 일을 끝내려고 노력하기 때문에 주어진 시간 안에 최고의 상사를 만들기 위해 고려해야 할 몇 가지 사항이 있습니다.
프로토타입 제작과 관련하여 수석 프로그래머인 Diego Ordóñez가 한 말은 다음과 같습니다: "하일가는 이블 위저드의 첫 번째 보스이자 제 인생에서 처음으로 보스를 프로그래밍한 캐릭터였습니다. 어려운 작업이라는 것을 알았기 때문에 모든 프로그래머가 하는 것처럼 공격을 간단한 작업으로 나누어 개별적으로 수행하는 것부터 시작했습니다. 이 보스는 발사체를 재사용하여 간단하게 공격할 수 있습니다."
"얼음 총알과 얼음 미사일 공격은 플레이어에게 매우 다르게 느껴집니다. 하나는 피하기 쉬운 반면 다른 하나는 전투 중 도전을 의미합니다." 그는 계속해서 말했습니다. "주요 차이점은 공격 컴포넌트가 얼음 투사체를 생성하는 방식과 플레이어를 향한 투사체의 양입니다. 간단한 조정을 통해 전체 시스템을 재사용하여 두 가지 다른 공격을 선보일 수 있었습니다. 블리자드 공격을 시작하기 전까지는 이 모든 것이 훌륭하게 작동했습니다."
하일가의 전투를 위해 저희는 새로운 무언가를 선보이고 싶었고, 바람이 흥미로울 수 있다고 생각했습니다. 이블 위저드에서 했던 다른 작업과는 매우 달랐기 때문에 처음부터 다시 시작해야 했습니다. 기본 아이디어는 플레이어가 피해를 입힐 수 있는 가시가 가득한 벽으로 이동하기 위해 무작위 방향에서 바람을 생성하는 것이었습니다. 이 공격에 대응하는 가장 좋은 방법은 엄폐물 뒤에 숨는 것이므로 전장에 종유석 몇 개를 생성하여 바람 차단막으로 사용합니다. 플레이어가 얼음 종유석 뒤로 가면 바람이 더 이상 플레이어에게 힘을 가하지 않습니다.
저희는 먼저 저희가 사용하는 다양한 시스템을 관리할 수 있는 공격 컴포넌트를 만들었습니다. 이 시스템에는 종유석, 바람 이미터, 눈보라 VFX가 사용되었습니다. 저는 앞의 두 가지에 초점을 맞추고, VFX에 대해서는 이 블로그 포스트의 뒷부분에서 세르지오 와즈월이 다룰 예정입니다.
종유석은 원형 콜라이더를 사용하여 내부에 임의의 점을 생성한 다음 그 위치를 사용하여 Y축에 오프셋이 있는 종유석을 생성합니다. 코루틴을 적용하여 Y축을 낮추어 오브젝트를 떨어뜨리는 간단한 작업을 수행합니다. 종유석을 생성한 다음에는 바람 컨트롤러로 이동했습니다. 이 구성 요소는 원 가장자리를 중심으로 회전하는 직사각형 모양의 큰 부채처럼 작동합니다.
임의의 방향에서 바람을 불어넣어야 했기 때문에 이미터를 중앙으로 향하게 하여 해당 지역 안의 모든 것이 영향을 받도록 했습니다. 윈드 컨트롤러에는 바람의 회전, 방향, 위치를 저장하는 윈드 이미터가 있습니다. 컴포넌트를 회전시키면 이미터는 이 값을 계산하여 바람(방향과 힘일 뿐인)에 적용합니다. 기본적으로 Vector3와 플로트입니다.
앞서 언급했듯이 바람 차단기로 바람을 차단할 수도 있습니다. 이 컴포넌트에는 플레이어와의 충돌을 검사하는 BoxCollider2D가 있습니다. 플레이어가 바람 차단기 근처에 접근하면 OnTriggerEnter2D가 바람 차단기를 활성화하고, 플레이어가 충돌기를 벗어나면 OnTriggerExit2D가 바람 차단기를 비활성화합니다. 아래 이미지에서 플레이어와 이미터 사이의 청록색 선이 이를 설명합니다. 선이 녹색인 동안에는 플레이어가 보호됩니다.
마지막으로 플레이어가 바람의 힘을 받아 바람의 방향으로 움직이도록 만들어야 했습니다. 이를 위해 WindReceiver 컴포넌트가 있습니다. 바람이 플레이어에게 얼마나 강한 영향을 미치는지, 어느 방향에서 불어오는지 확인하는 역할을 합니다. 이 정보는 플레이어에서 바람 수신기를 향해 레이캐스트를 수행하여 수집합니다. 그런 다음 이 정보를 사용하여 바람 방출기가 수신기에 영향을 미치는지, 얼마나 많은 힘으로, 어떤 방향에서 영향을 미치는지 알 수 있습니다. 모든 정보가 확보되면 자체 이동 컨트롤러를 사용하여 바람의 힘을 가하고 플레이어를 필요한 방향으로 이동시킵니다.
디에고가 첫 공격을 시작하자 저는 하일가에게 몇 가지 행동을 지시하기 시작했습니다.
이블 마법사의 AI에는 비헤이비어 디자이너라는 매우 유용한 에셋을 사용했습니다. 아무리 추천해도 지나치지 않습니다. 코딩을 하지 않는 게임 디자이너에게 적합하므로 프로그래머는 메커니즘을 작업하고 디자이너는 이를 캐릭터의 동작 트리에 배치하여 코딩 없이도 필요한 대로 작동하도록 만들 수 있습니다. 여기에서 기본 사항을 배울 수 있습니다.
다음은 Hailga의 행동 트리입니다:
큰 나무이지만 겁내지 마세요. 보기보다 쉬워요.
기본적으로 트리의 시작 부분에 몇 가지 작업을 사용하여 전투를 설정했습니다. 예를 들어 보스를 첫 번째 단계로 설정하려면 인트로 애니메이션을 재생하고 일부 변수를 초기화합니다.
이 작업은 전투가 시작될 때만 실행되므로 다음 이미지에서 볼 수 있듯이 실제 보스의 동작이 있는 리피터를 추가했습니다.
상사의 행동의 우선 순위는 항상 건강입니다. 이를 통해 보스가 다른 단계로 변경되어야 하는지, 심지어 죽어야 하는지를 제어합니다. 따라서 먼저 보스의 체력이 75% 이상인지 확인합니다. 그렇다면 얼음 스파이크, 얼음 미사일, 눈 슬라임(보스 하수인) 소환이라는 1단계 과제를 수행합니다. 보스의 체력이 75% 이하로 떨어지면 트리는 이미지 하단의 다음 선택기로 이동하여 보스가 마지막 단계에 도달하고 캐릭터가 체력이 0으로 죽을 때까지 두 번째 단계에 해당하는 작업을 실행하는 식으로 진행합니다.
다음 단계로 넘어가기 전에 이와 같이 큰 행동 트리를 구성하는 멋진 방법인 외부 행동 트리 기능에 대해 언급하고 싶습니다.
이전 이미지에서 이미 보셨겠지만, 세 개의 상자가 있는 아이콘은 외부 행동 트리입니다.
외부 동작 트리를 코드의 메서드처럼 생각하면 모든 게임 로직의 여러 위치에서 메서드를 호출하면 각 위치에서 동일한 코드가 실행되지만 해당 코드는 한 곳에만 있습니다. 해당 로직에서 무언가를 변경해야 하는 경우 해당 메서드의 코드를 변경하면 메서드가 호출되는 모든 위치에서 변경됩니다. 여기에서도 동일하게 작동합니다. 특정 동작을 수행하는 동작(예: "눈 슬라임 소환")이 포함된 외부 동작 트리가 있습니다.
외부 행동 트리에 들어가면 이걸 찾을 수 있습니다:
보스가 같은 공격을 너무 많이 반복하지 않는지, 전장에 이미 하수인이 너무 많지는 않은지 확인한 다음 하수인을 소환하고, 하일가의 음성 대사를 재생하거나, 보스를 대기 상태로 설정하여 마무리하는 미니 행동 트리와 같습니다.
한 번에 전장에 배치할 수 있는 하수인의 수를 변경하려면 이 외부 행동 트리 내의 '적 유형 확인' 작업에서 변경하면 되며, 이는 하수인 소환에 사용되는 트리의 모든 부분에 적용됩니다.
리드 아티스트인 루벤 고메즈는 플레이어가 하일가를 알아볼 수 있기를 바라며 기존 캐릭터를 참고한다는 전제하에 제작을 시작했습니다.
이 경우에는 앞서 언급한 것처럼 워크래프트의 제이나(Jaina)와 겨울왕국의 엘사(Elsa )를 캐릭터 레퍼런스로 사용했습니다.
루벤의 이야기를 들어보세요:
루벤은 "이 전제를 염두에 두고 Hailga의 디자인부터 시작했습니다."라고 말합니다. "각 레퍼런스의 옷과 헤어스타일, 아주 작은 픽셀화된 스프라이트에서 쉽게 알아볼 수 있는 요소에서 몇 가지 특징을 취하고 나머지는 (인공지능이 아닌, 어릴 때 사용했던 인간의 상상력으로) 상상력으로 채웠습니다."
애니메이션을 제작하는 동안 프레임 사이의 부드러움을 잃지 않으면서도 움직임이 빠르게 진행되어야 했기 때문에 각 캐릭터의 동작을 더 빠르게 반복하여 시간을 확보하려고 노력했습니다. 항상 최종 버전에서 시작하여 일부 요소를 재사용하고 앤티앨리어싱을 피하기 위해 가장 가까운 보간법을 사용하여 애니메이션의 각 프레임에 대해 캐릭터의 각 부분을 자르고, 재배치하고, 크기를 조정하고, 회전합니다.
그 후, 우리는 움직임을 빠르게 테스트하고 같은 방식으로 조정했습니다.
애니메이션 초안이 완성되면 각 요소를 다듬고 빈 공간을 채우고 디테일을 추가했습니다.
다음 이미지에서 각 프레임의 최종 버전을 확인할 수 있습니다.
애니메이션이 진행되는 동안 저는 보스전 테스트와 밸런싱 작업을 진행했습니다. 이를 위해 '전투 구역'이라는 씬을 만들어 보스, 적, 주문 등을 테스트하는 데 사용했습니다. 기본적으로 실제 게임을 건드리지 않고 테스트하는 데 필요한 모든 도구와 기능을 갖춘 작은 공간입니다.
전투 구역 장면에서 캐릭터를 테스트했을 때 초기 하일가 보스의 모습입니다:
마지막으로 행동, 기능, 난이도에 만족했을 때 실제 게임에서 하일가를 그 자리에 통합했습니다.
Hailga의 동작과 애니메이션을 완성한 후, 보스의 애니메이션을 통합하기 시작했습니다. 애니메이터 임포터를 사용하여 보스의 애니메이션을 통합하기 시작했는데, 이 툴은 Aseprite에서 만든 픽셀 아트 애니메이션을 통합하는 데 매우 유용한 툴입니다. 몇 단계만 거치면 모든 작업을 완료할 수 있습니다.
이제 보스에게 개성을 부여할 차례였는데, 바로 이때 VFX 아티스트인 테키가 투입되었습니다. 가져가, 테키:
이봐요! 세르지오 와즈월(일명. 이블 위저드'의 프로그래머이자 VFX 아티스트인 테키(Teky)입니다.
하일가의 VFX는 팀의 첫 번째 보스였을 뿐만 아니라 제가 게임에서 처음 맡은 작업 중 하나이기도 해서 정말 도전적이었습니다. 보스전에는 공격당 최소 한 번씩 여러 가지 VFX 시퀀스가 사용되지만, 여기서는 몇 가지만 집중적으로 살펴보겠습니다.
전투 중 최고의 순간 중 하나는 마지막 단계 전환에서 하일가가 화를 내며 사악한 마법사를 향해 얼음 광선을 시전하여 전장을 얼어붙게 만드는 장면입니다.
마법을 일으킨 조각들을 분리하여 보여줄 수 있는 정말 멋진 효과라고 생각합니다. 이를 위해 전환을 얼음 빔과 바닥 결빙이라는 두 가지 VFX 조각으로 나누었습니다.
첫 번째 작품의 경우, 디에고가 공격 프로그래밍을 마치면 제 작업은 시작되었고, 보통 멋진 플레이스홀더(이 경우에는 길쭉한 직사각형)와 함께 행운을 기원하는 디에고의 인사말이 함께 전달되었습니다. 여기서부터 저는 제 도구 상자에 이미 있는 도구를 사용하여 작업에 착수했습니다. 하지만 개발 초기라 그런 것들이 부족했습니다. 과거에는 스크립트를 통해 제어되는 두 점 사이에 선을 렌더링하기 위해 Unity의 라인 렌더러 컴포넌트를 사용했었기 때문에 이를 먼저 사용한 다음 기본 셰이더와 결합하여 선의 가장자리와 중앙에 색상을 추가했습니다.
위에서 볼 수 있듯이 아직은 그렇지 않습니다. 제가 VFX 분야에서 금방 깨달은 것은 (고전적인 철학과는 달리) "전체는 부분의 합" 이라는 것입니다. 즉, 셰이더나 파티클 하나가 아니라 원하는 효과를 내기 위해 여러 시스템이 필요할 수 있다는 뜻입니다.
다음으로 이펙트가 광선처럼 보이면서 덜 단단해 보이도록 해야 했기 때문에 셰이더 그래프를 사용하여 이를 달성했습니다. 간단히 설명해 드리겠습니다.
제가 원하는 것을 달성하기 위해 셰이더에는 크게 세 가지 부분이 필요했습니다. 먼저 이전에 그린 가로 거울 그라데이션 텍스처를 사용했습니다(다음 이미지에서 MainTex로 볼 수 있습니다). "Pow" 노드를 사용하여 빔의 너비를 쉽게 제어할 수 있었습니다(텍스처가 스스로 곱해지고 그라데이션이기 때문에 빔이 축소됨).
그런 다음 두 가지 목적으로 타일링 및 오프셋 노드로 애니메이션된 단순 노이즈를 사용했습니다:
특정 부분에 빔을 녹이려면(항상 공용 변수에 의해 제어)
빔의 UV를 수정하여 왜곡되게 보이게 하려면 다음과 같이 하세요.
계속해서 결과 광선에 HDR 색상을 곱하여 발광하는 빛을 제어했습니다. 마지막으로 스텝 노드를 사용하여 빔의 가장자리를 가져와 곱하여 다른 색상을 얻고 빔의 중앙을 돋보이게 했습니다.
완성한 후에는 다양한 색상과 변수를 가지고 이런 식으로 놀 수 있었습니다.
이때부터 어딘가 나아가고 있다는 느낌이 들기 시작했는데, 뭔가 놓치고 있다는 것을 깨달았습니다. 빔이 아무데서나 투사되고 있다는 것이었습니다.
그래서 입자의 도움을 받아 빔의 캐스팅 포인트가 될 수 있도록 얼음 구체를 만들었습니다:
마지막으로 빔을 나머지 영역에 통합하려면 빔을 따라 파티클이 필요했습니다.
두 번째 부분은 더 짧지만 더 까다롭습니다. 메인 효과를 완성하기 위해서는 얼지 않은 바닥과 얼어붙은 바닥이라는 두 가지 텍스처 사이를 빔의 궤적과 속도에 따라 방사형 각도로 움직일 수 있어야 했습니다.
속도를 맞추기 위해 일반 스크립팅을 사용하여 빔의 현재 회전에 따라 바닥을 얼마나 얼려야 하는지, 즉 0에서 1의 변수에 대해 빔의 속도를 제어했습니다. 텍스처를 러핑하려면 짧은 셰이더가 필요했습니다. 방사형 그라데이션과 실제 러핑을 얻기 위해 셰이더를 두 부분으로 나눈 방법을 살펴보십시오.
아래는 UV 위치를 고려하여 0에서 1까지 정확하게 방사형 그라데이션을 계산하는 데 적용되는 공식을 살펴봅니다. 이렇게 하면 빔의 움직임이 고정된 값과 동기화됩니다.
이것이 현장의 모습입니다:
장면을 완성하기 위해 모든 것을 합쳐서 최종 단계로 전환하는 역할을 하면서도 보스의 공격 중 하나로 멋진 효과를 얻었습니다.