Coffee-Break Tutorials: Juicy Screenshake (DnD)

A very important part of making a game that is easily overlooked is adding "juice" to the gameplay. When we talk about "juice" we are talking about multiple elements in the game that are non-essential to the gameplay but that add an extra bit of spice to the way the game looks, sounds and feels to the player. Now, there are multiple ways to do this and a great number of them are outlined in this fantastic video by Martin Jonasson & Petri Purho, however in today's Coffee-Break Tutorial we'll be concentrating on just one thing that can add a lot of "juice" to your game... Screenshake!

NOTE: This tutorial is for people that use DnD™. If you prefer to use GML to make your games, we have a companion article for you here.

For this tutorial we'll be using a version of the Space Rocks project which has been updated for GameMaker Studio 2.3 and above (note that means that this project will not work in 2.2.5 or older!). You can get the YYZ of the project from the link below:

Space Rocks DnD Project

Once you have downloaded it, open GameMaker Studio and select "Import", then browse to the downloaded YYZ and select it.

SET UP THE CAMERA VIEW

Our screenshake effect will use a camera and move it around by a certain amount we will define to create the shaking. However, the Space Rocks demo doesn't use cameras, which means we'll first need to set that up. So, open rm_game and go to its Properties window and expand the Viewports and Cameras section:

You will need to check the box labelled Enable Viewports, then expand the section Viewport 0, make the view visible and set the width and height values for both the Camera and the Port to 500, as shown in the image below:

We don't need to do anything else, as we won't be using any of the other camera features in this example.

Note that these settings will have no visible effect on what the player sees right now, and if you run the game it should look and play exactly as before. All we're doing is setting up a viewport and camera to be the exact same as the default viewport and camera that GameMaker uses for the room when no custom cameras are active.

THE SCREENSHAKE OBJECT CREATE EVENT

You now need to make a new object that will be used to control the screenshake. We could use obj_game, but for the sake of clarity we'll be using a dedicated object for the effect. So, go ahead and create a new object now and call it obj_screenshake.

In this object we need to set up some variables, so add a Create Event and in it add the following DnD™:

Here's a brief outline of what these variables are for:

• shake - This will control whether the screen should shake or not
• shake_timer - This will control how long the screen shakes for
• shake_magnitude - This is how hard the screen will shake
• shake_fade - This is for how fast or slow the shake effect will fade out after it is finished

With that, we're done defining variables and can move on to generating the actual effect...

THE SCREENSHAKE OBJECT STEP EVENT

Our screenshake object now needs a Step Event, which is where we'll be doing all the shaking! Go ahead and add that event now, then add the following actions:

So, what's going on here? Well, when the shakevariable is set to true we add or subtract the magnitude value to the camera position and count down the shake_timer variable. Once the timer reaches zero we then fade out the shake effect until the magnitude is zero, at which point we reset the camera to (0, 0) and switch off the effect by setting shake to false.

SHAKE THAT SCREEN!

That's everything set up, but we can't actually test it yet as we need to do two last things. The first is to create a script function to tell the screenshake object what to do. For that, you will need to create a new Script asset and call it something like Effects. In this script we are going to define a function screenshake() and this script function simply applies the values required to the screenshake object, causing the screen to shake on-demand.

The second thing we need to do is actually call this function somewhere. For that, you'll need to open obj_asteroid and add a Destroy Event. In this event we'll apply different amounts of screenshake depending on the size of the asteroid being destroyed using a Switchaction. So add the following into the Destroy Event to do just that:

You can now open the room rm_gameand add an instance of obj_screenshaketo it. If you run the game, when you shoot and destroy the asteroids, you'll now have a juicy screenshake effect to make the impacts really hit home!

SUMMARY

You now have the basic knowledge of how screenshake works - create a camera, then offset the x/y position by an amount for a certain length of time. It's a simple effect, but one that can add a lot of extra "oomph" into a game as long as it's used judiciously.

Note that in this test project you can also add it to other places, like when the player dies, so play around with it. You can also apply this to your own projects fairly easily - for example, if your game camera follows the player, then you would simply need to offset the camera based on the initial player position minus half the width/height of the camera and plus the screenshake magnitude.

That's it for this Coffee-break Tutorial, and we hope it's been useful to you!

Happy GameMaking!