Analysis of Screenshake Types

I have tried to graph as many screenshake shapes as I could think of. Most of these would be unsuitable apart from maybe a very specific type of game. However I still wanted to include them so you can see what they look like.

The vast majority of these are exaggerated so much they would be unusable (and probably make you travel sick) however with a small image I wanted to make it clear what is happening.

Random x/y (maybe the default or most common)

Random camera movement has become the default way to do screen shake and I can see why because it has it's advantages. It's easy to implement and perfectly sufficient.

Random x/y Diminishing Magnitude

The nice thing about having a diminishing strength of screenshake is you can start off very strong but still have it last for a long time after. Comparing this to the standard random x/y they look quite similar however this one has a much stronger initial peak and has a longer tail after, but because it fades out it doesn’t become exhausting on the eyes.

Random Rotation

Random rotation looks a little comical to me, it doesn’t look as aggressive so maybe it's good for if the player attacks an enemy or if an explosion goes off in the distance. I should say it is unlikely I would combine vastly different screenshakes into the same game.

Rotation Sine Wave

Rotation would be good for dizzying effects that are done to the player. Rotation can feel less harsh but also less impactful. Maybe also for abstract games if the player needs to be alerted to something or maybe they just opened a reward.

Scale Random

Zooming screen shake is likely to be a bit more common in mobile games and abstract games, maybe because if the game has lots of solid flat colours screenshakes are less obvious. If you are using this one remember things in the corners of the screen move more. I think this would work well if the player is getting stunned.

Scale Sine

...

Scale In Out (quick)

This transition to me looks very different when played quick and played slow. Weirdly moving quick feels like a positive to me. Maybe if the player levels up or receives a cool item you can make that feel important. Notice how the original zoom in is faster than the zoom out.

Scale In Out (slow)

However when you zoom in and linger it feels very oppressive. This is good if something scary has just happened to the player, or maybe a sad event like someone in the story suddenly just got killed. Bringing in the sides of the camera can make the player feel a bit claustrophobic so it's a good atmospheric technique, a good way to use it would be to zoom the camera in more and more the less health the player has so it turns into a gameplay mechanic.

Scale Out In

Having a quick zoom out when the player fires a gun would make it feel more powerful like the camera is being pushed away a little. It might also give the tiny benefit of quickly being able to see enemies just off the screen. You might also want to use this for shock and awe like if a big boss just spawns or there is a new environmental feature to see.

X/Y In Out

It's hard to see but this movement follows the direction of the attack. It can be used to make it feel like a lot of force is behind the attack, or I normally use it when the player gets hit and you move away from the direction the attack came from. This sub subconsciously tells the player exactly where attacks come from and can be coupled so stronger attacks push the camera away more.

X/Y Out Back

This might be the type of screenshake I use the most. In top down games if you are getting hit or hitting something you can push the camera in that direction and then elastic it back to the original point. In this animation you can see the camera goes to the right and slightly up however I would make this dynamic so if attacks are coming from your left you push the camera to the left. It's a great way to make things feel like they have power behind them and makes the player feel stronger.

If you are using this screenshake for when the player gets hit you can make the players attacks go in the new direction (or just decrease their accuracy) and this gives the sensation that the player is flinching when getting hit.

X Sine (Horizontal Movement Only)

This to me is a straight negative like someone shaking their head. Perfect if a door is locked and the player tries to open it or if the player tries to use an item they are not allowed to use at this point.

X Sine Diminishing (Horizontal Movement Only)

I wouldn’t encourage screenshake when players are reading text but it's likely to be the one that is least likely to impact reading so maybe it would work well for text adventures.

X/Y Sine Offset

Even though this shake has a lot of lateral movement it is not as harsh as others with this much movement because it is flowing between points that are very far away. If you needed a very extreme distance on your shake this is a good one to use.

X Square Wave (Horizontal Movement Only)

Considering the camera is only moving 3 pixels it still feels very vigorous, I guess this is because when it moves it always moves the full 3px. I guess in a game where the player might frequently take damage this could work well because you could shake the screen for a very short duration and it would still be noticeable and wouldn’t overlap the next time they get hit.

X Square Wave Diminishing (Horizontal Movement Only)

If I were asked before seeing this one I would have said to just use the sine wave that starts strong and gets fainter, however now I can see it I quite like how it starts very obvious but has a nice long tail off. I guess that’s why I put this page together to let everyone see what they can do and what would match their game.

