Main references to create Anime Toon Shading was “Gravity Rush” and “Dragon Ball FighterZ” so if you want to achieve this kind of feeling with dynamic cartoon lighting in your game, then this package will be a perfect starter for you.

Anime Toon Shading is a post-process independent approach to cartoon style effect, which means it uses geometry based shading model that allows customizing every character on the scene to specific lighting conditions and works perfectly in the forward rendering mode.

Package contains a full lighting system that supports single dynamic directional light and multiple dynamic point lights. Perfect choice for VR games as well as mobile.

Features

• Advanced material configuration instanced per object specular/shading/outline
• Dynamic directional light support
  Multiple dynamic point lights that can affect actors
• Very fast and GPU friendly
• Material function, which can be used as an unlit/lit material
• Tested on meshes from paragon (great for stylizing assets)
• Geometry based shading. No need to use post-process uses, forward rendering mode works in VR and mobile.
• Interface for an easily combined dynamic toon lighting system with any actor
• Outline shell mesh (material for additional mesh rendered from inside)
• Multiple parameters designed with thinking of customizing toon shading on characters
• Anisotropic specular (hairs), specular matcaps support (Eyes, Metal)
• Easy to integrate with external post-process.
• Toon specular parameters: Specular size, color, and translucent, softness
• Toon shadow parameters: Glossy effect
• Aberration effect, softness, width, two shading methods (texture and smoothstep function), multiple shading textures
• Toon outline parameters: width, softness, color, and translucency

Gallery

Release changelog

Documentation

Geometry based shading

There are two types of packages on the marketplace that supports toon/cel-shading in UE4. Post-process based (other packages) and Geometry based (this package). Both have cons and pros and It is important to understand the difference to know with them chose. A table below shows basic differences and possibilities that will be supported or blocked depending on what you choose.

Probably there will be support for the post-process shading model in future versions of this package but in the current state, I’m focused on geometry-based shading.

Get started with material

This part of the documentation covers the basics of creating material in Anime Toon Shading. The system is divided into two types of material that can be used on geometry lit and unlit. Both types of material support similar functionalities and parameters but there is a small difference:

• Unlit (M_ToonShadingUnlit) – Very fast but can’t receive shadows.
• Lit (M_ToonShadingLit) Little slower but allow to receive shadows.

To start working with Anime Toon Shading you need to create material for your mesh:

1. Chose the material type that will be used on mesh for example M_ToonShadingLit.
2. Click right and select “create new material instance”.
3. Open material and set up parameters of new material as you like to see an object on the scene.
4. Apply created material to your mesh.

Using directional light

Directional light can be used for setting up global lighting that will be affecting all objects on the scene. Just drag and drop BP_ToonDirectionalLight on scene and setup parameters.

Using multiple point lights

Anime Toon Shading supports multiple point lights that are combined into second directional light data and applied to the base shading model. That functionality can be used for light flashes like explosions, some additional lighting on the scene, and shadowing in darker places where the directional light should not affect the object.

The dynamic light will only affect objects that implement properly BI_ToonShading interface. You can use an example implementation and inherit a base class of static mesh (BP_ToonStaticMesh) and skeletal mesh (BP_ToonSkeletalMesh)

1. Content Browser -> Crete Actor
2. Select BP_ToonStaticMesh or BP_ToonSkeletalMesh
3. Setup default mesh in the blueprint.
4. Set Toon Shading material on the mesh (Get Started section describes how to create new material).
5. Drag and drop created actor to your level.
6. Drag and drop BP_ToonPointLight to your level. Set up parameters:
   

   BP_ToonPointLight
   Intensity	Light color and shadow multiplier.
   Light Color	Color of direct lighting.
   Shadow Color	Color of indirect lighting.
   Position	The position of the light.
   Scale (radius)	The radius of lighting.
   Base Light Weight	How base directional light color affects meshes in this light. 0 means additive, 1 means override the base light.
   Base Shadow Weight	How base directional light shadow affects meshes in this light. 0 means override the base light direction 1 for no change.
   Scene	Will be updated automatically after adding light to the scene.

