나도 머티리얼 고수가 될 수 있을까?

안녕하세요. 오랜만에 돌아왔습니다.

오랜만에 유튜브를 보다가 JOYROK 이라는 한 테크니컬 아티스트분의 영상을 보고 이용할 구석이 꽤 많아보이기에 

따라 만들어보았습니다.

다들 한번씩 사용해보시면 좋을꺼같아서 이번에 소개드릴려고 가져왔습니다!. 그럼 시작하겠습니다.

 

많이들 따라만들어보시고 효율좋게 사용하셨으면 좋겠습니다!.

자 그럼 가보실까요?? :)

 

https://www.youtube.com/watch?v=Gh_4Oiph_wY&ab_channel=Joyrok

 

 

 

 

 

#1  머티리얼 제작하기

 

이번편의 머티리얼의 스샷입니다.

 

 

영상을 보고 따라한만큼 저도 많이 이해하지 못하고 만들었습니다.
우선 uv를 분할하여 분할한 수만큼 우측에서 좌측으로 이동하도록 만들어져있는 구조입니다.

 

 

자 이번편도 똑같이 하나하나씩 살펴 보도록 하겠습니다.

 

첫번째 부분은 사실 'ceil' 을 적극적으로 활용해서
값을 계속 올림해주면서 영역을 정확하게 딱딱 떨어지게 만들어주어 옆으로 이동하게 해주는 형식입니다.

어렵게 젹혀있긴하지만 그냥 수의 올림 이라고 생각하시면 될꺼 같습니다.

 

 

 

두번쨰 부분은 간단하게 lerp를 통해서 실제로 이동시킬영역과 bg영역의 색을 지정해 주는부분입니다.

 

 

완성된 머티리얼은 이런 모습입니다. 

 

 

완성된 머티리얼을 인스턴스화를 시켜주고 값들을 변경해보고 색도 입혀보고 어떤식으로 동작하는지 확인하시면서

느낌을 잡아주면 우선 1차 준비가 완료됩니다.

 

 

 

 

 

#2  텍스트에 머티리얼 넣기

 

이번엔 평소에 이미지에 머티리얼을 넣는게 아니라 텍스트에 머티리얼을 넣어줘야 합니다.

 

 

'폰트 임포트 옵션 데이터' 라는 부분에 머티리얼을 넣어주면 됩니다.

 

 

그러면 이런식으로 보여주게 됩니다.

 

 

 

 

 

#3 만들어진 머티리얼과 이미지로 무언가 ' ? ' 만들어보기

 

이미지를 셋팅하고 bp를 만들어줍니다.

 

 

그리고 이제까지 만들어줬던 머티리얼을 섞어서 맘에들게 만들어줍니다.

이런식으로 이미지에 퀄리티를 쉽게 올릴 수 있는 머티리얼의 제작 방법을 알아보았습니다.

 

 

 

 

 

이번편은 텍스트에 쓰기좋은걸 한번 소개해보았습니다.

다음번에도 ui디자이너분들이 좀 더 좋은곳에 활용할수있는 머티리얼을 찾아서 돌아오도록 하겠습니다.

 

그럼 태풍조심하시고!!!
남은한주도 행복하게 보내세요!! :)