What is the easiest way to fade the screen?

[nomad-software]

I'm drawing a pattern on the screen and I want to fade it out as the pattern is updated to give the impression of it fading away.

I can't find out how to fade the screen though. I'm trying it like this:

fadeOpt = &ebiten.DrawImageOptions{}
fadeOpt.ColorM.Scale(1, 1, 1, 0.1)
fade = ebiten.NewImage(g.ScreenWidth, g.ScreenHeight)
fade.Fill(color.Black)

screen.DrawImage(fade, fadeOpt)

Which kind of works bit is there a better way?

[tinne26]

There are many ways. Your approach is perfectly fine, assuming you are storing the fade offscreen image, already painted, and progressively changing the alpha of the DrawImageOptions (otherwise creating a new image each time or filling it black each time would be unnecessary). EDIT: actually, creating a big image is unnecessary and may cause trouble when resizing the screen. Using a small image with a fixed size and scaling it is very similar but much better. See code samples at #2461 (reply in thread).

It's also probably the simplest way. For the sake of completeness, though, I'll mention some other ways:

• Use DrawTriangles(). With two triangles you can fill the screen without creating an image, so this would generally be more performant. Then you set the vertex colors as black and adjust the opacity as needed.
• Using a shader, for example with DrawRectShader(). You pass a uniform for the color or opacity, and the shader code would be fairly simple. This approach is also quite performant and it's fairly flexible if you want to customize the fading effect, e.g., progressively turning the screen contents to grayscale, removing color besides the darkening (or any other fancy effect you may want).

[nomad-software]

Have you got examples of the ways you mentioned? 🙏

I've been struggling with shaders because there is literally no documentation available on how to use them. I've spent about 2 hours trying to figure them out with no success. I can't find any resources online.

All i need is for each frame to get progressively darker and darker until it's black. It's such an easy thing to describe but amazingly difficult to implement using Ebiten.

My idea was to just draw a black box on top of the entire screen using an opacity but that seems difficult too.

[tinne26]

Sample code:

• Fade bad. Your original approach.
• Fade normal. Very similar to your original approach, but using a fixed size small image instead, and scaling it as needed. The subimage is used to avoid bleeding edges.
• Fade triangles. A reasonable approach using triangles.
• Fade shader. Notice that you need to copy the shader part of the code in a shader.kage file and put it next it to the main.go or whatever you name it to run it. Also, proper color blending would be done differently and would be slightly more complex, so this version is kinda "simplified". With white it works perfectly, but with images with a lot of color you would notice that there's some color shifting. There are many more ways to do it, but you can experiment by yourself.

[tinne26]

Also, shaders are documented at https://ebitengine.org/en/documents/shader.html, and there are many examples you can look at in the website or the repo (but the API is still considered experimental, so if you combine their natural complexity with their experimental status, you might feel that the tutorials are not good enough yet).

[nomad-software]

Thanks for your help, I'll take a look! 👍