In video games I often see camera effects while playing. E.g. twisting the camera or distort the image of it. But how can you apply an effect like shaking to the camera? But first we have to understand what the camera in a video game is and what it does.

What is the camera and what does it in my game?
At first i want to explain what the camera in a video game is and what it does. While developing a video game you have to use a camera at some point. At least for most engines you have to. I started coding for games with LWJGL and if you want to use a camera there, you have to code it by yourself. Currently I’m programming with libGDX that also uses a camera for rendering the game. The camera is in fact the essential part of you game that provides data for you graphics card to be rendered on your screen. So without the camera in your game you wouldn’t see anything.
But what how does it do that? That doesn’t really matter, we just have to understand what the in general does and how we can use it. In general the camera has a specific position, direction and viewport. Position and direction just mean where the camera is and in what direction it is looking. The viewport is the size of the viewable field the camera has, mostly also the size of the images sent for rendering. We can also imagine this as a viewable field.

How to apply a shake effect to the camera:
Before we can apply any effect to the camera we have to think about the effect. In this case we want to shake the camera a bit. For the camera shaking means you change its position slightly to a given origin. Lets say the given origin is the actual camera position and we just want to create a small offset for that position and add it to the origin values to change them a bit. So the only thing for us to do is to calculate the offset for a shaking.
But is it only done by changing the position? No, you also can change just the angle with a similar method, or both. All three possibilities will give a different effect but all like shaking.
So, how can we calculate the shaking? That’s not an easy question because there are several ways to to that. For example you could use a generated noise that lowers its intensity over time and apply that to the origin, or you can use a complex algorithm … But lets say we want to keep it simple and clean. I decided for my self to generate a random number and use this to calculate two values between 0 and 1 that I use for a vector. Vectors in general are used for positions and directions and are handy because of the math you can do with them. Later I limit the length of the calculated vector and just add it to the actual camera position. Below you can see an excerpt of the code I use:


1. camPosition = player.getPosition();
2. if(shakeTime < .3f && player.getHP() > 0f){
2. double offset = Math.random() * 6.28;
3. Vector2 shake = new Vector2((float) Math.sin(offset), (float) Math.cos(offset));
4. shake.limit(Interpolation.fade.apply(.1f,0f,shakeTime));
5. camPosition.add(shake);
6. }

Explanation:

  1. Get the actual camera position.
  2. Only calculate if player is alive and the time for shaking is big enough
  3. Calculate a random number from 0 to 2π.
  4. Generate a vector with x and y value between 0 and 1.
  5. Limit the vector with a fade out interpolation.
  6. Apply it to the actual camera position

If you want to see the effect in motion feel free to check the video below.

This small tutorial is also applicable for other position changing effects for all sorts of things done with vector in a video game. E.g. you could use it for the changing the players position because of an effect from a bad potion or changing the light intensity of a torch.

Kommentar verfassen