머티리얼 활용하기

# 학습 과정 소개

머티리얼(Material)은 다양한 프로퍼티를 통해 엔티티가 렌더링될 방법을 나타내는 객체입니다. 엔티티의 프로퍼티는 엔티티를 렌더링하는 코드에 따라 변경됩니다. 셰이더(Shader)란 물체를 렌더링할 때 사용할 코드(또는 스크립트)입니다. 셰이더의 프로퍼티 및 코드는 동적으로 변경될 수 없기 때문에, 셰이더마다 표현하는 효과가 다르게 나타납니다. 메이플스토리 월드에서는 다양한 셰이더를 제공합니다. 크리에이터는 머티리얼을 생성하고 원하는 의도에 맞게 셰이더 프로퍼티를 조절할 수 있습니다.

# 머티리얼 생성하기

머티리얼 생성 방법을 알아봅니다.

  1. 새로운 머티리얼은 아래의 3가지 중 원하는 방법으로 만들 수 있습니다. 

[{"index":"1. Workspace [+] 버튼","0":"[png](1686538286105d45a745926da4e4b812578f6b51690c2)"},{"index":"2. Workspace 콘텍스트 메뉴","0":"[png](16865382991887b1f0a30aae44c31bb97404200571ed7)"},{"index":"3. Create 메뉴","0":"[png](168653831150808fff6cb82914b4691ae98c678a78ae6)"}]

  

  2. 머티리얼을 생성한 후 이름을 지정합니다. [png](166840323583571410bb4351f4e0badb9b51d500f8b81)



# 엔티티에 머티리얼 적용하기

엔티티에 머티리얼을 적용하는 방법을 알아봅니다.

  1. 엔티티 선택 후 프로퍼티 에디터 - SpriteRendererComponent - MaterialID에서 [png](1668408907363c261c9faa43d4ee3b131624dd723e3a2) 버튼을 클릭합니다. [png](166908403861011c64e140fd04f8f90bbdb8d5d57af59)   

  2. Reference 창에서 원하는 머티리얼을 선택합니다. [png](1668409227396b253b59b89094a9c9ec4b914a1c29bb5)   

  3. Shader 타입을 지정합니다. [png](168681313976760c074e2954f4814a93d511c9b9e3c12)   
필터 기능을 활용하여 선택한 컴포넌트에서 사용할 수 있는 셰이더만 추려볼 수도 있습니다. [png](16868168758722d20cb35ccae47d29c99d45b0314426c)



# 셰이더 타입

셰이더 타입에 따라 렌더링 방식이 달라지며, 조절할 수 있는 프로퍼티도 다릅니다. 메이플스토리 월드에서 제공하는 셰이더 타입을 살펴봅시다.

## Default

기본 머티리얼입니다. 아무 효과도 적용되지 않은 상태입니다.

[{"index":"셰이더1","0":"Default"},{"index":"셰이더2","0":"[png](1668479786163abb0a4314fe34db0885f9d118d23236f)"},{"index":"설명","0":"머티리얼이 지정되지 않았거나 찾을 수 없을 때 Default를 사용합니다."}]

## Outline

스프라이트의 외곽선을 그리는 효과입니다.

[{"셰이더1":"Outline","셰이더2":"[png](166841095184460411e0fbd3d419cbe83b632bce31401)","설명":"스프라이트 바깥쪽으로 외곽선을 그립니다."},{"셰이더1":"InnerOutline","셰이더2":"[png](166841143439790c697d7e2f24b368d3a3ad635d19020)","설명":"스프라이트 안쪽으로 외곽선을 그립니다."},{"셰이더1":"ColorDiffOutline","셰이더2":"[png](16684114971291ab4281d87cc4b9b87fd25f52356d572)","설명":"스프라이트 색상 차이를 이용해 외곽선을 그립니다."}]

## ColorEffect

스프라이트 위에 여러 색상을 표현하는 효과입니다.

