I See Red의 격렬한 색상의 기술적 예술

WHITEBOARD GAMES / WHITEBOARD GAMESAuthor
Jul 21, 2023|10 분
I See Red의 격렬한 색상의 기술적 예술
이 웹페이지는 이해를 돕기 위해 기계 번역으로 제공됩니다. 기계 번역으로 제공되는 콘텐츠에 대한 정확도나 신뢰도는 보장되지 않습니다. 번역된 콘텐츠의 정확도에 관해 의문이 있는 경우 웹페이지의 공식 영어 원문을 참고해 주시기 바랍니다.
이 게스트 포스트에서, 화이트보드 게임즈는 스튜디오의 첫 상업적 출시인 나는 빨간색을 본다의 역사와 게임의 독특한 색상 접근 방식에 대한 기술적 사고를 공유합니다.

우리는 2021년 아르헨티나 부에노스아이레스에서 다섯 명의 대학 졸업생이 게임 산업에서 자신의 길을 개척하고자 설립한 개발 스튜디오인 화이트보드 게임즈입니다. 그 이후로 화이트보드는 30명의 젊은 전문가 팀으로 성장했으며, 여러분이 이 소개를 읽고 있는 이유는 오늘 우리가 첫 상업적 출시인 나는 빨간색을 본다에 대해 이야기하기 위해 모였기 때문입니다. 나는 빨간색을 본다입니다.

나는 빨간색을 본다는 분노, 전투, 복수, 피, 비극적인 과거, 그리고 – 네, 이름에 들어 있습니다 – 빨간색에 관한 광란의 쌍 스틱 슈터 로그라이트입니다. 이 게임은 공상 과학 환경과 탑다운 카메라 덕분에 다른 게임들 사이에서 눈에 띄기 쉽지만, 중요한 미학 덕분에도 그렇습니다: 여러분은 검정, 흰색, 회색, 빨간색 외에 더 많은 색상을 찾는 도전에 직면하게 될 것입니다. 이것은 초기 단계에서 결정된 사항으로, 내러티브와 게임 플레이 측면 모두와 밀접하게 연결되어 있습니다. 물론, 이것은 도전 과제를 동반합니다: 이렇게 제한된 팔레트로 게임을 만들고 (그리고 플레이하는 것)은 모두에게 맞는 것은 아닙니다. 그렇다면 우리는 어떻게 진행했을까요? 계속 읽어보세요.

나는 빨간색을 본다의 역사

우리가 나는 빨간색을 본다가 오늘날의 모습으로 발전하게 된 결정적인 결정들을 살펴보기 위해 간단한 역사적 우회를 시작해 보겠습니다.

첫 번째 프로토타입

모든 것은 부에노스아이레스의 다빈치 멀티미디어 아트 학교에서 "비디오 게임 디자인 및 프로그래밍" 과정의 논문 프로젝트로 시작되었습니다. 이 작업에서 학생들이 자금이 많지 않기 때문에 예술적으로 덜 요구되는 게임이 태어났습니다. 이 시점에서 빨간색은 아직 지배적이지 않았습니다. 게임에는 파란색, 심지어 초록색도 있었지만, 추가 색상은 오래가지 않을 것이므로 너무 애착을 가지지 마세요.

교육 역량 계발

과정을 마친 후, 우리의 창립 팀은 이 프로젝트를 놓칠 수 없었고, 그 안에서 진정한 상업적 잠재력을 보았습니다. 우리는 대학 밖에서 개발을 계속하고 팀을 구성하기로 결정했으며, 이는 화이트보드 게임즈를 스튜디오로 설립하는 결과를 가져왔습니다. (재미있는 사실: 우리 교수들 중 일부도 가능성을 보았고, 도움을 요청받았을 때 팀에 합류하기로 결정했습니다.)

이 시점에서 게임의 기초는 이미 다져졌습니다: 빨간색, 격렬한 복수에 관한 빠른 속도의 공상 과학 슈팅 게임입니다.

최종 모습 (HDRP 사용)

몇 달, 심지어 몇 년이 흘렀습니다. 퍼블리셔 및 투자자와의 대화 중에, I See Red는 이제 인간 적뿐만 아니라 외계인 적도 있는 많은 상호 연결된 레벨을 갖게 되었고, 엄청난 양의 패시브, 컷신, 그리고 더욱 다듬어진 아트 스타일을 갖추게 되었습니다. 충분한 버그 수정, 테스트, 콘텐츠, 및 성능 개선 (괜찮습니다, 감사할 필요 없습니다), 게임은 태양을 볼 준비가 되어가고 있었습니다.

