Designing Materials

# Course Introduction

Material is the Entity that displays the method of rendering the Entity by various properties. Property of the Entity is altered according to an Entity rendering code. Shader is the code (or a script) that is used when rendering objects. Since the property and code of the shader cannot be switched to dynamic, effects are individually expressed by each shader. MapleStory Worlds provides a variety of shaders. Creators can create a Material and adjust the shader property for the desired aim.

# Creating Material

We'll take a look at how to create Material.

  1. New Materials can be created with one of the three methods below. 

[{"index":"1. Workspace [+] button","0":"[png](1686538286105d45a745926da4e4b812578f6b51690c2)"},{"index":"2. Workspace Context Menu","0":"[png](16865382991887b1f0a30aae44c31bb97404200571ed7)"},{"index":"3. Create Menu","0":"[png](168653831150808fff6cb82914b4691ae98c678a78ae6)"}]

  

  2. Create a Material, then specify a name. [png](166840323583571410bb4351f4e0badb9b51d500f8b81)



# Applying Materials to Entities

Let's see how to apply Materials to the Entity.

  1. After selecting Entity, click the [png](1668408907363c261c9faa43d4ee3b131624dd723e3a2) button in Property editor - SpriteRendererComponent - MaterialID. [png](166908403861011c64e140fd04f8f90bbdb8d5d57af59)   

  2. Select the Material you want from the Reference window. [png](1668409227396b253b59b89094a9c9ec4b914a1c29bb5)   

  3. Specify Shader type. [png](168681313976760c074e2954f4814a93d511c9b9e3c12)   
By utilizing the filter feature, you can narrow down and view only the shaders available for the selected component. [png](1727180781072360fe8c368824af7a5df25df3b8429d7)



# Shader Type

The rendering method differs by shader type, and adjustable properties also differ. Let's take a look at the shader types offered in MapleStory Worlds.

## Default

Basic Material. It's the state without any effects.

[{"index":"Shader1","0":"Default"},{"index":"Shader2","0":"[png](1668479786163abb0a4314fe34db0885f9d118d23236f)"},{"index":"Description","0":"Default is used when the Material is not specified or cannot be found."}]

## Outline

It's the effect that draws a contour line of the sprite.

[{"Shader1":"Outline","Shader2":"[png](166841095184460411e0fbd3d419cbe83b632bce31401)","Description":"Draws a contour line away from the sprite."},{"Shader1":"InnerOutline","Shader2":"[png](166841143439790c697d7e2f24b368d3a3ad635d19020)","Description":"Draws a contour line to the inner sprite."},{"Shader1":"ColorDiffOutline","Shader2":"[png](16684114971291ab4281d87cc4b9b87fd25f52356d572)","Description":"Draws a contour line by using the sprite color difference."}]

## ColorEffect

It's the effect that displays various colors on the sprite.

[{"Shader1":"Rainbow","Shader2":"[gif](1668413469593d7bd1d3a1aa44677b8ac611864878d88)","Description":"Blends with rainbow colors."},{"Shader1":"LineGradient","Shader2":"[png](1668413449478ceb1da170e9147d48914323930b9b404)","Description":"Gradationally blend 4 colors based on y axis."},{"Shader1":"VertexGradient","Shader2":"[png](16684135009255cd62251f9bc4a8c90b0430dff483926)","Description":"Gradationally blend 4 vertex colors."},{"Shader1":"RadialGradient","Shader2":"[png](16684135201985614fc9d040440078b52333b4e6f751a)","Description":"Gradationally blend center - external colors."},{"Shader1":"Gradient","Shader2":"[gif](1668413536391582e7b18622a46eeb8bc117524eead9b)","Description":"Displays a single color according to the time."},{"Shader1":"Reverse","Shader2":"[png](16684135490414f64d3e9f5ac40ed9d8ccec8a7b5f49d)","Description":"Output colors opposite to target colors."},{"Shader1":"GrayScale","Shader2":"[png](16684135604161d31df8cdb724a77b9b85129b1d5a79f)","Description":"Output in gray tone."},{"Shader1":"Hologram","Shader2":"[gif](16684135717173629a30e711f41c79d6ce3bd85fa0baf)","Description":"Output colored light effect to a certain direction."},{"Shader1":"LimLight","Shader2":"[png](1668413583454c85ff546505745bda50ecb4b3b1e1797)","Description":"Output bright light effect."},{"Shader1":"Posterize","Shader2":"[png](1668413596725492a72e7ca45438ebb10abb856ef3701)","Description":"Restricts the number of rendering colors."},{"Shader1":"ColorOverride","Shader2":"[gif](1668413607254b9983afe45d44979bf13be197d61c2fe)","Description":"Changes to a single specified color."},{"Shader1":"ColorGlow","Shader2":"[png](1678961863541f622336dc27645c9b69ccace791963fb)","Description":"Lightens areas of color similar to the color specified by GlowColor."},{"Shader1":"DropShadow","Shader2":"[png](1678962067474c059773fcc6c490981a9faf032335085)","Description":"Applies a shadow effect to the color specified by TargetColor."},{"Shader1":"ConcentrationLine","Shader2":"[png](1678959255414e67530f0ca6142cbbca85a7a939f3ea9)","Description":"Applies a saturated line effect towards the specified location."}]

