As you may have seen, we are currently running a crazy deal with the guys from 2Awesome Studios.
You can read more about this sweet deal here: Kickstarter.com
Dimension Drive is a pretty cool and unique game. That is why I turned its teleporting gameplay mechanic into an upgrade in Roche Fusion.
Today I want to go into some details on how I created the power up's visual effect. I hope I can give you some insight into the subtleties that are involved in something like this.
Before we start, here is what the finished effect looks like:
Achieving an effect like this relies on a smart combination of different elements.
We start with just the player's ship. To give the player feedback on where he will teleport when using the power up (so that they do not accidentally end up inside a group of enemies), we draw an exact copy of the ship, stripped of its colour and slightly transparent.
Once the player hits the button to activate the power up, we instantly switch the position of the player and the teleportation ghost image. This is important to allow for split second reactions.
To make the jump less jarring, we could fade between the player and the ghost graphics over a couple of frames.
However, this is not necessary in this case. At the same time of teleporting the player, we also create the different parts of the graphical effect which obfuscate the switch, especially in a fast game like Roche Fusion.
The effect mainly consists of a few dozen particles and a shockwave sprite (strictly speaking: a procedurally textured shockwave quad) on each side.
The shockwave starts out very small and expands linearly, while the particles start all start in the position of the player and ghost image and then fly outwards, again linearly. The particle effect is simulated in three dimensions, to give the effect more depth.
Note how the effect around the player position is considerably brighter. This serves to draw the player's attention to their new location.
As the effect expands, another part of it becomes visible:
To further highlight the player's new location, and to fit the effect in with Roche Fusion's high contrast art style, we use localised crepuscular rays - also commonly known as volumetric, or god rays.
The effect is only applied to the new location, making it stand out significantly, giving it a unique look.
The effect quickly reaches it's maximum intensity, and then shockwaves, particles and crepuscular rays fade away.
Note how the new ghost is drawn with even less opacity at first. It fades back in after a short while, when the cooldown of the power up has elasped.
This serves as a visual queue for the state of the upgrade, preventing the player from having to look at their hud too often.One last component of the effect are screenspace distortions.
If you again look at the final result animation, note how both the ship and ghost image seem to slightly expand, contract and expand back to regular size in a pulsing motion at the beginning of the effect.
This effect could not be achieved by simple scaling the ship's sprites. Instead we use post processing to distort the rendered image in a circular wavy fashion around the ship and ghost.
The same and similar effects are used for many other effects in Roche Fusion, for example the black hole weapon, but also every single enemy explosion.
All in all, each of the different parts of the effect is critical in achieving the end result.
I hope I could show you how each adds a part to the whole, and how they work together to make this unique effect.
Make sure to check out the following video to see how the upgrade looks when used in gameplay!
Of course, in Roche Fusion this is merely a power-up the player can pick up every now and then. In Dimension Drive, teleporting is the gameplay mechanic that the entire game is build around.
If you are curious, make sure to check out the Dimension Drive Kickstarter, where - just for a few more hours - you can even get a copy of Roche Fusion -for yourself, or for a friend - for super cheap!
Enjoy the pixels!