최종 모습 (URP 사용)

결국 게임의 데모 출시를 위한 시간이 왔습니다. 우리는 몇 가지 이벤트와 대회에 참여했으며, 우리가 만든 것에 자부심을 느꼈습니다. 이 단계에서 우리는 HDRP에서 URP로 이동하여 콘솔 출시를 계획하기로 결정했으며, 선명한 HD를 더욱 스타일화된 미학으로 교환했습니다. 우리는 또한 회색조 색상에 미세한 차가운 색조를 추가했습니다 (네, 파란색이 돌아왔습니다… 하지만 아무에게도 말하지 마세요) 더 금속적인 느낌을 주기 위해, 그리고 모든 것을 더욱 다듬었습니다. 이 전환을 하려면 일부 HDRP 기능을 URP로 리버스 엔지니어링해야 했지만, 우리는 그 노력이 가치가 있었다고 확신합니다.

이전 단계의 외계인 레벨에 추가하여, I See Red는 이제 로봇 적, 여러 보스, 스토리라인, QA, 현지화, 그리고 더 많은 "완료된" 요소를 갖추게 되었습니다. 이제 큰 초록색 버튼을 누를 시간입니다.

확실히 많은 도전과 변화가 있었던 긴 여정이었으며, 수년간의 작업을 언급하지 않더라도 말입니다. 우리는 그것이 놀랍고 멋지게 느껴지고 보인다고 생각합니다; 그리고, 만약 레지 필스-아미와 "업계에서 가장 경험이 풍부한 경영진"이 그렇게 말한다면, 우리는 미치지 않았을 것입니다. 어쨌든, 우리는 그것을 만들어 출시했습니다. 하지만 어떻게 할 것인가에 대한 질문은 남아 있었습니다. 기술 아트 팬 여러분에게 좋은 소식입니다: 이제 기술적인 이야기를 할 시간입니다. (내용 경고: 우리는 피를 최대한 활용했습니다.)

피 VFX

우리는 적을 때리거나 게임에서 맞았을 때 얻는 주요 시각적 피드백이기 때문에 피에 많은 시간을 투자했습니다. 이 요소는 명확하고 만족스러워야 했으며, 빨간색은 게임에서 가장 중요한 색상이기 때문에 게으름을 피울 여지가 없었습니다.

우리는 피로 세상을 물들이고 싶었기 때문에 환경의 회색과 피 사이에 강한 대비가 필요했으며, 데칼의 변형도 필요했습니다. 우리는 데칼을 가리기 위해 텍스처를 사용할 수 있었지만, 필요한 양으로는 너무 반복적이 될 것입니다. 물론, 우리는 그렇게 하고 싶지 않았습니다.

우리가 생각해낸 것은 노이즈, URP 데칼 프로젝터, 그리고 월드 좌표를 결합하여 데칼을 배치한 위치에 따라 형태가 변하도록 하는 것이었습니다. 이 기술을 사용하여 너비, 높이, 가장자리 부드러움, 그리고 피의 거칠기를 모두 부드럽게 애니메이션되도록 변경할 수 있었습니다. 예를 들어, 패배한 적 아래에 피 웅덩이를 생성해야 할 때 유용합니다.

I See Red의 데칼을 생성하기 위한 Shader Graph의 작동 모습입니다.

알베도의 색상과 노이즈 마스크의 속성을 변경함으로써, 우리는 외계인과 로봇을 위한 다양한 유형의 피를 생성할 수 있었습니다. 이들은 기름과 비슷한 것을 가지고 있습니다. 이것은 적들 사이의 미적 차이를 달성하기 위한 것만은 아니었습니다. 어떤 피가 어떤 것인지 아는 것은 게임 플레이 관점에서도 똑같이 중요했습니다. 플레이어는 남겨진 피를 '흡수'할 수 있는 수동 능력을 얻을 수 있으며, 각기 다른 효과가 있습니다: 인간의 피는 중립적이고, 외계인의 피는 피해를 주며, 로봇의 피는 치유합니다.

데칼 외에도 I See Red에서 사용되는 많은 피 입자가 있습니다. 우리가 방금 이야기한 수동 능력을 생각해 보세요: 우리는 플레이어에게 흡수를 전달할 방법이 필요했습니다. 결과는 물론 미니 혈액 토네이도입니다.

