메모장

픽셀아트를 사용하기 전 사전 설정

사전설정 이유 : 

-일반적인 이미지에 비해 해상도가 매우 작음

-유니티 에디터에서 지정하는 기본 설정 값으로는 픽셀아트 고유의 느낌을 살릴 수 없음

 

사전설정 요소 : 

속성	설정 값	설명
Pixel Per Unit	개발자 혹은 기획에서 정한 픽셀 크기 (ex: 16 - 1칸에 16개 픽셀)	n Pixel  / 1 Unit (1 유닛 당 n pixel) : Unit은 유니티의 1칸의 격자 및 Transform의 Scale값 1기준에 지정된 픽셀 개수   Ex) PPU가 100 일경우, 1 Unit(격자)에 100개의 픽셀 지정 Ex2)  m/s(시간(초) 분의 속도)는 meter per second라고 읽음, 비슷한 개념
Filter Mode	Point (not filter)	2D 및 Pixel 사용시 Point(no filter)로 설정이 필수   카메라와 거리가 가까울수록 어떻게 보이게 할지 결정 (3D 텍스쳐와 관련된 속성) 기본 값은 Bilinear (가까울수록 번져 보이게 됨, Scene 위에 배치시 번져 보임)
Comporession	None	None으로 설정하여 색상 손상 방지   색상을 압축하는 속성 기본값은 Normal (큰 해상도의 일러스트 형식 스프라이트는 큰 차이 X, 해상도와 색상 수가 비교적 적은 픽셀 아트에서는 색상 손상이 심함)

 

Global Light 2D (전역 조명) 속성 알아보기

Scene에 전역조명으로 사용할 오브젝트에 Light 2D 컴포넌트 추가

 

Light2D의 각종 속성 정리

속성	하위 속성	설명
Light Type	Freedom	정점을 자유롭게 편집하여 Light 영역 설정
	Sprite	스프라이트 모양을 그대로 Light 영역 설정
	Spot	원형 혹은 호 형태로 퍼지는 Light 영역 설정
	Global	장면 전체를 Light 영역 설정
Color		Light 적용되는 색상
Intensity		Light 적용되는 밝기

 

Light Pass 설명

알아야 되는 이유  :

빛을 렌더링하기 위해서는 CPU와 GPU의 처리비용이 매우 높다.

사양이 낮은 기기에서 최적화를 진행하기 위해 필요한 작업이다.

 

Light Pass를 활용하여 사용하지 않는 빛 오브젝트가 존재 할 경우 모니터링하여 최적화를 진행할 수 있다.

 

설정 방법 :

Windows > Analysis > Render Graph Viewer로 확인 가능

 

 

정렬 레이어를 통한 부분 라이팅

Sorting Layer (정렬만을 위한 전용 레이어, 순위가 높을수록 나중에 그려짐)을 이용하여 부분 라이팅을 할 수 있다.

<주의>여러 개의 Global Light 2D가 동일한 Target Sorting Layer를 가지면 에러가 발생

 

Spot Light 2D 배치

배치 방법 :

-하이어라키 창에서 우클릭 -> Light > Spot Light 2D 클릭

속성	하위 속성	설명
Color		빛의 색상
Intensity		빛의 밝기
Radius	Inner	정점 중심으로부터 비추는 빛의 세기
	Outer	정점 중심으로부터 비출수 있는 빛의 거리
Inner / Outer Spot Angle		정점 중심으로부터 0~360도의 빛의 범위(각도)를 설정 (두 값의 차이가 적을수록 조명의 경계가 더욱 선명해짐)
Falloff Strength		정점 중심으로부터 빛의 거리에 따른 밝기

 

SpotLight2D 빛 조절 예시

 

 

Pixel Perfect Camera

사용 목적 : 유니티에서 2D 조명을 픽셀화 하는 방법 중 하나인 Pixel Perfect Camera 컴포넌트 활용

이유 : 픽셀이 두드러지는 픽셀 아트 스타일은 스크린에 따라서 픽셀의 크기가 일정하지 않음

적용 방법 : Camera 오브젝트에 PixelPerfectCamera 컴포넌트 추가

1.더욱 정확한 픽셀 퍼펙트를 위해 에셋의 Pixels Per Unit 정보를 필요

이 속성에는 픽셀 아트 스프라이트 에셋들이 사용하는 Pixel Per Unit과 동일한 값이 필요

2. 이후 Reference Resolution을 조정하여 알맞은 화면 크기를 지정

