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!

World maps and my platformer

A question I’ve been dealing with recently is how to handle designing the world map for my Flixel-based timed platformer. Why even deal with world maps as a level select? They strike me as important ways to engage the player with curiosity and a sense of exploring and adventure – a prime example would be almost any various ROM-hack of Super Mario World – in many ways, part of the fun is unlocking various levels to see what will pop up next.  In addition, they’re incredibly fun to design and draw.

The over 80 level exits in Super Mario World made unlocking new paths a reward.


Rayman's World Map, with a wicked song to boot



Figuring out how to go about programming one in a clean way has been a bit of a challenge. The Flixel framework seems more than capable of allowing the programmer to do something like this. The new levels must be unlocked/animated when returning to the world map upon success, and player input must be paused – however, we’d like to have animations in the world map while the level is being unlocked.

I have two ideas for implementing this so far…

In my game, levels are unlocked via

A. gaining enough total pickups in the levels (An okay analogy might be the electoons in Rayman, except unlocking more stages than just Candy Chateau) will unlock special levels, and

B. beating a stage opens up an adjacent one.

I was thinking of maintaining a state variable for the World Map –  something like “unlockingDone” or what not – which would work a bit like this. Beating a stage will modify a global-state count of the pickups. On the create() method of the World Map class, we can check to see if a new stage needs to be unlocked. If so, we can add it to an array, or perhaps queue of “things to unlock” – then in our update look, we simply set some state variable to prevent player input, and set timers so that after some time interval, pop something off of that queue (or just maintain an incremental index into the array), and animate it. That much seems simple, but I’m wondering how to store it. There seems to be two ways. The first would be to store every set of things to unlock as objects in an external Registry class – maybe “WorldMapObjects” – holding say, the level marker and two smaller markers forming a path to it. It could have an ID, and a boolean, “unlocked”. So when we load the world map, we automatically iterate through the WorldMapObjects and  draw every unlocked thing to the screen.

The other way is to just maintain an array (in some global context) of “Levels unlocked”. So in WorldMap’s create(), you call this giant method that checks for every level being unlocked –  we can also maintain an array, “Level *just* unlocked”, so if a level isn’t unlocked but was *just* unlocked, we add that level’s world map markers to a queue/array as before, yadda yadda.

Both solutions seem like they’d work, but perhaps the former lends itself to possible re-use, while the latter would be this hacky thing that “works”. Hm.

And of course there’s other cool things – the music, sound effects on the map, how to animate the text for level titles, hmmm…