팝업 Dim 스프라이트 만들기 - Sliced 텍스처와 화면 커버
팝업 뒤를 어둡게 덮는 Dim 스프라이트는 텍스처 설정과 화면 커버 방식을 따로 정한다.
언제 무엇을 쓰는지
섹션 제목: “언제 무엇을 쓰는지”| 상황 | 설정 |
|---|---|
| 단색 Dim을 크게 늘려 쓸 때 (가장자리 품질이 중요할 때) | Sliced + Border 1 + 작은 단색 9-slice 텍스처 |
| 게임 콘텐츠 영역만 가리면 될 때 (팝업 내부 Dim) | 크기 1080×1920. FitToScreen은 필요 없다 |
| 창 여백까지 포함해 화면 전체를 가려야 할 때 (튜토리얼 등) | 크기 1080×1920 + FitToScreen + enableCrop=true |
두 설정은 서로 독립적이다. Sliced는 텍스처를 어떻게 늘릴지, FitToScreen은 화면에 얼마나 맞출지를 정한다. 화면 전체를 덮는 Dim이라면 둘을 함께 쓸 수 있다.
Dim 텍스처 설정 (Sliced)
섹션 제목: “Dim 텍스처 설정 (Sliced)”Dim은 단색을 화면 크기까지 크게 늘려 쓰는 스프라이트다. 늘리는 방식에 따라 가장자리 품질이 달라진다.
| 항목 | 값 |
|---|---|
| 이미지 | 작은 단색 사각형 텍스처 (9-slice용, 예: 4×4 또는 16×16) |
| Sprite Type | Sliced |
| 9 Patch Border | Left / Right / Top / Bottom = 1 |
왜 Sliced + Border 1인지
섹션 제목: “왜 Sliced + Border 1인지”작은 단색 텍스처를 Simple로 크게 늘리면, 아틀라스에서 이웃한 프레임의 텍셀이 선형 필터링에 섞여 가장자리에 반투명·이색 테두리가 생길 수 있다. Sliced는 border만큼 안쪽을 고정하고 가운데(center)만 늘리므로, 늘어나는 영역이 이웃과 섞이지 않는다. 단색 채우기에는 border 1이면 충분하다. border가 0이면 Simple과 같아 효과가 없다.
텍스처 크기 (4×4 vs 16×16)
섹션 제목: “텍스처 크기 (4×4 vs 16×16)”4×4 텍스처에 Border 1을 주면 네 모서리와 가장자리 1픽셀이 고정되고 가운데 2×2만 늘어난다.
단색 Dim용 9-slice 텍스처는 작게 둔다. 품질은 크기보다 Sliced + Border 1이 좌우한다.
- 공통: Border 1이면 가운데(center)만 늘어나므로, 단색 Dim의 화면 결과는 4×4와 16×16이 같다.
- 4×4: Border 1 기준 최소 구성(center 2×2)이며, 아틀라스 용량이 가장 작다. 새 텍스처를 만들 때 권장한다.
- 16×16: 이미 있는 단색 텍스처를 재사용할 때 충분하다. Border를 1보다 올려도 가운데 영역이 남는다.
- 그 이상: 수십 픽셀 이상 큰 단색은 Dim 품질이 같고 아틀라스만 커진다.
이미 16×16 단색이 있다면 굳이 4×4로 다시 뽑지 않고 Sliced(Border 1)만 적용해도 된다.
Sliced를 쓰지 않는 경우
섹션 제목: “Sliced를 쓰지 않는 경우”- 텍스처를 원본 비율 그대로 쓰거나, 늘리지 않는 아이콘·일러스트
- 둥근 모서리·장식이 있는 9-slice 패널 (border는 모서리 반경에 맞게 따로 지정한다)
화면 전체 커버 (FitToScreen)
섹션 제목: “화면 전체 커버 (FitToScreen)”게임 콘텐츠는 설계 해상도(1080×1920) 기준의 게임 루트 안에 있고, 창 비율에 따라 그 바깥에 여백이 생긴다. Dim이 콘텐츠 크기(1080×1920)만 가지면 이 여백은 덮이지 않는다. 여백까지 덮어야 하는 Dim에는 FitToScreen을 붙인다.
| 항목 | 값 |
|---|---|
| 컴포넌트 | FitToScreen |
| Dim 크기 | 1080×1920 (설계 해상도 그대로) |
enableCrop |
true |
enableCrop 동작
섹션 제목: “enableCrop 동작”true(cover): 화면을 빈틈없이 채운다. 비율이 맞지 않는 쪽은 잘린다. Dim처럼 화면을 가리는 용도에 맞다.false(contain): 노드 전체가 화면 안에 들어오고, 남는 쪽에 여백이 생긴다.
FitToScreen은 transform.size의 비율을 기준으로 스케일하므로, Dim 크기는 화면 비율(1080×1920)로 두어야 한다. 크기를 정사각으로 두면 커버 비율이 틀어진다.
FitToScreen을 쓰지 않는 경우
섹션 제목: “FitToScreen을 쓰지 않는 경우”- 메뉴·도움말처럼 게임 보드 영역만 가리면 되는 일반 팝업 Dim
- 콘텐츠 레이아웃이 중요해서 화면 비율에 따라 잘리면 안 되는 노드 (로고, 카드, 텍스트 등)
- 단색 Dim을 크게 늘릴 때:
Sliced+ border 1. 텍스처는 4×4 또는 16×16이면 충분하다. - 콘텐츠 영역만 가릴 때: 크기 1080×1920, FitToScreen은 붙이지 않는다.
- 화면 전체를 가릴 때: 크기 1080×1920 +
FitToScreen(enableCrop=true).