이미지 스크롤링으로 유니티 셰이더 입문해보아요🤗

Video: 이미지 스크롤링으로 유니티 셰이더 입문해보아요🤗
Channel: Goldmetal
Duration: 8m 43s
Source: subtitle (auto, ko)
Transcript:
자, 그러면 자, 지금부터 할 건 뭐냐? 자, 여기를 제가 가지고 있는 아이콘을 이렇게 그니까 좀 무한 스크롤링 할 수 있도록 제가 한번 만들어 볼 거예요. 혹시나 지금요 스크롤링 같이 따라해 보실 분들은 유니트 켜시고 쉐이더 그래프 쉐이더 쉐이더 쉐이더 폴더 하나 만들고요. 쉐이더 플러스 해서 쉐이더 그래프죠. URP 요쪽 캔버스 이제 UI의 조용카등한 캔버스 쉐레이더 그래프를 직접 만들 수 있어요. 저는 요거를 이제 스크롤이 일어겠습니다. 오케이. 자, 나타났고요. 보면 요렇게만 딸랑이 있어요. 여기서 하나 추가하죠. 뭘 추가하느냐? 일단은 당연히 텍스처가 필요하죠. 텍스처는 메인 텍스. 이거 맞나? 메인 텍스지. 메인 텍스. 그다음에 필요한 건 스피드죠. 벡터 2로 만들게요. 벡터 2인데 스피드야. 그다음 x축, y축 별도로 다 지정 가능하죠. 그다음에 타일링 타일드도 벡터 2로 만들어 두도록 하겠습니다. 자, 메인 텍스는 지금 예제가 없기 때문에이 메인 프리뷰에서 아무것도 나타나잖아요. 그렇죠? 아, 이거 프리뷰가 안 나오는군요.

자, 올려 드릴게요. 자, 이렇게 세게 됐고요. 메인 텍스는 방금 제가 그렸던 테스처를 넣도록 하겠습니다. 자, 그건 기본값이 되는 거예요. 자, 텍스터 2D 데이터를 하나 놓고 그다음에 벡터 2D 스피드하고 타일드 여기 두 개만 놨어요. 자, 이제 한번 요리를 좀 해 보도록 하겠습니다. 자, 여러분들이 쉐이더를 만들 때 텍스처 2D를 쓰려면 먼저 샘플링을 하셔야 됩니다. 샘플링. 그니까이 이미지 안에 있는 색상들 어떤 것들이 있는지이 쉐이더가 인식을 해야 돼요. 그게 바로 샘플링이라는 겁니다. 해 볼게요. 샘플 하면은 테스트 2D 있죠? 요거 가져올게요. 어, 그럼 샘플링 했어. 그럼이 이미지에 들어가 있는 모든 픽셀들의 색상값들을 내가 읽었어. 샘플링했어. 그럼 그거 어디서 출됩니까? RGB A에서 나옵니다. 그래서 그중에서 A 떼고 A는 알파 값이죠. RGB를 여기 베이스 컬레이다가 집어 넣읍시다. 흰색이니까 예시가 안 나오네. 제가 원래 우리 이미지 투명했어요. 그러면은 그건 이제 알파값이죠. 알파 값은 여기 브레그먼트에서 픽셀이죠.

알파로 넣으십시죠. 와. 자, 그러면 원래 우리가 알고 있었던 그 이미지가 이렇게 나왔어요. 요거 예시는 볼 필요 없죠. 그건 접어도 돼요, 여러분들. 이거를 이제 스크롤링 하고 싶어요. 결국 UI도 하나의 편에 매슈라는 뜻은 텍스처를 쓰고 있고 그 텍스처는 UV에 의해서 펼쳐져 있다라고 하는 것인데 어 그럼 내가 UV를 제어를 하면 되겠네. UV를 봅시다. UV를 보시면 여기 타일링 앤드 오프셋 이런게 있어요. 자, 이렇게 있습니다. 얘를 요렇게 집어넣어요. 지금까지는 변화가 없죠. 근데 내가 타일링을 1- 2 아니고 2-로 줄게요. 2- 2 3- 3 자, 이렇게 얘가 점점 점점 점점 작아집니다. 여기에 반복이 되는게 아니고 얘는 작아지기만 하는 거죠. 자, 이거는 SN 문제예요. 그래서 다시 SN로 돌아갑니다.이 S 보시면 또 여기에 랩 모드 있어요. 랩 모드. 지금 글램프라 했는데 우리는 뭐요? 리피트를 해야죠. 리피트. 자, 리피트를 하게 되면은 요렇게 됩니다. 와하하. 와, 보셨어요? 야, 진짜 그 우리 벽지에 있는 그런 반복적인 패턴처럼 만들어졌네요.

