- 이펙트 -

학원에서 참고하라고 했던 영상들

youtu.be/mepMHBNzbro

youtu.be/Z-sLU4J4NpM

youtu.be/dcWsO9Cf4qM

youtu.be/vGjLVVcjFKs

youtu.be/B7PxD8rXM_k

youtu.be/a_XnJNaUoQA

날개 작업을 하면서 궁금한 게 아주매우 많아졌다.

1. fps

스파인에서 움직임을 만든 다음에 fps를 15로 해서 gif로 뽑았다. fps를 10으로 하니 날개가 빠르게 훅 올라갈 때 움직임이 너무 끊겨보였기 때문인데,

실무에서는 fps를 몇 정도로 해서 사용할까? 움직임이 자연스럽게 표현되는 범위 안에서 최대한 줄여서 하는걸까?

2. 이미지 사이즈

날개 라이프타임이 3초인데 이정도 되는 길이에 자연스러운 움직임을 표현하다보니 스프라이트가 8X8로 되어버렸다.

8X8로 해서 유니티로 넘기면 너무 과도한 것 같은데 실무에서는 이럴 때 어떻게 하지?

게다가 8X8이 되니 이미지 사이즈가 2048로 엄청 커져버렸다.ㅠㅠ 이만한 사이즈를 게임에 쓸거같지는 않은데 이럴때 고수님들은 어찌하는지 궁금하다.

3. 스프라이트 작업을 이렇게 하는게 맞나

스파인에서 날개 작업한걸 gif로 뽑을 때 이렇게 배경 설정하는게 뜬다.

유니티에서 적용시킬 남색 배경과 비슷한 색으로 배경색을 설정하고 뽑으려다가

읭 배경에 색이 다양하고 계속 변하는데 그냥 투명으로 뽑으면 편하지 않을까? 싶어서

Transparency에 체크를 하고 뽑아봤다.

그랬더니 Background에 설정되어 있는 색이 몇 프레임에 한 번씩 뒤에 나타나는 현상이 발생했다.

결국 그냥 검은색으로 해서 아래처럼 뽑았다.

이걸 포토샵에 불러온 다음 애매한 캔버스 사이즈를 512x512로 맞췄다.

레이어를 64장만 남긴 다음에 스크립트를 써서 8x8로 장판을 깔았다.

4096x4096인 이미지 사이즈를 절반으로 줄여서 2048x2048로 만들었다.

맨 아래에 레이어를 하나 만들어서 검은색을 깔아주고 Merge Visible을 했다.

자동 선택 도구에서 Tolerance를 100으로 하고 검은색을 선택해서 싹 지운 담에 Outer Glow를 금색으로 주고

Rasterize Layer Style을 했다.

레이어 썸네일을 컨트롤+왼클릭 해서 전체선택을 하고 그대로 알파채널에 흰색을 칠해줬다.

유니티로 가져가니 바탕이 흰색으로 나온다.

Alpha Is Transparency에 체크를 하니 뒤가 투명해졌다.

날개가 처음 등장할 때는 빛나면서 나오게 하고 싶어서 쉐이더를 짰다.

이 쉐이더로 머테리얼을 만들어서 썼다.

그런데!

글을 쓰다보니 궁금해져서 테스트를 해봤다.

위처럼 배경이 투명한 텍스쳐, 배경이 흰 텍스쳐, 배경이 남색인 텍스쳐를 비교해봤다.

결과를 보니.

아!!!

언니가 배경색이랑 같은 색으로 텍스쳐 배경을 깔라고 했던 이유를 알게 됐다.

배경이 투명한 텍스쳐와 배경이 흰 텍스쳐의 결과가 같았다.

그리고 아래가 배경이 남색인 텍스쳐다.

이런 세상에! 배경을 투명하게 하면 걍 투명하게 적용될 줄 알았는데! 이게 흰색으로 들어가는구나!

아 쓰다보니 이건 뭔가 질문이 아니게 돼버렸네.

4. 알파 채널을 적용하고 싶으면 꼭 쉐이더를 짜야 하는건가?

텍스쳐를 Additive로 표현해도 괜찮은 것은 배경을 검게 해서 가져온 다음 머테리얼 설정을 아래처럼 하고 쉐이더 없이 바로 파티클에 갖다 썼었다.

