Posts Screen Effect Controller(스크린 이펙트, 포스트 프로세싱)
Post
Cancel

Screen Effect Controller(스크린 이펙트, 포스트 프로세싱)

Aug 25, 2021 2021-08-25T21:00:00+09:00 by Rito15
Updated Sep 1, 2021 2021-09-01T21:02:20+09:00 33 min  

Summary

  • 스크린 이펙트(포스트 프로세싱)를 간단히 적용할 수 있게 해주는 애셋입니다.

  • 게임 오브젝트의 단순 활성화/비활성화 방식으로 스크린 이펙트를 적용/해제합니다.

  • 시간에 따른 마테리얼 프로퍼티의 값 변화 애니메이션을 쉽게 제작할 수 있습니다.

  • 유니티 타임라인에도 손쉽게 연동할 수 있습니다.

  • 유니티 기본 렌더 파이프라인(Built-in Render Pipeline)에서 사용할 수 있습니다.

    • SRP, URP, HDRP에서는 사용할 수 없습니다.


테스트 완료 에디터 버전

  • 2018.3.14f1
  • 2019.4.9f1
  • 2020.3.14f1
  • 2020.3.17f1
  • 2021.1.16f1


Preview

[1] Demo 1 - 운석 낙하


Demo 1 다운로드


[2] Demo 2 - 눈 깜빡깜빡

2021_0831_ScreenEffect_Vignette_Anim


[3] Component Preview

image


Download & Import

Screen Effect Controller

  • Screen Effect Controller.unitypackage

  • 첨부 파일을 다운로드하고, 유니티 프로젝트가 켜져 있는 상태에서 실행합니다.

  • 임포트 창이 나타나면 Import 버튼을 클릭하여 프로젝트에 임포트합니다.

image


추가 : 스크린 이펙트 쉐이더 모음집

  • Screen Effect Shaders.unitypackage

  • 지금까지 직접 만든 스크린 이펙트 쉐이더들을 모아 놓았습니다.

  • 추후 조금씩 업데이트할 예정입니다.


스크린 이펙트 쉐이더 작성 방법

  • 스크린 이펙트를 적용하기 위해서는 일정 조건에 부합하는 쉐이더를 작성해야 합니다.

  • 스크린 이펙트는 다음과 같은 방식으로 적용됩니다.


  1. 쉐이더로부터 _MainTex 텍스쳐 프로퍼티가 있는지 확인합니다.
  2. _MainTex 텍스쳐 프로퍼티에 현재 렌더링되는 화면의 색상이 입력됩니다.
  3. 이 때, 스크린의 UV가 해당 텍스쳐의 UV로 사용됩니다.
  4. 프래그먼트 쉐이더의 최종 출력이 화면에 렌더링됩니다.


  • 정리하자면, 쉐이더의 _MainTex 프로퍼티에 스크린 색상이 입혀지고, 프래그먼트 쉐이더의 연산 결과가 다시 스크린에 입혀지는 간단한 흐름입니다.


[1] Image Effect Shader(Script)

image

  • 유니티 엔진의 Project 윈도우에서 우클릭 - Create - Shader - Image Effect Shader를 통해 새로운 이미지 이펙트 쉐이더를 생성합니다.

  • 그러면 다음과 같이 단순히 화면의 색상이 반전되는 프래그먼트 쉐이더를 확인할 수 있습니다.

1
2
3
4
5
6
7

fixed4 frag (v2f i) : SV_Target
{
    fixed4 col = tex2D(_MainTex, i.uv);
    // just invert the colors
    col.rgb = 1 - col.rgb;
    return col;
}
  • _MainTex를 샘플링하여 얻은 색상을 기반으로 연산을 적용하고, frag 함수의 리턴으로 내보냄으로써 원하는 스크린 효과를 만들 수 있습니다.


[2] Amplify Shader

image

  • 유니티 엔진의 Project 윈도우에서 우클릭 - Create - Amplify Shader - Legacy - Unlit을 통해 새로운 쉐이더를 생성합니다.


image

에디터의 좌측 옵션에서 다음과 같이 설정합니다.

  • Cull Mode : Off
  • ZWrite Mode : Off
  • ZTest Mode : Always


