Search Unity

새로운 2D 툴의 성능을 시험해보기 위한 2D 횡스크롤 게임 데모가 출시되었습니다. 이번 포스팅에서는 통합 2D 툴을 활용하여 고해상도 게임을 구현하는 방법을 소개합니다.

지금까지 Unity를 이용하여 멋진 2D 게임을 제작한 사례가 많았습니다. 유니티는 여기서 더 나아가 개인 아티스트나 대규모 팀 등 많은 분들이 더욱 다양한 2D 툴을 활용하여 뛰어난 시각적 요소를 갖춘 게임을 제작하도록 돕고자 합니다. 이러한 2D 툴 중 대부분은 Unity 2019.3베타 버전에 포함되어 정식으로 제작에 사용할 수 있게 됩니다.

유니티는 새로운 2D 툴을 활용하여 샘플 프로젝트인 로스트 크립트(Lost Crypt)를 제작했습니다. 생생한 씬을 구현하기 위해 애니메이션, 광원 효과, 유기적 터레인, 셰이더 및 포스트 프로세싱 기술이 활용되었으며, 모두 2D로 제작되었습니다. 새로운 2D 툴을 활용하면 타겟 플랫폼과 규모에 상관없이 더욱 생생하고 아름다운 디자인을 신속하게 구현해낼 수 있습니다.

로스트 크립트는 모든 데스크톱 컴퓨터에서 원활하게 실행되며, 새로운 입력 시스템을 기반으로 한 온스크린 컨트롤을 지원하여 iOS나 Android기기에서도 플레이할 수 있습니다. 유니티에서는 iPhone 6S와 같은 일반적인 기기에서 30fps로 프로젝트를 실행했습니다.

 

에셋 스토어에서 프로젝트 다운로드

프로젝트 설정하기

에셋 스토어에서 로스트 크립트를 다운받은 후에 New Project 메뉴에서 2D를 선택한 다음, 패키지 관리자의 My Assets에서 프로젝트를 임포트하거나 에셋 스토어 페이지에서 My Assets를 클릭하여 프로젝트를 임포트합니다. 필요한 2D 패키지는 프로젝트에 모두 포함되어 있으며, 프로젝트를 임포트하면 프로젝트 설정이 덮어쓰기되어 렌더링 설정이 유니버설 렌더 파이프라인(Universal Render Pipeline) 내 2D 렌더러(2D Renderer)로 변경됩니다.

유니버설 렌더 파이프라인 및 2D 렌더러와 함께 표시되는 로스트 크립트의 렌더 파이프라인 에셋.

에셋을 임포트하면 메인 씬(Main Scene)이 표시됩니다. 플레이 버튼을 클릭하면 키보드 방향키와 스페이스바를 사용하여 점프하는 등 게임 플레이가 가능합니다.

이 데모는 2D 툴을 사용하여 컨셉 아트를 실현하기 위해 제작되었으며, 스크립트와 게임 로직은 단순한 편입니다.

데모 제작 과정에서는 작업을 세분화하고 각 요구 사항에 따라 적절한 2D 툴을 선택하였습니다.

오리지널 컨셉 아트. 이 프로젝트는 B2tGame과 협력하여 제작되었습니다.

캐릭터 애니메이션

캐릭터는 Photoshop에서 디자인하여 2D PSD 임포터를 이용하여 바로 가져왔습니다. 스프라이트 에디터(Sprite Editor)로 Sara.psb 파일을 열어 캐릭터 설정과 릭을 확인할 수 있습니다. 파일을 Photoshop으로 열어도 각 파트와 레이어 이름은 그대로 유지됩니다.

PSD 임포터를 사용하면 개별 스프라이트를 익스포트한 다음 일일이 재조립하는 과정을 거치지 않고 Unity에서 바로 Photoshop 파일을 사용할 수 있습니다.

유니버설 렌더 파이프라인의 새로운 기능으로 Sprite-Lit 머티리얼이 추가되었습니다. Sprite-Lit 머티리얼을 사용하면 일반 Sprite-Default 머티리얼과 달리 스프라이트가 2D 조명 조건에 반응합니다.

