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:
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
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
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:
- - This will control whether the screen should shake or not
shake
- - This will control how long the screen shakes for
shake_timer
- - This is how hard the screen will shake
shake_magnitude
- - This is for how fast or slow the shake effect will fade out after it is finished
shake_fade
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
shake
shake_timer
shake
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
screenshake()
The second thing we need to do is actually call this function somewhere. For that, you'll need to open
obj_asteroid
Switch
You can now open the room
rm_game
obj_screenshake
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!