image

  • 새로운 Texture Sample 노드를 생성합니다. (단축키 : T)

  • 이름을 MainTex로 변경합니다.

  • MainTex 노드의 RGBA 출력을 마스터 노드의 Frag Color에 연결합니다.

  • MainTex 노드의 색상을 기반으로 연산을 적용한 뒤 Frag Color에 최종 색상을 넣어주면 원하는 스크린 효과를 만들 수 있습니다.


사용 방법

[1] 스크린 이펙트 추가, 적용하기

image

image

  • 하이라키 창에서 우클릭 - Effects - Screen Effect를 클릭합니다.

  • 새로운 게임오브젝트가 생성되며, ScreenEffect 컴포넌트가 추가됩니다.

  • 씬에 존재하는 카메라에 ScreenEffectController 컴포넌트가 자동으로 추가됩니다.

  • 생성된 ScreenEffect 컴포넌트의 Effect Material에 스크린 이펙트로 적용할 마테리얼을 넣어줍니다.

  • 해당 게임오브젝트를 활성화/비활성화 하거나 On/Off 버튼을 클릭함으로써 해당 스크린 이펙트를 적용/해제 할 수 있습니다.


[2] 하이라키 표시

image

  • 현재 활성화된 스크린 이펙트는 하이라키 좌측에 하늘색 아이콘이 표시됩니다.
  • 마테리얼 등록 시 쉐이더 이름이 게임오브젝트 이름에 함께 표시됩니다. (Screen Effect [ShaderName])
  • 게임오브젝트 이름 우측에는 이펙트 적용 우선순위가 표시됩니다.
  • 가장 우측에는 ON/OFF 버튼이 표시되며, 이를 클릭하여 간단히 활성화/비활성화할 수있습니다.


[3] 옵션 설정

  • 마테리얼이 등록되지 않은 경우

image

  • 마테리얼이 등록된 경우

image

  • 지속 시간을 설정한 경우

image

  • 시간 계산 방식을 프레임으로 설정하고, 기준 FPS 사용에 체크한 경우

image


  • On/Off 스위치
    • 게임 오브젝트를 활성화/비활성화 합니다.


  • 영어/한글 버튼
    • 표시할 언어를 영어 또는 한글로 변경합니다.


  • 이펙트 마테리얼
    • 스크린 이펙트로 적용할 마테리얼을 등록합니다.
    • 에러가 발생하거나 쉐이더에 변경사항이 생겼을 때 Reload 버튼을 클릭하면 데이터가 다시 로드됩니다.


  • 우선순위
    • 여러 개의 스크린 이펙트가 적용될 때, 이펙트가 적용될 순서를 결정합니다.
    • 우선순위 값이 작을수록 화면에 먼저 적용됩니다.
    • 우선순위 값은 하이라키의 ON/OFF 버튼 왼쪽에 표시됩니다.


  • 시간 계산 방식
    • 적용될 시간 계산 방식을 프레임/시간(초) 중에 결정합니다.
    • 프레임을 선택한 경우, 매 프레임마다 애니메이션이 갱신됩니다.
    • 시간(초)을 선택한 경우, 기기의 성능에 관계 없이 실제 시간을 기준으로 시간이 계산됩니다.


  • 지속 시간
    • 스크린 이펙트가 활성화된 이후 유지될 시간을 설정합니다.
    • 0을 입력할 경우, 항상 지속되지만 프로퍼티 애니메이션을 사용할 수 없습니다.


  • 지속 시간 변경 시 동작
    • 프로퍼티 애니메이션이 존재하는 경우, 지속 시간을 변경했을 때 동작을 지정합니다.
    • 시간 비율 유지
      • 시간 비율을 유지한 채로 각 애니메이션 키의 시간 값을 변경합니다.
      • 예시 : 지속 시간이 2초, 애니메이션 키가 0초, 1초, 2초에 있었을 경우, 지속 시간을 4초로 변경하면 각각 0초, 2초, 4초로 변경됩니다.
    • 시간 값 유지
      • 각 애니메이션 키의 시간 값을 그대로 유지한 채로 전체 지속 시간만 변경합니다.
      • 지속 시간을 감소시켰을 경우, 지속 시간보다 큰 시간 값을 갖는 애니메이션 키는 제거됩니다.
      • 예시 : 지속 시간이 4초, 애니메이션 키가 0초, 1초, 2초, 3초, 4초에 있었을 경우, 지속 시간을 2초로 변경하면 3초, 4초의 애니메이션 키는 제거됩니다.


  • 기준 FPS 사용
    • 시간 계산 방식을 프레임으로 설정한 경우 사용할 수 있습니다.
    • 기준 FPS 사용에 체크 해제한 경우, 기기의 성능에 따라 다른 결과를 나타낼 수 있습니다.
    • 기준 FPS 사용에 체크한 경우, 기기의 성능에 관계 없이 일정한 시간 동안 지속됩니다.


  • 기준 FPS
    • 시간 계산 방식을 프레임으로 설정하고 기준 FPS 사용에 체크한 경우 설정할 수 있습니다.
    • 프레임 계산을 실제 시간에 동기화하기 위한 기준 FPS 값을 설정합니다.
    • 예를 들어 지속 프레임이 120프레임, 기준 FPS가 60인 경우 기기의 성능에 관계 없이 항상 2초 동안 지속됩니다.
    • 타임라인을 사용할 때, 타임라인의 Frame Rate와 동일하게 설정하면 됩니다.


  • 종료 동작
    • 지속 시간이 모두 진행되고 수행될 동작을 선택합니다.
    • 마지막 상태 유지를 선택할 경우, 설정된 시간까지 진행되면 그 상태를 계속 유지합니다.
    • 비활성화를 선택할 경우, 설정된 시간까지 진행되면 게임오브젝트가 비활성화됩니다.
    • 파괴를 선택할 경우, 설정된 시간까지 진행되면 게임오브젝트가 파괴됩니다.
    • 반복을 선택할 경우, 설정된 시간까지 진행되면 처음부터 다시 진행되며, 계속 반복합니다.