이 데모에서는 Secondary Textures의 드롭다운 메뉴를 사용하여 캐릭터 노멀 맵을 스프라이트 에디터로 임포트했습니다. 2D 애니메이션 캐릭터, 일반 스프라이트, 타일맵과 스프라이트 셰이프에 노멀 맵과 마스크맵을 추가할 수 있습니다.

이 캐릭터에 사용된 노멀 맵은 스프라이트의 영역별 반사 정도를 나타냅니다.

또한 캐릭터의 다리에는 2D IK 솔버가 있어서 애니메이터가 발목과 발끝의 위치를 올바르게 조절하고, 따라서 다리의 움직임이 자연스러워지도록 합니다.

다리와 발의 애니메이션 프로세스를 간소화하기 위해 2D IK를 사용했습니다.

캐릭터 리깅 후에는 애니메이션 툴과 애니메이터를 이용하여 여러 애니메이션을 만들고, 다양한 상태를 제어했습니다. 툴의 작동 원리는 GDC 2019의 관련 세션을 참조하세요.

캐릭터의 길게 땋은 머리는 별도의 자식 게임 오브젝트이며 2D 물리에 의해 제어됩니다. 또한 뼈대마다 일부 제약이 적용된 Hinge Joint 2D 컴포넌트가 있어서 캐릭터의 움직임에 따라 머리카락이 사실적으로 반응합니다. 따라서 캐릭터의 머리카락은 지나치게 구부러지거나 캐릭터의 움직임에 과도하게 반응하지 않고 자유롭게 움직입니다.

땋은 머리 끝부분에 가중치가 적용된 2D 물리 체인이 사용되었습니다.

주간/야간 광원 주기

스프라이트에 동적 조명이 지원되면 환경을 시각적으로 바꿀 수 있다는 큰 장점이 있습니다. 즉, 같은 스프라이트를 사용하더라도 분위기, 시간대나 밝기를 변경할 수 있어서 스텔스 게임이나 풍부한 오픈 월드 게임 등 보다 다양한 게임플레이를 구현할 수 있습니다.

2D 광원을 끈 모습과 켠 모습. 같은 스프라이트로 다양한 날씨나 분위기를 구현할 수 있습니다.

씬의 광원은 컬러 그레디언트 값(낮 시간부터 밤 시간까지의 광원 색상)을 포함한 간단한 스크립트를 이용하여 제어했습니다. 광원과 머티리얼의 색상은 부모 게임 오브젝트의 Time 파라미터에 따라 변경됩니다. 이러한 설정을 통해 여러 광원이 혼합되는 방식을 제어할 수 있습니다.

같은 스프라이트도 광원의 색상에 따라 매우 다르게 보이므로, 이를 통해 더욱 다양한 미적 요소를 구현하여 게임플레이에 풍성함을 더할 수 있습니다.

대규모 실외 텍스처 터레인

2D 게임 제작 초기에는 섬세하게 제작한 타일 시트를 사용해야만 언덕, 경사나 불규칙한 지면과 같은 유기적 터레인을 만들 수 있었기에 작업 효율성이 떨어졌습니다. 이후 터레인의 일부를 표현하는 여러 개의 스프라이트를 사용하는 방식으로 개선되었지만, 워크플로나 성능에 있어 여전히 제약이 존재했습니다.

지면 레이어와 오른쪽의 스프라이트 셰이프 프로필에 2D 스프라이트 셰이프가 사용되었습니다.

2D 스프라이트 셰이프를 사용하면 벡터 기반의 드로잉 애플리케이션에서처럼 터레인과 콜라이더를 생성할 수 있습니다. 브러시(스프라이트 셰이프 프로필)를 조정하기만 하면 바로 생성할 수 있으며, 환경에서 반복 작업을 할 때 여러 스프라이트나 콜라이더를 조정할 필요도 없습니다.

로스트 크립트에는 요소를 스플라인 곡선에 연결하여 스플라인 곡선을 따라가게 하는 NodeAttach 스크립트 등 스프라이트 셰이프 추가 기능도 사용되었습니다. NodeAttach 스크립트는 바위에 사용되었으며, 꽃 레이어에는 풀 스플라인 곡선을 따라가도록 ConformingSpline이 사용되었습니다. 이 기능은 게임플레이에 사용할 수도 있고, 지면 앞부분의 풀 레이어와 같은 장식적 요소에 활용할 수도 있습니다.

