Monday 15 April 2013

Wooshy Transitions

'Wooshy' is how my wife described the latest menu transitions that I've added to the game.

For those not familiar with the use of the term in games, a transition is the way one screen changes to another.  A sudden jump from one page to another looks wrong or unfinished.  Fading between screens or some other effect makes the change look better and more polished.  Transitions are used in film and video production, DVD menus and computer games to name just a few.

It still surprises me how much of the game is connected together in unexpected ways. I started working on the networking code but have spent the last few weeks doing screen transitions. How does that happen?

It happened because I needed a background for a screen to display the list of available servers to select from.

I created a sci-fi looking frame with a blank background which I liked so much I decided I could also replace some of the placeholder artwork I had been using elsewhere...

While I was creating graphics I might as well do something about some of the other placeholder art on the menus...

With the new art assets the menu transitions looked a little inconsistent...

So on and so forth until I had changed nearly all the backgrounds to the menus and designed a set of matching slide on and off (wooshy) transitions that worked for all the menus.

It's never quite as easy as it sounds. Several of my menu screens have moving 3D models on them and getting them to nicely 'woosh' off and on was going to be somewhat troublesome so I opted for a different but matching transition for those screens.

On those difficult screens a panel slides over the entire screen and the menu changes at the point the panel obscures the whole screen and then it continues to slide off revealing the new screen.

Hopefully when you get to see the thing in action you'll like the effect.