1

Custom Tile Texture 구현 Ver 2.0

그래픽디자인실 VFX Team : 유재성

2

Tile Texture ( Atlas Texture ) ??

• 성능상의 문제로 하나의 파일에 여러 이미지를 모아놓은 텍스처 효율적이긴 하나 수정 및 텍스처 공간활용 , 좌표 추출 등에 애로사항이 꽃핀다 1. 구현목표

• Tile X,Y 값 • 애니메이션 되는 시간 조절 • 전체 타일에서 사용되는 특정 범위 지정 • 사용되는 범위의 시작 위치 변경

3

2 . 기존의 스크립트 적극 활용 (Java Script )

Java Script 에 익숙하지 않아서 수월한 C# 으로 변경 작업

4

• 수정된 스크립트 ( C# )

5

• 비교

JavaScript 에서 float 값의 상수 형은 수만 써주면 되지만C# 에선 상수 뒤에 “ f” 를 꼭 붙여줘야 한다

JavaScript 에선 int 로 받는 값이 float 형 이어도 문제가 없지만C# 에선 오류가 발생한다Float 형 앞에 (int) 선언을 해줘서 변수로 넘겨줘야 한다

6

• 완성된 스크립트

3. 구현목표 확인• Tile X,Y 값 • 애니메이션 되는 시간 조절 • 전체 타일에서 사용되는 특정 범위 지정 • 사용되는 범위의 시작 위치 변경

7

4. 나머지 목표 구현…

처음부터 제작한 스크립트가 아니라 모르는 변수들이 너무 많다 분석을 해야…

???

8

입력변수

5. 모르는 값들은 변수를 선언해서 확인한다 • 확인하고 싶은 미지의 값들은 알맞은 타입의 변수를 선언한 후 실행하여 스크립트 를 분석한다

• 플레이 후 바뀐 변수 값

확인변수

9

6. 스크립트 분석

Unity UV 좌표계 DirectX UV 좌표계

10

4

4U / X

V / Y

0.75~0.99…0.25~0.49…0.5~0.759…0.0~0.249… 1? = 0.0

11

index = Time x 변수 (1~) // 초당 값이 카운트 됨 1,2,3… 변수가 2 이면 2 배의 속도로 카운트가 빨라진다

% : 나누기를 한 나머지index = index % ( 2 x 4 ) // 위에서 받은 값을 8 로 나눈 나머지 0,1,2,3… / 8 = 0,1,2,3,4,5,6,7,1,2,3,4,5,6,7,1… // 0~7 값 반복

x y x y

size = ( 1 / 2 , 1 / 4 ) = ( 0.5 / 0.25 ) // 전체 1 의 단위에 비례한 단일 이미지의 크기

uindex = 0,1,2,3,4,5,6,7,0… % 2 = 0,1,0,1,0,1,0,1.0… // 0 과 1 만 반복하여 반환vindix = 0,1,2,3,4,5,6,7,0… / 2 = 0,0,1,1,2,2,3,3,0… // 나머지를 한 값만 반환한다

offset = vector2( 0,1,0,1… x 0.5 , 1-0.25-(0,0,1,1,2,3,3,0… x 0.25) ) vector2(0 , 0.5 , 0 , 0.5… , 0.75 – ( 0 , 0 , 0.25 , 0.25 , 0.5 , 0.5 , 0.75 , 0.75 , 0…) )

0.75 , 0.75 , 0.5 , 0.5 , 0.25 , 0.25 , 0 , 0 , 0.75…

복잡한 순차적 위치 이동을 연산자 2 개로 해결 !!

12

7. 수정 방향

• 변수 index 값이 반복되는 범위의 크기가 Texture 에서 출력될 이미지의 범위를 지정 ( 0~3 , 0~5, 0~7 )

변수 index 시작 값이 범위 안에서 다른 위치의 이미지를 출력하게 해준다 ( 0~3 , 2~5 , 4~7 )

그 아래쪽의 구문은 index 값을 받아 UV 에 맞게 변조 시켜주는 기능만 한다 중요한 것은 index 값 !

index%(uvAnimationTileX*uvAnimationTileY) index%(uvAnimationTileX * 사용범위크기 Y) + 시작위치 Y

2x2 or 2x3 or 2x4

0~3 or 2~5 or 4~7

13

8. 완성된 스크립트

유효한 범위 지정 시작하는 행 지정 ( 디폴트 0)

14

유효한 범위 변경시작하는 행 지정

9. 적용 예시

• 실행 결과

123

15

10. 결과물

16

11. 남은 문제들…

구현목표• Tile X,Y 값 • 애니메이션 되는 시간 조절 • 전체 타일에서 사용되는 특정 범위 지정 • 사용되는 범위의 시작 위치 변경

• 행 , 열 구분 없이 적용 가능 • 디테일 한 위치 지정• Once / Loop 구분 설정

사용하시다가 문제점이나 개선점 등이 있으면 알려주시면 감사하겠습니다 !!