Screen Transition Effects

From GPWiki

We all know the fade to black routine, but sometimes just using an alpha value doesn't cut it among the competition. Even back in the Super Mario days, there were some nice effects transitioning between screens. 3D APIs may have initially stalled pixel-level fullscreen effects, but they had their own ability to distort vertices, colors, and alpha values. Now with pixel shaders, maybe screen transition effects can reach new crazy heights of merging modern and retro.

"To change from one screen to another"

The idea is simple enough. We start at time t=0 and end at t=1. We transition from one screen to another screen, possibly using a blank screen (a la "fade-to-black"). For even more original effects, you could warp or fade individual elements in your game, but this article will not cover that because it aims to be applicable to all games. Some effects may be iterative and require the previous output of the effect. Also each effect should state the requirements of the underlying render system, requirements like

• pixel access
• rotation and scaling
• color modulation
• alpha blending

Simple Fade

Uses "alpha blending" and is "not iterative." You can fade the screen to another screen or to a blank screen. The example shows pixel access and uniformly fading the whole screen. Remember t goes 0 -> 1 and so does the alpha channel.

def effect(t, screenA, screenB):
  for pixel in screenA:
    pixel.set_alpha(1-t)
# alternative
def effect(t, screenA, screenB):
  screenA.set_alpha(1-t)

To perform the reverse effect (a fade-in), just have t go 1 -> 0.

Diamond Splash To Black

Should use "pixel access" and should be "iterative" but either one could be broken. You could use black diamonds scaled over the screen. It might be possible to use this effect with two screens (show us!). This effect is nice because it looks like black diamonds rippling out from the center of the screen, but the real zinger is when the black diamonds merge, your eye does a reversal and you see the screen is made of diamonds. Reversible.

The basic idea is to divide the screen into a grid (here made by 16x16 pixels). Each grid.box has a distance from the center and you expand the black diamond in each grid.box, but closer ones use the effect first. When the height/width of the diamond reaches the height of the tile is when you see the screen made of diamonds.

More details! So each diamond grows its edge by one pixel, leaving 15 steps before it fills a 16x16 tile. This means it has state 0-15. The distance from the center is actually calculated by the row or column away from the center, whichever is greater. This forms borders/rings.

tile_dim = 16
max_state = 15+MAXDIST
def effect(t, screen):
  for tile in grid:
    # state should clamp to 0-15
    tile.set_state( t*max_state - ((dist-1)/MAXDIST)*max_state );

Pixellizing mosaic

The mosaic effect (or pixelate if you like) has to rank as one of the most simple effects to do! Essentially, we traverse the source image in steps of n-pixels (for x and y), and wherever we land, we take the colour of that pixel and draw a Rect, n-pixels by n-pixels, filled in this colour. You could combine with a fade out or fade in effect.

Blinds Wipe

We fade from white to black, and from right to left - it should be pretty easy to do a bitmap fade, or to change the direction of the wipe.

Fades From Ballz