7. Drag and drop BP_ToonScene to your level.
8. Select BP_ToonScene and add Lights and Actors that should be managed by the lighting system.

Custom character interface

Sometimes there is no possibility to inherit example actors (BP_ToonStaticMesh, BP_ToonSkeletalMesh, ThirdPersonCharacter) that contains the implementation of dynamic lighting. Fortunately “Anime Toon Shading” is very extendable, you can modify your own character to be affected by dynamic Toon Shading lighting as well. It’s a bit complicated but believe me, I did everything I could to make it user-friendly.

1. Open Character blueprint. Add BP_ToonScene reference attribute to your actor. Variables->Add:
   • Variable Name Scene
   • Variable Type BP_ToonScene
2. Add a new component BP_ToonShadingComponent that will be used to communicate with the scene.
3. Add a new function Toon Shading that will be evaluated to update lighting on the object. Functions->Add.
   
4. Add ApplyShading evaluation for every mesh in pawn that should be affected by lighting. In this case, the character contains one Mesh.
   
5. Call function in the constructor to activate lighting on start.
   
6. Implement the ToonShading interface. Open Class Settings and add interface BI_Toon_Shading to list.
   
7. Call toon shading update on events BeginPlay and IToonShading
   

Remember! This modification creates dynamic material instances to communicate with the scene manager, you should use them instead of creating a new one. Custom character interface

External post-process

It’s a good practice to combine two types of toon shading systems for example by using “Anime Toon Shading” for characters and post-process material for the environment.

Post-process based toon shading should support excluding the shading materials that using “Anime Toon Shading”. Generally in this kind of problem full-screen mask tells the post-process shader where to live pixel is not changed. It can be implemented easily by using a custom depth stencil mask. This is a simple example of how to integrate this package with post-process material.

1. Set up your project to use the stencil buffer. This functionality is required because we need an additional buffer to mark pixels rendered by AnimToonShader.
   
2. Select mesh that is using “Anime Toon Shading” material and set stencil mask value:
   

   Remember: It is just an example configuration of the mask. If you already using custom depth stencil for outlines then you should reserve one bit for “Anime Toon Shading” masking.

3. Use MF_PostProcessMask material function as a mask on your post-process effect:
   

Outline shells

The outline effect for forward rendering can be realized by creating a second expanded mesh with front face culling (rendered from inside). “Anime Toon Shading” contains tricky material that can do it for you. You can find an example of this part of the documentation in Demo/Characters/ThirdPersonCharacter blueprint.

1. Duplicate mesh component in your character and rename to ‘Shell’.
2. Initialize Shell in construction script
   
3. You can add the attribute ShellColor to your blueprint or use MakeVector. The alpha value in this vector is responsible for the outline width.
4. The shell material supports the vertex color alpha multiplier. You can locally control the width of the shell by painting (alpha channel) on the vertex color of the mesh. It is a cool feature used in the current generation games.

Flat surfaces

Questions & Answers

SDF Robo Progress Bars is an advanced master material usable for creating a wide range of customized progress bars. Package contains over 50 predefined excellent styles easy to use for various types of games. Material supports advanced customization that covers most of the possible design requirements. Thanks to using SDF functions instead of huge textures all created progress bars always stay sharp, well aliased.

Features

• Two types of shape circle bar/rectangular bar. Fully callable and extendable for more shapes.
• Signed distance functions based rendering. The shape is generated from mathematical functions that give the quality of ‘Vectorized’ graphics without using huge resolution textures.
• Configurable for all resolutions.
• KISS – One mesh per bar.
• Can be mixed with SDF and standard textures.
• Rounded corners of shape colors patterns and progress bar showing.
• GPU friendly, one draw call per bar.
• 23 different example themes that can be adjusted to requirements.
• Unlimited user-defined themes can be created easily using the available properties.
• Multiple advanced effects of progress bar – burning/fade.
• Easy to integrate witch UMG.
• Supported reparenting of themes between different shapes.
• Flexible modification options, each bar presented in this package can be created directly from another.

