Flipbook Shader for Amplify Shader 앰플리파이 쉐이더로 만드는 플립북

일단 이 이미지를 준비함다. 당연히 타일링 되어 있어야 함. 

왼쪽 아래가 0,0 인건 알죠. 

오른쪽 위가 1,1 인것도 알죠 

그럼 먼저 저 중에서 7 이란 글씨만 나오게 하려면 

UV에 1/3을 곱해야 할 겁니다. 

이케요. 

저 Divide는 1/3 입니다. 

즉 이제 이 UV는 

0,0 에서 0.33333,0.33333 이 되었습니다. 

다음은 이동을 시켜야겠네요 

일단 가로로만 이동을 시켜보죠 

가로로 이동시키려면... 

UV중  U에다가만 더해줘야겠네요 0.33333씩 더해주면 되겠죠?

제가 제일 싫어하는 노드방식의 귀찮은 점이 나왔네요 

컴포넌트로 나눴다가 어펜드로 합쳐주기 으 극혐. 

하여간 U 에다가만 0.3333 을 더해주니 (1/3 이 그나마 좀 더 정확하겠지만 뭐...) 

8이 나왔습니다. 여기에 이제 0.66666을 더해주면 9가 나오겠죠 

그럼 이제 

0,

0.333333,

0.666666

이 순서대로 번갈아 나오게만 하면 됩니다. 

그건.. 역시 만만한건 '시간' 이죠 

솔직히 이거말고 셰이더 내부에서 쓸만한건 없습니다. 

일단 시간을 3으로 나눈 나머지값을 구합니다. Fmod가 A 를 B로 나눈 '나머지값' 만 구하는 거거덩요 

저는 여기 3을 넣어 놓았으니 ... 

다른건 몰라도 어쨌건 나오는 값은 

0 ~ 2.99999 사이의 값이 되겠지요. 정확히는 0에서 시작해서 2.99999 로 증가하고 다시 0으로 되는 애니메이션이 될겁니다 3으로 나눈 후 '남은 나머지' 값이니까요. 시간은 계속 증가하고요 

이제 Ceil로 정수로 '올림'  을 해주지요 

0.1~1 까지는 1이 될테고 

1.1~2 까지는 2가 될테고

2.1~2.9999까지는 3이 될테고.. 

사실 완벽한 0.0일때는 0이 되어 버리므로 곤란합니다만 워낙 짧을테니 걍 넘어가 보죠 

(이상하면 고치지 뭐. 간단하게 0.0001 더해주면 되잖아) 

하여간 1,2,3 이 번갈아 나오게 만들어 졌습니다. 

여기다가 0.3333을 곱해주면 되겠죠 

이제 0.33333 , 0.66666, 0.9999 를 더하게 되었습니다. 

이렇게 하고 보니까, 좀 문제군요. 

작동은 잘 될겁니다만... 

0 + 0.33333 

0 + 0.66666

0 + 0.99999

요건 7,8,9 순으로 나오는게 아니라 

8,9,7 순으로 나오는 거잖아요. 0부터 시작하는게 없어졌잖아!!!!!

뭐 사실 그냥 보기엔 문제가 없습니다만. (789나 897이나..) 좀 더 정확히 나오게 하기 위해서 개선합시다. 

그래서 개선했습니다. 올림이 아니라 내림으로 . 

이제 1,2,3으로 변하는게 아니라 

0,1,2로 변하니까

0.33333 , 0.66666, 0.9999 로 변하는게 아니라 

0 , 0.333333 , 0.66666 으로 변합니다. 

됐다 이제 

이제 제대로 돌아간다뇨 

'최소한 가로는' 제대로 돌아갑니다. 

이제 정리시간이죠

'지금은 3개밖에 안되지만 가로가 몇 개인지 입력하면 그대로 돌아가는 시스템' 을 만들어 보세요 

(난데없이 숙제)

뭐 이케 만들면 됩니다. 개쉽죠 

===============================================================

이제 어려운건 세로죠 세로 

세로도 뭐 기본은 같습니다만... 

이렇게 생각해보죠. 

0 일때는 UV가  (0.0 , 0.0)이 되고 