근데 Additive로 표현하면 너무 빛나서 Transparent로 하고 싶은 경우가 있었는데 이럴 때 쉐이더를 안 짜고 하는 방법이 있나 궁금하다.

궁금해서 이렇게도 해봤다.

포토샵에서 아예 배경을 투명하게 작업한 다음

유니티에 불러와서 텍스쳐 설정에서 Alpha Is Transparency에 체크를 하고

머테리얼 설정에서 렌더링 모드를 Transparent로 바꾸면 아래처럼 돼버린다.

아까 스프라이트 할 때도 그렇고 저 Alpha Is Transparency는 대체 뭐하는 기능인가 싶다.

어쨌든! Additive가 아니라 Transparent로 표현하고 싶을 때는 꼭 쉐이더를 짜서 알파를 인식시켜줘야 하는지 궁금하다.

5. 단순한 텍스쳐는 어느정도 사이즈로 가져오면 좋을까?

이렇게 단순한 모양의 텍스쳐들은 4장씩 모아서 512텍스쳐 안에 넣으면 적당한걸까?

아니면 더 작게도 하나? 기준을 잘 모르겠다.

그리고 단순한 그라데이션 텍스쳐도 반복적으로 panner를 시켜줄 때는 하나만 따로 써야할텐데, 그럴 때는 사이즈를 어떻게 하는지 궁금하다. 예를 들면 아래같은 텍스쳐.

6.

위처럼 이미지 4개를 모아서 유니티에 가져왔을 때 원하는 이미지를 선택하는 방법이 궁금하다.

아래처럼 머테리얼에서 범위 조절을 하는지

아니면 아래처럼 파티클에서 조절을 하는지 궁금하다.

아, 생각해보니 머테리얼에서 조절을 하면 머테리얼을 4개 만들어야 되는구나! ㅎㅎㅎ

7. 쉐이더와 텍스쳐, 뭐가 더 가벼운걸까?

단순한 원이나 그라데이션은 쉐이더에서 UV를 이용해 만들어낼 수 있는 모양들인데, 텍스쳐랑 쉐이더랑 뭐가 더 가벼운건지 궁금하다.

8. 

날개 아래에 나오는 글자 작업을 하면서 든 생각이다.

지금은 이렇게 4개의 텍스쳐를 가지고 4개의 파티클시스템으로 이펙트를 만들었는데

애펙에서 작업한 다음에 그걸 스프라이트로 가져오면 텍스쳐가 한 장이니 그게 더 가볍겠구나! 라는 생각이 든다.

근데 혹시 스프라이트로 가져온 이미지의 사이즈가 1024처럼 커버리면 소용이 없는건지 궁금해졌다.

9.

텍스쳐 색이나 투명도를 시간에 따라 다르게 하고 싶을 때

쉐이더를 짜서 파티클 컬러를 조정하는 방법도 있겠지만 아래 방법도 가능한가 궁금하다.

애니메이션 창에서 머테리얼의 색값을 조절하도록 설정하면 쉐이더를 안 짜니까 용량을 더 아낄 수 있지 않을까?

하는 생각이 들었다.

10.

만약에 아래처럼 4장의 이미지를 RGB채널 각각 다른 그림으로 채워넣으면 이미지 한 장에만 12개의 텍스쳐를 넣을 수 있게 되는데, 여기서 궁금한 것이 생겼다.

채널을 다르게 쓰려면 쉐이더를 짜야 할텐데. 그럼 12개를 합친 1장보다 4개 합친거 3장을 쓰는게 나은가?

최적화의 세계는 정말 아리송하다.

아니면 상황별로 용량이 어떤지 내가 볼 수 있는 창이 있나? 그것도 궁금하다.

일단 요롷게 끝냈다.

이게 유니티에서 만들어놓은 배경.

처음에는 이렇게 날개가 위아래로 움직였었는데 저 움직임을 지웠다.

다시 보니 확실히 위아래 움직임이 없는게 나은 것 같다.

글자가 날아오는 부분은 애펙에서 작업해올까 하다가 레퍼런스를 보니 글자 기울기에 변화가 없길래 유니티에서 했다.