Random x Diminishing Magnitude (Horizontal Shake Only)

For platformer and side on games having horizontal only screen shake can be a handy tool, it often gives the feeling of the ground shaking under them so if you want heavy things crashing down it could work well. I also think that biologically humans are more content for things to move horizontally because in nature we are more used to things moving along the horizon.

Perlin Noise x/y

Perlin Noise is a way of generating random numbers that look more organic and smoothly move between eachother. This looks nice and not very aggressive, I could have made it so the peeks were more severe and there was more sharp movement, but actually I thought this looked great for just taking little bumps / bobbing while walking / natural movement . I could have also faded it out but I thought it was good to see how it moved clearly.

Simplex Noise x/y

Simplex noise is a way of generating random numbers that look natural. It's very similar to Perlin Noise, one advantage is the ability to generate a series of numbers that have a relationship with each other, you could use this to randomly generate numbers to do screen rotation/zoom/x wobble/y wobble that all have similarities.

Random x/y Fixed Amount

Very abrasive and every movement feels very sharp. This should be used very sparingly however if you want the player to feel like a big ship they are on is taking damage I could see some use with this one.

Random x/y From last Screen Position

This is very similar to just randomly changing the position of the screen, however this one uses the last location and steps a random distance away from that point. This means statistically it could just randomly keep moving up. The small advantage to this method is you know each step will be quite small, when you randomly move the screen around a random point it might go fully to the top and then back down as low as possible in one frame which might be a large step.

Combing Shakes

Lateral / Rotational

Zoom / Rotational

Lateral / Zoom

Lateral / Rotational / Zoom

This to me is too much because every point has been shifted to an arbitrary point around it and it's hard to follow the movement, however that might be the effect you are going for. Plenty of people find some cool balance to make it work.

Screen Pause (100ms/200ms/300ms)

Does this count as screenshake? It's got to be on this list and could be combined with any other example. This is when you pause the whole game for about 100ms to make everything feel more impactful. Make sure all inputs a buffered during this period so they can all be triggered the frame they get control again.

Overlays

You can also add an overlay for a few frames when the screenshake happens. This makes things feel more serious, you could make these more impactful depending on the amount of health the player has left.
Some ideas: blood, chromatic aberration, glitch effect. I will add more to this in the future.

Magnitude / Diminishing

When I say magnitude I mean the amount the screen moves in a single frame. Diminishing is when it starts off much stronger and fades out. This allows you to have a high magnitude that goes on for longer than would normally feel comfortable, however diminishing shakes doesn’t work well in a game that gets frequently repeating shakes that might overlap, in this case it's better to have shorter bursts that have enough gap to feel separate.

Direction

When implementing a screenshake the angle the screen moves is very important and can convey information. If the player is making an attack the screen should start by moving in that same direction to give the illusion that the force is being transferred to the camera. Likewise if an enemy has done the attack move the camera away from them so it looks more impactful and lets the player know the direction of the danger as it might be very busy on the screen.

Shake intensity (overlapping shakes)

You might want to make it so the magnitude of the shake is determined by the health of the player, that way you are also informing of the danger they are in and it also makes things more stressful. Another way to adjust the intensity is to store how many times the player has been hit recently and slowly creep this back to zero, that way if the player takes many hits in rapid succession the screen will move far more making the player feel like there is more threat.

GUI / HUD Vibrations
No Movement

Not moving the HUD can make the screenshake more obvious because you have a reference point to show how much the camera is moving. This could be needed in games where ammo or other info need to be referenced frequently and easily.

Moves with Camera

Depending on how the game is made changes how easy it is to make the GUI move along with the wobble. Games with less obstructive HUDs are more likely to want their GUI to follow the camera wobble. However this brings up other problems, if you have a crosshair that wobbles do you now expect bullets to go in the new direction? Lots of FPS games use this as a mechanic where taking damage makes you flinch and ingame your shots will be less accurate.

If you have the ability to half move the HUD with the wobble it can give the feeling like the interface is attached to a heavy suit of armour, maybe this is the best of both worlds?

Opposite Movement

I quite often like moving the GUI in the opposite direction (so if the camera moves right the HUD moves left), this gives a little parallax and also means I need far less lateral movement to get the same effect.

Other Effects

If you are able to put some glitch effect or other distortion over the HUD that looks really cool and is often a very engaging.



The graphics are from Total Smashout that I made, play here: Total Smashout




Easy Difficulty
Game Development
By David Strachan