# How to implement fake 3D like distortion effects for a 2D side scrolling game?

I'm not certain of the proper terms to search on or even where to begin though I imagine it is some sort of post processing effect.

I've seen games like I Wanna Be The Boshy and You Have To Win the Game which manage to modify the perspective of 2D games to give a sort of 3D effect to them (see images below). Boshy basically makes it look like you are inside a tower (cylinder) while You Have To Win the Game distorts the image so that it looks like you are playing on an old CRT monitor, specifically the slightly rounded look.

• Is there a term for this effect?
• What is the standard way for implementing this effect (terminology)?
• How would I go about implementing such an effect in a high level engine / framework such as Unity or XNA/Monogame from a 20,000 foot view? (detailed code happily accepted but not necessary - I realize exact implementation details might vary but high level details on what needs to be done would be greatly appreciated)

I Wanna be the Boshy

You Have To Win The Game

• Yeah. I was always curious to know the exact term for the technique. Best I can think of is "old tv screen effect" Commented May 18, 2014 at 5:58
• Exactly! And that only works for the latter example Commented May 18, 2014 at 5:59

## 1 Answer

This can be implemented as a post-processing kind of effect. (When using Unity/XNA/Dx/OGL/...)

# Geometry method

Start by creating a mesh that resembles the distortion effect you are looking to achieve. (e.g. model a half cylinder (or cone, sphere, cube, ...), make sure to set the texture coordinates). Render your 2D game as usual, but render the final result into a texture. Then, render the distortion geometry with the texture you just created. You can use the world/view/projection or modify the actual geometry/texture coordinates to control the strength of the distortion. (image 1 shows the regular 2D game, image 2 shows the same texture projected onto a sphere)

# Distortion method

Image processing tools often offer distortion effects that could emulate the projection (bit like optical illusions). For example, image 3 was generated using the bulge filter from Paint.Net

.

(You can find an implementation (OpenGL ES 2.0) of this distortion effect from the GPUImage project - see GPUImageBulgeDistortionFilter)

Depending on the implementation, either method might be faster or provide a better match to your desired result. As both implementations are fairly simple, you could try to implement both and see which one works best for you.

• Fantastic answer! Commented May 18, 2014 at 12:54
• Both require processing the same amount of image. The projection will never be faster than doing nothing, and image processing costs the same either way. -- "Distortion" method is faster because you're skipping the vertex transform and rasterization, also you're giving the driver more freedom to iterate the pixels, where the polygon approach is more specific about what order to draw in. Finally, polygons hold less information about your intended effect, are resorting to a generic solution which stresses the texture filtering hardware and produces an approximation instead of the real filter. Commented May 20, 2014 at 22:27
• @MickLH: Vertices for such post-processing projection can be calculated offline or on load, yielding a very cheap pass-through vertex shader. For a bulge filter, a full screen quad must be rendered and rasterized as well (except if SpartanDonut has access to e.g. compute shaders), and for every pixel the offset must be calculated instead of interpolated. Therefore, I believe (depending on the available tools and implementation) both methods could be equally fast. I've updated my answer, thanks for your input. Commented May 21, 2014 at 13:22