그러면이 오프셋은 뭘까요? 그 오프셋을 제가 X축 한번 움직여 볼게요. 자, 요렇게 갑니다. 오, 좋아. 요렇게 이렇게 이런 식으로 움직여, 움직여, 움직여. 야, 사로 움직이네. 좋죠? 네. 그래서 우리는 오프세만 움직이면 되는데 이걸 손으로 움직인게 아니고 아, 뭔가이 자동으로 움직이면 좋겠어. 자동 우리가 자동으로이 현실 세계에서 값이 변하는게 뭐가 있죠? 시간이죠. 시간은 우리가 멈추려고 해도 멈출 수가 없죠. 해서 시간을 쓰도록 하겠습니다. 자, 타임을 제가 한번 나왔습니다. 그래서 타임이 이렇게 했어. 타임 1을 오피스 한번 끌어 볼게요. 자, 요렇게 갑니다. 와우.쭉쭉 흘러가요. 우한 스크롤링입니다. 이거는 약간 제제어에서 벗어난 스크롤링이에요. 방향을 내가 좀 바꿔 보고 싶어요. 그럴 때 어떻게 합니까?이 이 타임을 멀티플라이를 하는 거예요. 일단 둘로 쪼입시다. 네. 그래서 어 멀티플라이 어 곱셈을 합시다. 일반 그냥 일반적인 수학이에요. 수학 멀티플라이 하인데 하나는 x축에 대한 값으로 하나는 y축이에 대한 값으로 제가 사용을 할 겁니다.

두 개를 넣을게요. 자 그럼 이렇게 두 개 했어요. 어 그럼 두 개를 한 후에 얘를 벡터 2로 만들어야겠죠. 그렇죠? n 다시- x로 가고요. N 다시- y로 갑니다. 그 값을 다시 오프세트로 집어넣는 겁니다. 와하. 좋아요. 그러면 x축과 y축을 내 마음대로 제어를 할 수가 있는 거죠. 요런 식으로요. 와하. 제가 딱 원하는 느낌의 그런 스크롤링이 나왔어요. 좀 내가 좀 이렇게 해 볼까요? 자, 그래서 여기 나오는게 바로 뭐예요? 제가 스피드를 벡터 2로 만든 이유가 거기에 있었어요. 그래서 근데 에너지는 벡터 2잖아요. 나눠야 되잖아. 나눠야죠. 뭘요? 그래서 스플릿이라게 있습니다. 나눌게요. 자, 나누고요. 그러면 R이 X고요. G가 Y축이에요. 얘는 요렇게 하고 N는 이렇게 합니다. 자, 그럼 이제 스피드가 스피드 값에 의해서 얘가 이제 바뀔 수 있게 된 거예요. 일단 기본값은 11를 줄게요. 어, 근데 아직 제 손에서 제어가 안 된게 있죠. 뭐죠? 바로이 스프라이트의 크기예요. 크기. 타일링 제가 3바지 3으로 제가 그냥 억주로 한번 끼워 놓어 봤는데요.

이것도 안 되죠. 쉐이더 쉐이더를 쓰는 사람이 쉽게 제어를 할 수 있도록 우리는 타일드라는 벡터 2 데이터를 제공을 해 드리고 있었어요. 그래서 L을 여기다 요렇게 연결시킬게요. 이런 식으로. 됐어요. 어, 좋습니다. 그러면 디플트 값이 2이면은 렇게 되는 거네. 그렇죠? 자, 일단 기본값은 제가 3바 3으로 되겠습니다. 자, 그럼 타일드 썼고 스피드 썼고 메인 텍스트도 요렇게 썼어요. 자, 이렇게 해서 유니티에 쉐이더 그래프다. 여러분도 이제 쉐이더를 만들어 가실 수가 있다는 사실. 자, 세이브 하면서 어떻게 씁습니까? 당연히 여러분들 매테리얼을 별도로 만들어 주셔야 됩니다. 자, 그러면 제가 여기에다가 바로 메테리얼 만들게요. 스크롤이라고 할게요. 쉐이더 그래프는 쉐이더 그래프 항목에 따로 있습니다. 이거 기억하 두시고요. 귀여운 타이콘 게임 로딩 화면 같아요. 그죠? 이게 캐주얼 게임에서는 거의 필수라니까. 그래서 오늘 같이 배워보자는 이유가 바로 여기에 있었습니다. 자, 됐어요. 스크롤 만들었습니다. 그리고 어디에 중요합니까?

스크롤 그라운드에다가 적용을 할 거예요. 메테리얼. 메터리얼. 이렇게. 오, 됐는데. 됐는데 뭔가 이상해. 아, 해상도가 깨졌어. 가로 세로가 1대 1이었는데 지금이 스크롤 그라운드는 가로 세로 해도가 1대 1이 아니에요. 그래서 그렇습니다. 그러면 그에 맞춰서 여러분 어떻게 해요? 수정을 하면 되지. 뭐디 수해? 바로 매테리얼이죠. 여기에 이제 적혀 있는 거는 우리가 메테리얼로 사용했을 때 이렇게 속송으로 등장을 하게 됩니다. 내가 원하는 대로 약간 좀 에디팅할 수 있는 거죠. 자, 해 볼게요. 일단 타일 가로는 좀 늘려 보고요. 한 6 정도. 9 하니까 괜찮은 거 같아. 됐다. 오. 아, 이쁘게 된 거 같아요. 이걸 반으로 쪼이죠. 4 4.5대 1.5. 됐스. 그래서 이렇게 한번 만들어 보았습니다. 와. [음악]