3.Grid Snapping을 클릭하고 Upscale Render Texture로 설정하면 객체의 이동 및 회전은 물론 Spot Light 2D의 경계가 픽셀화됨

 

<주의 - 오류>

 

Sprite Asset을 활용한 라이트 제작

Sprite Asset을 활용하여 라이트를 사용할 경우 간단하게 원하는 모양의 빛을 구현 할수 있음, 단점으로는 그만큼의 리소스(에셋) 양이 증가함

 

 

 

그림자 생성하기

속성	하위 속성	설명
Castring Source (하위 속성을 토대로 그림자 영역을 만드는 방식을 설정)	SpriteRender	스프라이트 에셋이 가진 고유의 커스텀 아웃라인으로 영역 생성
	Collider2D	동일한 객체가 가진 Collider 2D의 모양대로 영역 생성 (물리적인 모양을 그대로 활용할 때)
	Shape Editor	Scene에서 직접 편집 가능한 모양으로 영역 생성 (세밀한 그림자가 필요할때)
	None	그림자를 생성하지 않음
Casting Option (그림자가 어떤 형태로 드리우는지 결정)	Self Shadow	영역 및 자신의 스프라이트 내부에 그림자 생성
	Cast Shadow	조명의 방향을 기준으로 방사형 그림자 생성
	Cast and Self Shadow	두터운 벽,사물 같이 빛이 도달 못하는 객체에 적용

 

Shadow Caster 2D 또한 Light2D와 같이 대상 정렬 레이어(sorting Layer)를 지정해서 부분적 출력 가능

 

그림자 생성하기 - SpriteRender

사용 방법 :

그림자를 적용하려는 오브젝트에 ShadowCaster2D 컴포넌트 추가

원인 : Mineral 스프라이트는 아직 Custom Outline가 설정되어 있지 않기 때문

해결 방법 : SpriteEditor에서 Custom Outline 설정하기

 

1.해당 리소스 에셋의 SpriteEditor 열기

2. CustomOutLine 모드로 변경

3. Generate를 눌러 대략적인 정점을 생성

4.필요한 부분에 정점을 찍어 Sprite 모양의 OutLine 생성 후 Apply로 적용
(설명 : 픽셀 아트는 해상도가 작기 때문에 세밀한 모양을 얻기가 어려움
그래서 Outline이 형성된 이후 마우스로 직접 정점을 옮기거나 선 가운데를 클릭하여 정점을 추가해서
스프라이트와 어느정도 일치하는 Outline으로 편집하는 작업이 필요)

5. 적용완료

p.s
Shape Editor 방식은 스프라이트와 상관없이 Shadow Caster 2D 컴포넌트 자체적으로 Scene에서 자유롭게 편집한 모양 데이터를 활용 가능 => 현재 방식과 유사하다는 뜻

 

그림자 생성하기 – Collider2D

 

ShodoeCaster2D 컴포넌트 수치 조절 - Trim Edge

Trim Edge 속성의 값이 0.09로 되어 있기 때문인데, 0에 가까울수록 Casting Source에서 활용하는 모양과 가까워짐.

Offset과 같은 개념이므로 프로젝트 취향껏 조절

 

 

<중요>**Light Render Scale 조절하기**

이유 : 텍스쳐 크기는 더욱 커지고 그만큼 정교한 Light 2D 그래픽을 얻기 위해

사용 방법 :

1. Universial 2D 프로젝트를 새롭게 시작하면 렌더링 설정 데이터를 담고 있는 Renderer2D 에셋에서 Light Render Scale 값이 0.5가 기본값으로 설정되어 있음

2. Light Render Scale = 1로 수정

Light Render Scale을 수정하지 않으면 발생하는 문제점들

1)     Light 2D의 경계가 번짐 현상

2)     그림자와 실제 영역 사이에 틈새 발생

해당 문제점의 원인 : 2D 조명 그래픽을 위해 내부적으로 제작된 텍스쳐의 크기가 화면의 절반 밖에 되지 않음

=> 작은 텍스쳐를 다시 원래 화면 크기로 늘려서 사용하다보니 번져보이고 그림자 영역도 일치하지 않게 됨

 

FrameDebugger를 이용하여 Light2DPass에 접근해서 문제점 원인 분석

 

Game View에 보이는것처럼 텍스쳐 크기는 더욱 커지고 그만큼 정교한 Light 2D 그래픽 획득 가능

크기가 커진 만큼 사용해야할 메모리도 늘어나지만, 픽셀 아트 스타일 특성상 참조 화면 해상도가 작기 때문에 성능에 영향을 거의 주지 않음

 