## UVEffect

It's the effect that distorts a coordinate of the sprite.

[{"Shader1":"Noise","Shader2":"[gif](1668413949472f7b0b5a86aa4405ba3f4cccaec032045)","Description":"The Entity is constantly shaking."},{"Shader1":"RoundWave","Shader2":"[gif](16684136490085c94218d5b2f4a618666646fea88d23c)","Description":"Draw a concentric circle wave from a centerpoint."},{"Shader1":"UVScroll","Shader2":"[png](16684137205168eccf5a92ada47f5883928a58ba1815c)","Description":"Moves the UV coordinates during sprite rendering."},{"Shader1":"Wave","Shader2":"[gif](1668413755673c476bd19b1774a808c070a6f1a37d7a4)","Description":"Displays a circular wave at a certain point."},{"Shader1":"Glitch","Shader2":"[gif](166841389198235926a2352554e5fa7634e64c2ab2e7b)","Description":"Randomly sample the other section of the sprite."},{"Shader1":"GrassMovement","Shader2":"[gif](16684139052283945063a36ea4c02b3f33b2dfcc0c1bc)","Description":"Swaying grass-like effect."},{"Shader1":"Distortion","Shader2":"[gif](166841391898321b73ca5b9884b8aa4141328b906457d)","Description":"Distorts the Entity."},{"Shader1":"Ripple","Shader2":"[gif](1678959633804aacda73d12264dc0be37ffb71af134dd)","Description":"Applies a ripple effect."}]

## Blurry

It's the effect that blurs the sprite.

[{"Shader1":"Pixel","Shader2":"[png](16684141311201c1f06b39e27416b96255925150be57c)","Description":"Pixelates the sprite."},{"Shader1":"ChromaticAberration","Shader2":"[gif](16684144518044c88ee2c6581467cbd882eab77e2bed6)","Description":"Applies chromatic aberration effect."},{"Shader1":"Blur","Shader2":"[png](16684144693599a45ff2fd5c34efb8bba4ee8d9ecdf7b)","Description":"Applies a blur effect to the sprite."},{"Shader1":"MotionBlur","Shader2":"[png](16684144858279a9c29b9aee64a65a3271537c4835c99)","Description":"Applies an orientable blur effect to the sprite."},{"Shader1":"RadialBlur","Shader2":"[png](16789605975780c74d541a0824bfea9f28e699737e860)","Description":"Applies a centered blur effect."},{"Shader1":"KuwaharaFilter","Shader2":"[png](16789606314994a9b29416cc14c9ab2072cfd7e3f5a99)","Description":"Applies the kuwahara filter. You can create the feeling of watercolor by adjusting intensity.It is difficult to notice a big difference when used on a dot image."}]

## AlphaMask

It's the effect that makes the part of the sprite invisible.

[{"Shader1":"AlphaCutoff","Shader2":"[png](1668414746608f412644c0aae4f7d913cd7ccfda21ac8)","Description":"Does not render the part with low transparency."},{"Shader1":"AlphaRound","Shader2":"[png](1668414760640a654dd3c8bc6429594372014855d9166)","Description":"Processes the alpha value as 0 if it is lower than the transparency and 1 if it is higher."},{"Shader1":"Clipping","Shader2":"[png](16684260189626d960534962e4a0589215d868f611bf0)","Description":"Cut the part of the sprite."},{"Shader1":"Mask","Shader2":"[png](1668482058357b63335cd7bfb40ae87c30a952e404255)","Description":"Receive sprites as the parameter and specify the masking area.e.g. MaskTexture: 0005fdee112f4ab8a59764021ac1dda0 Application [png](16684822611015fb0223e1b4844738039ffd237b746a5)"}]

## BlendColor

It's the effect that alters methods of the application of sprite colors to various forms.

