“안개(=안 보이는 부분)를 2D 탑다운 게임에서도 쓰고 싶다!”
이 글은 AOS Fog of War(3D XZ 기준)를 2D XY로 바꿔서 쓰는 과정을 정리한 블로그입니다.
https://assetstore.unity.com/packages/vfx/shaders/fullscreen-camera-effects/aos-fog-of-war-249249
AOS Fog of War | 카메라 효과 | Unity Asset Store
Add depth to your project with AOS Fog of War asset from Fischl Works. Find this & more 시각 효과 options on the Unity Asset Store.
assetstore.unity.com
사용한 에셋!
미리보기 (전/후)
원형 시야 느낌
손전등(부채꼴) 시야 느낌
1) 왜 XZ → XY로 바꾸나요?
- 3D 프로젝트는 “바닥=X-Z 평면, 높이=Y”가 보통입니다.
- 2D 탑다운은 “바닥=X-Y 평면, 깊이(Z)는 카메라 앞뒤만 사용”이 보통입니다.
- 그래서 좌표와 메쉬 기준을 XY로 돌려놓아야 합니다. 그래야 타일 계산, 충돌, 정렬이 자연스럽습니다.
2) 좌표계와 메쉬를 XY에 맞추기 (핵심 3줄 요약)
- 타일 좌표 계산을 X,Y로 바꾸기
- 리빌러(플레이어 등) 위치에서 x는 x, y는 y를 직접 읽어 씁니다. (XZ가 아니라 XY!)
- 원본과 수정본 모두 GetUnitX(...) / GetUnitY(...) 를 써서 그리드 좌표로 바꿉니다.
- 안개를 그릴 메쉬를 XY 평면에 놓기
- PrimitiveType.Quad를 만들어 월드 중앙(XY) 에 두고, Z는 카메라 바로 앞(작은 음수) 로 둡니다.
- 정렬은 Sorting Layer / Order 로 스프라이트 위에 오도록 맞춥니다. (콜라이더는 꺼두기)
- 텍스처 해상도 = 타일 해상도
- new Texture2D(levelDimensionX, levelDimensionY) 처럼 타일 수와 같은 크기의 텍스처를 만들어, 픽셀마다 “가림/공개”를 색으로 기록합니다.
2-1. 좌표계: 리빌러가 어디 서 있는지 “XY 타일”로 바꾸기
- 리빌러 Transform.position 의 x, y 값을 한 칸 크기(unitScale) 로 나눠 반올림하면 “몇 번째 칸인지”를 얻습니다.
- 이 값은 안개 계산에서 “어느 타일을 밝힐지”에 쓰입니다.
- 코드적으로는 GetCurrentLevelCoordinates → GetUnitX(pos.x), GetUnitY(pos.y) 흐름입니다. (XZ가 아닌 XY)
2-2. 메쉬: Quad를 XY에, 정렬은 스프라이트 위로
- 안개를 실제로 그릴 ‘판’ = Quad(1×1) 를 만들어 레벨 중앙(XY) 에 깔고, 스케일을 레벨 크기만큼 키웁니다.
- Z 살짝 음수(예: -0.1f)로 두면 카메라 앞에 오면서, 다른 2D 스프라이트 위에 올릴 수 있습니다.
- Sorting Layer / Order 로 표시 순서를 고정합니다.
- 원본은 초기 구현에서 180° 회전이 들어가지만, 2D에서는 보통 회전 없이 써도 됩니다. (수정본에선 이 회전이 제거되어 더 자연스럽습니다)
2-3. 텍스처: 타일 하나 = 텍스처 한 픽셀
- 안개는 결국 텍스처 한 장입니다.
- 텍스처의 각 픽셀 = 지도 타일 1칸 이라고 생각하고,
“보이는 칸은 투명/연한 색, 보이지 않는 칸은 어두운 색(알파값 큼)”으로 칠합니다. - 원본은 fogPlaneTextureLerpTarget/Buffer 두 장을 써서 부드럽게 보간(Lerp) 합니다. 수정본은 XY 환경에 맞춘 동일 구조를 유지합니다.
손에 잡히는 체크리스트
- 리빌러의 위치에서 X/Y 로 타일 좌표 뽑기 (GetUnitX, GetUnitY).
- Quad를 만들어 XY 평면에 배치, Z는 -0.1f 근처, Sorting Layer/Order로 최상단 표시.
- 텍스처 크기 = (타일X, 타일Y) 로 만들고, 각 픽셀을 타일처럼 사용.
다음 파트에서는 3) 장애물 스캔을 2D 물리로 바꾸기(Physics2D.OverlapBoxAll) 와
5) 손전등 시야(부채꼴) + 부드러운 가장자리(가중치) 를 이어서 정리할게요. (수정본에 이미 구현되어 있습니다)
csFogWar
참고
- 에셋: AOS Fog of War (원본은 3D/XZ 기준)
- 우리 프로젝트 스크립트(요지):
- 원본 2D 포팅본: csFogWar1.cs – XY 정렬, Quad, 텍스처 보간 구조.
-
- 수정본: csFogWar.cs – 부채꼴 시야(outer/inner 반경, 각도, 전방 축), 가중치 기반 알파, 회전 제거 등.
사실 GPT의 도움을 많이 받았지만 3D에서 2D로 바꾸는게 마냥 쉽지는 않았네요 ㅎㅎ.. 900줄이나 되는 코드이다보니.. 하여튼!
수정본을 보시면 아시겠지만 원형 시야가아닌 부채꼴 시야로 제작했습니다! 현재 2D 탑뷰 암살 게임을 만드는중이라서요ㅎㅎ..
읽어주셔서 감사합니다아!!

'Unity' 카테고리의 다른 글
Unity - 3D Squad Swarm (팀 프로젝트) (1) | 2025.09.05 |
---|---|
Unity - TopDown 레이싱 방치형 RPG (2) | 2025.08.29 |
Unity - Project_Up (3) | 2025.08.13 |
Unity - 3D Survival Game(인벤토리 기능) (6) | 2025.08.08 |
Unity - Inventory 인벤토리 시스템 구현 정리 (3) | 2025.08.07 |