글자 부분을 전부 애펙에서 한다고 하면 빛이 번쩍인다던가 하는 부분은 어떻게 해야 할지 감이 잘 안 온다.

다시 강의 보면서 이미지 경로 지정하고 뼈를 심었다.

지난번처럼 애펙에서 이펙트를 만들까 했는데

스파인은 gif가 한장한장 타임라인에 들어가는 방식이라 이펙트가 많아질수록 너무 번거로울 것 같았다.

날개에 움직임 준걸 gif로 뽑아서 스프라이트 시트로 만들고 유니티에 가져오는게 훨씬 나을 것 같아서 그렇게 했다.

걍 첨부터 유니티로 가져올걸 언리얼로 가져가봤다가 뻘짓했다. 이런 작업은 유니티가 편하다는걸 깨달았다.

기본 요소부터 다 잡아놓는게 좋을 것 같아서 일단 간단한 움직임만 주고 가져왔다.

아직 날개에 글로우도 없고 요소도 더 넣어야 한다.

뭣보다 솔트가 잘못돼서 날개가 빛 속에 숨어있다가 나와야 되는데 빛보다 날개가 위에 나와 버리고 있다. 내일은 이거부터 해결해봐야겠다.

먼가 중국스러운 위 이미지들을 다운받아서

깃털들이 각자 움직여도 이상하지 않게 뚝 잘리는 부분들을 열심히 도장으로 찍어주었다.

왼쪽은 오른쪽을 그대로 복제하고.

아, 원래 이미지처럼 글로우를 넣는다는걸 깜빡했다.

중앙에 있는 것도 양옆으로 튀어나오게 해줄거라서 분리해주고

그다음에 제이슨 파일로 추출을 했는데 스파인에서 아직 이미지 연결이 안 된 상태이다.

위치 정보를 못 불러오면 전부 손으로 위치를 잡아줘야 하는데 ㄷㄷㄷ

학원 강의 영상을 한번 봐야겠다.

이 문제만 해결되면 뼈 심어서 움직임 주고 에펙으로 효과 만들어서 넣으면 될 것 같다.

참고영상 댓글을 보니 그 분은 유니티를 썼다고 하는데 복합적인 방법을 썼다고만 나와 있고 자세한 설명은 없었다.

뜨아! 어느새 이렇게 시간이 흘렀구나. 마지막 수업이라니.

일단 아래 페이지들을 참고하라고 했다.

docs.unrealengine.com/ko/Engine/Rendering/ParticleSystems/Optimization/index.html

docs.unrealengine.com/ko/Engine/Rendering/ParticleSystems/Optimization/Concepts/index.html

darkcatgame.tistory.com/37

docs.unrealengine.com/ko/Resources/ContentExamples/Decals/1_2/index.html

그리고 수업에서의 내용을 요약하자면

1. 오버드로우 체크 (단축키 Alt+8)

2. 머테리얼에서 UV커스텀 1 변환하면 픽셀에서 버텍스로

3. 머테리얼에서 Fog 해제

4. 텍스쳐 설정에서 DTX5를 그레이스케일로 변경

5. Unit에서 단위 글씨가 녹색인지 확인

6. 용도에 따라 Opaque로 체크하면 용량 저하

요정도인데, 다시 영상을 보면서 내가 작업했던거에 적용을 해봐야 할 것 같다.

얼추 모양은 나왔는데 궁금한거도 많고 이상한거도 많다.

사진은 최대한 크게 캡쳐해서 누르면 잘 보인다.

1.

이 영상에서는 면들이 하나씩 딱 떨어지는데

내꺼는 이렇게 중간에 달라붙는다.

2.

영상에서는 Vector Projection이라는걸 넣어서 저렇게 각 면의 사이즈를 조정하던데

언리얼에서는 같은 이름의 노드가 없어서 어떤 것을 넣어야 저렇게 되는지 모르겠다.

3.

언리얼에서 위에꺼를 비슷하게 따라해봤는데 float이 맞지 않는다고 오류가 난다.

원래 캐릭터랑 배경이 있는건데 공개를 못해서 이펙트만 남겼다.

두 번째로 작업해보는 2D 이펙트인데다가 액체는 처음이라 ㅠㅠㅠㅠ

