Some neat screen transition effects

There’s a lot of small neat effects in games if you look hard enough.

A cool one is entering level in Yoshi’s Island – the icon of the level spins around, shrinking, then these stars radiate outwards, change color and disappear. And then the screen turns black, Yoshi’s sprite jumps into the starting position of the stage, the level title appears, and then the black background “pulls back”, revealing the level. All very smooth, of course – important in making going from one scene to another not discontinuous and whatnot!


After the level icon shrinks down, stars radiate out from the icon's center, fade out, and then the level transition begins. (Super mario world 2: Yoshi's Island)

The star effect is a neat one, and not too difficult to implement variants of!  One could spawn some number of star sprites at some point, then set angles for them to radiate outwards (while animating). With whatever sound effects one desires.

Part of the enter-level transition effect in yoshi's island

Neat screen fades like they could be replicated if you just set up a bunch of (horizontal sprites) – all equal in length – and either modify their scale or their x position, as a function of their y position. Something like this could be…say I have a bunch of sprites that are as wide as the screen and 2 pixels tall or something. In the beginning the entire screen is black, but parts of it get “pulled back” in this wave like pattern – something like

bar.x = bar.x – (1 – sin(bar.y  * k) )  * a(t)

where k is some thing you’d figure out to give the frequency of this “wave” effect, and a(t) is some function on progressed time that would determine how far back these things pull. This would be nice, as (1 – sin…) is in the range [0,2] so we get the desired effect of having these “peaks” and what not. Something that would be fun to implement/add variations to( maybe a moving color gradient in the effect or something…)

The neat level-enter downsample effect in Super Mario World

This is a really cool effect from Super Mario World when you enter a level. It’s only like a half second effect, but could be used in a lot of neat ways than just transitions…my guess is it’s downsampling the image, splitting the image into successively larger squares (1×1 -> 2×2 -> 3×3 -> etc…), picking a single color from that box and rendering the entire box that color. So we go from the normal world map, to a slightly blockier one, to a more blocky one, and so forth until the level fades in. Neat!

Hoping to use these as ideas for transitions in my game. Or at least learning by figuring out implementations of the effects!