Gallery

Release notes

Documentation

Showcase and material parameters

Creating a new bar

1. Select bar from group ExamplesSurface/ExamplesUmg. Find a bar that looks closest visual to effect that you would like to achieve (all bars share the same functionalities so can be modified one to another but it’s faster to start from some point).
   
2. Create duplicate or material instance from the selected bar.
3. Set the name for the newly created instance of material. It’s good practice to start name from MI_Surface or MI_Umg. Open material and modify parameters.
4. Modify the parameters of the new bar according to your requirements.

Basic types of bars

All bars used in the game should be created as Material Instance that derives from the build in types of materials. Multiple combinations of bars are possible based on bar shape and bar type. The base bar instance name is constructed according to the specified naming convention:

MI_ + BarType + BarShape + Bar

BarType – System is divided into two separate material instances that allow using this system on the surface meshes as well as on UMG widgets.

• Umg – material can be used on hud controls (widget elements).  
• Surface – material used on regular meshes (planes in 3d space). Check ExamplesSurface folder to see all examples prepared for surface bars. UseInterface switch set false (for optimization). 

BarShape – Allow to chose the basic method of bar visualization.

• Rect – classic rectangular bard that fills from on side to another.
• Circle – advanced bar that fills the circle.

Check ExamplesUmg, ExamplesSurface, ExamplesUmgCircle, ExamplesSurfaceCircle, folder to see all examples.

Using Robo Bars in UMG

1. First place the Image widget on the hud widget.
2. Then apply the progress bar material onto your image widget by setting the parameter Brush->Image as presented below:
3. Setup the material parameter called “Progress” in blueprint graph. You have to get dynamic material instance from the widget and set the parameter value.
   

4. Progress is a basic value parameter in the master material  in range between 0.0 (empty) and 1.0(fully filled) used for setting how much progress bar is filled.

Debug options override the behavior of progress bar by default to visualize the effect of changes in the preview. Find material that you used in your progress bar and disable the debug option by setting:
Progress->ProgressDebug = false

A simple example of using Robo Bars is presented in the demo (Demo/Blueprints/BP_Hud)

Signed Distance Fields

Signed Distance Field is an image where each pixel contains the distance to the nearest point on the boundary. An additional sign of distance allows determining if the pixel is inside or outside rendered shape. SDF image that looks like gradient can be loaded from a file or generated by mathematical functions called Signed Distance Functions.

One of the biggest benefits of using this method is very cheap and configurable antialiasing effect. The same method is used to render outlined/smooth high-quality fonts in Unreal Engine 4 based on low-resolution textures. 

Package SDF Robo Progress Bars uses this method to render all bars in multiple ways.

• drawing smooth outlines, shadows, edges
• configurable division on bars
• combining multiple shapes
• round corners using smooth min function

Master material parameters

The progress bar is divided into 4 basic layers that are combined into one using translucent blending. Each layer is configurable and implements some additional effects.

• Outline layer (white)
• Shape layer (black)
• Progress layer (red)
• Pattern layer (blue) 

Outline layer

The outline effect is very common in progress bars, it’s a great tool to highlight the shape or separate bar from the background to make it more readable. Outline layer is represented by the base shape. In final effect, it can be rendered as shape, filled background or stay invisible.

Shape layer

Shape layer is to describe the shape of the bar and it is represented by combined signed distance functions. Shape layer is always active.

Progress layer

Progress layer is used for drawing current progress (how much shape is filled by color/texture/effect).

Pattern layer

Pattern layer describes the scheme of a division the bar into two colors.

Layers antialiasing

Each layer of bar contains parameters designed especially to control antialiased and smooth edges. This functionality allows to set up hard or soft blending between lower and higher layer. 

From UMG to Surface

Sometimes there is a need to change Surface material into UMG to render on hud without loss of all parameters set in the material. This operation is well supported by UE4.

1. Open material that needs to be changed to support UMG/Surface mode,
2. Find option General->Parent and change to MI_Umg*Bar/MI_Surface*Bar depends on your needs.