세 가지 혈액 "토네이도" 입자, 각각 외계인, 인간, 로봇 유형에 대한 것입니다.

이 끔찍한 소용돌이는 스크롤 텍스처와 입자 효과를 사용하여 달성되었습니다. 입자 효과는 3D 모델링된 리본(다각형의 줄)과 메인 UV를 사용하여 텍스처를 위로 스크롤하는 셰이더입니다. 이렇게 함으로써 우리는 입자 시스템의 사용자 정의 데이터를 사용하여 메쉬의 속도, 흐름 및 모양을 변경하고, 토네이도의 상단과 하단에서 효과가 부드럽게 나타나고 사라질 수 있도록 스트립의 페이드 인 및 아웃을 추가할 수 있었습니다. 이것을 가져와서 추가적인 효과를 위해 혈액 문자열을 추가하면, 플레이어의 혈액을 흡수하는 역 혈액 토네이도가 됩니다.

입자에 대해 이야기하자면, 플레이어나 적이 피해를 입을 때의 적중 입자 효과를 잊을 수 없습니다. 이 입자들은 우리가 이야기한 혈액 풀/데칼과 같은 프레임에서 생성되며, 두 개 모두 코드 코루틴을 통해 매끄러운 전환을 위해 애니메이션됩니다. 그들은 총알이 가고 있는 방향으로 생성되며, 일반적으로 플레이어와 반대 방향입니다.

코드를 통해 이를 수행하는 것은 효과를 개인화하는 데 매우 유용했으며, 피해가 더 클 경우 더 크게 만들거나, 적이 더 가까울 경우, 또는 효과가 벽에 가까울 경우에도 유용했습니다. 우리는 레이캐스팅을 사용하여 데칼과 입자가 벽을 통과하기 전에 얼마나 길어질 수 있는지와 데칼의 기울기가 어떻게 되어야 하는지(예를 들어 벽에 붙어야 하는 경우)를 결정했습니다. 그런 다음 우리는 그 값을 애니메이션에 전달했고, 마법이 일어났습니다.

적중 효과, 당신의 총알에 매우 만족스러운 느낌을 더합니다.
적중 효과 코드 스니펫

정말 많은 혈액입니다. 많은 빨간색입니다. 게임이 제한된 팔레트를 사용하기 때문에, 어떤 측면에서도 가독성이 손실되지 않도록 해야 했습니다. 우리의 시그니처 룩의 한계는 우리가 창의력을 발휘하고 많은 도구와 트릭을 사용해야 함을 의미했습니다. 예를 들어, 빨간 물체가 항상 빨간 것은 아닙니다.

빨간 윤곽선과 빛나는 문을 발견할 수 있지만, 그 문을 통과하면 회색으로 변합니다. 적대적인 동안 빨간색이고, 더 이상 적대적이지 않을 때 회색인 적들에게도 같은 일이 발생합니다. 이 신호를 통해 게임은 독특한 색상을 사용하여 어떤 것들이 관심 있는 것인지 소통합니다: 탐험되지 않은 지역, 중요한 물체, 위험한 장애물 등. 어떤 면에서, 플레이어가 항상 켜져 있는 "탐정의 시각"을 가지고 있는 것처럼 보이며, 그 순간에 관련된 것만을 지속적으로 업데이트합니다.

하지만 당신이 빨간색을 우리가 보는 것과 같은 방식으로 보지 못한다면 어떻게 될까요? I See Red를 플레이하고 싶어하는 누군가가 빨간색과 회색의 차이를 인식하지 못한다면 어떻게 될까요? 우리는 모든 사람이 "분노"를 경험할 수 있기를 원하며, 이것이 I See Red가 13개 언어로 제공되는 이유입니다. 확실히, 그 13개 언어를 사용하는 많은 사람들이 접근성 기능의 혜택을 받을 것입니다. 우리의 맞춤형 URP 색맹 모드에 들어가세요.

URP 특별 색맹 모드

