# Basic shader tutorial

This tutorial will give you a brief understanding of how to create and use basic shaders on
`SpriteComponent`s with `PostProcess` and `PostProcessComponent` using Dart/Flutter and the Flame
engine.

This tutorial assumes that you have a working Flame project set up. If you don't, please follow
the [](bare_flame_game.md) tutorial first.

The tutorial consists of 4 steps. We will create a simple outline shader for sprites which have a
transparent background layer.

```{note}
This tutorial is intended to work on images with transparent
background, like `.png` files.
```

*Created by Kornél (Hoodead) Lapu.*


```{toctree}
:hidden:

1. Sprite Component         <step1.md>
2. Outline Post Process     <step2.md>
3. Shader                   <step3.md>
4. User Input               <step4.md>
5. Takeaways                <takeaways.md>
```