스스로 빛을 내는 스프라이트 제작 :: Emission 적용하기

Universial 2D의 기본 셰이더는 Sprite-Lit-Default 이며 2D Renderer 컴포넌트에 할당

 

해당 기능을 사용하기 위해서는 Shader 제작이 필요

유니티의 쉐이더그래프 기능을 사용해서 제작 할 예정

이 셰이더 그래프는 Sprite Lit 기반이며 Main, Mask, Normal, Emission 각각 텍스쳐 정보를 샘플링해서 사용하고 있는 매우 간단한 구조, Emmison을 사용하기 위해서는 EmissionMap 과 EmissionColor 두 속성을 사용할 예정

• EmissionMap : 빛을 내는 부분을 가라키는 텍스쳐
• EmissionColor : 빛의 색상 및 밝기

**Secondary Texture 소개**

유니티에서는 스프라이트가 자신과 연계된 추가 정보를 가진 스프라이트와 묶을 수 있는 Secondary Texture 기능을 지원

 

해당 샘플의 EmissionMap 또한 Secondarty Texture 중 하나이며 이것은 Sprite Editor에서 설정된 상태

1. _EmissionMap 이라는 이름으로 Mineral_Emission이라는 스프라이트가 추가되어 있는데 이런 것처럼 셰이더 활용을 위한 다른 텍스쳐를 연결

2. Name에 적어야 할 이름은 2D Renderer가 사용하는 셰이더에 명시된 Reference와 일치

3. 일치해두면 머티리얼에서 직접 텍스쳐를 할당하지 않아도 2D Renderer에서 자동으로 Secondary Texture에 있는 텍스쳐를 활용가능

 

 

<중요한 팁> 셀 애니메이션이 필요한 객체일 경우 여러 스프라이트가 하나로 합쳐진 형태의 아틀라스로 이러한 Secondary Texture를 적용 가능

 

▶ Emission 텍스쳐 제작 방법 – 외부프로그램 : aseprite 사용

 

포스트 프로세싱 사용하기

사용 목적 : 사용자에게 화려하고 풍부한 그래픽 제공을 위한 목적

사용 방법 : 

1. 카메라의 Post Processing 체크

2. 하이어라키 창에서 Volume 오브젝트 생성

3. Volume profile 생성 후 각종 효과 설정

4. Bloom(번짐)을 추가하여 Intetsity와 Scartter 체크 후 수치 조절

(이 2개만 설정해도 풍부한 효과 추가 가능) ( Bloom 추가 이유 -> Emission의 강조할 빛 번짐효과 추가)

속성	설명
Intetsity	번짐의 밝기
Scatter	번짐의 세기값
Threshold	임계값

 

노멀맵

사용 목적 : 입체갑 있는 표면을 사용하기 위한 목적 + 폴리곤만으로 표현할시 GPU,CPU 처리비용이 높음

일반적으로 텍스쳐는 해상도가 크기 때문에 노멀맵 또한 이에 맞추어 큰 해상도에서 제작

하지만 픽셀아트는 매우 작기 때문에 기존 방식을 그대로 사용하면 상당히 어긋나게 됨

 

Aseprite 프로그램 기준으로 자동으로 노멀맵을 생성하는 플러그인