[{"셰이더1":"Rainbow","셰이더2":"[gif](1668413469593d7bd1d3a1aa44677b8ac611864878d88)","설명":"무지개 색상으로 블렌딩합니다"},{"셰이더1":"LineGradient","셰이더2":"[png](1668413449478ceb1da170e9147d48914323930b9b404)","설명":"Y 축 기준 4개 색상을 점차적으로 블렌딩합니다."},{"셰이더1":"VertexGradient","셰이더2":"[png](16684135009255cd62251f9bc4a8c90b0430dff483926)","설명":"꼭짓점 색상 4개를 점차적으로 블렌딩합니다."},{"셰이더1":"RadialGradient","셰이더2":"[png](16684135201985614fc9d040440078b52333b4e6f751a)","설명":"중심부 - 외부 색상을 점차적으로 블렌딩합니다."},{"셰이더1":"Gradient","셰이더2":"[gif](1668413536391582e7b18622a46eeb8bc117524eead9b)","설명":"시간에 따라 단일 색상으로 블렌딩합니다."},{"셰이더1":"Reverse","셰이더2":"[png](16684135490414f64d3e9f5ac40ed9d8ccec8a7b5f49d)","설명":"목표 색상과 반대 색상으로 출력합니다."},{"셰이더1":"GrayScale","셰이더2":"[png](16684135604161d31df8cdb724a77b9b85129b1d5a79f)","설명":"회색 조로 출력합니다."},{"셰이더1":"Hologram","셰이더2":"[gif](16684135717173629a30e711f41c79d6ce3bd85fa0baf)","설명":"일정한 방향으로 색상 있는 빛 효과를 출력합니다."},{"셰이더1":"LimLight","셰이더2":"[png](1668413583454c85ff546505745bda50ecb4b3b1e1797)","설명":"밝은 빛 효과를 출력합니다."},{"셰이더1":"Posterize","셰이더2":"[png](1668413596725492a72e7ca45438ebb10abb856ef3701)","설명":"렌더링 색상 개수를 제한합니다."},{"셰이더1":"ColorOverride","셰이더2":"[gif](1668413607254b9983afe45d44979bf13be197d61c2fe)","설명":"지정된 단일 색상으로 변경합니다."},{"셰이더1":"ColorGlow","셰이더2":"[png](1678961863541f622336dc27645c9b69ccace791963fb)","설명":"GlowColor로 지정한 색상과 비슷한 색상 영역을 밝게 처리합니다."},{"셰이더1":"DropShadow","셰이더2":"[png](1678962067474c059773fcc6c490981a9faf032335085)","설명":"TargetColor로 지정한 색상에 그림자 효과를 적용합니다."},{"셰이더1":"ConcentrationLine","셰이더2":"[png](1678959255414e67530f0ca6142cbbca85a7a939f3ea9)","설명":"지정한 위치를 향해 집중선 효과를 적용합니다."}]

## UVEffect

스프라이트 좌표를 왜곡하는 효과입니다.

[{"셰이더1":"Noise","셰이더2":"[gif](1668413949472f7b0b5a86aa4405ba3f4cccaec032045)","설명":"지속적으로 엔티티가 흔들립니다."},{"셰이더1":"RoundWave","셰이더2":"[gif](16684136490085c94218d5b2f4a618666646fea88d23c)","설명":"중심 기준으로 동심원 파동을 그립니다."},{"셰이더1":"UVScroll","셰이더2":"[png](16684137205168eccf5a92ada47f5883928a58ba1815c)","설명":"스프라이트 렌더링할 때 UV 좌표를 이동시킵니다."},{"셰이더1":"Wave","셰이더2":"[gif](1668413755673c476bd19b1774a808c070a6f1a37d7a4)","설명":"특정 지점에서 원형 파동을 그립니다."},{"셰이더1":"Glitch","셰이더2":"[gif](166841389198235926a2352554e5fa7634e64c2ab2e7b)","설명":"무작위로 스프라이트의 다른 구역을 샘플링합니다."},{"셰이더1":"GrassMovement","셰이더2":"[gif](16684139052283945063a36ea4c02b3f33b2dfcc0c1bc)","설명":"풀이 흔들리는 듯한 효과입니다."},{"셰이더1":"Distortion","셰이더2":"[gif](166841391898321b73ca5b9884b8aa4141328b906457d)","설명":"엔티티를 왜곡합니다."},{"셰이더1":"Ripple","셰이더2":"[gif](1678959633804aacda73d12264dc0be37ffb71af134dd)","설명":"잔물결 효과를 적용합니다."}]

## Blurry

스프라이트를 흐려 보이게 하는 효과입니다.

