실감 공통편 포털 이펙트
GCC 사관학교
안녕하세요 박현상입니다
이번에는 흔히 포털 이펙트라고 해서
다른 장소로 이동할 때
공간이 분리된 것처럼 보이는 이펙트를 제작할 것입니다
이러한 효과는 게임뿐만 아니라
영화 같은 곳에서도 다양하게 쓰이는데요
언리얼5를 소개하는 영상 엔딩 시퀀스에서도 나왔었죠
자연스럽게 흐르는 파티클의 움직임을 통해
유저들의 시선을 집중할 수 있는 효과를 제작해 보겠습니다
포털 이펙트 생성
실습을 위해서 우선
Niagara System을 먼저 하나 만들고요
그리고 이번에는 비어있는 상태로
Create Empty Niagara System을 이용해서
만들어 볼 겁니다
그래서 FX_Portal이라고 이름 짓고요
열어 주겠습니다
비어있는 나이아가라 시스템을 만들면
이미터 자체가 아예 존재하지 않습니다
그래서 이렇게 여러분들이 아예 없는 상태에서
만들어 보시는 건 아마 처음일 것 같은데
한번 우클릭해서
기존에 있던 템플릿을 가져오는 게 아니라
Add Empty Emitter를 통해서
차근차근 한번 만들어 보겠습니다
우선 Emitter Update 항목에서
Emitter State를 추가해 줍니다
Emitter State는 이 공장 라인이
얼만큼 가동할지에 대한 내용이죠
그래서 Life Cycle을 Self로 바꾸시고
Infinite로 설정해 두시기 바랍니다
그리고 나서 Update 항목에 마찬가지 추가로
Spawn Rate 항목 모듈을 추가해 주겠습니다
이거는 한번에 대략 100~300개씩 할 건데
현재는 렌더링이며 뭐며 아무 기능도 없기 때문에
어차피 만들어 놔도 눈에 보이지는 않습니다
그리고 파티클이 스폰될 때
이 항목에다가 Initialize Particle이라고
이렇게 모듈을 가장 사이즈라든가 이런 것들
기본적인 것들을 설정할 수 있는 항목을 추가해 놓고요
업데이트라든가 여기에서는 나중에 하고
우선은 Renderer에서 Sprite Renderer를 추가해 줍니다
그러면 이제 우리가 눈으로 파티클을 볼 수가 있고
실제 Spawn Rate 값이 있죠
초당 100개씩 생성을 하기 때문에 겹쳐 있을 뿐이지
지금 수백 개의 파티클 입자들이 여기 모여 있습니다
그래서 Initialize Particle에서 일정한 범위로 나올 수 있게
Shape Location 모듈을 추가해 주고요
그러면 현재는 Sphere니까
구체 범위로 러프하게 생긴 게 보이시죠
이걸 우리가 흔히 포털이라고 하는 것 자체가
이렇게 동그란 범위를 가지고
이 동그란 범위는 다른 공간하고 연결되어 있는 걸
보통 표시하려고 이런 이펙트를 만들잖아요
그러다 보니까 보통 구체 내지는
구체보다도 평면에 원형의 형태를 많이 하는데
그걸 위해서 Torus 항목으로
이 Shape Primitive 모형을
도넛의 형태로 바꿔 줄 겁니다
여러분들이 보시기엔 이 Torus와
Ring / Disc 간의 차이가 별로
없다고 느끼실 수 있는데
Ring / Disc 같은 경우에는
위아래에 대한 높이 값이 없습니다
반면에 Torus 같은 경우에는 일정한 두께를 가지고
이 Radius를 만약에 우리가 임의로
한 300 정도로 넓힌 다음에
밑에 있는 Handle Radius를 넓히면
이 Handle이라는 게 바로
이 도넛 자체가 가지고 있는 두께
이걸 얘기하는 겁니다
이 범위를 우리가 임의로 조절할 수 있기 때문에
이런 식으로 여러분들이 일정한 두께와 범위를 가지고
만들 수가 있다는 것이고요
여기에서 지금은 입자들이 너무 크니까
Initialize Particle에서 Sprite 사이즈를 Uniform으로
10이 아니라 1 정도만 돼도 사실은 충분합니다
제가 일부러 현재 사이즈에 맞춰가지고
크게 보이게 했는데
보통 포털이라고 하면 사람이 왔다 갔다 하니까
실제 Shape Location의 Radius가 300 유닛이란 얘기는
반지름 300이니까 총 6m 짜리 포털인 거죠
굉장히 큰 포털입니다
건물 하나나 커다란 트럭 정도 들어갈 수 있는
그래서 이거를 절반이 되는 150 정도로 좀 줄여 놓고요
여기에서 보면 이제 가까이 Torus 형태로 생성이 된
파티클 입자들을 보실 수가 있죠
이렇게 Torus 형태의 파티클을
우리가 좀 더 자연스럽게
차원 공간이 일어나는 것처럼 좀 묘사를 해 볼 건데
제가 Handle은 설명을 위해서 좀 두껍게 한 거지
지금 상황에서는 사실 두꺼운 형태의
이렇게 파티클 흩어지는 것보다
뭉쳐 있는 게 조금 더 보기 좋으니까
Handle Radius를 5 정도로만, 얇게
이 정도로 얇은 띠 형상이 되도록 좀 바꿔 놓고요
그리고 Initialize Particle의 컬러 값도 마찬가지로
그 전까지는 계속해서 레드 8, 그린 1로 갔는데
이번에는 블루 8, 그린 1, 레드 0.2 정도로 해서
푸른색 빛이 나게끔, 이렇게 좀 바꿔 보겠습니다
이제 이 파티클을 돌려 줘야 됩니다
보통 포털이라고 하는 것은 부자연스러운 현상이잖아요
이 허공이 갑자기 뻥 뚫려 보인다는 건
굉장히 부자연스러운 상황이기 때문에
안정적이지 못한 느낌이 나게끔 일렁일렁 일 수 있게
이 파티클들이 이렇게 안정된 형태를 이루기 보다는
계속해서 움직이고 일렁이게끔 만들어주는 게
그 느낌을 조금 더 잘 살려줄 수 있다고
생각이 드는데요
우선 이걸 돌리기 위해서 Particle Update에다가
Vortex Force 이걸 추가해 놓으면
여기에 SolveForcesAndVelocity 항목이 빠져 있다고 되어 있죠
이것을 Fix issue를 눌러서 추가해 주시면 됩니다
그러면 Vortex라는 게 보통 그 소용돌이와 같은 형태
이렇게 뱅글뱅글 뱅글뱅글 이렇게 돌아가는
지금 그래서 바깥으로 계속 이렇게 번져나가고 있죠
움직이면서 이런 형태를 만들어주는 것이기 때문에
자연스럽게 빙글빙글 돌면서
어떤 형상을 만들어 내기에 좀 유리하고요
지금 보시는 것처럼
파티클의 입자가 좀 부족해서 그런 건데
Spawn Rate 값을 한 300~600 정도로
이렇게 모아 보면 훨씬 더 느낌이 나죠
다만 Vortex 쓰실 때 하나 조심해야 될 것은
다른 각도에서도 한 번쯤 확인이 필요하다는 겁니다
이게 이제 Vortex의 값이라든가 축에 따라서
지금 보면 Vortex Force Amount가 200 이죠
이 값이 어떻게 되느냐에 따라서는
소용돌이가 굉장히 빨리 흩어지게 될 수도 있고
값이 커지면, 값이 작아지면
굉장히 천천히 이렇게 흐를 수도 있게 됩니다
지금은 전부 다 이렇게
바깥으로 퍼지는 형태의 모습만 보여지고 있는데
이것에서 이 Origin Pull Amount의 값을
한 100 정도로 높이다 보면
지금 보시는 것처럼 이렇게 안쪽으로 모였다가
퍼지는 걸 볼 수가 있습니다
이때 움직임을 잠깐 스케치해 보면 이렇게 되는 겁니다
스폰됐던 파티클이 여기 있는 소용돌이를 만나서
돌다가 튕겨나가는 거죠
이런 식으로 쭉쭉쭉
이 소용돌이의 전체 흐름의 가운데 중심으로 이렇게 돌다가
바깥으로 쭉쭉 빠져나가는 형태로 묘사가 되고 있는 겁니다
그래서 이 소용돌이에
얼만큼 빨려 들어갔는지, 당겨졌는지의 이 값하고요
그리고 우리가 얼마나 그 주변을 돌고 있는지
Vortex Force라는 값하고를
여러분들이 두 개의 값을 잘 매칭을 해보시면
저는 임의로 이것을 300에 100 정도로 둘 거고요
그러면 마치 경계에서 이렇게 돌다가
빠져나가는 듯한 느낌으로
묘사가 되는 걸 확인하실 수가 있죠
근데 지금은 보시는 것처럼
입자가 완전히 다 점점점 알갱이처럼 되어있기 때문에
시각적으로 그렇게 티가 강하게 나거나 하지는 않습니다
이때 여러분들이 이 Update에다가 Scale, Sprite인데
한마디로 Sprite의 Size를 바꿔 줄 건데
그 전까지 우리가 임의의 그래프를 이용해서 사이즈를 바꿨죠
밑에 스피드 값을 이용해서 바꿔 줄 겁니다
이거 Fix issue 눌러 주도록 할게요
Vortex에 들어가기 전, 보면
Fix issue를 누르고 나서
이 입자를 조금만 가까이서 보겠습니다
입자들의 변화를
지금은 속도값이 작을 때는
원래 오리지널 사이즈, 100%의 사이즈고요
속도값이 클 때는 최대 2배까지 커져가는데
이것을 Max Scale의 X축은 그대로 놔두고
Y축만 10배를 한번 키워보겠습니다
혹은 20배나 이런 식으로
그러면 지금 보는 것처럼 속도값에 따라서
이렇게 Y축이니까 위로 길어지겠죠
이런 식으로 마치 일자로 서 있듯이
빙글빙글 도는 걸 볼 수가 있게 됩니다
이런 식으로 속도에 따라서
빠른 애들은 더 길게, 천천히 있는 애들은 짧게
이런 식으로 우리가 임의로 표현해 줄 수가 있고요
다만 어색한 게
제일 좋은 거는 지금 회전의 흐름은 여긴데
Sprite들이 Y축을 기준으로 하다 보니까
이렇게 일자로 쭉쭉쭉쭉 서 있게 되죠
사실 회전의 흐름에 맞춰서
이렇게 늘어나는 게 제일 자연스럽겠죠, 이런 식으로
그러려면 Sprite Renderer에서
이 Alignment, 정렬하는 것을
속도에 따라서 정렬을 하라고 바꿔주게 되면
이렇게 서 있는 파티클들이 어떻게 바뀌는지 한번 보세요
회전하는 속도값에 따라서 자연스럽게
좌우로 이렇게 늘어나게 됩니다
좀 더 정확하게는 항상
이 스프라이트는 카메라를 기준으로
원래 이렇게 보이던 애들이
속도 때문에 이렇게 길어진 거죠
근데 진행하는 방향에 맞춰서
이거를 이렇게 회전시켜서 이렇게 맞춰 준 겁니다
그래서 진행하는 방향에 맞춰서
스프라이트가 늘어나 보일 수 있게
자연스러워 보이게끔 하는 기능을
한번 모듈을 세팅해 봤습니다
이제 여기에서 여러분들이
Initialize Particle의 Sprite Size라든가
이걸 조금 더 두껍게 하면
보다 경계선이 명확해질 거고요
Vortex의 회전값을 500 정도로 놔두면 더 멀리 퍼지겠죠
Pull Amount를 만약에 0일 때랑 비교해 보겠습니다
0일 때와 Pull Amount가 150이나, 100이나
이렇게 되면 한번 안쪽에 모였다 가는 것 때문에
조금 더 이 링의 띠의 형태가
Pull Amount가 없을 때보다
더 선명해진 것을 확인하실 수가 있죠
이런 식으로 파티클의 기본적인 움직임을
한번 만들어 봤습니다
지금 Vortex Force가 적용되고 있는 모습을 보면
굉장히 균일하다는 생각이 드시죠
이 경계가 명확하게 깔끔하게 똑 떨어지지 않습니까
이러면 아무래도 보는 입장에서 좀 지루합니다
지루하기 때문에 여기에다가 약간의 변화를 넣어줄 수 있는
Noise 항목을 한번 추가해 보겠습니다
Curl Noise Force라는 모듈을 하나 추가해 줬고요
잠시 Vortex를 끄고 움직임이 있으면
그 원래의 기능을 좀 파악하기 힘드니까
F키를 뷰포트에 눌러서
Curl Noise 값이 적용되기 전과 후에
이 한번 모습을 비교해 보시죠
Noise는 기본적으로 이 Strength 값을 이용해서
Strength 값이 크다면 지금 보시는 것처럼
이렇게 안으로 밖으로 퍼지는 모양이
약간의 변화가 생겼죠
그리고 이 Frequency 항목을 통해서
Frequency 항목이 높다면
안으로 밖으로 퍼지는 패턴이 더 조밀하게 일어나고요
Frequency 자체가 만약에 값이 이렇게 작다면
Noise의 안과 밖으로 나가는 구간들이 조금 더
이렇게 바깥으로 나가는 구간
안쪽으로 모이는 구간들이 명확해지죠
바깥과 안쪽 이런 식으로
그래서 Frequency가, Noise의 주파수의 빈도수가
이런 식으로 일정한 수준이 된 상태에서
Vortex가 적용이 되면
Vortex 항목보다 Noise 항목을 먼저 위로 두겠습니다
이제 끝에 끝나는 가장자리 부분이나
이런 것들이 조금 더 변화를 만들어 줄 수 있는데요
이걸 의도적으로 좀 강하게 줘보면
제가 일부러 좀 소심하게 줬는데
만약에 Strength 값이 강해진다면
이런 식으로 퍼지는 모양 자체가
완전히 부피감을 가지고 다르게 퍼지게 되죠
이건 좀 제가 강하게 준 거고
한 150 정도로 살짝의 변화만 만들어 주는 선에서
그러면 이제는 끊기는 모양이
아까처럼 딱 정원의 형태가 아니라
살짝 이런 식으로 일렁이는 듯한 모습으로
바뀐 것을 확인하실 수가 있죠
나중에 이런 값들은 다 임의의
미니멈, 맥스 값 같은 것들을 정해서
계속해서 변화가 일어나게끔 유도를 할 겁니다
단지 지금 하는 작업들은
기본 값을 잡기 위한 과정입니다
패턴이 너무 균일하다면
어느 정도의 값을 줬을 때
패턴이 점점 사라지는가
이런 것들을 보기 위한 작업인 거지
실제로 이 값을 픽스해서, 고정해서 쓰지는 않습니다
마찬가지로 여기서 퍼져나가는 속도도
이 Particle Spawn에서 Velocity를 이용해서
더 추가하거나 빼주거나 할 수도 있습니다
만약에 이것을 From Point로
Velocity Mode를 바꾼 다음에
바깥으로 더 빼고 싶다면
이렇게 바깥으로 확 퍼지게 만들 수가 있겠죠
당연히 Force 값보다 어느 정도는 좀 커져야
이렇게 바깥으로 돌 건데
이거를 임의로 좀 작게 만들어 보겠습니다
Velocity Speed 값을 작게 해서
만약에 마이너스가 된다면
이런 식으로 지금 보시는 것처럼
패턴이 약간 바뀌었죠
그래서 플러스와 마이너스, Velocity까지도
같이 섞어서 써주게 되면
Vortex와 Noise와 Velocity를 섞어서 써주면
이 Vortex에서 Force Amount를 살짝만 줄이겠습니다
그러면 점점 이렇게 안쪽으로 모이죠
Force Amount를 너무 늘리면
바깥으로 오는 대신 이런 식으로 멀리 퍼집니다
이렇게 이것을 600개만 뿌리는 게 아니고요
여러분들이 원하신다면
한 3,000개 뿌려 보셔도 됩니다
당연히 이 Vortex Force 값 자체가
만약에 1,000 정도로 커졌다면
이런 Force 값들을 쓰실 때는
한쪽이 커지면 다른 값을 무시하는 경향이 있기 때문에
내가 Noise를 살리고 싶다면
Noise도 같이 키워줘야 됩니다
그래야 Noise 패턴의 값도
어느 정도 반영이 되기 때문에
이 Force 값을 쓰실 때는
여러분들이 이런 식의 주의가 좀 필요합니다
이게 너무 바깥으로 멀리 나가는 게 싫으시면
Initialize로 Lifetime 자체를
0.5~0.7초 정도로 줄이셔도 됩니다
Velocity를 조금만 낮추도록 하겠습니다
이런 식으로
그래서 이 3가지 지금
Velocity와 Curl Noise와 Vortex Force
이 3가지 모듈을 엮어서
원형의 움직임이되 패턴이 너무 뻔하게 드러나지 않게끔
약간씩의 변주를 주는 기본 틀을 만들어 본 겁니다
그래서 원형의 틀이 이런 식으로
일렁일 수 있는 형태의 모양으로
이렇게 실루엣을 그려보면
이런 식의 모양으로 나오고 있죠
Simulation 타겟을 CPU가 아닌 GPU로 바꿔주시면
가용할 수 있는 파티클의 수라든가
이런 것들이 조금 더 늘어날 수 있게 됩니다
물론 이제 파티클 입자라든가
이런 것의 Lifetime이라든가
이렇게 늘어나면 개수가 늘죠
다만 이 개수가 많아지면 많아질수록
여러분들이 CPU를 사용하시는 것보다
CPU로도 늘어나긴 합니다만
GPU를 쓰시는 것이 훨씬 더
이 파티클의 많은 개수를 활용할 때
퍼포먼스적으로 도움이 많이 됩니다
특히나 이런 식의 굉장히 많은 입자를 뿌려야
그 이쁜 효과가 결이라든가
지금 보는 것처럼 결 같은 게 잘 드러나는 것들은
입자를 많이 뿌려야 될 수가 있거든요
이거는 다시 0.7로 좀 약하게 되돌리도록 하고요
그리고 대신 공장 자체의 라인의 가동시간을
2배로 늘리면 혹은
3, 4배로 늘려보는 것도 방법입니다
여러분들이 1로만 두실 게 아니고
이런 식으로 공장의 시간, Rate 의 값, Lifetime
Particle 개별 입자의 시간
이런 것들을 컨트롤 해보시면 되는데
계속해서 일부 파티클은 생성되고
소멸이 되면서 일정한 개수가 유지가 될 겁니다
그러면서 자연스럽게 원의 경계도 나오게 되고
이 상태에서 GPU를 쓸 때 조심해야 될 거
여기 보면 경고 표시가 떠 있죠
Missing fixed bounds라고 되어 있습니다
Emitter에서 보시면 Missing fixed bounds인데
여기 보면 Bounds라는 항목이 있습니다
Bounds 항목을 3점 메뉴를 클릭해서
Set Fixed Bounds(Emitters) 항목을 체크를 해보시면
크게 변화는 없는데 갑자기 경고 표시가 사라졌죠
Fixed Bounds라는 항목이 업데이트가 돼서 그런 건데요
Bounds 항목을 단순히 클릭만 하시면
이런 식으로 파티클 입자가
어디까지 최대로 번져나갈 수 있는지
이런 Bounds 값이라는 게 있습니다
만약에 여러분들이 여기 있는 Fixed Bounds 항목을
리셋을 하셔서 이렇게 작은 범위로 한다면
나중에 이펙트를 그릴 때 좀 문제가 됩니다
이건 나중에 월드에 배치해 놓을 시기가 되면
한 번 더 설명을 드릴 건데
그래서 이미터가 번져나갈 수 있는 최대 범위로
이렇게 Bounds 값을 설정하시는 게
여러분들이 파티클보다
안정적으로 제어할 수 있게 되는 겁니다
우선 이렇게 두고요
마저 나머지 효과들을 만들어 보겠습니다
파티클의 세부적인 정리는 나중에
전체적인 구성 요소가 다 갖춰진 다음에 하도록 하고요
여기에서 지금 가운데에
월드 상의 파티클을 배치를 해 보면요
이렇게 배치가 됐죠
이것을 월드 상에 이렇게 옮겨 놓고
조금만 띄우겠습니다
그리고 회전을 시켜서 보게 되면
이런 식으로 보텍스 때문에 모양이 회전을 시켰을 때
제대로 이렇게 안 서게 되는
눕혔을 때만 모양이 제대로 보이게 되는
이러한 증상이 있습니다
그래서 우리는 이 Vortex 자체에
Axis Coordinate의 Simulation을
Local로 좀 바꿔줄 필요가 있습니다
이걸 Local로 바꾸지 않으면 나중에 여러분들이
이게 Simulation일 때 모양이고요
이것이 Local일 때 모양입니다
우리가 원하는 건 이대로
이렇게 파티클이 유지되는 걸 원하는 거죠
이런 식으로 그러면 우리가 해줘야 될 건
가운데 영역의 뒷배경이 아니라
전혀 새로운 공간, 다른 지역을 보여줄 필요가 있는데요
여기에다가 뭔가 다른 지역을 보여줄 때
레벨 세팅을 좀 보겠습니다
레벨을 좀 다른 장소로
아예 바깥쪽 파란색이 좀 눈에 띄면
확실히 좀 알기 쉬울 텐데요
이 파란색 큐브가 우리가 넘어가야 될
다른 공간이라고 가정을 해보겠습니다
포털을 타고 넘어가야 될 다른 공간
그러면 이 화면을 찍고 있는 카메라가 한 대 필요합니다
그것이 Place Actor 항목에서
Capture라고 검색을 해보시면
Scene Capture 2D라는 이 카메라가
게임 모드를 풀어서 좀 보겠습니다
이런 식으로 배치가 될 거고요 이렇게
그리고 이 Scene Capture 2D는
기존에 있던 카메라들과는 역할이 조금 다릅니다
기존에 우리가 서드 퍼슨으로 사용하던 캐릭터 같은 경우에는
실제 카메라가 찍은 장면을, 잠깐 F8번 눌러서
이 컴포넌트 구성을 좀 보면서 얘기를 하겠습니다
여기에 이 FollowCamera라고 카메라 컴포넌트가 붙어 있죠
이거 같은 경우엔 유저들의 화면에다가
자기가 찍은 걸 보여주는 카메라고요
ESC를 누르고 플레이 모드를 끝내서
이 Scene Capture 같은 경우에는
캡쳐 카메라가 찍은 것을
유저 화면이 아닌 텍스처로 전달을 하는 역할을 합니다
그래서 이 카메라가 찍고 있는 걸 담을 수 있는
마이크로 SD 같은 역할을 하는 텍스처를
하나 애셋을 생성해야 됩니다
그래서 Content 브라우저 창에서 오른쪽 클릭
Texture - Render Target이라는 텍스처를 클릭을 해주고요
보통 줄여서 RT라고 씁니다
PortalDest
Destination, 목적지라는 의미로 이렇게 썼고요
이렇게 만들어진 텍스처를
카메라 아래쪽에 디테일 창에 보면
Texture Target 항목이 있습니다
여기에다가 렌더 텍스처를 이렇게 전달을 해줍니다
그러면 이 텍스처를 더블 클릭해 보면
창을 좀 키울게요
더블 클릭해서 보면
이런 식으로 현재 카메라가 찍고 있는 장면이 나오죠
지금은 256 픽셀 이라는 굉장히 작은 해상도로
촬영이 되고 있는 거고요
이거를 여러분들이 원하신다면 512나 1024와 같이
큰 해상도로 그냥 바로 바꾸면 적용이 됩니다
이런 식으로 촬영을 바로바로 할 수 있게
이렇게 세팅을 해 놓는 겁니다
그럼 우리는 이 렌더링 된 화면을 캡처 카메라가
Scene Capture 카메라가 찍은 화면을
여기 있는 포털에다가 적용을 해야 되는 것이죠
그래서 나이아가라 화면으로 다시 한번 좀 돌아가겠습니다
나이아가라에서 스프라이트 하나를 추가해 주겠습니다
우선은 오른쪽 클릭해서 Add emitter
SingleLoopingParticle을 추가해 줍니다
SingleLoopingParticle 같은 경우에도
Emitter가 이 Self로 놓고
이것을 Once가 아닌 Infinite로 두게 되면
1초가 계속해서 반복되죠
그리고 Initialize Particle 자체도
LoopDuration에 맞춰서 Lifetime을 갖기 때문에
별도의 타이밍을 손봐주지 않아도 됩니다
그럼 여기에 작은 점 같은
이런 스프라이트가 떠 있는 게 보이죠
스프라이트의 사이즈를 조금만 키워 보겠습니다
지금 10으로 되어 있는 걸 이렇게 쭉 키워서
대략적으로 우리가 만들어 놓은
이펙트의 틀에 맞게끔 세팅을 해 놓고
위에서 볼 때는 문제가 없어요, 위에서는
이것을 앵글을 틀어 보면 문제가 됩니다
스프라이트의 성질 자체가 항상 카메라를 바라보기 때문에
지금 보시는 것처럼 이렇게 우리가 만든 파티클 이펙트와
비교를 해서 보더라도 위에서 볼 때는 문제가 없죠
여기에서 시뮬레이션 되는 공간 자체를
Local Space로 체크를 한다고 하더라도
동일한 증상이 나옵니다
이때는 약간 다른 방법을 써 줘야 됩니다
이 방향을 정하기 위해서는
물론 여기에서 Facing Mode라고 하는 것을
바꿔주는 방법도 있는데요
모듈 중에 Particle Spawn에다가
Facing이라고 검색을 하면
Facing은 바라보는 방향을 의미하죠
그래서 Sprite Facing and Alignment
이 부분을 추가를 해 줍니다
그렇게 되면 이제는 어느 각도에서 보더라도
각도가 일정해진 걸 확인해 볼 수가 있는데
다만 여기에서 Sprite Facing 옵션을 보면
X, Y, Z축으로 되어 있죠
현재는 X축을 기준으로 정렬이 되어 있는 상태입니다
여기 X축 보이시죠
이렇게 X축을 기준으로 수직이 되게
그래서 여기에 보면 Facing에
이런 식으로, 1로 되어 있죠
우리는 X축이 아니라
파티클 방향에 맞춰서 Z축으로 1을 입력해 주고
X는 0으로 두겠습니다 이렇게
그리고 나서 저장을 해서
월드 상에서 정상적으로 잘 보이는지 확인을 해야겠죠
월드 상에서도 정상적으로 잘 보이는 걸
확인할 수가 있습니다
여기에서 Local Simulation 옵션을 끄게 되면
다시 월드상의 Z축을 바라보게끔 되니까
주의가 필요하고요
그래서 Local Space는 활성화 시켜 주시길 바랍니다
포털 머티리얼 및 다이내믹 파라미터 생성
여기에서 우리가 렌더 텍스처 만들어 놨던 거 있죠
이것을 Sprite Renderer에
Material에 연결을 해 줘야 되는데요
오른쪽 클릭을 해서 Material을 하나 만들어 줍니다
이것은 M_PortalTex 이렇게 이름을 지어 주고요
Material Editor를 엽니다
여기에서 보여지는 포털 같은 경우에는
일단 라이트의 영향을 받을 필요 없으니까
Unlit 상태로 두시고
투명도도 이렇게 평면에 스프라이트에다가
동그랗게 이미지를 만들어 줘야 되니까
이것도 Masked로 두겠습니다
그래서 스프라이트의 사각형 테두리에다가
동그랗게 구멍 난 부분만 보이게끔
그렇게 수정을 해 줄 겁니다
우선 렌더 텍스처를 가지고 와서
Emissive Color에 연결을 해 주면
이미지가 나오겠죠
Apply를 해줍니다
그리고 나서 여기 있는 Material에
그대로 연결을 해 주면 됩니다
이미지가 보이죠
나중에 크기는 그 원형의 마스킹 영역을 잡아 두고
다시 조절을 좀 해야 됩니다
이런 식으로 이미지를 보이게 만들었구요
지금부터는 Material 작업을 해 줘야 됩니다
Material에서 우선은 동그랗게 원형의 이미지로 보이게끔
마스킹을 먼저 작업할 건데요
오른쪽 클릭해서 Radial이라고 검색을 해 보시면
RadialGradientExponential라는 노드가 있습니다
이것을 Emissive에다가 먼저 연결해서
어떤 형태인지 보여드리면
지금 보시는 것처럼 가운데 원형의 이미지로 화이트
여백의 원이 아닌 나머지 영역들은 블랙으로
서서히 그라디언트 효과가
적용되어 있는 걸 확인할 수 있습니다
이것을 Opacity Mask에다가 연결을 해 주고
그러면 Masked 상태니까
지금 보시는 것처럼 이렇게 동그랗게 원형이 보이게 되죠
그러면 우리는 Emissive Color에다가
지금 보시는 것처럼 이렇게
렌더 텍스처를 가지고 와서 연결해 주면 됩니다
이대로 두면 참 멋이 없겠죠
그래서 여기에다가 몇 가지 작업들을 해 줄 겁니다
우선은 Texture Sample을 이용해서
Noise 텍스처를 가지고 올 겁니다
Noise, 가장 기본이 되는 Perlin Noise 텍스처를
가져오도록 할 겁니다
Start Contents에 있어요
이 Noise를 어떻게 쓸 거냐면
여기 있는 그라디언트랑 섞어 줄 겁니다
이 Noise를 섞었을 때
Noise 이미지는 그레이 스케일, 흑백의 이미지니까
레드 채널이던 그린 채널이던
어디서 가져오든 동일한 이미지를 전달합니다
여기에다가 Add 해가지고
이렇게 연결을 해 줄 겁니다
그래서 이것을 Step이라는 노드로 연결을 끊고
X에다가 이렇게 연결을 할게요
Opacity Mask에다가 다시 연결해 주고
이 수치를 0.5 정도로만 이렇게 하겠습니다
지금 보면 원형이라고 보기엔 조금 어려운
굉장히 지저분하게 가장자리만
낡게 찢어진 것 같은 이미지로 만들어졌죠
왜냐하면 이 원 자체의 값은 가운데는 1이고요
여백은 0입니다, 구석은
그럼 이 중간은 1에서부터 0까지
이제 그라디언트한 값인데
Noise 자체도 0에서 1까지의
블랙&화이트로 이루어졌죠
그러니까 1에다가는 어떤 값을 더해도
결국에 1보다 크죠
그렇기 때문에 항상 온전하게 보이는 거고요
여기 있는 여백에다가, 0에다가
Noise에 있는, 1에 있는 값이 만약에
전달이 된다면 보일 거고요
이렇게 보이는 영역들이 있죠
원래 안 보였어야 되는데
0의 값이 더해지면 안 보이겠죠
이렇게 구멍난 것처럼
이걸 응용할 건데
지금은 0에서 1로, 값의 편차가 너무 크니까
텍스처에다가 Multiply를 이용해서
우선 1/10로 줄여 보겠습니다
Multiply를 해주면 0에서 1이었던 값이
0에서부터 0.1이 되겠죠
1에다가 곱하기 0.1 하면 0.1이죠
반면에 0은 0이니까
이 상태에서 Add를 해주면
이런 식으로 원의 테두리에만 약간씩의
울퉁불퉁한 Noise가 낀 것 같은
이러한 상태가 됩니다
당연히 원래 반듯한 원에
여기에는 0.1이 더해지거나
0.1이 더해지거나
안쪽에 더해지거나 빼지거나 해서
바깥으로 더해진 값들이
이렇게 이렇게 흰색으로 처리가 된 거죠
그리고 Step에서는
원래는 부드럽게 이렇게 값이 움직였던 걸
이렇게 0에서 1로 이런 식으로
끊어서 정리를 해 준 거고요
이 상태에서 이번에는 정적으로 멈춰 있으면
이미지가 이 회전하는 파티클하고 너무 좀 다르니까
여기에다가 Rotator라고 하는
노드를 연결을 할 겁니다
Rotator를 연결해 보면
지금 보시는 것처럼 이렇게 회전을 하고 있죠
아래쪽에 열어서 보면 Speed가 있고
Center 값이 있습니다
이런 식으로 UV 값에다가
이 Coordinate라고 얘기하는 건
여기에 들어가야 되는 정보는 UV 입니다
그래서 원래 UV 값이 0,0에서 구석에 1,1이죠
그러면 중앙이 되는 0.5,0.5
여기를 기준으로 해서 회전시키는 겁니다
내가 만약에 이 속도를 제어하고 싶다면
잠시 지워서 Time 노드하고
Multiply로 속도 값을 곱해 주게 되면
시간이 지남에 따라서 2배 빠르게 회전하거나
5배 빠르게 회전하거나
이런 것들이 제어가 가능해집니다
이제 이 Step을 응용을 해서
테두리에다가 Particle의 컬러처럼
빛나게끔 처리를 해 줄 건데요
이것을 그대로 Ctrl+C, Ctrl+V를 하겠습니다
똑같이 X에다가 Add한 결과를 넣어 주고요
Opacity Mask에 쓰는 Step보다 약간만 키워 주고요
이것을 티가 나게 0.7 정도로 키워서
Opacity Mask을 해 보면
보이는 영역이 훨씬 줄어들어 있습니다 0.5일 때보다
당연히 전체 1에서부터 0까지의 범위가 있다고 치면
원래 옆면에서 봤을 때 1에서부터 0까지의
이런 그라디언트
서서히 값이 작아지는 그래프가 있다고 치면
이만큼 보여주고 0.7 이상은 1로 해서 보여주느냐
0.5 이상을 보여주느냐
이 간격의 차이가 생기겠죠
그걸 만들어 준 거고요
이것을 넓은 면적에서 Subtract로 빼 줍니다
이게 이제 경계가 되는 거고 이렇게 보면
이 값의 차이가 적게 나면 적게 날수록
0.5 정도로 두겠습니다
그럼 굉장히 얇은 띠가 되는 거예요
이것을 컬러와 테두리에는 파티클의 컬러처럼
X 0.2, Y 1, Z, 블루 값이 8이 되게끔
이 컬러 값과 텍스처를 Lerp를 해 주겠습니다
이 경계 부분만 빛나야 하니까
컬러는 B에, 텍스처는 A에
순서를 좀 바꿔 줄게요
그리고 Subtract는 Alpha에 연결해서
Emissive Color로 연결해 주면
지금 보시는 것처럼 테두리가 빛나죠
Step 중에 값이 작은 0.5를 입력한 건
Opacity Mask로 다시 원래대로 해 주면
마치 허공에 구멍이 뚫려서
테두리만 빛나는 것처럼 보이게 됩니다
이렇게 말이죠
나이아가라에서 Sprite Size를 키워줍니다
이렇게 테두리하고 잘 연결이 되게끔
이런 식으로 연결을 해 주면
자연스럽게 회전하는 이미지와
파티클의 움직임이 잘 맞아 들어가게 되죠
만약에 여러분들이 방향을
회전하는 방향을 바꾸고 싶으시면
Time에 Multiply 된 곳에 마이너스 값을 넣어 주면
반대 방향으로 돕니다
이러한 결과물을 지금 보면
조금 아쉬운 게 뭐냐면
이 경계를 가만히 보면 패턴이
조금만 느리게 하겠습니다
-0.1 정도로 아주 느리게
패턴이 고정되어 있는 걸 볼 수가 있습니다
그렇죠? 이런 것들은 이렇게 Multiply 했던 이만큼
Time에서부터 Texture를 Multiply한 이만큼을
Ctrl+C, Ctrl+V 해서 복사해 주시고요
간격을 살짝 이렇게 정리를 하고요
여기에서 Time을 하나는 마이너스 방향
하나는 플러스 방향으로 두겠습니다
그리고 이 두 개의 결과를
한 번 더 Multiply 시킬 겁니다
그러면 여기 Add 되는 값은
원래 플러스 방향으로 돌아가는 Noise의 이미지와
마이너스로 돌아가는 Noise의 이미지
이 두 개가 합쳐져서 테두리 값이
조금만 확대해서 보면
약간씩 일렁거리는 게 보이시죠
이제 이 값의 차이만 조금만 크게 준다면
만약에 마이너스 되는 방향을 0.3 정도로 준다면
자글자글 거리는 느낌이
계속해서 변화되게끔 보일 수가 있고요
지금은 회전 값이 같다 보니까
이 이미지 자체가 자글거리는 느낌은 있어도
회전한다는 느낌은 좀 적어졌죠
그래서 어떤 방향이 됐든
이것을 값의 차이를
Time에 Multiply 된 값의 차이를
한 10배 정도로 둔다면
흘러간다는 느낌까지도 같이 만들어 줄 수가 있게 됩니다
뭐 이걸 둘 다 플러스 방향을 해도 상관은 없어요
제 개인적으로는 한쪽은 마이너스 한쪽은 플러스가 되는게
Noise가 조금 더 이쁘게 생기는 것 같아서 이렇게 둔거고
Multiply 되는 Texture가
Multiply 돼서 Noise의 강도를 조정해 주는 영역에서
똑같이 0.3 이런식으로 강하게 준다면
강하게 주는 만큼 Noise가 훨씬 더 강해지겠죠
이렇게, 그러면 기본적으로
Material에 대한 세팅은 끝나게 됩니다
이제 우리는 이것을 나이아가라에 맞춰서
파라미터를 마음대로 조절할 수 있게끔
다이내믹 파라미터를 이용해서
값을 정리해 주는 과정만 남은 거죠
우선은 Dynamic Parameter를 먼저 만들어 줍니다
여기서부터 차근차근히 가볼게요
파라미터의 첫번째 0번 Index에
RotSpeed라고 회전속도를 조절하는 걸 만들 건데
이걸 그대로 전달받는 게 하나가 있을 거고요
이것을 반대로 돌리게끔 Multiply를 마이너스로 해주되
속도의 차이가 생겨야 되니까
-0.2 정도만 되게끔
이렇게 기본값으로
그래서 Noise가 일렁일렁 거리게끔 하는
효과를 하나 만들어 주고
두번째 항목에는 Noise Strength라고
Noise의 강도를 조절하는
노드를 동일하게 연결을 해줄 겁니다
다만 기본값은 0.3 정도로
혹은 0.4나 이런 식으로
Noise의 형태가 드러나듯이 이렇게 바꿔주고요
조금 아래로 내리겠습니다
그리고 나서 Step에서 연결할 수 있게
두 번째, Index 2번에는
StepVal라고 기본값 0.5로 해서 세팅을 하고요
마지막 파라미터 4번에는
Line Width, 두께, 라인의 두께를 결정해 주는
이것은 0.03 정도로만 해서
Line Width는 Add를 시킬 겁니다
누구랑 Add시키냐면
Step Value와 Line Width를 Add시켜서
조금 가까이서 볼게요
Add된 결과는
두 번째 Step에다가 연결을 해줬습니다
그러면 우리는 여기에 있는 파라미터들을 이용해서
나이아가라에서 제어할 수가 있게 되겠죠
그리고 여기에 있는 컬러, 이 컬러 노드는
제가 이제 설명을 위해서
Constant3Vector로 만들긴 했지만
Particle Color를 이용해서
RGB 값을 전달해주게 만들 겁니다
Constant3 노드는 지워주고요
현재는 흰색 값이 나오게 되어 있습니다
이거 Apply를 해줍니다
이렇게 만들어서
여기에서 하나 Alpha 값이 좀 남는 게 아쉬워서
이것을 Radial Gradient에 있는
Radius에다가 연결을 해가지고
원의 크기도 조절할 수 있게끔
이거는 따로 좀 이쪽으로 빼놨습니다
저장을 해줍니다
이제 나이아가라에 가서요
여기 있는 업데이트 항목에는
Dynamic Parameter를 만들어 줍니다
그러면 Material과 연결된 Dynamic Parameter가
자동으로 리스트업이 되고
RotSpeed는 5 정도로 하고
NoiseStrength는 0.3
StepVal는 0.5
그리고 LineWidth는 0.03으로 하면
지금 보시면 이 사각형의 바깥쪽으로
약간만 효과가 생긴 걸 보실 수가 있는데
여기에서 우리가 Particle Color를 연결을 해놨잖아요
그러니까 이 컬러 모드를
Unset이 아니라 Direct Set으로 바꿔서
이 컬러값 자체를 레드는 0.2
그린 1, 블루 8 컬러값을 주되
이 Alpha를 Radial의 Gradient에 연결을 했죠
0.5로 입력하면 원이 이제 줄어들고요
여기 있는 Alpha 값으로
사실 명칭으로만 보면
그렇게 썩 좋은 선택은 아닌데
이걸 이용해서 Alpha 값이 작아지면 원의 크기가 작게
그리고 Alpha 값이 커지면
원의 크기가 커지게 만들 수도 있습니다
이번에는 조금의 디테일을 좀 더하기 위해서
이 Empty라고 되어 있던 이것의 이름을
OuterCircle이라고 바꿔주고요
이걸 Ctrl+C
그리고 옆에다가 그대로 여백을 둬서
디테일 창의 크기를 조금만 줄이겠습니다
Ctrl+V를 해줍니다
또 다른 하나는 이름을
InnerCircle이라고 바꿔주겠습니다
InnerCircle에서 Vortex Force의
Force Amount를 줄이겠습니다
서서히 줄여가지고 마이너스로 만들어 주면
이제 안쪽으로 이런 식으로
그리고 Origin Pull Amount도
조절하는 것을 잘 보시면
값이 커질수록 안쪽으로 더 모입니다
그렇기 때문에 너무 키우지 마시고
Force Amount랑 Origin Pull Amount를 조절을 해서
이 값이 너무 커지면 역으로 삐져나가니까
여러분들이 값을 잘 조절하셔가지고
이런 식으로 안쪽으로도
모양이 들이치는 모양으로 만들어질 수 있게
그리고 Noise의 형태도 조금만 변화를 줘서
이 안쪽까지도 빨려 들어가는 모양새로
표현이 될 수 있게끔 마무리를 해 주시면
조금 더 이 이미지의 경계가 너무 또렷했다 보니까
상대적으로 완화시키면서 정리를 해 줄 수가 있게 되겠죠
이것을 적용해서 월드에서 한번 확인해 보겠습니다
그러면 게임 뷰로 정리해서 보면 이렇게 됩니다
이상으로 포털 이펙트를 마치도록 하겠습니다
언리얼의 파티클들의 움직임
특히 원과 같은 일정한 형태를 가진 움직임에
노이즈를 추가하는 방식에 대해서 다뤄봤고요
또한 많은 수의 파티클을 활용하기 위해서는
GPU 시뮬레이트와 같은 기능이 어떻게 설정하고
세팅해야 되는지를 알아봤습니다
렌더 텍스처를 통해 서로 다른 카메라를 활용해서
하나의 공간에 있는 것 같은 연출을 해봤습니다
그럼 이번 시간 학습한 내용을 정리하면서
마무리 하겠습니다
감사합니다
포털 이펙트 생성 포털 이펙트 Create Empty Niagara System 선택 후 FX_Portal로 이름 설정 Add Empty Emitter로 Empty 이미터 추가
Emitter State 추가 후 LifeCycle Mode를 Self로, Loop Behavior를 Infinite로 설정 Spawn Rate 추가 후
Spawn Rate : 600 Initialize Particle 추가 후 Lifetime : 0.5 Initialize Particle 추가 후
Color값(0.2, 1, 8, 1), Sprite Size mode: Uniform, 1 Shape Location 추가 후 Shape Orimitive: Torus,
LargeRadius : 150, HandleRadius : 5 Vortex Force 추가 후 Vortex Force Amount : 1000,
Vortex Axis : (0, 0, 1) Fix Issue 버튼 클릭으로 Solve Force and Velocity 추가 Scale Sprite Size By Speed
추가 후 min: (1, 1) max: (1, 20) Fix Issue 버튼 클릭으로 Particle State 추가 Curl Noise 추가 후 Noise Strength:
220, Noise Frequency: 25 Add Velocity 추가 후 Velocity Mode: From Point, VelocitySpeed: -62
Emitter Properties의 Sim Target: GPU Compute Sim Fix Bounds: Set Fixed Bounds(Emitters)
렌더 텍스쳐 및 포털 이펙트 Place Actor > Scene Capture 2D 레벨에 배치
Textures > Render Target 애셋 생성(RT_PortalDest) Size 512×512
Scene Capture 2D > Texture Target에 연결 Add Effect > SingleLoopingParticle 템플릿 추가
Emitter State의 LoopBehavior: Infinity Initialize Particle의 Sprite Size: 280
Sprite Facing and Alignment 추가 후 Sprite Facing: (0, 0, 1)
Emitter Properties Local Space 활성화
포털 머티리얼 및 다이내믹 파라미터 생성 포털 머티리얼 M_PortalTex 머티리얼 생성 후 Shading Model: Unlit, Blend Mode: Masked
Sprite Renderer의 머티리얼에 M_PortalTex 연결 RadialGradientExponential 노드 생성 후 Opacity Mask 연결
RT_PortalDest 텍스쳐와 Emissive Color 연결 Texture Sample 생성 후 T_Perlin_Noise_M 선택
RadialGradientExponential과 Add Step X에 연결 Step 결과를 Opacity Mask에 연결
Time 노드 생성 Multiply 5 Rotator 생성 후 Time에 연결, Rotator 결과를 PerlinNoise 텍스쳐 샘플 UV에 연결
Step 노드 추가 생성 후 0.55 입력 Add 된 결과를 X에 연결하고 이전 Step과 Subtract Constant3Vector 생성 후 (0.2, 1, 8) 설정
Lerp 생성 후 Lerp A: RT_PortalDest, Lerp B: Constant3Vector, Lerp Alpha: Subtract 결과
Time ~ Multiply까지 복사 후 이전 노드와 Multiply 두 Time은 서로 다른 수치가 되도록 변경
다이내믹 파라미터 DynamicParameter 생성 index[0]에 RotSpeed 입력 후 Time Multiply B와 연결, 또 다른 타임과는 -0.2를 곱한 후 연결
index[1]에 NoiseStrength 입력 후 2개의 노이즈 텍스쳐 Multiply B에 연결, G값에 0.4 입력
index[2]에 StepVal, B값에 0.5 입력 후 Subtract A에 연결된 Step Y에 연결 index[3]에 Linewidth, A값에 0.03 입력
Add 생성 후 StepVal와 Linewidth를 Add, 결과는 Subtract B에 연결된 Step Y에 연결
Particle Color 생성 후 RGB 값을 Lerp B에 연결, Constant3Vector 노드는 삭제
Dynamic Material Parameter 생성 후 설정은 RotSpeed: 5, NoiseStrength: 0.3, StepVal: 0.5, LineWidth: 0.03
Initialize Particle의 Color 값은 (0.2, 1, 8, 0.5)로 설정 Empty 이미터의 이름을 Outer Circle로 변경
이미터 복사 후 InnerCircle로 이름 변경 Vortex Force의 Vortex Force Amount: -223, Vortex Origin: 180
Curl Noise의 Noise Strength: 98