[4] 마테리얼 프로퍼티 목록

image

  • 해당 마테리얼이 갖고 있는 프로퍼티의 목록을 표시합니다.

  • 해당 이펙트 마테리얼의 프로퍼티 값을 언제든 수정할 수 있습니다.

  • [R] 버튼을 클릭할 경우 해당 프로퍼티의 값을 초기값으로 변경합니다.

  • 각 프로퍼티마다 우측의 [+] 버튼을 클릭하여 프로퍼티 애니메이션을 생성할 수 있습니다.

  • 애니메이션이 활성화된 프로퍼티의 [E] 버튼을 클릭할 경우, 애니메이션이 동작하지 않도록 비활성화합니다.
  • 애니메이션이 비활성화된 프로퍼티의 [D] 버튼을 클릭할 경우, 애니메이션이 동작하도록 활성화합니다.

  • 애니메이션이 등록된 프로퍼티의 [-] 버튼을 클릭할 경우, 해당 프로퍼티의 애니메이션이 제거됩니다.

  • 애니메이션이 존재하지 않는 프로퍼티는 하얀색으로 표시됩니다.
  • 애니메이션이 존재하며, 활성화된 프로퍼티는 하늘색으로 표시됩니다.
  • 애니메이션이 존재하지만 비활성화된 프로퍼티는 회색으로 표시됩니다.


[5] 프로퍼티 애니메이션

image

  • 정해진 지속 시간 동안, 시간 진행에 따른 마테리얼 프로퍼티의 값 변화를 애니메이션으로 정의합니다.

  • 타이틀 바의 좌측에는 프로퍼티의 이름과 타입이 표시됩니다.

  • Enabled/Disabled 버튼을 클릭하여 애니메이션을 활성화/비활성화 할 수 있습니다.
  • 활성화된 애니메이션은 타이틀 바가 하늘색으로 표시됩니다.

  • 비활성화된 애니메이션은 타이틀 바가 검은색으로 표시됩니다.

  • [-] 버튼을 클릭하여 해당 프로퍼티 애니메이션을 제거할 수 있습니다.


[5-1] 애니메이션 키 목록