그리드 기반 레이아웃을 이용한 지하실

타일맵은 ‘타일화’와 반복이 가능한 작은 그래픽 조각을 이용하여 메모리 공간을 절약할 뿐 아니라 레벨 디자인에도 중요한 필수 2D 툴입니다.

데모에 사용된 타일 시트와 노멀 맵 시트.

로스트 크립트에서는 패키지 관리자를 통해 제공되는 2D 타일맵 에디터를 사용하여 지하실의 내부를 재현했으며, 추가 타일맵 툴(GitHub에서 다운로드 가능)을 사용하여 레벨 디자인 프로세스의 효율성을 높였습니다. 예를 들어, 브러시처럼 타일을 페인팅할 수 있는 룰 타일(Rule Tile)을 사용했습니다. 룰 타일은 인접 타일이나 끝부분에 따라 적합한 타일을 자동 선택합니다.

워크플로 개선을 위해 2D 추가 기능인 룰 타일을 지하실에 사용했습니다(GitHub).

불 효과

로스트 크립트에는 게임에 자주 사용되는 불 효과도 추가되었습니다. 파티클 시스템과 2D용 셰이더 그래프를 사용하여 횃불 게임 오브젝트를 생성하고, 출력 셰이더에 Sprite-Lit 마스터 노드를 사용했습니다. 불 애니메이션은 파티클 시스템이 애니메이션 재생에 사용하는 전통적인 스프라이트 시트로 만들었습니다.

애니메이션 2D 셰이더와 파티클을 사용하여 불 효과를 만드는 모습입니다.

불꽃에 사용된 셰이더는 HDR 틴트 컬러와 볼륨 포스트 프로세싱을 통해 오브젝트 주변으로 퍼지는 불빛의 강도를 높입니다. 부모 게임 오브젝트는 불꽃 파티클과 벽감을 비추는 광원을 포함합니다.

수면 반사

셰이더는 게임에서 다른 영역을 비추는 물, 얼음, 거울이나 모니터 등의 반사와 굴절에도 자주 사용됩니다.

물 셰이더에 적용된 각각의 파라미터를 변경하면 다양한 효과를 얻을 수 있습니다.

지하실의 수면 효과는 셰이더 그래프만 사용하여 구현되었습니다. 씬에 최종적으로 나타날 모습을 연출하기 위해 물 색상, 물결 속도, 왜곡, 잔물결 효과 등 여러 파라미터를 노출했습니다. 주변 환경이 수면에 반사되도록 하기 위해 이미지를 텍스처로 출력하는 카메라를 추가하고, 셰이더 그래프가 이 텍스처를 읽도록 했습니다. 또한 포스트 프로세싱 블룸 패스를 추가하여 수면에서 빛이 산란되는 효과를 구현했습니다.

그래프에 그룹과 명확한 레이블을 사용하여 이해하기 쉬운 셰이더 로직을 만들었습니다.

바람 애니메이션과 블렌딩 스타일

스프라이트 셰이프, 2D 광원과 셰이더 그래프를 이용하여 나뭇잎과 잔디가 생생하게 표현되었습니다.

환경을 애니메이션화하면서 나뭇가지가 바람에 흔들리게 만들었습니다. 이 효과를 얻기 위해 각 나무의 나뭇잎 프리팹에 하나의 셰이더만 사용하여 다양성을 확보하고 반복적인 움직임을 방지했습니다.

Sprite 창에는 셰이더 그래프에서 사용할 노멀 맵과 마스크맵을 추가했습니다.

Vegetation Wind-Lit 그래프에서 두 효과가 구현된 방법을 확인할 수 있습니다. 하나는 애니메이션 또는 움직임 효과로, 노이즈 패턴을 수정하는 파라미터 몇 가지를 기준으로 버텍스 포지션을 옮겨서 구현했습니다. 두 번째 효과에서는 G 또는 green 채널을 사용하여 나뭇잎 주변의 림 라이트 톤을 조정합니다.

오른쪽은 셰이더의 마스크맵 G 채널을 사용하여 테두리 색상을 변경한 모습입니다.