I See Red를 만들면서, 우리는 검정, 흰색, 빨간색의 우주가 모든 사람에게 읽기 쉽지 않을 수 있다는 것을 알고 있었기 때문에, 모든 사람이 플레이할 수 있도록 다양한 색맹 모드를 구현하는 해결책을 생각해냈습니다. 이것을 만드는 가장 좋은 방법은 Unity의 Scriptable Render 기능과 간단한 셰이더를 사용하는 것이었습니다. 이것의 주요 아이디어는 SRF 내부의 일종의 Look-Up Table을 사용하여 서로 다른 채널의 모든 값을 변환한 다음, 최종 렌더 패스를 위한 셰이더로 이러한 값을 변환하는 것입니다. 효과가 세계에서 렌더링되는 다른 모든 객체 위에서 최종 패스로 실행되어야 했기 때문에, 이 패스는 UI가 렌더링된 후에 수행되며 I See Red의 모든 프레임에서 최종 패스입니다.

우리는 다양한 색맹 유형을 조사하고, I See Red에서 각 사람이 색상을 어떻게 인식할 수 있는지를 이해하여 Scriptable Render를 사용하여 그에 맞게 조정할 수 있는 방법을 찾았습니다. 그 결과, 색상을 날카롭게 하거나 수정할 수 있는 다양한 모드를 만들 수 있었습니다: 프로타노말리, 프로타노피, 듀테라노말리, 듀테라노피, 트리타노말리, 트리타노피, 아크로마토말리, 아크로마토프시아. 누구에게 물어보느냐에 따라, 게임의 빨간색은 이러한 색맹 아래에서 그렇게 빨갛게 보이지 않을 수 있지만, 우리는 괜찮습니다: 결국, 가장 중요한 것은 모든 사람이 게임을 즐길 수 있다는 것입니다. 당신이 필요로 할 모든 분노를 소통하기 위해 더 많은 시스템이 마련되어 있습니다.

마지막으로, 우리의 피는 아름답고 모두를 위한 것입니다… 적어도 당신이 사는 곳에 따라 14, 15, 16 또는 17세 이상일 때까지는요. 하지만 피는 분명히 I See Red의 미학을 구성하는 전부는 아닙니다. 빨간색은 여러 가지 방법, 음영 및 형태로 나타나며, 회색도 마찬가지입니다.

스플랫맵 셰이더

우리는 텍스처를 처음부터 다시 만들지 않고도 새로운 모델에 적응할 수 있는 색 구성표를 만드는 방법을 찾아야 했습니다. 이는 많은 시간을 소모합니다. 이 시점에서 우리는 솔직해져야 합니다: I See Red는 실제로 검정, 흰색, 빨간색이 아니라 대부분의 다른 게임처럼 빨강, 초록, 파랑입니다. 우리는 처음에 거짓말을 했습니다(죄송합니다), 하지만 여전히 대부분의 다른 게임처럼 보이지는 않습니다. 이는 여러 개의 그레이스케일 텍스처 또는 마스크를 하나로 결합하는 텍스처인 스플랫맵을 적용하는 사용자 정의 셰이더를 사용했기 때문입니다. 각 텍스처마다 다른 채널(빨강, 초록, 파랑 또는 알파)을 사용합니다.

우리 모델링 프로세스의 다양한 단계, RGB 스플랫맵을 포함하여.

이는 엔진 내에서 각 채널 값을 개별적으로 제어하여 인게임에서 색상을 더 잘 제어할 수 있게 해주며, 적은 텍스처를 로드하여 자원을 절약할 수 있습니다. 이는 반복 시간에도 크게 도움이 됩니다.

유니티 에디터 내에서 스플랫맵이 작동하는 GIF.
더 있나요?

우리는 피가 있습니다. 우리는 적이 있습니다. 우리는 환경이 있습니다. 우리는 필요한 색상이 있습니다. 기분이 좋습니다. 다음으로, 사용자 정의 안개, 조명 및 카메라 수학, 톤 매핑 또는 컷신에서의 가짜 원근감 같은 멋진 것들에 대해 이야기할 수 있습니다…

네, 더 많은 이야기를 할 수 있지만, 우리는 몇 시간 동안 여기 있을 것이고(이것을 쓰는 데 시간이 걸립니다), 그러니 마무리하는 것이 좋습니다. 더 이상 기술적인 내용은 없습니다. 그냥 가서 경험해 보세요: I See Red 를 직접 플레이하고 우리가 여기서 이야기한 것과 관련된 것을 발견하면 알려주세요. 마지막으로, 더 알고 싶다면 주저하지 말고 저희나 Unity의 아름다운 사람들에게 연락하세요.

읽어주셔서 감사합니다, 다음 시간까지!

다운로드할 수 있습니다 I See Red Steam에서 오늘. 플레이 후, Made with Unity 개발자들의 이야기를 더 발견하세요.