동아리 게임 개발에서 2D 이미지가 깨지는 이유를 분석해봤습니다.

1. “왜 제 그림 다 깨졌죠”
유니티3D로 2D 이미지 다루기

2. 해상도란?
한 화면, 한 그림이
픽셀 몇개로 표현되는가?
이미지가 깨지는 이유는
해상도가 안 맞아서

3. 그림 파일이 화면에 표시되기까지...
그림 파일
(1000px * 1000px)
스프라이트
(10u x 10u)
카메라
화면
(800px * 800px)
1유닛당 몇 픽셀인가?
카메라에 몇 유닛만큼 표시되나?
화면 크기가
몇 픽셀인가?
최종적으로
80% 축소되어 표시됨

4. 그림 파일을 스프라이트로
54px * 54px 그림
Pixel per Unit을 54로 설정
1x1 크기 스프라이트

5. 스프라이트를 카메라로
size=2 인 카메라
(세로길이 4)
1x1 스프라이트
스프라이트가
카메라 세로길이의 1/4를 차지하게 됨

6. 카메라를 화면으로
카메라 세로길이의 1/4을 차지하니까
화면 세로길이의 1/4를 차지함
따라서 화면이 800px * 600px 크기라면
스프라이트는 150px * 150px 크기로 그려짐

7. 유니티 인스펙터 살펴보기
• 스프라이트인가,
3D 모델에 쓸 텍스쳐인가?
• 이미지 하나에 여러 스프라이트가
들어있는가?
• 유니티 길이 단위 1유닛 당 몇 픽셀
을 표현할까?
• 어느 점을 중심으로 그려지는가?
• 밉맵을 생성하는가?
• 어떻게 확대/축소하나?
• 빌드할 때 어떻게 넣을까?

8. 그래서,
제 그림은 왜 깨졌는데요
실전사례 분석 (모나드 중심)

9. Case 1.
이미지 해상도가
화면에서 표시될 해상도보다
낮은 경우
(이미지를 크게 그리세요...)

10. 추천하는 해결책
전체 게임화면 크기 (1920*1080, 1680*720...)를 정하고
그 화면에 맞춰서 (혹은 2배 크기로) 그립니다.

11. Case 2.
Mip Map 생성으로 인해
낮은 해상도가 선택된 경우

12. Mip Map 이 무엇인가요?
• 미리 절반씩 축소한 이미지를
만들어 두는 것
• 유니티는 화면에 표시되는 크기와
제일 가까운 이미지를 불러와서
표시한다.
• 이미지를 70% 크기로 축소하면,
50% 크기로 축소해뒀던 이미지를
140% 확대해서 보여주는 것
• 줄였다가 확대하니까
당연히 깨진다!

13. 그러니까...
2D 게임에 밉맵 켜지 마세요.
X

14. Case 3.
이미지를 무리하게 축소한 경우

15. 축소하면 왜 안돼요?
• 런타임에서 확대/축소를
구현하는 알고리즘은
우리의 예상보다 구림
• 체감상 50% 이하로 축소하기
시작하면 조금씩 깨진다
• 지나치게 큰 이미지는
넣기전에 미리 화면 해상도에
맞도록 축소해서 넣는다
• 아니면 차라리 밉맵을 켜던가

16. Case 4.
해상도 상한선에 부딛친
경우

17. 화면 전체 크기의 이미지를
넣고 싶을 때...
• 이미지 크기 제한의 디폴트 값
은 1024px
• 이것보다 큰 이미지는 1024px
로 축소됨
• 화면 전체 크기라면 보통
1680~1920px에 맞춰야 하기 때
문에 크기제한을 올리는 것이
좋다
• 8192px까지 조절 가능
• 이미지를 쪼개던가...

18. Case 5.
도트 게임을 만들고
싶을 때

19. 도트는 왜 뭉개지죠
• 확대/축소 옵션을 확인
• Bilinear : xy 방향 보간
• Trilinear : xyz 방향 보간
(2D 게임 만들땐 무쓸모)
• Point : 가까운 픽셀 색.
도트 스타일은 Point를
사용
Bilinear
Point

20. Point 방식의 문제점
• 2배 이상이면 상관없는데, 1
배~2배 사이의 애매한 배율
로 확대됐을 때 기묘하게 깨
진다!!
• 애초에 1배~2배 사이의 크
기로 쓰인다면 도트 스타일
을 사용하지 않는 것이 좋다
• 굳이 도트로 찍은 이미지를
쓴다고 해도 Point 방식으로
쓰지 않는 게 좋다

21. 정리
• 화면 크기에 맞는 이미지를 쓸 것
• 위 사항을 잘 지키면 문제가 없다
• 위 사항을 잘 지켜라
• 그렇게 해라