Light Blend Styles(광원 블렌드 스타일)는 광원이 스프라이트에 미치는 영향을 결정하는 2D 렌더러의 여러 프로퍼티를 포함합니다. 예를 들어, 특정 채널에만 영향을 미치는 블렌드 스타일을 만들 수 있습니다. 이 블렌드 스타일을 사용하는 씬에 광원을 추가하면 마스크맵 채널 정보가 지시하는 스프라이트 영역에만 광원이 적용됩니다.

아래는 파라메트릭 광원에 직접 조명 블렌드 스타일이 사용된 예시로, 해당 스프라이트의 마스크맵 R 채널에 표시된 영역에만 광원이 적용된 모습입니다.

왼쪽은 2D 렌더러의 광원 블렌드 스타일, 오른쪽은 블렌드 스타일을 적용한 2D 광원입니다.

시네마틱과 파티클

로스트 크립트는 탐험가가 지하실의 마법 지팡이를 잡는 모습이 담긴 짧은 시네마틱이 있습니다. 그 순간을 더욱 특별하게 만들기 위해, 타임라인을 사용하여 적시에 환경의 분위기를 변경하고 파티클을 생성하여 환경이 밤으로 바뀌게 했습니다. 또한 파티클이 숲으로 날아갈 때 애니메이션 트랙을 블렌딩하는 카메라를 추가하고 시네머신 카메라를 전환하여 파티클을 따라가도록 했습니다.

영화와 같은 순간을 구현하기 위해 타임라인을 사용하여 카메라, 오디오와 비주얼을 조정했습니다.

지팡이를 잡는 순간 나타나는 빛나는 링은 스프라이트 유형의 광원을 사용합니다. 링 그래픽은 단순하게 확장되었다가 사라지는 동작으로 주변 환경을 환하게 밝히는 빛을 만들어 냅니다.

파티클이 빛나는 효과는 대부분 볼륨 포스트 프로세싱의 블룸 효과로 구현되었습니다. 또한 파티클과 트레일의 머티리얼/셰이더는 HDR 색상을 통해 이 오브젝트에 포스트 프로세싱 효과를 얼마나 강하게 적용할지 정의합니다.

파티클은 랜덤 시드(Random Seed) 기능을 통해 항상 같은 방식으로 애니메이션화합니다.

구울의 애니메이션화

나무를 자세히 살펴보면 유령처럼 보이는 존재가 함께 있습니다. 이를 구현하기 위해 유령에게도 적용할 수 있는 셰이더를 만들었습니다. 이 셰이더는 투명하지만 프레넬 효과를 통해 스프라이트 가장자리에 빛을 더함으로써 마치 떠다니는 생명체처럼 흔들리는 모습을 구현합니다.

이 셰이더의 한 가지 재미있는 효과는 지팡이 게임 오브젝트의 트랜스폼 포지션을 트래킹하는 것입니다. 예를 들어, 지팡이가 구울에 근접하면 구울이 더욱 밝게 빛납니다. 이러한 효과를 구현하기 위해 지팡이의 포지션을 머티리얼 셰이더에 업데이트하는 간단한 스크립트를 지팡이에 연결했습니다.

셰이더에서 값을 노출하면 게임플레이 메커니즘에 따라 비주얼을 조절할 수 있습니다.

구울에도 그래픽을 교체하는 간단한 애니메이션이 포함되어 있습니다. 이를 구현하기 위해 채널별로 다른 그래픽이 포함된 마스크맵을 생성했습니다. 즉, R에 기본 비주얼을, G에는 대체 비주얼을, 그리고 B에는 프레넬 효과를 포함했습니다.

지팡이가 멀리 떨어져 있는 경우 구울의 모습입니다. 마스크맵은 오른쪽에 있습니다.

볼륨 포스트 프로세싱

마지막으로 유니버설 렌더 파이프라인에 포함된 포스트 프로세싱 효과를 추가했습니다. 예를 들어, 빈 게임 오브젝트를 만들고 Volume 컴포넌트를 연결했습니다. 로스트 크립트에는 블룸, 화이트 밸런스와 비네트가 사용되었으나, 이외에도 모션 블러, 색상 보정 또는 필름 그레인 등 다양한 효과를 2D 프로젝트에 적용할 수 있습니다.