Explanation of UE4 mechanism. There are two differences between UMG and Surface materials:

UMG does not support vertex interpolators so UseInterface needs to be set false in materials used in UMG. Surface allows for vertex interpolators so it is used as an optimization.

Questions & Answers

Fast Stylized Procedural Sky is a unique dynamic sky material and advanced weather system that is perfectly balanced between quality and efficiency. Designed and optimized specially for Mobile, Virtual Reality, and stylized PC/Console games.

Features

• GPU friendly works efficiently even on VR/Mobile. Unlit material without blending uses one draw call
• Over 60 parameters to customize
• Network replication supported
• Clouds lighting with scattering and shadows changes depending on sun position
• Clouds shadow casting, height fog, and static and dynamic skylight cubemaps
• Configurable sun and moon, lens effect, eclipse and stars scintillation
• Atmospheric sky gradient with tilting in sun direction
• Customizable automatic clouds UV calculation
• Moon normal-mapping and lighting calculated based on relative sun and moon position
• Time of day curves and advanced preset system
• Multilayered clouds
• Wind direction and clouds speed
• Smooth transitions between weather states based on preset system
• Landscape backgrounds interleaved with clouds, static clouds, and stars layer
• Skydome and skysphere mode
• The material is based on the new unpublished before method for fast calculation of procedural clouds lighting. You will not find this solution anywhere else!

Technical details

• Sky material  (ONLY 150 instructions! and ONLY 4 texture samplers used!)
• Directional light shadow material.
• 1 blueprint that uses material and implements time of day and preset system
• 1 static skylight cubemap recapture helper blueprint
• 1 Sky shadow material
• 3 Skydome and Skysphere meshes
• 10 tilled clouds textures 512×512 with encoded four depth traces on channels
• 1 Moon normal map texture 512×512
• 1 Background equirectangular texture 2048×1024 (R-stars, G-Background clouds, B-Distortion clouds)
• 8 Color curves for simulating the day and night on Earth
• 12 presets of weather (sunny, cloudy, foggy, snowy, smoky, stormy, clean, rainy, half sunny, gloomy, blizzard, overcast)
• 3 time of day presets
• 3 Landscape backgrounds textures 4096×1024 for skydome (depth encoded as alpha)
• 1 Landscape background textures 4096×2048 for skysphere (depth encoded as alpha)
• 4 example static cubemaps for default skylight

Showcase

Release notes

Documentation

Get started

The easiest way to start working with Fast Stylized Procedural Sky is to For start watching the tutorial that shows how to use basic parameters of the blueprint:

1. Unpack FastStylizedProceduralSky into Content in your project.  
2. Open project and you should see a FastStylizedProceduralSky package with the following content:
3. Drag & Drop BP_FastStylizedProceduralSky on your scene. (Remember to remove the old  sky that you used before on your scene you don’t need this anymore)
4. Select FastStylizedProceduralSky blueprint that you just put on the scene and set up lights in the external tab:
   

   Actors
   Sun Light	External directional light used for lighting from the sun. The system will automatically change the direction and color of this light during the time update.
   Moon Light	External directional light used for lighting from the moon. The system will automatically change the direction and color of this light during the time update.
   Sky Light	External skylight used for global lighting on the scene. System recapture during the update. The frequency of recapture can be changed by.
   Height Fog	External fog used for cover the scene by fog. System changes the color of fog based on time of day.

5. Press play and enjoy the show.

Remember! Only movable light can be changed by Fast Stylized Procedural Sky. 

Remember! Enable dynamic lighting (no lightmaps) in projects settings to fully exploit the  abilities of the time of day cycle.

Sky system

Fast Stylized Procedural Sky is divided into a few basic systems that can work in cooperation as well as in separation either systems can stay inactive for manual customization.

All default properties of Fast Stylized Procedural Sky blueprint are editable only if Weather Preset System and Time of Day System is disabled. Three steps are needed to disable both systems:

• (Time Of Day) Use Time Of Day Curves = false, 
• (Time Of Day)  Time Of Day Change Mode = BlueprintDefaults
• (Weather Preset) Weather Change Mode = BlueprintDefaults

