오늘 한 일
- M키 누르면 전체지도 (스크롤로 확대 및 축소가능. 아마 마우스 포인트 지점을 기준으로 스크롤 확대축소가능 하게? 할듯) 전체 맵 보게
- 인벤토리 UI 추가작업(UI 다 구현이 안됨. 아이템 장비창 따로 만들어서 아이템 Type을 나누어서 인벤토리에 들어가게 해야하는지(?))
- Status수치들 업뎃( 레벨, 체력, 스테미나 레벨마다 몇씩 증가하는지)
- 왼쪽 하단 장착무기 연결, 오른쪽 충격파, 체력 물약, 구르기?였나 연결
오늘 수행한 역할 입니다.
오늘 만든 월드맵의 전체 개념 한 줄 요약
월드 전체를 위에서 찍은 ‘정적 이미지’를 만들고,
그 이미지를 UI로 보여주면서 ScrollRect로 이동·줌하는 방식
- 월드맵 만들기
M키를 누르면 월드 (전체)맵이 보이는 걸 만들고 싶었습니다.
보통 맵 Asset을 다운 받으면 전체 월드가 표시 된 맵 png가 있거나 하지만
제가 받은 Asset에는 그게 없기 때문에 직접 만들었습니다.
순서 알려드리겠습니다.
월드맵 이미지(WorldMap.png)를 만든 전체 과정
🔹 STEP 1. 월드맵 전용 카메라 생성
WorldMapCamera
Projection: Orthographic
Rotation: X = 90° (위에서 아래로)
Position: 월드 중앙 위
Culling Mask:
Terrain / Environment만
Player, UI, Enemy ❌
👉 목적
“월드 전체를 위에서 평면 이미지처럼 찍기”
🔹 STEP 2. RenderTexture 생성
RenderTexture (WorldMapRT)
역할:
카메라 화면을 메모리 텍스처로 받는 버퍼
설정:
Size: 2048 × 2048
Color Format: RGBA8
AA: 2~4
👉 즉,
“카메라가 화면에 그리지 말고, 이 텍스처에 그려라”
그래서 카메라에 이렇게 연결:
WorldMapCamera
└ Target Texture = WorldMapRT
STEP 3. RenderTexture → PNG로 저장 (에디터 코드)
Camera cam = GameObject.Find("WorldMapCamera").GetComponent<Camera>();
RenderTexture rt = cam.targetTexture;
이 코드의 의미
월드맵 카메라를 찾고
그 카메라가 그린 RenderTexture를 가져온다
🔹 핵심 흐름 설명
RenderTexture.active = rt;
👉 지금부터 픽셀을 읽을 대상을 rt로 지정
Texture2D tex = new Texture2D(rt.width, rt.height, TextureFormat.RGBA32, false);
tex.ReadPixels(new Rect(0, 0, rt.width, rt.height), 0, 0);
👉 RenderTexture 안의 픽셀을
👉 CPU 메모리(Texture2D)로 복사
byte[] bytes = tex.EncodeToPNG();
👉 Texture2D → PNG 파일로 변환
File.WriteAllBytes(Application.dataPath + "/WorldMap.png", bytes);
👉 실제 프로젝트 폴더에 WorldMap.png 생성
🔹 이 코드의 성격
Editor 전용
게임 실행 중에 쓰는 코드 ❌
메뉴에서 한 번 눌러서 “맵 스샷 뽑는 용도”
그래서:
[MenuItem("Tools/Export World Map")]
👉 Unity 상단 메뉴에 버튼 생김
3️⃣ 생성된 WorldMap.png를 UI로 쓰는 방식
🔹 Texture 설정
Texture Type: Sprite (2D and UI)
Compression: None
Max Size: 2048
🔹 UI 구조
👉 이제 이건 UI용 지도 이미지
WorldMapPanel
└ MapContainer (ScrollRect)
└ Viewport (Mask)
└ MapImage (WorldMap.png)
역할 분담
| 요소 | 역할 |
|---|---|
| MapImage | 실제 월드맵 그림 |
| ScrollRect | 드래그 이동 |
| Mask / Viewport | 화면 밖 잘라내기 |
| WorldMapPanel | 전체 맵 UI ON/OFF |
4️⃣ 왜 ScrollRect를 썼나?
ScrollRect가 해주는 것:
마우스 드래그로 이동
터치 이동
관성 처리
👉 지도 이동 로직을 직접 안 짜도 됨
우리가 스크립트로 만든 건:
❌ 이동
⭕ 줌
⭕ 플레이어 위치 계산
5️⃣ 플레이어 아이콘은 왜 별도로 처리했나?
❌ MapImage의 자식으로 두면
맵 줌 시 아이콘도 같이 커짐 ❌
✅ 그래서 구조를 이렇게 함
MapContainer
├ MapImage (확대/축소 대상)
└ PlayerIcon (고정 크기)
그리고 스크립트로:
플레이어 월드 좌표 → 맵 좌표 변환
MapImage 이동량을 더해서 위치 보정
👉 결과:
맵 움직여도 아이콘 위치는 정확
아이콘 크기는 항상 동일
6️⃣ 오늘 만든 월드맵의 “방식 정리”
✔ 구현 방식 요약
월드를 Orthographic 카메라로 한 번 캡처
RenderTexture에 렌더
Editor 스크립트로 PNG 추출
PNG를 Sprite로 변환
UI Image로 월드맵 표시
ScrollRect로 이동
스크립트로 줌 + 플레이어 위치 표시
7️⃣ 이 방식의 장점 (왜 좋은가)
성능 부담 거의 없음
UI 확장 쉬움 (핑, 포그, 퀘스트)
미니맵 / 월드맵 분리 깔끔
대부분 상용 게임 구조와 동일
📌 한 줄로 정리하면
오늘 만든 월드맵은
“월드를 한 번 이미지로 만들어 UI에서 조작하는 정적 월드맵 시스템”이다.
이제 이 설명 그대로:
README
포트폴리오
발표 자료
어디에 써도 된다 👍