로스트 크립트의 볼륨 포스트 프로세싱 설정.

요약

로스트 크립트 데모를 통해 Unity의 통합 2D 툴을 적용하는 방법을 알아보았습니다. 로스트 크립트에 관련된 문의 사항이 있다면 포럼에 문의하시기 바랍니다.

Unity의 2D 툴에 관한 질문은 포럼의 2D 섹션 스레드와 베타 및 실험 기능(Beta & Experimental Features) 메뉴를 참고하시기 바랍니다.

프로젝트에는 로스트 크립트에 사용된 여러 기능을 둘러볼 수 있는 튜토리얼 창이 포함되어 있습니다.

1월 9일 동부 표준시 오전 10시(중앙유럽 표준시 오후 4시)에 열리는 로스트 크립트 웨비나에 참석하세요.

로스트 크립트의 실시간 비하인드 스토리를 보려면 웨비나에 등록하세요. 웨비나에서는 글로벌 콘텐츠 에반젤리스트 앤디 터치(Andy Touch)가 로스트 크립트에 사용한 2D 광원, 셰이더 및 포스트 프로세싱 방식을 다룹니다. R&D 부서의 2D팀도 함께하며 2D 툴이나 프로젝트에 대한 질문에 답변을 드립니다.

 

웨비나 등록하기

 

29 replies on “새로운 2D 샘플 프로젝트 ‘로스트 크립트’”

Quite good on your projects, its just 2D but to me it’s pretty close to 3D I always appreciate your efforts and time for every detail.

Great demo, amazing quality coming out of Unity! Question that may not have been asked before, but how long did this demo take to make with how many people working on it? Just to see what expectations one can have in applying these tools toward a full game release. Thanks!

Amazing demo. I learnt a lot from this demo. But I not able to understand how the ember particles return to the source. Is there a Force Effector or some kind of animator (the GameObejct does have an animator, but I am not sure what it is animating). Also how does TimeLine animate the effects. Please make a new tutorial for the Timeline. I feel it is a very useful tool but beginners (including me) do not fully understand how to use it in a game.

hello Mr. Eduardo,may be i get something like bug in the Camera->Volume Mask, the layer dropdown does not work when i change it.so when i add volume in my 2d project with lwrp,i cannot close the volume effect on UI or something i don’t want to appear volume, thanks again,and waiting for your replying.

Great works, will the complete workflow be posted to youtube or blog? for those one who missed the webinar

very well done. but i have still confused about how do you release the edge light effect on the tree? like halo effect, not change rim color in shader. thanks for replying!!

I imported the project but I got a bunch of errors in the compiler that I am not sure how to fix, they are mostly in the form of “‘SpriteRenderer’ does not contain a definition [x]”

Also, what you guys did is amazing! I am looking forward to learning a bunch from it

This is a really amazing demo of your new 2d tools! I’ve always had trouble starting my own game projects because there’s so many things I’m uncertain about. Like what tools are currently available, what’s the easiest way to do something, etc. Having such a well made demo is super helpful for people starting out and it honestly encouraged me to experiment with these tools instead of sitting on my lazy ass all day.

Hey, I’m working on a game and I can’t yet figure out how to do the shaders that move the trees. Is it ok to use your shaders in my project?

Hey, nice project. I’ts a lot of work to get everything set up in a project sometimes, and trying to figure out things at the same time, so I for one appreciate it. Can I use the assets here in my own unity projects ? Thanks.

I started working on something similar but gave up due to many restrictions in the past, such as 2d lights, IK etc. Used third party solutions but wasn’t satisfied . I target mobile platforms so the results were slow and disappointing. I will definitely check this and maybe resurrect my old project.

The lit foliage was created using multiple tools, the normal map was created outside with some free normal map generation software, but in the end, a lot of the final asset is done in Photoshop and formatted for proper channel separation.
On that subject, our last experiments were done using a 2D texture as a base for a sculpt in Blender, it’s not too hard to get excellent automatic exports of normals as well as masking information.

Very impressive…I’m pouring over it now trying to figure out what I can steal for my own projects. Quick question on your lit foliage (which is quite impressive). How did you generate the mask texture that you used for lighting? Is it based off of the normal map itself, or was it a separate process?

Comments are closed.