Load tiles row by row

I saw this effect in the Teenage Mutant Ninja Turtles game for NES, where the game transitions to another scene by filling the screen with black and “loading” the tiles row by row.

1. Add a CanvasLayer. Add a ColorRect, set its color to transparent, anchors to full rect, and attach the shader to it
2. Adjust viewport_height (240), this is required to know how big one pixel is
3. Adjust row_size (8) to how big one row should be (should be a multiple of your tile size)
4. Create an animation player and animate the parameter visible_rows from 0 to however many rows there are (240/8 = 30).

Also provided is an offset parameter for you to ensure that the effect lines up vertically with your tiles. Asuming you only need to take the camera position into consideration, you calculate the offset with `fmod(%Camera2D.global_position.y, 8.0)`. Note that the maximum value of visible_rows is effectively increased by one when there is a non-zero offset.

Sprite art in cover image by MadByte, licensed CC-BY 3.0. https://opengameart.org/content/8×8-platformer-tileset-candy-land

Shader code

shader_type canvas_item;

uniform int visible_rows = 0;
uniform float offset = 0.0;

const float viewport_height = 1.0 / 240.0;
const float row_size = 1.0 / 8.0;

void fragment() {
	float y = UV.y / viewport_height;
	float row = float((y * row_size) + (offset * row_size));

	if (row > float(visible_rows)) {
		COLOR = vec4(0.0, 0.0, 0.0, 1.0);
	}
}

Tags