[{"셰이더1":"Pixel","셰이더2":"[png](16684141311201c1f06b39e27416b96255925150be57c)","설명":"스프라이트를 픽셀화합니다."},{"셰이더1":"ChromaticAberration","셰이더2":"[gif](16684144518044c88ee2c6581467cbd882eab77e2bed6)","설명":"색수차 효과를 적용합니다."},{"셰이더1":"Blur","셰이더2":"[png](16684144693599a45ff2fd5c34efb8bba4ee8d9ecdf7b)","설명":"흐림 효과를 적용합니다."},{"셰이더1":"MotionBlur","셰이더2":"[png](16684144858279a9c29b9aee64a65a3271537c4835c99)","설명":"방향성 있는 흐림 효과를 적용합니다."},{"셰이더1":"RadialBlur","셰이더2":"[png](16789605975780c74d541a0824bfea9f28e699737e860)","설명":"중앙 중심의 흐림 효과를 적용합니다."},{"셰이더1":"KuwaharaFilter","셰이더2":"[png](16789606314994a9b29416cc14c9ab2072cfd7e3f5a99)","설명":"kuwahara 필터를 적용합니다. Intensity를 조절하면 수채화 느낌을 표현할 수 있습니다. 도트 이미지에 사용했을 때는 큰 차이를 느끼기 어렵습니다."}]

## AlphaMask

스프라이트의 일부를 보이지 않게 만드는 효과입니다.

[{"셰이더1":"AlphaCutoff","셰이더2":"[png](1668414746608f412644c0aae4f7d913cd7ccfda21ac8)","설명":"투명도 낮은 부분은 렌더링하지 않습니다."},{"셰이더1":"AlphaRound","셰이더2":"[png](1668414760640a654dd3c8bc6429594372014855d9166)","설명":"기준 투명도보다 낮으면 알파 값을 0으로, 높으면 1로 처리합니다."},{"셰이더1":"Clipping","셰이더2":"[png](16684260189626d960534962e4a0589215d868f611bf0)","설명":"스프라이트 일부를 잘라냅니다."},{"셰이더1":"Mask","셰이더2":"[png](1668482058357b63335cd7bfb40ae87c30a952e404255)","설명":"스프라이트를 인수로 받아 마스킹 영역을 지정합니다.예) MaskTexture : 0005fdee112f4ab8a59764021ac1dda0 적용 [png](16684822611015fb0223e1b4844738039ffd237b746a5)"}]

## BlendColor

스프라이트의 색상이 적용되는 방식을 다양한 형태로 변형하는 효과입니다.

