Skip to main content

On Sale: GamesAssetsToolsTabletopComics
Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

Nice Game! I also liked the background effect you did, do you mind me asking how you did that?

(1 edit)

If you download the .love file, rename it to .zip and unzip it, there’s a file called bg.lua, as well as a bunch of files “bg.png”, “bg2.png”, … and a bunch of files “bg-progressmap.png”, “bg-progressmap2.png”, … those are the ones making up the effect. Feel free to reverse-engineer it and use it in your game!

Essentially, the effect consists of two layers. There’s a colourful background (which can itself also have a pattern on it), and there is a “progress map” which is grayscale, and layered on top of it.

at time 0, the progressmap masks the background so that only parts of the background that are behind perfectly white pixels (#FFFFFF on the progressmap) are displayed.

at time 1, the progressmap masks the background so that only parts of the background that are behind slightly less white pixels (e.g. #FAFAFA) are displayed

at time 255, the progressmap masks the background so that only parts of the background that are behind perfect black (#000000) are displayed.

Essentially there’s a sliding window that’s over time being slid over the progress map. The sliding window at every point in time determines which brightness values of the progress map mask or unmask the background. This means if you have a white-to-black gradient from left-to-right, and a white background image, you will just get a white stripe travelling from left to right. If you draw with a brush that loses its colour over time (starting out e.g. white and then fading to black) you will get a “fireworks-like” effect (kinda like in tron legacy) tracing out the line you’ve drawn.

From there on out, it’s really just a matter of finding a bunch of interesting patterns (ideally with a bunch of different grayscale values) and creating interesting backgrounds that get masked/unmasked. You can find a lot of stuff that ends up really interesting looking, vector patterns, fractals etc. I turn them grayscale and sometimes overlay a dithering pattern. Applying a gaussian blur makes the transition smoother and rounder.

This is all implemented in a GLSL shader btw. Background images/progress maps are paired randomly, so there’s a ton of possible different combinations.

The code is pretty shitty, I only spent a couple minutes writing it – if you do want to use it for anything, you might wanna clean it up.

thanks! I know similar techniques are used in earthbound backgrounds, as well as how old games rendered water. It's cool to see it being used in a game jam