UV 좌표로 텍스쳐 크기 조절하기

원하는 목적

UI에 들어가는 스프라이트 이미지가 있고, 테두리만 걸러내는 기능이 필요했다.

 

시도

테스트용 이미지로 옛날에 만들었던 구름? 텍스쳐를 사용했다.

 

이런 생각을 통해 이렇게 만들게 되었다.

-> (원본 텍스쳐 - 조금 줄인 텍스쳐)를 하면 테두리만 남지 않을까?
-> 텍스쳐를 어떻게 줄이지?
-> UV Tiling으로 오브젝트를 늘려서 조절한 뒤에, Offset을 슥슥 조절하면 되지 않을까?

 

Shader Graph는 Sprite Unlit로 생성했다.

이미지의 Tiling을 늘려보았다.

Tiling을 조절해도 단 하나만 보이기 위해, 이미지의 Wrap Mode를 Repeat에서 Clamp로 변경했다.

Offset을 조절해서 중앙에 오도록 만들어보자. ( 짤려서 안 보이지만, Offset 값은 (-0.25, -0.25)로 했습니다. )

테스트 하다보니,

Tiling이 (1.5, 1.5)면, Offset이 (-0.25, -0.25)이어야 중앙에 오고,

Tiling이 (2, 2)면, Offset이 (-0.5, -0.5)이어야 중앙에 왔다.

그래서 이런 공식을 대입해주었다.

이거를 원본에서 빼준다면???

생각한대로 잘 나오긴 했다!!

 

활용

테두리는 남겨두고, 안의 내용만 슬라이더 형식처럼 만들어서 이렇게 사용했다.