액체 움직임에 감 잡는데 시간이 꽤 걸렸다.

아래는 작업 과정이다.

일단 채찍의 기본 위치 먼저 잡았다.

검기를 할 때는 일일이 손으로 그렸지만 이건 선이 가늘어서 펜 툴로 작업했더니 편하고 좋았다.

물을 어느정도로 그릴지 위치와 범위를 대충 잡았다.

가장 힘들었던 액체 그리기.

이렇게 수면에서 촤아악 돌아가는 레퍼런스를 최대한 찾아보려고 했는데 결국 찾지 못했다.

알아서 움직임을 만들어내야 하는 상황이 됐다.ㅠㅠ

원리를 알아야 모양새가 나올 것 같아서 혼자 계속 생각하면서 그렸다.

방향성, 차오르는 힘, 중력으로 인해 떨어지는 무게감, 떨어질 때 둥글게 퍼지는 모양, 속도 등등...

상상에만 의존하면 분명 이상하게 될 것 같아서 옆에 계속 이미지들을 띄워놓고 작업했다.

별다른 스케치 없이 단선으로 주우욱 그리는게 손에 맞아서 전부 그렇게 했다. 입시미술 할 때 이런 습관이 생긴 것 같다.

채찍과 함께 놓아보고 채색에 들어갔다.

오오 디즈니 느낌나 ㅎㅎㅎ

아 씬나 점점 모냥이 나오고 이써

물 완성!

어쨌든 주 무기는 채찍이니 얘가 눈에 띄어야 한다.

그래서 광도 주고

어둠도 주었다.

파티클은 언리얼에서 만든 다음에 영상을 캡쳐해서 그걸 또 5프레임 단위로 스샷을 찍었다.

코사인 노드를 써서 일부러 깜빡이게 했다. 물이 반짝반짝 빛나는 느낌으로?

물에 전체적으로 글로우를 주고 마무리했다. 아 뿌듯해~

이게 완성본이다. 캐릭터나 배경을 공개할 수 없어서 좀 아쉽네 ㅠㅠ

2D 이펙트를 해본게 처음이라 많이 애먹었다. 아니메 느낌으로 디졸브 하는게 잘 안돼서 처음 그렸던건 다 날리고 다시 작업했다.

아래에 작업한 순서대로 정리를 해봤다.

일단 둥근 원에 레이어 마스크를 씌우고 점점 지워나가는 식으로 빛과 어둠을 그렸다.

언리얼에서 이렇게 만든걸 캡쳐했다.

파티클도 같은 식으로 해서 이미지에 넣어봤다.

검기인데 시작점이 뾰족하지 않아서 수정이 필요했다.

어쨌든 기본적인 이미지가 잡혔으니 캐릭터 동작에 맞게 타이밍/위치를 먼저 잡아봤다.

포토샵에서 타임라인을 이용했다.

오케이 타이밍이랑 위치는 대략 잡혔고

이제 마지막에 들어가는 가장 큰 공격을 작업했다.

그걸 다 그린 다음에 여기에다 갖다 쓰려고 이쪽은 이렇게 실루엣만 잡았다.

빛과 어둠을 다시 디졸브가 잘 되게 그리고(여전히 마음에는 안 들지만 시간이 없으니 패스 흑흑)

언리얼에서 만든 검기를 영상으로 캡쳐한 다음 5프레임 간격으로 스샷을 찍어서 넣었다.

파티클을 그려봤다. 다른걸 참고하니 방향을 바꾸는게 나을 것 같았다.

다시 그리기보다는 언리얼에서 작업한걸 캡쳐했다.

잔상처럼 남는 은은한 파티클도 추가했다.

이제 이걸 필살기 막타스럽게 배치했다.

너무 셋 다 똑같으면 단조로우니까 가운데 올려베기는 파랗고 라이프 타임이 짧은 잔상을 썼다.

앞부분도 위에 그렸던걸 가지고 배치해서 마무리 했다.

학원에서 스파인 시험을 봤다.

뼈 심고 캐릭터 숨쉬는거만 간단히 했다.

오늘은 물체에 불을 붙이는 게 아니라 파티클에 붙이는걸 배웠다.

캡쳐를 깜빡했다.