image

  • 애니메이션을 이루는 애니메이션 키 목록을 표시합니다.
  • 쉐이더에서 직접 정의하기 힘든, 시간에 따른 값의 변화를 애니메이션을 통해 손쉽게 정의할 수 있습니다.


  • 애니메이션 표시/애니메이션 숨기기 버튼을 클릭하여 애니메이션 키 목록을 표시하거나 숨길 수 있습니다.
  • 각 애니메이션 키 사이사이의 [+] 버튼을 클릭하여, 해당 위치에 새로운 애니메이션 키를 추가할 수 있습니다.

  • 각 애니메이션 키 우측의 [-] 버튼을 클릭하여, 해당 키를 제거할 수 있습니다.

  • 각 애니메이션 키 우측의 [C] 버튼을 클릭할 경우, 해당 키의 프로퍼티 값을 복사합니다.
  • 이후 [P] 버튼을 누를 경우, 복사된 값을 해당 키에 붙여넣습니다. (타입이 일치해야 합니다.)


  • 애니메이션 키의 사이에서, 해당 프로퍼티의 값은 선형 보간되어 적용됩니다.

  • 예를 들어 위 애니메이션의 경우, Range 프로퍼티의 값이 시간에 따라 다음과 같이 변화합니다.

    • 0.0초 ~ 1.0초 : 값이 0.0에서부터 0.5까지 순차적으로 증가합니다.
    • 1.0초 ~ 2.0초 : 값이 0.5에서부터 0.0까지 순차적으로 감소합니다.
    • 2.0초 ~ 2.5초 : 값이 0.0에서부터 1.0까지 순차적으로 증가합니다.
    • 2.5초 ~ 4.0초 : 값이 1.0에서부터 0.0까지 순차적으로 감소합니다.


[5-2] 애니메이션 그래프

image

  • 현재 등록된 애니메이션 정보에 따라, 해당 프로퍼티 값의 변화를 그래프를 통해 시각적으로 확인할 수 있습니다.

  • 그래프 내에 반투명한 실선을 통해 애니메이션 키가 표시됩니다.

  • 그래프 하단에 각 키의 인덱스 또는 시간/프레임이 표시됩니다.

  • 그래프 좌측 상단의 버튼을 클릭하여 인덱스를 표시할지, 시간/프레임을 표시할지 결정할 수 있습니다.


image

  • Vector, Color 타입의 경우, X, Y, Z, W 값의 변화를 각각의 그래프로 확인할 수 있습니다.

  • X, Y, Z, W 또는 R, G, B, A 토글 버튼을 클릭하여, 원하는 요소의 그래프만 필터링하여 표시할 수 있습니다.


추가 기능 : 키 이동, 추가, 삭제

2021_0830_ScreenEffect_MoveKey

  • 그래프 하단의 키 부분을 마우스 좌클릭 및 드래그하여 좌우로 이동할 수 있습니다.
  • Control 키를 누른 채로 드래그할 경우, 시간은 0.1초, 프레임은 10 단위로 이동합니다.
  • Shift 키를 누른 채로 드래그할 경우, 시간은 0.05초, 프레임은 5 단위로 이동합니다.

2021_0830_ScreenEffect_RemoveKey

  • 그래프 하단의 키 부분을 마우스 우클릭하여 해당 키를 제거할 수 있습니다.

2021_0830_ScreenEffect_InsertKey

  • 그래프 하단에서 키가 없는 부분을 마우스 우클릭하여 새로운 키를 추가할 수 있습니다.


[5-3] 애니메이션 그라디언트

image

  • Color 타입의 경우, 우측 상단의 그라디언트/그래프 버튼을 클릭하여 색상 표시 방법을 변경할 수 있습니다.

  • 애니메이션 키의 개수가 8개를 초과하는 경우, 그라디언트로 표시할 수 없습니다.


[6] 플레이모드 기능

2021_0827_ScreenEffect_EditorOptions

  • 지속 시간이 0보다 큰 경우에만 표시됩니다.

  • 유니티 에디터가 플레이모드에 진입한 경우, 에디터 기능 탭에서 현재 경과 시간을 실시간으로 확인할 수 있습니다.


image

  • 편집 모드에 체크한 경우 시간 진행이 일시 정지되며, 슬라이더를 조작하여 원하는 시간으로 이동할 수 있습니다.


