The importance of transitions

The first commercial game I ever worked on was Extreme G on the Nintendo 64. While I was writing the menu system, the lead artist, a grizzled young man named Johnny Christmas, gave me a piece of advice I never forgot. "Listen here, young lad", quoth he: "the secret to making a game feel polished and professional lies in the transitions".

Transitions are everywhere. When your game starts up you will probably go from nothing to displaying a title screen. Then you might transition to a main menu, and then into the game, perhaps with a loading screen in between. Inside the game you might have a pause menu which the player can bring up. There are smaller things, too: perhaps you display hit counts or bonuses when the player does well, or when they die you could transition an overlay from "2 lives" down to "1 life".

The simplest form of transition is simply to stop drawing one thing and start drawing something else, but that doesn't look very interesting. Spending some time coming up with more imaginative effects can make the difference between a simple, plain looking game and one that reeks of quality.

There are really only a handful of fundamental ways a transition can happen:

  • Things can fade in and out
  • Things can slide in from the edge of the screen
  • Things can change size, shape, and color

But there can be much subtlety in the details. A menu could slide in from the left of the screen, overshoot a little, swing back into position, and then flash subtly brighter as it locks into place. Or perhaps you could use the logo of your game as a swipe pattern, fading areas covered by the logo more rapidly while the background takes longer to complete the transition.

Over this next week, while many of the XNA team are down in sunny California for GDC, I'm going to be stuck here in cold, snowy Seattle. I'm planning on taking this opportunity to write about some of the techniques commonly used to implement cool transition effects.

Comments (12)

  1. Ultrahead says:

    Thumbs up!

  2. Mykre says:

    Cool, it will be good to see, I am currently playing around with the engine plans that Eli Posted about a while back. Maybe you could add your different effects to that.

  3. TehOne says:

    Sounds great. Coming from a web developer background, this fits in perfect with the way my mind works. Hopefully the implementation won’t be to complex. I’ll stay tuned to see what comes.

  4. nfurtwangler says:

    Thanks for passing on that tip Shawn.

    P.S:  I remember having a lot of fun with Extreme G on my N64 back in the day!

  5. GameyLittleHacker says:

    There are 3 basic notions of transitions, sure, but that last one is a floodgate!

    For the completely out there, consider this as a transition and a half:

    Step 1: Setup a new rendertarget

    * Clear rendertarget to black

    * Render white objects, perhaps a particle system, onto the render target

    * Use rendertarget captured as texture as your UI element’s alpha, i.e. in your pixel shader, multiply the element’s alpha by the rendertarget’s alpha.

    Step 3: profit!

    Or for something a little more straightforward, do it backwards and build a render target that has your UI element rendered to it (assuming it’s not just a single texture). Now map that onto some geometry (again, a particle system would be pretty) and animate that.

  6. Machaira says:

    Geez, like I didn’t have enough stuff to read before, now I’m going to have to stay tuned here to read whatever you come up with. 🙂

    Looking forward to seeing your ideas.

  7. Mykres Space says:

    I was reading one of Shawn Hargreaves Blog posts the other day and got inspired…. So I thought I would

  8. I’m a bad person. I said I was going to talk about transitions , and I meant it at the time. But then

  9. Now that the Game State Management sample is released, I’m going to rewind time and follow through on

  10. Shawn Hargreaves Blog announces the release of the Game State Management sample . His blog entry on Transitions

  11. I was reading one of Shawn Hargreaves Blog posts the other day and got inspired…. So I thought I would put a small post together to show how to fade a logo in, this could be used to show your company logo at the beginning of your application. To do this

  12. Zolomon says:


Skip to main content