From this time all default properties of the sky can be manually customized for specific weather and time of day conditions.

External data

External options in Fast Stylized Procedural Sky blueprint allows stylizing final result for wide range types of games.

Fast Stylized Procedural Sky supports casting shadows from the sun on the ground.

This effect is implemented based on Light Function material that unfortunately is not supported on mobile.

Time of Day system

The time of day system is responsible for the passage of time calculations celestial movement and sampling curves of colors over time-based on sun height.

Time of day system changes a number of parameters of the sky based on time of the day like sun color, clouds colors, fog colors etc. The system can be updated in two modes:

• curve system
• preset system

Both modes exclude each other to change between these modes use flag Use Time Of Day Curves. Here is the list of  parameters that can be controlled by each of the systems:

Time of day curves

List of all Time Of Day settings can be controlled by curves. The curve system is active only when Use Time Of Day Curves = true. All defined curves are sampled based on the sun height. Mapping from time to sun height:

If the curve is not defined in the Time Of Day system then sky uses the default parameters from the time of day preset.

A simple example that shows how to change the horizon color using the time of day system:

1. Find curve to change in sky blueprint: Blueprint->SkyLowerColorCurve
   
2. You can edit the existing C_SkyLowerColor or duplicate the curve and replace a value of the SkyLowerColorCurve parameter in the blueprint.

Time of day presets

Basically the preset is a collection of predefined Time Of Day parameters that can be loaded to the sky. The preset system allows interpolating between these parameters and load custom settings for specific conditions. Time of day presets library can be found in TimeOfDay directory there are three basic examples presets BloodyMidnight, BlueNight, Pinky.

Time of day preset system is active only when Use Time Of Day Curves = false.

There are multiple methods to activate preset in the project that can be defined in Change Mode:

Adding a new preset to the library

The library of time of day presets can be easily extended. Few steps are needed to create and customize a new preset:

1. Open Select TimeOfDay directory and preset that will be extended.
2. Click right and select the option Create Child Blueprint Class.
3. Set the name and attributes in default properties of the newly created class.
4. Now preset is ready to use. Add preset to Time Of Day preset List in Fast Stylized Procedural Sky blueprint and start using as described in the section dedicated using a standard library of preset.
5. There is no preset editor. Just edit preset settings in the blueprint on the scene. Results of your changes you will see in the scene preview. After preset is finished just copy preset settings group and paste to your preset class.

Preset settings are stored in structure so you can copy current settings of the sky to your new preset. Change in preview and then copy to preset – It is the easiest way to tweak parameters for preset. The other method to updating the presets is by modifying a preset that is set as “selected” and click “reload selected” after finishing the modifications to see the result.

Event-driven time

Fast Stylized Procedural Sky has external functions that allow controlling the time of day for example from the level blueprint.

Weather system

Fast Stylized Procedural Sky comes with a library of presets for different types of weather: cloudy, sunny, clean, rainy, stormy, foggy, overcast, half sunny, glowy, blizzard, stylized. Each preset is just a list of predefined parameters that will be loaded to the sky after activation. The preset system manages the weather preset selection and interpolation between them.

There are multiple methods to activate preset in the project that can be defined in Weather Change Mode:

Event-driven weather

Fast Stylized Procedural Sky system can be configured to changing presets by events from the game. There are a few functions that can be used for steering presets:

• Set Preset Change Mode – Allow to change mode and duration of preset that is used in modes other than Blueprint Default.
• Set Preset External – Sets the preset from the library. Transition duration is how long the weather will be in transition.
• Set Preset External – Sets the preset from the list of presets by index. Transition duration is how long the weather will be in transition.

Example:

Adding a new preset to the library

Sometimes the game requires unique conditions for the specific situation in the game. The library of presets is expandable and weather designers can create their own presets and share parameters with other users of the system. Each preset is defined as Blueprint Class that extends from WeatherPreset class.

Creating a preset:

1. Select preset that will be extended.
2. Click right and select the option Create Child Blueprint Class.
3. Set the name and attributes in default properties of the newly created class.
4. Now preset is ready to use. Add preset to Weather preset List in Fast Stylized Procedural Sky blueprint and start using as described in the section dedicated using a standard library of preset.
5. There is no preset editor. Just edit weather preset settings in the blueprint on the scene. Results of your changes you will see in the scene preview. After the preset is finished just copy the weather preset settings group and paste it to your preset class.

Lightning effect

Fast Stylized Procedural Sky supports new lightning system since update 2.1. The example of using a lightning system is presented in the demo map Demo/Maps/AnimeLightningMap.

Basically, the BP_LightningController actor is responsible for controlling attributes like lightning source location/rotation/area/frequency and update of sky settings. 

Step by step explained how to use BP_LightningController:

1. Place BP_LightningController on your map. 
2. Setup the location of the actor to location above the scene (X=0.000000,Y=0.000000,Z=50000.000000). The volume of the actor presents the area of the lightning effect.
3. Change the External Parameter Sky to BP_FastStylizedProceduralSky actor from your map.
4. Select BP_FastStylizedProceduralSky to find Sky Material and open. Switch the UseLightning value in the material to true.
5. Run the game I watch the lighting effect.

Lightning Activation

The BP_LightningController is automatically active on the map but can be activated by events as well.  Set the activation loops value to 0 to control the activation by yourself. Then use Activate and deactivate events in your game to run the effect during the storm.

Lightning Fast

Lightning Fast is powerful combination materials and blueprints that implement a wide range of realistic and stylized electricity effects this external package can be easily integrated with Fast Stylized Procedural Sky.

Only a few steps are needed to integrate Lightning Controller with lightning Bolt from Lightning Fast:

1. Drag and drop LightningFast/Blueprints/BP_LightningBolt blueprint n the scene where Lightning Controller works.
2. Scale the lightning bolt actor to be visible from a large distance: Try to use Scale (50,50,50)
3. Set Activation Loops in Lightning Bolt blueprint to 0. It will disable auto-activation and allow you to control the lighting effect using a controller.
4. Implement your lightning effect trigger by binding to OnActivated delegate from Lightning Controller.

   

After these few steps lightning bolt effect will be shown at location and rotation randomized in Lightning Controller just after the lightning activation.

Lightning Fast use case is just an example, you can play sound or even spawn other effects/particles using activation event.

Skylight update

The Skylight actor captures the distant parts of the scene and using result data to compute lighting.  This actor can be very well integrated with Fast Stylized Procedural Sky. There are two methods to update the sky during changing the weather and time:

Fast Stylized Procedural Sky allows configuring skylight update to minimalize the costs.

Using sky spheres

Fast Stylized Procedural Sky supports rendering on skydome as well as sky sphere. Skydome is set as the default option. It is required to do a few important steps to switch sky into Skysphere mode:

1. Switch material to sky sphere UV: Open SkyData/IM_DefaultSky  and change UseSkydomeUV = False.
2. Set the sky sphere mesh in the blueprint:

   Open BP_FastStylizedProceduralSky and find SkyMesh component.  
   Change StaticMesh=SM_Skysphere or SM_SkysphereFlat (Flat is deformed but looks better with height fog).

3.  Change world layer texture used on the sky to the sky sphere:
   Select BP_FastStylizedProceduralSky
   Change WorldLayerTexture=T_SkysphereMoon

Additional material effects

There are few features in Fast Stylized Procedural Sky that are disabled in default material. It is because not all users need these advanced options and hitches on efficiency are not good enough to enable all of them by default.

To change these parameters you can create your own instance of sky material from M_BaseSky as well as modify SkyData/IM_DefaultSky. Reference to sky material instance can be set in sky blueprint parameter: External->SkydomeMaterial.

Moon movement

Shading of the Moon is always calculated based on the position relative to the  Sun it is hard to set up at first but results are very realistic. This is automatic so there is no need to care about the direction of shading on the Moon. There are a few important parameters that allow setting the moon movement:

Questions & Answers