2021_0827_ScreenEffect_EditorOptions_MoveKey

  • 편집 모드에 체크된 상태에서 각 애니메이션 그래프를 클릭하여 원하는 시간으로 이동할 수 있습니다.

  • 편집 모드가 아닌 상태에서 각 애니메이션 그래프를 클릭한 경우, 편집 모드로 진입하며 시간 진행이 정지됩니다.


Animator Event Controller와 연동하기(예시)


[1] 스크린 이펙트 준비

image

image

  • 하이라키 우클릭 - Effects - Screen Effect를 통해 새로운 스크린 이펙트를 생성합니다.

  • 화면을 흔드는 효과가 구현된 Screen Shake 마테리얼을 이펙트 마테리얼에 넣어줍니다.

  • 지속 시간을 0.3초로 지정하고, 종료 동작을 파괴로 설정합니다.

  • 마테리얼 프로퍼티 목록에서 각 프로퍼티들을 원하는 값으로 설정합니다.

  • 종료 동작이 파괴이므로 게임 시작 후 0.3초가 지나면 게임오브젝트가 파괴됩니다.
    따라서 원본 오브젝트가 파괴되지 않도록 Off를 클릭하여 게임오브젝트를 비활성화 상태로 만들어줍니다.

  • 비활성화 상태로 씬에 그대로 두어도 되고, 따로 프리팹으로 추출해도 됩니다.


[2] 애니메이션 제작

2021_0827_ScreenEffect_Example_Anim

  • Sphere가 공중으로 뛰어올랐다가 바닥으로 착지하기를 반복하는 간단한 애니메이션을 제작합니다.

  • Animator Controller를 생성하여 제작한 애니메이션 클립을 추가하고 시작 애니메이션으로 설정합니다.

  • 게임오브젝트에 Animator 컴포넌트를 추가하고, Controller를 등록해줍니다.


[3] 애니메이터 이벤트 생성

image

  • Animator 컴포넌트에 우클릭하여 Add Animator Event Controller를 클릭하면 Animator Event Controller 컴포넌트가 추가됩니다.


image

  • [+] 버튼을 클릭하여 새로운 이벤트를 추가합니다.

  • 프리팹 오브젝트에 위에서 생성한 Screen Shake 게임오브젝트를 드래그하여 넣어줍니다.

  • 생성 프레임을 알맞게 설정합니다. (땅에 찍는 순간인 79 프레임으로 설정하였습니다.)


[4] 결과 확인

2021_0827_ScreenEffect_Example_Anim2

2021_0827_ScreenEffect_Example_Anim3

  • Sphere가 땅에 찍을 때마다 Screen Shake 이펙트 게임오브젝트가 생성되고, 0.3초 후에 파괴되며 그동안 스크린 이펙트가 적용되는 것을 확인할 수 있습니다.


데모 씬 다운로드


타임라인과 연동하기(예시)

  • 이 애셋은 게임오브젝트 활성화/비활성화 동작에 따라 스크린 이펙트가 적용/해제됩니다.

  • 따라서 타임라인의 Activation Track을 통해 편리하게 사용할 수 있습니다.


[1] Meteor 이펙트

2021_0827_SE_TimelineDemo_01

  • 파티클 시스템을 통해, 운석들이 낙하하는 이펙트를 제작합니다.

  • 대략 2~3초간 지속됩니다.


[2] 스크린 이펙트 : Shake

image

  • https://rito15.github.io/posts/unity-amplify-screen-shake/

  • 화면이 흔들리는 단순한 이펙트입니다.

  • 타임라인과 연동할 예정이므로, 시간 계산 방식을 프레임으로 설정하고 기준 FPS를 60으로 지정합니다.

  • 타임라인에 의해 활성화/비활성화가 제어되므로 종료 동작 무엇이든 상관 없지만, 일단 비활성화로 설정합니다.

  • 0프레임부터 180프레임까지 Shake Intensity 값이 0부터 0.2까지 증가하도록 애니메이션을 설정합니다.

  • 시간 흐름에 따라 흔들리는 강도가 점차 강해집니다.

  • Meteor 이펙트의 첫 운석이 땅에 처음 부딪히는 순간부터 마지막 운석이 부딪히는 순간까지 Shake 이펙트가 동작하도록 할 예정이며, 구체적인 시간 조정은 타임라인 구성과 함께 할 것이므로, 일단 지속 시간을 180 프레임으로 설정합니다.