[{"셰이더1":"BlendDarken","셰이더2":"[gif](16684260934885895cb89035b485189cc3c2987d86870)","설명":"각 RGB 채널에서 더 작은 값을 사용해 어둡게 만듭니다."},{"셰이더1":"BlendMultiply","셰이더2":"[gif](166848152367162fef2866b0b475aac9f3635770d6466)","설명":"두 색상을 곱한 결과물을 표현합니다."},{"셰이더1":"BlendColorBurn","셰이더2":"[gif](16684261191845675af047a21421aa335ef5ae24e488c)","설명":"채도는 높이고 대비를 증대시키며 기본 색상을 어둡게 합니다."},{"셰이더1":"BlendLinearBurn","셰이더2":"[gif](1668426133282cddb3c0ee4fe4191bfecf3739a8c0677)","설명":"원본 스프라이트의 색상 대비는 유지하되 색상을 어둡게 합니다."},{"셰이더1":"BlendDarkerColor","셰이더2":"[gif](1668426170398e831fc11796e4fafbd329e11a1744bad)","설명":"Color와 스프라이트 중 더 어두운 색상을 적용합니다."},{"셰이더1":"BlendLighten","셰이더2":"[gif](16684261855583ea181a43a0c4925b6212596777e1fd5)","설명":"각 RGB 채널에서 더 큰 값을 사용해 밝게 만듭니다."},{"셰이더1":"BlendScreen","셰이더2":"[gif](1668426201094510bec9a701d434fa499d049c9506565)","설명":"혼합색과 기본색의 반전색을 곱하여 밝게 만듭니다."},{"셰이더1":"BlendColorDodge","셰이더2":"[gif](1668426214619ccd1f984bfac4ff8b6c62e2cc92bfabe)","설명":"채도를 높이고 대비를 증대시키며 밝게 만듭니다."},{"셰이더1":"BlendLinearDodge","셰이더2":"[gif](166842622931445eada41c5154dee92f5b5944142249f)","설명":"두 색상을 더하여 밝게 만듭니다."},{"셰이더1":"BlendOverlay","셰이더2":"[gif](16684262452622aa6ab0bbb9d432e94226ea8fe61e8e6)","설명":"어두운 색상에는 Multiply, 밝은 색상에는 Screen 효과를 적용합니다."},{"셰이더1":"BlendSoftLight","셰이더2":"[gif](1668426262251183016eda21c4e07b9e21e6879ca2b3f)","설명":"Overlay와 유사하지만, Overlay보다는 대비와 색조 차이가 작습니다."},{"셰이더1":"BlendHardLight","셰이더2":"[gif](166842627472882eb382dd2184fd88abf98d4ade02ef9)","설명":"SoftLight와 유사하지만 이미지 대비가 강하고 밝습니다."},{"셰이더1":"BlendVividLight","셰이더2":"[gif](166842629152549952cd63e774a36a4d9f5a3321b2086)","설명":"블렌딩할 색상이 어두우면 Color Burn 효과를, 밝으면 Color Dodge 효과를 적용합니다."},{"셰이더1":"BlendLinearLight","셰이더2":"[gif](1673418964186d00f27d5a60b4bd2939245ab8eb9f498)","설명":"LinearBurn과 LinearDodge 효과를 조합하여 적용합니다. VividLight와 비슷하지만 VividLight에 비해 대조가 증가하진 않습니다."},{"셰이더1":"BlendPinLight","셰이더2":"[gif](1668426308466df7b6151174b4c91bff2ff8069026131)","설명":"블렌딩할 색상이 어두우면 Darken 효과를, 밝으면 Lighten 효과를 적용합니다."},{"셰이더1":"BlendHardMix","셰이더2":"[png](1668426325065c2d5f6d9609e4eb3b025e6a01f55aeb8)","설명":"두 개의 이미지를 강한 색으로 섞습니다. 블렌딩 결과는 무조건 8가지 색상으로만 나타납니다."},{"셰이더1":"BlendDifference","셰이더2":"[gif](166842634679204790bae607048f1b20b6577182fd0b1)","설명":"두 색상의 차이를 반환합니다. 동일 색상이면 검은색이 됩니다."},{"셰이더1":"BlendExclusion","셰이더2":"[gif](1668426366592d90b1f754849452d9adb34b139062a36)","설명":"두 색상을 Exclusion 연산합니다. 동일 색상이면 회색이 됩니다. Difference와 달리 원본의 색조 대비가 약합니다."},{"셰이더1":"BlendSubtract","셰이더2":"[gif](166842638191501ba6d72ea244bf0b9825d54d2611095)","설명":"원본에서 색상을 뺀 결과를 반환합니다."},{"셰이더1":"BlendDivide","셰이더2":"[gif](1668426394581cb26db187efd4041905dbcd8b20c0465)","설명":"원본에서 색상 값을 나눈 결과를 반환합니다."},{"셰이더1":"BlendHue","셰이더2":"[png](16684264113953037882a6fc040878105a8508905e558)","설명":"명도, 채도는 유지하고 새로운 색상에 맞게 변경합니다. 새로운 색상이 무채색이면 원본도 무채색으로 만듭니다."},{"셰이더1":"BlendSaturation","셰이더2":"[png](1668426455903b9564b1fd8b84ac589fc78bf614869c6)","설명":"명도, 색조는 유지하고 새로운 색상의 채도에 맞게 변경합니다. 새로운 색상이 무채색이면 원본도 무채색으로 만듭니다."},{"셰이더1":"BlendColor","셰이더2":"[png](16684264237827483efddb1634d42bf77a1ca0b247de2)","설명":"명도는 유지하고 새로운 색상의 색조와 채도에 맞게 변경합니다."}]

## AlphaBlend

셰이더의 투명도를 변경하는 효과입니다.

[{"셰이더1":"Additive","셰이더2":"[png](1668515969651ddbdb3c1da904a82b6c8184c7347ce38)","설명":"물체 앞에 렌더링할 때 Additive 효과를 적용합니다."},{"셰이더1":"SoftAdditive","셰이더2":"[png](1668515996851bead4bcb2bfe4ceeabae9240247da0f8)","설명":"물체 앞에 렌더링할 때 SoftAdditive 효과를 적용합니다."}]

## Screen

스크린 전체에 적용하는 효과입니다. CameraComponent에만 적용할 수 있습니다.

[{"셰이더1":"LensDistortion","셰이더2":"[png](167896118717416bf94656d5344f18cae0a12cb3def94) [png](1678961600478271874df2997410684f8ba6c5f80c965)","설명":"렌즈 왜곡 효과를 적용합니다. (Intensity가 양수면 볼록렌즈, 음수면 오목렌즈)"},{"셰이더1":"Vignette","셰이더2":"[png](1678961508666ec8dd0224f3d431293b7b24a161305f6)","설명":"색상 있는 비네트 효과를 적용합니다."}]