Parallax Backgrounds Platformer

Parallax Background

Creating a parallax background for your platform game in GameMaker Studio is a great way to add depth and visual interest!

STEP 1 EXAMPLES

To produce depth in your platform games we will create a parallax background. This makes the movement look much better. Below are some examples of what your game could look like. The result is created by adding  different layers as backgrounds then moving them at different speeds as your player moves around the room. The farther something is away to slower the layer moves. 

STEP 2 FIND BACKGROUNDS

You can see the layers available in the dessert back ground above. Lets find some backgrounds to use in our game. 

We need to find seamless backgrounds.  Seamless background images look like a single image. We will find different background layers.

Here are some links:

Itch IO

Craftpix

Open Game Art

Here is what I found you can use these or your own.

I found a layer for the following:

1. Clouds

2. Mountains

3. Sun

4. Trees

STEP 3 Room Set Up

Enable a camera: In the Room Editor, go to "Viewports and Cameras" > Enable Viewports 

Set Viewport 0 to "Visible" 

Assign  oPlayer to follow. the camera and select a  border of 640 px horizontally and vertically around your player

STEP 4 Import Backgrounds

Import your chosen images as sprites (e.g., sSky, sMountains, sTrees).

Seamless Looping: Ensure your background images tile horizontally. This means the left edge matches with the right edge when you place the images next to each other making it look seamless.

STEP 5 Create background layers

iI the Room Editor: Add "Background Layers" by clicking on the + sign 

Assign each sprite to a separate layer name it what the layer image you will use

Notice I created a Sky layer we will use a color or an effect for this layer shown later

You will also need to add a off set to the layers so they are drawn along the horizon just make it look good

I adjusted mine like this: Y offset of 400 px and I horizontally Tile the layer

STEP 6 Coding the Parallax Effect

Create a Controller Object (e.g., oParallaxController):

• Add this to the Create Event to initialize layer IDs and speeds:

Create Event

// Get layer IDs

layer_mountains = layer_get_id("Mountains"); // Mountains layer

layer_trees = layer_get_id("Trees"); // Trees layer (closest, fastest)

// Parallax speed multipliers (0 to 1; lower = slower)

parallax_mountains = 0.3;  // Moderate movement

parallax_trees = 0.7;      // Faster movement

Add this to the Step Event to update layer positions based on camera movement

// Get current camera position

var cam_x = camera_get_view_x(view_camera[0]);

var cam_y = camera_get_view_y(view_camera[0]);

// Move layers with parallax effect

layer_x(layer_mountains, cam_x * parallax_mountains);

layer_x(layer_trees, cam_x * parallax_trees);

STEP 7 Adding Clouds to move with Wind instead of camera

We will make the Clouds layer move with wind instead of following Player movement. This will add a constant movement of the clouds from left to right

In the room editor change the speed of the X like this:

STEP 8 Add Sun Movement

Just like the clouds move on their own you can make the sun move on its own You should add movement to both X and Y so the sun will set and rise and coordinate this movement with a day night cycle.

STEP 9 Effects 

You can add built in effects to a layer to add weather or control a day night cycle and more