Unity/구현

[Unity] 2D 환경에서 그림자 구현하기 (+Flood Fill 적용)

QuickClid 2025. 4. 9. 22:17

생각보다...

탑뷰로 진행되는 2D 게임에서, 그림자를 어떻게 구현해야 할지에 대한 가이드가 잘 없다. (그리고 애초에 이런 걸 쉽게 구현할 수 있는 방법이 Unity 6 이전까지는 존재하지가 않았다) 그러나 Unity 6으로 업그레이드 되면서, 2D 관련 Shadow 컴포넌트가 많은 업그레이드를 받았고, 그랬기에 매우 쉽게 구현할 수 있게 됐다! 그래서 오늘은 이 "쉬운 구현법"을 소개해보고자 한다.

 

이 가이드가 끝날 무렵에는 이런 것들을 마음대로 갖고 놀 수 있을 것이다;

벽 바깥쪽으로는 광원이 새어나가지 않는다!


Background Tilemap

먼저, 2D 게임에는 3D 게임의 Directional Light와 같은 개념이 없어서, 배경이 될 Object가 없으면, 자기 자신의 위에 비추는 Light가 아닌 경우, 아무런 Light 효과도 볼 수가 없다는 사실을 알아야 한다. 만약 Tilemap에 대해 잘 알지 못한다면, 다음 글을 보면 도움이 많이 될 것이다!

2024.06.02 - [코딩테스트/알고리즘] - [알고리즘] Flood Fill 알고리즘 (C)

 

[알고리즘] Flood Fill 알고리즘 (C)

서론Unity로 2D 게임을 작업하다 보면, 상당히 불편한 점이 많다. 그럴 땐 3D로 넘어가도록 하자 특히 Lighting 부분에서 그 단점이 도드라지는데, 그 이유는 Spot Light 2D를 제대로 사용할 수 없기 때문

quickclid.tistory.com

 

적당히 Background Tilemap을 깔아줬다면 다음 스텝으로 넘어가자.


Brick Prefab

  1. Hierarchy 창에서 우클릭을 한 뒤, 2D Object > Sprites > Square을 선택하여 Brick GameObject를 하나 만들어준다.
  2. 그 후, Shadow Caster 2D 컴포넌트를 추가한다.
  3. Shadow Caster 2D 컴포넌트에서, Casting Option을 "Cast And Self Shadow"로 한다. 이 옵션은 자기 자신(Sprite 기준으로)의 위쪽에도 Shadow를 Cast하게 만든다.
  4. Shadow Caster 2D 컴포넌트에서, Alpha Cutoff를 0으로 한다. (이걸 안 하면, "Cast And Self Shadow"를 사용했을 때 그림자 사이에 실같은 틈이 생긴다)

이제 이렇게 만든 GameObject를 Assets 창으로 드래그하여 Prefab로 만들면 된다.


Brick Tilemap

위에서 만들었던 Background Tilemap은 그대로 두고, 새로운 "Brick" Tilemap을 하나 만들자. 이 Tilemap에는 처음 만들었을 시에 기본적으로 추가되어있는 "Tilemap", "Tilemap Renderer" 컴포넌트 말고도, "Composite Shadow Caster 2D" 컴포넌트도 추가해야 한다.

 

이후 Tilemap Palette를 열고, 시선을 Tile Palette의 (적당한) 왼쪽 아래로 옮기면 "Default Brush"가 보일 것이다. 이건 어떤 브러쉬를 사용할지 결정하는 옵션이다. 이 브러쉬를 GameObject Brush로 바꾼 뒤, Cells를 클릭하면 "Element 0"이 보일 것이다.

 

이 Element 0을 클릭하면 여러 가지 것들이 보일텐데, 지금은 Game Object에 우리가 위에서 만든 Brick Prefab을 넣어주기만 하면 된다.

 

Prefab을 넣은 뒤, Tile Palette의 (적당한) 오른쪽 위로 시선을 옮기면 "연필/격자/구"가 보일 텐데, 여기서 "연필 모양"이 "Toggles Tile Palette Edit"이다. 이 모드를 활성화하면 Tilemap을 편집할 수 있다. 이걸 켜준 뒤 Palette의 아무 곳이나 클릭하면 Prefab이 Palette 위에 저장된다. (Toggles Tile Palette Edit 모드를 해제한 뒤) 이제 이걸 마음대로 Scene에 칠하면 된다.


Player

  1. Hierarchy 창에서 우클릭을 한 뒤, 2D Object > Sprites > Square을 선택하여 Player GameObject를 하나 만들어준다.
  2. Light 2D 컴포넌트를 추가해준다. Light Type은 "Spot"으로, Radius는 5 정도로 해준다. 
  3. 만약 Shadows 옵션이 활성화(체크 표시) 되어있지 않은 경우, 활성화한다. 

Shadows에 대한 부가 설명 (필요하지 않다면 넘어가도 된다!):

더보기

기본적으로 Shadows는 Light 2D 컴포넌트에서 설정할 수 있는 옵션이므로, "이 객체가 발산하는 빛"에 대한 그림자가 어떻게 드리우도록 만들지 결정하는 것이다.

 

Strength는 그림자의 불투명도를 조절한다. 1이라면, 그림자가 드리운 영역이 완전히 검게 표시된다. 당연히 다른 오브젝트도 안 보인다. 0이라면, 그림자가 아예 안 보인다. 

 

Softness는 "그림자-모서리"의 표현 방식을 결정한다. 이 값이 클수록 그림자의 모서리가 좀 더 부드럽게 보인다.

 

Falloff Strength는 Softness와 연계되는 옵션이다. 이 값이 작을수록 그림자의 모서리가 보다 퍼지는 느낌이 된다.

 

비록 Player GameObject는 그림자가 잘 적용되는지 테스트하기 위해 만든 것이지만, 움직이게 만들고 싶다면 다음과 같은 코드를 적용해주면 된다!

 

코드

작업중...

 

약간의 수정을 거친 뒤 더 좋아진 코드로 돌아오겠다!


Torch

Player GameObject와 완전히 똑같다. 다만 차이점이라면 움직일 수 없다는 정도?

 

조금 더 재미있게 사용해보고 싶다면, Torch가 지닌 Light 2D 컴포넌트에서, Color을 바꿔보면 좋다. 예를 들어, Torch를 2개 만든 뒤, 하나는 Color를 빨간색으로, 다른 하나는 파란색으로 한 뒤 Raduis를 좀 크게 해서 겹치는 범위를 만들어보면, 보라색이 되는 것을 확인할 수 있다. (분명 빛인데, 색처럼 섞인다!)

예쁘다...


읽어주셔서 감사합니다!

궁금한 사항이 있다면 댓글로 언제든지 질문 주세요!