21
그림 깨졌죠 유니티 3D 2D 이미지 다루기

유니티3D에서 2D 이미지 다루기

Embed Size (px)

Citation preview

Page 1: 유니티3D에서 2D 이미지 다루기

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

Page 2: 유니티3D에서 2D 이미지 다루기

해상도란?한 화면, 한 그림이

픽셀 몇개로 표현되는가?

이미지가 깨지는 이유는 해상도가 안 맞아서

Page 3: 유니티3D에서 2D 이미지 다루기

그림 파일이 화면에 표시되기까지...

그림 파일 (1000px * 1000px)

스프라이트 (10u x 10u)

카메라화면

(800px * 800px)

1유닛당 몇 픽셀인가?

카메라에 몇 유닛만큼 표시되나?

화면 크기가 몇 픽셀인가?

최종적으로 80% 축소되어 표시됨

Page 4: 유니티3D에서 2D 이미지 다루기

그림 파일을 스프라이트로

54px * 54px 그림Pixel per Unit을 54로 설정

1x1 크기 스프라이트

Page 5: 유니티3D에서 2D 이미지 다루기

스프라이트를 카메라로

size=2 인 카메라 (세로길이 4)

1x1 스프라이트

스프라이트가 카메라 세로길이의 1/4를 차지하게 됨

Page 6: 유니티3D에서 2D 이미지 다루기

카메라를 화면으로

카메라 세로길이의 1/4을 차지하니까 화면 세로길이의 1/4를 차지함

따라서 화면이 800px * 600px 크기라면 스프라이트는 150px * 150px 크기로 그려짐

Page 7: 유니티3D에서 2D 이미지 다루기

유니티 인스펙터 살펴보기

• 스프라이트인가,3D 모델에 쓸 텍스쳐인가?

• 이미지 하나에 여러 스프라이트가 들어있는가?

• 유니티 길이 단위 1유닛 당 몇 픽셀을 표현할까?

• 어느 점을 중심으로 그려지는가?

• 밉맵을 생성하는가?

• 어떻게 확대/축소하나?

• 빌드할 때 어떻게 넣을까?

Page 8: 유니티3D에서 2D 이미지 다루기

그래서,제 그림은 왜 깨졌는데요

실전사례 분석 (모나드 중심)

Page 9: 유니티3D에서 2D 이미지 다루기

Case 1.이미지 해상도가

화면에서 표시될 해상도보다 낮은 경우

(이미지를 크게 그리세요...)

Page 10: 유니티3D에서 2D 이미지 다루기

추천하는 해결책

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

Page 11: 유니티3D에서 2D 이미지 다루기

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

Page 12: 유니티3D에서 2D 이미지 다루기

Mip Map 이 무엇인가요?

• 미리 절반씩 축소한 이미지를 만들어 두는 것

• 유니티는 화면에 표시되는 크기와 제일 가까운 이미지를 불러와서 표시한다.

• 이미지를 70% 크기로 축소하면,50% 크기로 축소해뒀던 이미지를 140% 확대해서 보여주는 것

• 줄였다가 확대하니까 당연히 깨진다!

Page 13: 유니티3D에서 2D 이미지 다루기

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

X

Page 14: 유니티3D에서 2D 이미지 다루기

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

Page 15: 유니티3D에서 2D 이미지 다루기

축소하면 왜 안돼요?

• 런타임에서 확대/축소를 구현하는 알고리즘은 우리의 예상보다 구림

• 체감상 50% 이하로 축소하기 시작하면 조금씩 깨진다

• 지나치게 큰 이미지는 넣기전에 미리 화면 해상도에 맞도록 축소해서 넣는다

• 아니면 차라리 밉맵을 켜던가

Page 16: 유니티3D에서 2D 이미지 다루기

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

경우

Page 17: 유니티3D에서 2D 이미지 다루기

화면 전체 크기의 이미지를 넣고 싶을 때...

• 이미지 크기 제한의 디폴트 값은 1024px

• 이것보다 큰 이미지는 1024px로 축소됨

• 화면 전체 크기라면 보통 1680~1920px에 맞춰야 하기 때문에 크기제한을 올리는 것이 좋다

• 8192px까지 조절 가능

• 이미지를 쪼개던가...

Page 18: 유니티3D에서 2D 이미지 다루기

Case 5.도트 게임을 만들고

싶을 때

Page 19: 유니티3D에서 2D 이미지 다루기

도트는 왜 뭉개지죠

• 확대/축소 옵션을 확인

• Bilinear : xy 방향 보간

• Trilinear : xyz 방향 보간 (2D 게임 만들땐 무쓸모)

• Point : 가까운 픽셀 색.도트 스타일은 Point를 사용

Bilinear

Point

Page 20: 유니티3D에서 2D 이미지 다루기

Point 방식의 문제점

• 2배 이상이면 상관없는데, 1배~2배 사이의 애매한 배율로 확대됐을 때 기묘하게 깨진다!!

• 애초에 1배~2배 사이의 크기로 쓰인다면 도트 스타일을 사용하지 않는 것이 좋다

• 굳이 도트로 찍은 이미지를 쓴다고 해도 Point 방식으로 쓰지 않는 게 좋다

Page 21: 유니티3D에서 2D 이미지 다루기

정리

• 화면 크기에 맞는 이미지를 쓸 것

• 위 사항을 잘 지키면 문제가 없다

• 위 사항을 잘 지켜라

• 그렇게 해라