1 일때는 UV가  (0.3 , 0.0)이 되고 (귀찮으니까 0.3333은 더이상 안쓸께요 ) 

2 일때는 UV가  (0.6 , 0.0)이 되고

3 일때는 UV가  (0.0 , 0.3)이 되고

4 일때는 UV가  (0.3 , 0.3)이 되고

5 일때는 UV가  (0.6 , 0.3)이 되고

6 일때는 UV가  (0.0 , 0.6)이 되고

7 일때는 UV가  (0.3 , 0.6)이 되고

8 일때는 UV가  (0.6 , 0.6)이 되고

잠깐 지금 당신, 프로그램 좀 배웠다고 for문 쓰면 된다고 생각했죠?

안돼요 안돼. for문은 한 패스에 다 도는 거라고요 

지금은 다음 패스엔 다른 숫자가 나오고 그 다음 패스엔 숫자가 늘어나는 식이라고요 

외부에 뭔가 누적되어야 해요 

그래서 for문 쓰면 안되고요 

무조건 시간에서 0~8이라는 숫자를 뽑아내야 합니다. 

뭐 시간에서 0~8 뽑아내는 거야 쉽죠 

저기서 Fmod의 B를 9로 해주면

따란 ~ 

에 보이는건 없지만... 에.. 안믿을라고요? 설마??? 에잉미워

시간 순서대로 0 ~ 8까지 나오는 거잖아요 저거 

저거만 있으면 일단 끝 

당장 이전 시간에 가로로 3개씩 되는거 만들었으니까 이제 이 공식만 만들면 돼요 

0 일때는 UV가  (0.0 , 0.0)이 되고 

1 일때는 UV가  (0.3 , 0.0)이 되고

2 일때는 UV가  (0.6 , 0.0)이 되고

====================

3 일때는 UV가  (0.0 , 0.3)이 되고

4 일때는 UV가  (0.3 , 0.3)이 되고

5 일때는 UV가  (0.6 , 0.3)이 되고

===================

6 일때는 UV가  (0.0 , 0.6)이 되고

7 일때는 UV가  (0.3 , 0.6)이 되고

8 일때는 UV가  (0.6 , 0.6)이 되고

에...그냥 if문 쓸까... 계산식으로 안될까요 

고민해 보자.. 

음 역시

3으로 나눠서 또 내림하면 되겠다!! 

0/3 = 0

1/3 = 0

2/3 = 0

3/3 = 1

4/3 = 1

5/3 = 1

6/3 = 2

7/3 = 2

8/3 = 2

오케이 이걸로 V를 만들면 될 거 같음. 

그럼 U는?

0일때 0

1일때 1

2일때 2

3일때 0

4일때 1

5일때 2

6일때 0

7일때 1

8일때 2

가 나와야 하니 뭔 공식이 있을까나

음?

아까 나온 V 값에 3을 곱해서 빼기하면?

0일때 0-0*3 = 0 

1일때 1-0*3 = 1

2일때 2-0*3 = 2

3일때 3-1*3 = 0

4일때 4-1*3 = 1

5일때 5-1*3 = 2

6일때 6-2*3 = 0

7일때 7-2*3 = 1

8일때 8-2*3 = 2 

뭔가 좀 스마트한 느낌은 아니지만 잘 되었다. 이걸로 U도 구함. 

자 그럼 이것을 대입시켜서 만들어 보자 

float spriteindex = floor(fmod(_Time.y, 9));

float V = floor(spriteindex/3));

float U = (spriteindex  - V*3);

float2 uv = texcoord.xy + float2(U * (1/3),V*(1/3));

 

근데 V 값이 오픈GL은 거꾸로야 ㅋㅋㅋ

그래서 V 값은 1-x 로 뒤집어 줘야 합니다. 

자 정리

일단 스프라이트 인덱스는 다음과 같습니다 .

V 인덱스는 이렇게 구합니다 

U 인덱스는 이렇게 구합니다 

 

 파이널 계산식은 이렇습니다 

 

 한 번에 보면 다음과 같아요 

 

에 뭐 근데 사실 귀찮죠 

그러니

내장된 Flipbook UV animation 노드를 쓰도록 합시다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

위 모든 과정이 노드 하나에 들어 있어요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