Basic shader tutorial

This tutorial will give you a brief understanding of how to create and use basic shaders on SpriteComponents 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 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>