Unity Asset Shader FlatKit Manual
Unity Asset Shader FlatKit Manual
https://drive.google.com/open?id=1GQbTaZQmdmliz31bKxJDDSlhAz0vKgHQ3mxDfCV-iOw
Contents
Contents 1
1. Quick Overview 2
5. Additional scripts 15
5.1. UV Scroller 15
5.2. Constant Motion 15
6. Scenes 16
7. Presets 16
Flat Kit. User Manual. Page 2
1. Quick Overview
Thank you for purchasing the Flat Kit. We hope it will bring you some serious streams of inspiration
and suit your wide variety of design needs.
We’ve spent hundreds of hours to research, design and implement the right set of assets needed to
achieve a slick minimalist look. We hope it works for your project out of the box. If you have questions after
reading this guide, let us know at hi @ dustyroom.com.
To name Flat Kit a set of flat shaders, cel shaders or toon ones, would be a serious underestimation.
Yes, these all can be easily done. As well as countless other (maybe unseen before) styles. It can be sharp
flat, it can have one, two, nine steps of hard shadow, or soft-shaded, or gradient-shaded — with pale or acid
colors, it can have three gradiental effects (when you start thinking out of the box, the parameter like
‘Specular’, usual for, well, a specularity or a glare, here can act as your fourth shadow, or a gradient etc).
In case you already use any other flat-looking shaders, you will still find a variety of useful tools for
quick image processing. Particularly, later in the manual we’ll overview the Height Gradient mode of the
Stylized Surface Shader, the Fog Image Effect camera component, LightPlane shader effect etc. They have
quite little related to toon or cell shading, but in conjunction with a stylish flat or cel look, they add a whole new
life to your scene. Plus, they can be used out of context of non-photorealistic aesthetics. It is a spice that can
dramatically make your dish sweeter (more tasty).
Flat Kit was made with optimized and fast workflow in mind, so that one could fulfill the picture popped
up in the mind — as quick as possible, in various ways. This means:
● One task could be done in different ways. It is a multi-purpose set of shaders;
● Some outstanding graphical results can be achieved in minutes (given that you have your
models ready, there are lots in FlatKit);
● There is always an element of you-didn’t-think-it-can-be-done-this-way surprise thanks to
FlatKit deep yet streamlined interface.
For example, let’s take fog. Fog is usually a big part of any 3D environment, isn’t it? There are lots of
methods to implement fog into the scene, often complex and complicated. With Flat Kit, we decided to make it
as convenient as possible for the user end. So, the fog can be done in two ways.
● Using Fog Image Effect post-effect / camera component
● Using LightPlane shader
We are going to explain how these work and what are they down in the manual. Both ways
suit different needs, but they really do compliment each other.
Another example of multi-purpose nature of our shaders is cel shading itself. Now, it’s going to
take a whole chapter of this manual to elaborate on cel shading. For now it’s only worth mentioning that same
or similar results can be made using different parameters of the shader’s interface.
It’s important, because apart from the expected ‘Cel Shade parameter’, Flat Kit also has a bunch of
additional settings to explore. Each additional parameter of the shader adds an extra dimension of
possibilities. It’s like having purple color paint, then you have red, and blue, and yellow. Purple is cool by itself
and you already have it, but you can make it up by mixing blue and red. Or you can spare blue to match with
yellow — to get green. In any case you get your purple, and also, simultaneously — other combinations, often
surprising and inspiring. We’ll talk about the importance of such a potential later in the manual.
One of the big advantages of using these shaders is the fact that you don’t have to guess how the
colors will look on your scene. If you want precision and accuracy — you have it. Moreover, if you want
something unpredictable and you are trying to make your scene look different to spark your inspiration and
imagination, but not sure how, you can do this too! Remember, this is a set of shaders selected to complement
each other.
Flat Kit. User Manual. Page 3
Collection of shaders in Flat Kit. From a Shader drop-down, hover the FlatKit sub-menu and choose a
shader
‘Stylized Surface’ shader in Single mode. Simple use case on the left, more options engaged on the
right
Color. This would be the color of your mesh (applicable to most cases, though you can make shader’s
other parameters override or mask this main color, if you wish so).
Cel Shading Mode. This is where you choose the style (mode) of your shading, the color of the
shading, and other respective parameters of the modes. Depending on the mode you choose the parameters
will look differently. So, let’s talk modes.
- None. Use this to achieve simple flat look or to get any other creative picture not involving cel
shading, however, the following parameters of Stylized Surface shader will still let you do this,
if you choose so.
Note, the flatness and actual representation of colors on the scene depend on the lighting of
the scene. In our demos we use Skybox as the source of lighting. Conveniently, there is a
Dependency slider on the Lighting panel of Unity, which tells how much of the influence the
Skybox provides. On minimum, there won’t be any shadows, as well as the colors will be
identical to those you would choose in Color block of the shader. On maximum, the Skybox
heavily dictates what the colors will look like. For more natural (not necessarily realistic — but
natural, organic look of the scene, it’s healthy to let Skybox influence the coloring of the
scene).
- Single. This mode provides you with one shadow of chosen Color. Self Shading Size is the
size of the cel. Larger values mean larger size of the shadow. Shadow Edge Size controls
Flat Kit. User Manual. Page 6
sharpness of the cel. The lower the value — the sharper the cel. The higher the value — the
more blurry is the shadow. Localized Shading is basically how condensed the shadow is.
Higher values represent sharper cel.
- Steps. Basically, you choose the shading color and number of steps to blend from main Color
into the color you pick up in Steps mode.
- Curve. The gradient, interpolated transition from one color to another.
In order to get Steps and Curve modes to work — as soon as you have number of steps (Steps mode)
or curve shape (Curve mode) chosen — the shader will ask you to save its utility ramp texture somewhere on
the disk. It will write the transition onto it. The texture will appear red in the editor. This is because internally we
use the R8 texture format for efficiency.
Steps (on the left) and Curve (on the right) Shading Modes of Stylized Surface shader. Inspector
interface
Extra Cel Layer. This is like another instance of Single Cel Shading mode. Works independently from
the main Cel Shading Mode. It means, you can make main Cel shading as None (flat), and add an Extra Cel
Layer. The result will be the same as if you would have used the Single mode. Or, make main Cel layer and
Extra Cel Layer almost identical, giving an Extra Layer a darker color, and making it smaller. This would result
in stepping, similar to Steps mode with 1 step.
Specular. You can make a, well, specular with this parameter. Also it can be used as another layer of
shadow.
Specular Color picks up the color of your glare, the parameter works in HDR. Specular Size
determines how big the specular is. Higher values mean bigger specular. Specular Edge Smoothness —
moving slider to the left decreases blurriness and makes specular sharper.
You can think of Rim as some kind of inner shadow and/or as inner glow. In one of the Fruit Vase
demo scene, there is an example of extensive use of Rim as outline. On Blueprint Grid demo scene Rim is
used as smooth inner glow. This parameter can be used creatively, for example, to substitute Curve mode or
Extra Cel parameter. Just reminding you that the name of any parameter should not be perceived literally,
most of them have many use cases. On the screenshot below with help of Suzanne the Blender Monkey we
tried to show a few instances of Stylized Surface shader with None mode selected (meaning no
straightforward shadows are applied), using orange color, and only Rim parameter enabled. The results are
variations of Rim section only. Imagine to add some creative Specular and Height Gradient…
Variety of uses of Rim parameter alone on Suzanne the Blender Monkey. Interface of Stylized Surface
shader with ‘None’ cel shading mode
Rim Color selects the color of the parameter. It works in HDR. Light Align parameter rotates the rim.
Rim Size controls how big the Rim is. Very high values can serve you as an unlit effect. Rim Edge
Smoothness — moving slider to the left sharpens the Rim, to the right — makes Rim blurry.
Although Rim option is creatively useful, there are two more obvious ways to add an outline using Flat
Kit: to use ‘Stylized Surface with Outline’ shader and/or to use ‘Outline Image Effect’ camera
component.We’ll talk about them both later in this manual.
TIP. Animate Cel layer size, Specular size or Rim size — to get a neat transition effect.
Height Gradient. This effect overlays a gradient from opaque selected color to transparent color onto
everything you’ve set before. Height Gradient is absolute, it depends on the position of the object on the
scene. If you would like to make a relative height gradient, duplicate a material and adjust the height gradient.
Flat Kit. User Manual. Page 8
Gradient Color picks the parameter’s own color to fade into from transparency. Center X and Y are
initial points from where the effect takes effect. Adjust these to move the gradient across the scene. Center X
is useful if you engaged Gradient Angle, which means the rotation of the Gradient. Size determines how steep
the transition of Gradient is. The further the value is from 0 (zero) — the more gradual the effect is. Negative
values flip the Gradient.
More about the nature and use of Height Gradient is covered in ‘Terrain’ Shader section of this
manual (chapter. 3.4).
Unity Built-in Shadows. If the object has ‘Receive Shadows’ option turned on in Mesh Renderer, you
have an ability to use Unity-processed shadows, as you would do in Unity Standard Material shader, with a
few extra-options.
Texture. If you’ve got a UV-unwrapped mesh, you can add a texture to it. If you work with
transparency in textures, please use Stylized Shader Cutout shader. It can see alpha on the texture as
transparency.
Flat Kit. User Manual. Page 9
‘Stylized Surface Cutout’ shader — Valley demo scene, trees branches material. Inspector interface
This is an appropriate time to talk about Height Gradient parameter FlatKit offers. You can use it as a
part of Stylized Surface, Stylized Surface Cutout and Terrain shaders. Height Gradient works wonders on
terrain in context of flat shading.
Usually flat shaded landscape objects lack organic embellishment the real world has. All
extra-shadows, small scale details, big and tiny grunge spots etc make the picture nonlinear to our eyes, thus,
interesting, engaging. With flat aesthetics — there is a color, there may be a shadow or shadows, maybe a few
models for the more natural look. The result — quite boring scene. If you want more polished look, you’ll want
to fight linearity, with Height Gradient coming handy. It stretches the interpolation between transparency and
its own color along vertical axis (by default) and multiplies the gradient over the colors you already have. You
can rotate the direction, so that it is no longer vertical but diagonal, horizontal and all in-between.
Flat Kit. User Manual. Page 12
This effect changes the scene dramatically. Now, the terrain has its shadow work you set on the
interface, and on top of that there is a gradient, subtle or obvious. Immediately, it adds depth and more
professional look to the scene.
If you work on some kind of an environmental landscape object but do not use Unity Terrain, please
use Stylized Surface shader. Height Gradient is available there too.
Height Gradient on Unity Terrain (without on upper image, with — on lower one). Valley Demo Scene
Fog Image Effect camera component can be reviewed as a post-processing effect. It can be subtle,
like a mist in the lower part of the valley, or a dominant effect, as in completely hazed environment. Simply put,
it works in the following way. You decide whether you need only length fog or height fog or both. Then you
determine the bounds where it would take an effect. Then you choose colors along each dimension. And after
that, blend between distance and height. This effect starts from camera position up to the Near/Far, Low/High
bounds, meaning, your camera is the zero coordinate from where the fog spreads. Each camera on the scene
can have a separate independent instance of an effect.
Because Unity’s MSAA (multi-sample anti-aliasing, which is an option in the Quality Settings of your
project) does not apply to depth texture, there may be inconsistencies between the anti-aliased color image
and the unprocessed depth image. This may look as aliasing if fog intensity is set to a high value. Such
artifacts may only occur if using MSAA, so we recommend using screen-space anti-aliasing, such as in
Unity’s post-processing stack that you can import by going to Window - Package Manager in Unity 2018+.
When you click on any of the the color ramps (Distance or Height Gradient), the Gradient Editor pops
up.
Fog Image Effect is being used in Wanderer demo scene (more subtle) and Valley Demo scenes
(more accentuated). For the Valley demo scenes we prepared a couple of presets to be found in the demo
scene folder.
Flat Kit. User Manual. Page 14
Gradient editor controls the colors of the gradient. To open it, click on Distance Gradient or Height
Gradient. The bottom row of breakpoints (pointing up) is the selection of the colors. The above row (pointing
down) controls opacity of the area it points at; opacity value of one breakpoint fades into the opacity value of
the adjacent one. Same for colors.
TIP. If you want the area close to you to be without fog, apart from increasing Near parameter, you
can open up the color ramp(s), add a breakpoint next to the leftmost one on the ramp, select leftmost one,
make it transparent (see screenshot of Gradient Editor below). The breakpoint you created (opaque, next to
the transparent one) becomes your distance or height control.
Please, note that Outline Image Effect is a global effect, as it is used as the camera component, which
is suitable for a consistent look of your project. If you would like to outline a particular object on your scene,
you can engage the shader instead — ‘Stylized Surface with Outline’ shader.
5. Additional scripts
5.1. UV Scroller
Used in Wander demo scene. It scrolls waterfall texture along the Y axis.
6. Scenes
We tried to depict the big spectrum of possibilities using various scenes. They are one of ten million
examples of possible Flat Kit use cases. Consider viewing them as starting points or macro-preset objects for
your own project.
Valley, Wanderer scenes are environmental. There we tried to show the work of both fog systems of
Flat Kit. Also it is one of perspectives of displaying the shaders — how these would look in large scene.
Valley uses Terrain shader and transparent textures inside Stylized Surface Cutout shader. Valley
demo scene is also an example of obvious, rather than subtle, use of Fog Image Effect. Once the scene is
loaded, you can scan through the Fog Image Effect presets to find which one you like more. There is a Presets
chapter later in this manual with explanation how to use them.
Blueprint Grid (Mugs) and Fruit Vase scenes are an exhibition of most sought use cases of cel / toon
shading.
However, you can find there more experimental stuff too. It has been a temptation to overpopulate the
scenes with content, because during making these included materials — literally dozens of interesting
by-product or work-in-progress materials showed up, but we had to discard them to keep the scenes clean.
Blueprint Grid is a descriptive one, there is a text telling what we had used to get the displayed
materials.
Fruit Vase is actually the collection of scenes. There is one vase with fruits across all scenes and each
scene is dedicated to some specific look, thus uses different set of materials.
Tree Island scene is a showcase of more cartoony use case. Imagine 3d-platform game with such a
look. Or Any other arcade game.
Room. We just had to include a room.
Retro Cars. Retro cars are curvy. What a possibility to show how shiny (or rough) the shaders can be.
7. Presets
Unity has its own Preset management system. The preset is the saved current state of the shader, in
our case, the Flat Kit material. The presets are available across scenes and can be saved whenever you want
inside the current project. For convenience, we saved the most useful presets inside shared presets folder
(Assets/FlatKit/PresetsShared) .
In Flat Kit you can find presets as *.mat Material instances (that you can drag and drop on the objects)
and *.preset Unity Presets (saved states of shaders that you can recall from interface of already applied
materials). The sets are identical. Unity presets (*.preset) are great when you have a material (*.mat) applied
to lots of objects and you want to swap it with a preset you already have.
To save the preset, select the material or an object with this material you want to save, click on the
‘mixer’ icon on top right of the shader interface on the Inspector panel. Then, the menu will pop up. Click ‘Save
Current to…’. Then you choose the destination. Once created, you can move the actual file wherever you
would like. All presets within a project will show up in the ‘Select Preset’ menu.
Flat Kit. User Manual. Page 17
Save, recall, experiment, discard bad results, save great results, all by using Unity’s preset system.
You cat A/B this way and share the shader’s parameters across multiple separate materials. Scan through
them and once you stumble upon something close to what you are looking for, adjust the one.
TIP. Naming the preset files as descriptive as possible is a gratifying practice. It would save your time
later when you gather lots of them. It would be easier to navigate through them and distinguish between them,
and also the proper names would remind you what you had in mind at the moment of saving the preset. Just
look at the screenshot below.