Cleanable Contaminants Grime / Dirt Effect

[ultraflame4]

Some contaminants are cleanable (eg. bottles, tupper-ware containers). To indicate how dirty they currently are, we can introduce a "grime" effect. This will essentially be another sprite overlayed on top of the main contaminant sprite in unity (Some masking might be needed).

The above image shows the various stages of the grime from left to right (ignoring the first frame) as it gets from very dirty to less dirty. The grime is represented be the black spots and the contaminant NPC is represented by the red circle.

Essentially, as contaminant gets cleaned, the dirt slowly dissapears until it completely dissappears, when that happens the contaminant should become a recyclable.

• [x] #79

• [x] Create the grime effect asset (either aseprite, or a special material shader->for this needs to work in webgl)

• [ ] Implement the effect in unity

  • [ ] Create material to mask the grime effect (such that it conforms to the sprite shape.) (may not be required, seehow.)

• [ ] Create shadergraph for grime effect

• [ ] Create script to control the grime effect (control material) (and link it to the contaminants)

[ultraflame4]

Creating grime using texture + shadergraph(perlin noise) honestly doesn't look that good. Will manually create each grime stage instead. And maybe use shadergraph to mask it. See commit: c9e30a471444ce73688c81b4bdde4b3b89a08704

[ultraflame4]

I found a component call sprite mask which masks sprite, however it still need to be updated every frame. Created new component at Assets/Scripts/Others/SpriteRendererMask.cs to update the sprite mask's sprite using the sprite from the sprite renderer. This will essentially link the sprite renderer and sprite mask together and make sprite masks also work for animations.

Using sprite mask and sprite renderer together:

SpriteRendererMask code:

using UnityEngine;

/// <summary>
/// This component updates the SpriteMask's sprite to match the SpriteRenderer's sprite.
/// </summary>
public class SpriteRendererMask : MonoBehaviour {
    [Tooltip("The SpriteRenderer to get the source sprite from.")]
    public SpriteRenderer spriteRenderer;
    [Tooltip("The SpriteMask to update the sprite of.")]
    public SpriteMask spriteMask;

    void LateUpdate() {
        spriteMask.sprite = spriteRenderer.sprite;
    }
}

[ultraflame4]

Also created the sprites for the various sprite stages. (Grime progression is left to right)

[ultraflame4]

Using the new sprites as the grime overlay (with a little bit of color tinting) Also had to use Sorting Groups to ensure that the Sprite Mask worked properly (the grime was leaking into other sprites) ![Uploading image.png…]()

[ultraflame4]

Experimented again using shader graph and i think it looks better. Also more dynamic too. At 10% grime

At 50% grime 100% grime

Shadergraph: This method uses a combination of perlin noise and simplex noise and composites them to generate the pattern.

Will switch to this.

[ultraflame4]

Created GrimeController.cs to control the material.