[{"Shader1":"BlendDarken","Shader2":"[gif](16684260934885895cb89035b485189cc3c2987d86870)","Description":"Makes it dark by using the smaller value of each RGB channel."},{"Shader1":"BlendMultiply","Shader2":"[gif](166848152367162fef2866b0b475aac9f3635770d6466)","Description":"Displays the outcome from multiplying two colors."},{"Shader1":"BlendColorBurn","Shader2":"[gif](16684261191845675af047a21421aa335ef5ae24e488c)","Description":"Makes the chroma high, increases contrast, and makes the basic color dark."},{"Shader1":"BlendLinearBurn","Shader2":"[gif](1668426133282cddb3c0ee4fe4191bfecf3739a8c0677)","Description":"Keeps the color contrast of the basic sprite and makes the color dark."},{"Shader1":"BlendDarkerColor","Shader2":"[gif](1668426170398e831fc11796e4fafbd329e11a1744bad)","Description":"Applies the darker color between the Color and the sprite."},{"Shader1":"BlendLighten","Shader2":"[gif](16684261855583ea181a43a0c4925b6212596777e1fd5)","Description":"Makes it bright by using the larger value of each RGB channel."},{"Shader1":"BlendScreen","Shader2":"[gif](1668426201094510bec9a701d434fa499d049c9506565)","Description":"Makes it bright by multiplying the mixed color and the inverted color of the basic color."},{"Shader1":"BlendColorDodge","Shader2":"[gif](1668426214619ccd1f984bfac4ff8b6c62e2cc92bfabe)","Description":"Makes the chroma high, increases contrast, and makes it bright."},{"Shader1":"BlendLinearDodge","Shader2":"[gif](166842622931445eada41c5154dee92f5b5944142249f)","Description":"Makes it bright by adding two colors."},{"Shader1":"BlendOverlay","Shader2":"[gif](16684262452622aa6ab0bbb9d432e94226ea8fe61e8e6)","Description":"Applies the Multiply effect to a dark color and the Screen effect to a bright color."},{"Shader1":"BlendSoftLight","Shader2":"[gif](1668426262251183016eda21c4e07b9e21e6879ca2b3f)","Description":"It's similar to the Overlay, but has smaller contrast and color difference compared to the Overlay."},{"Shader1":"BlendHardLight","Shader2":"[gif](166842627472882eb382dd2184fd88abf98d4ade02ef9)","Description":"Similar to SoftLight but image contrast is strong and bright."},{"Shader1":"BlendVividLight","Shader2":"[gif](166842629152549952cd63e774a36a4d9f5a3321b2086)","Description":"Applies the Color Burn effect if the color to blend is dark and applies the Color Dodge effect if the color to blend is bright."},{"Shader1":"BlendLinearLight","Shader2":"[gif](1673418964186d00f27d5a60b4bd2939245ab8eb9f498)","Description":"Apply the combination of the LinearBurn and LinearDodge effects. It is similar to VividLight but without increased contrast compared to VividLight."},{"Shader1":"BlendPinLight","Shader2":"[gif](1668426308466df7b6151174b4c91bff2ff8069026131)","Description":"Applies the Darken effect if the color to blend is dark and applies the Lighten effect if the color to blend is bright."},{"Shader1":"BlendHardMix","Shader2":"[png](1668426325065c2d5f6d9609e4eb3b025e6a01f55aeb8)","Description":"Mixes two images with strong colors. The blending result is unconditionally displayed in only 8 colors."},{"Shader1":"BlendDifference","Shader2":"[gif](166842634679204790bae607048f1b20b6577182fd0b1)","Description":"Returns a difference of two colors. If it is the same color, it will be black."},{"Shader1":"BlendExclusion","Shader2":"[gif](1668426366592d90b1f754849452d9adb34b139062a36)","Description":"Calculates Exclusion for two colors. If it is the same color, it will be grey. In contrast to Difference, the color contrast of the original is weak."},{"Shader1":"BlendSubtract","Shader2":"[gif](166842638191501ba6d72ea244bf0b9825d54d2611095)","Description":"Returns the result that deducted colors from the original."},{"Shader1":"BlendDivide","Shader2":"[gif](1668426394581cb26db187efd4041905dbcd8b20c0465)","Description":"Returns the result of the color values being divided from the original."},{"Shader1":"BlendHue","Shader2":"[png](16684264113953037882a6fc040878105a8508905e558)","Description":"Keep the brightness and chroma, and change it so that it fits a new color.Make the original with achromatic colors if a new color is an achromatic color."},{"Shader1":"BlendSaturation","Shader2":"[png](1668426455903b9564b1fd8b84ac589fc78bf614869c6)","Description":"Maintains the brightness and tone and changes to fit the chroma of the new color. Make the original with achromatic colors if a new color is an achromatic color."},{"Shader1":"BlendColor","Shader2":"[png](16684264237827483efddb1634d42bf77a1ca0b247de2)","Description":"Maintains the brightness and changes to fit the tone and chroma of the new color."}]

## AlphaBlend

It's the effect that alters the transparency of shaders.

[{"Shader1":"Additive","Shader2":"[png](1668515969651ddbdb3c1da904a82b6c8184c7347ce38)","Description":"Applies an Additive effect when rendering in front of the object."},{"Shader1":"SoftAdditive","Shader2":"[png](1668515996851bead4bcb2bfe4ceeabae9240247da0f8)","Description":"Applies a SoftAdditive effect when rendering in front of the object."}]

## Screen

This effect is applied to the entire screen. It can only be applied in CameraComponent.

[{"Shader1":"LensDistortion","Shader2":"[png](167896118717416bf94656d5344f18cae0a12cb3def94) [png](1678961600478271874df2997410684f8ba6c5f80c965)","Description":"Applies a lens distortion effect. (Convex lens if intensity is positive number, concave lens if negative number)"},{"Shader1":"Vignette","Shader2":"[png](1678961508666ec8dd0224f3d431293b7b24a161305f6)","Description":"Applies a colored vignette effect."}]