( #mooosik's normal-toolkit , #securas's Edge Normals ) 이 존재

평면과도 같은 부분은 한가운데의 연보라색 색상을 배치

 

사용 방법 :

 

해당 효과를 적용한다고 바로 입체감이 드러나지 않음,

왜냐면 노말맵은 빛의 반사(법선 방향)를 조정하는 그래픽 최적화 기법이기 때문

Light 2D이 Normal Map을 반영하도록 추가 설정이 필요하기 때문

 

모든 Spot, Sprite Light 2D에서 Normal Maps > Quality를 Accurate로 설정

캐릭터가 노멀맵을 따라 경계에 명암이 바뀐 것을 확인, 조명의 기능이 고장나 버림 ( 어두워짐 )

 

문제점 : 조명의 기능이 고장나 버림 ( 어두워짐 ) => Rim Light로 전환하기

RimLight ? : 피사체 뒤에서 강한 조명을 주어 테두리에 빛나는 외곽선을 만드는 기법 -> 노말맵이 외곽 경계선의 반사광을 이용하여 입체감을 나타내는 표현이기에 사용됨

 

사용 목적 : 일부 고해상도 2D 프로젝트는 이러한 볼륨감을 위해 노멀맵을 사용하지만 픽셀 아트는 이질감 발생 가능

반대로 화려한 2D 라이팅을 픽셀 아트 객체에 잘 반영할 수 있도록 외곽을 따라 테두리 광원이 나타나는 Rim Light를 사용

 

사용 방법 :

1.     기존 Sprite Light 2D 객체의 Normal Maps > Quality를 None으로 원상복구

2.     해당 객체를 Ctrl+D로 복사 및 Rim Light로 이름 변경 (기존 객체는 비활성화)

3.     Light Type을 Spot으로 변경하고 Radius > Outer를 기존 조명 영역보다 더 크게 확장

4.     Intensity를 10 이상 높게 설정

5.     Normal Maps > Quality를 Accurate로 변경

6.     Normal Maps > Distance를 1 이하로 설정

Target Sorting Layer를 활용하여 복구

1.     Rim Light의 Target Sorting Layer 는 Default만 설정

2.     기존 Sprite Light 2D를 다시 활성화

3.     Rim Light를 Sprite Light 2D의 자식 객체로 등록하기

 

보통 강조하려는 동적인 대상에 부여하기 때문에 이러한 객체들이 사용하는 정렬 레이어만 대상으로 삼음

(동적인 대상 : 플레이어, 움직이는 오브젝트 등등)

기존 Sprite Light 2D는 그대로 배경과 전경 모두 적용하거나 분위기, 상황에 따라서 배경만 대상으로 적용

(정적 : 배경, 가만히 있는 오브젝트 등등)

 

즉, 림라이트를 생성한 목적은 노말맵을 이용하기 위해 전용 빛(조명)을 추가했다는 뜻

(해당 조명은 그림자 렌더링시 연산에 되지 않게 정렬 레이어에서 제외해야됨)

 

불필요한 배치를 줄여 최적화

이유 : 빛은 그래픽스에서도 엄청난 처리비용을 가지고 있다. 그러기에 2D Pixel에서도 최적화 처리를 해주어야만한다.

FrameDebugger를 살펴보면 한 프레임에 134의 Batch수를 가지고 있다.

해당 Batch수가 많을수록 CPU가 GPU에게 드로우콜을 요청하게 된다. => 처리비용의 증가 ( CPU 병목의 주 원인)

 

현재 상황은 모든 Light 2D가 그림자를 생성하므로 조명이 겹치는 영역에 Shadow Caster 2D를 가진 객체가 진입하면 필요한 연산이 곱셈으로 증폭되는 상황 => 그림자를 발생시키는 조명의 정렬레이어만 적용 시키며 사용하지 않거나 중요도가 낮은 오브젝트들은 그림자를 비활성화 시킨다.

 

원하지 않는 부분의 조명 처리

 

빛에 반응하지 않는 부분은 Emission과 같이 검은색, 빛을 받는 부분을 붉은색 계통으로 표시해주는 것이 특징

( 제작 방법이 EmissoionMap과 유사 )

 

Blending  : 스프라이트 색상과 조명의 색상을 섞는 (블렌딩) 방식

• Multiply : 색을 곱하는 연산 (회색 * 회색 = 더 어두운 회색)
• Additive : 색을 더하는 연산 (회색 + 회색 = 밝은 회색)
• Multiply with Mask (R) : Multiply 와 같음 ,마스크 텍스쳐의 빨강 채널 R만 사용하는 옵션
• Additive with Mask (R) : Additive 와 같음 ,마스크 텍스쳐의 빨강 채널 R만 사용하는 옵션

외곽 경계선 즉, 노말맵을 비추고 있는 Rim Light 값을 수정하여 빛샘 현상 방지 => Multiply with Mask (R) 사용

 

<팁> 마스크는 그림자에 비해 연산이 매우 가벼우므로 마스크 맵 리소스 제작이 가능한경우 , Shadow Caster 2D를 대체하여 마스크로 그림자를 표현하는 방법으로 최적화 가능

---

 

참고한 링크
https://learn.unity.com/project/pixelartlight2d?uv=6

 

픽셀 아트를 위한 2D 라이팅 - Unity Learn

유니티 엔진에서 픽셀 아트 스타일의 게임 콘텐츠를 제작하기 위해 2D 라이트를 생성하고 편집하는 방법을 예제 프로젝트와 함께 실습하는 튜토리얼입니다.

learn.unity.com

 

 

Secondary Texture 참고 영상

https://youtu.be/InNZsUWNb8k?si=qRfV6PhdEd7AJiJE