[3] 스크린 이펙트 : Hexagonal Pattern

image

  • https://rito15.github.io/posts/unity-amplify-screen-hexagons/

  • 마찬가지로 지속 시간은 180 프레임으로 대강 설정합니다.

  • Hexagon 이펙트가 Shake 이펙트로 인해 흔들리지 않도록, 우선순위를 1로 설정합니다.

  • 운석이 떨어지기 전에 이 스크린 이펙트가 화면 가장자리에서부터 화면을 뒤덮고,
    운석이 모두 떨어지고 나서 화면에서 부드럽게 사라지도록 애니메이션을 제작할 것입니다.

  • 이펙트의 영역 크기에 영향을 주는 프로퍼티는 Area Range, Area Power 입니다.

  • 두 프로퍼티에 대해 애니메이션을 제작합니다.


image

  • 우선, 마테리얼 프로퍼티 목록에서 두 프로퍼티의 우측 [+] 버튼을 각각 클릭하여 애니메이션을 추가합니다.

  • 애니메이션 확인 및 수정은 플레이모드에 진입 후, 에디터 기능 - 편집 모드를 설정하여 진행하는 것이 좋습니다.


image

  • Area Range 프로퍼티에 대한 애니메이션을 위와 같이 제작합니다.


image

  • 마찬가지로 Area Power 프로퍼티 애니메이션을 위와 같이 제작합니다.


2021_0827_SE_TimelineDemo_02

  • 위와 같은 결과를 확인할 수 있습니다.


[4] 타임라인 제작

  • 빈 게임 오브젝트를 만들고, 이름을 Timeline으로 변경합니다.

  • Window - Sequencing - Timeline을 통해 타임라인 윈도우를 엽니다.

  • 생성한 빈 게임오브젝트를 클릭한 상태로 타임라인 윈도우에서

image

  • Create 버튼을 클릭하여 새로운 타임라인 애셋을 생성합니다.


image

  • [+] 버튼을 클릭하여 Activation Track 세 개를 생성합니다.

image

  • 각각 씬에 있는 Meteor, Shake, Hexagon 이펙트 게임오브젝트들을 넣어줍니다.


image

  • 각 트랙을 선택하여, 시작 프레임은 60, 지속 프레임은 180으로 설정합니다.

  • 이 상태를 기점으로, 원하는 결과를 얻을 때까지 Shake, Hexagon 이펙트의 시작 프레임과 지속 프레임을 변경하며 테스트합니다.

  • 트랙의 지속 프레임을 수정할 때마다, 해당 Screen Effect의 지속 프레임도 함께 변경해주어야 합니다.


  • Screen Effect의 Activation Track 종료 부분이 타임라인의 마지막 시점과 일치하는 경우, 타임라인 종료와 동시에 다시 활성화되는 경우가 있습니다.

image

  • 이럴 때는 위와 같이 타임라인의 눈금자 부분을 우클릭하여 Duration Mode - Fixed Length로 설정하고,

image

  • 파란 선을 드래그하여 여유 있게 약간 우측으로 이동시켜주면 됩니다.


[5] 최종 결과

2021_0827_SE_TimelineDemo_03

image

  • Meteor - 시작 : 60, 지속 : 180 (60 ~ 240)
  • Shake - 시작 : 100, 지속 : 120 (100 ~ 220)
  • Hexagon - 시작 : 40, 지속 : 220 (40 ~ 260)


Future Works

  • SRP 지원
  • 애니메이션 그라디언트 뷰 : 키 개수가 8개를 초과하는 경우에도 표시할 수 있는 커스텀 그라디언트 필드 구현
Unity, Unity Editor Utilities
unity editor csharp utility
This post is licensed under CC BY 4.0 by the author.
Recent Update
Contents

유니티 에디터 GUI - 여러 개의 커브를 겹쳐 그리기

유니티 에디터 GUI - 포커스 확인, 처리