[📜일지] 오늘 자기전에 한일

[익명(39.118)]

이렇게 생긴 이미지를 만들었음

용도는 화면에 표시될 아이템이나 이미지를 같은 공간에 반씩 나눠서 표시하는 용도인데

이미지를 따로 안만들고 기존에 있는걸 셰이더로 합치는 방식을 씀

준비물은 서로 반씩 나눌 영역 표시한 텍스처랑

이런식으로된 sprtie sheet임

같은sprtie sheet를 이용하는 sample texture 2d 노드를 2개 만들고 각각의 uv를 다르게 설정함

내가쓴건 8x8짜리 sheet라서 tileing을 0.125정도 값으로 나눴을때 이미지가 화면을 가득 채움

그리고 offset을 이용해 이미지를 표시할 위치를 옮기면서 아이콘을 다르게 표시함

그 다음 각각 다르게 표시된 이미지를 lerp노드의 A,B에 연결해주고

T에다가 영역을 나눌 텍스쳐를 연결하면 저런식으로 반씩 쪼개짐

그 다음 image에 사용할때 좌우에 따로 표시할 이미지를 구분하기 위해 vertexcolor노드를 이용했음

이 노드를 이용하면 ui의 image오브젝트의 color값을 받아올 수 있는데 이 컬러값에 255를 곱해준 뒤 8x8짜리 sheet기준

split를 이용해 4개의 채널을 나누고 그 값에 0.125를 곱하면

rgba값을 이용해 rg=좌측에 표시할 이미지 ba=우측에 표시할 이미지로 제어가 가능한데

정확히 값이 에디터 기준 1 높아질때마다 이미지가 바뀌게됨

이방식은 image의 color의 값을 이용한 만큼 버튼등의 다른 ui요소나 스크립트와의 상호작용이 간단하다고 생각함