Gamemaker Studio Horizontal Shooter - Basics - Scrolling backgrounds

Creating backgrounds

Right click on backgrounds and create a new one.

Name your background

• Convention it bg_name
• bg_ for background
• Name to easily know what it is
• I avoid using capital letters so it’s easy to remember and keep consistent

Edit Background and draw the art you want for it.

I’m doing a starry sky. It looks bigger in the screenshot because I zoomed in (mouse wheel) to draw more precisely.

Check the green checkbox to confirm.

Click Ok to save this background.

Displaying a background in a room

Now let’s assign this background to a room.

Double click your room to edit it, then select the backgrounds tab. In this example, I had previously set the background color to be black to fit my asteroids theme.

With background0 selected, I assign a background image from the list that appears when I click “

Make sure to check “visible when room starts”.

Then click the green check icon at the top to save.

Basic animated background

Now let’s make the background scroll vertically downwards.

In the room properties, go to the settings tab. Then click on “Creation code”.

To move the background, I used the code:

background_vspeed[0] = 0.5;

• background_vspeed is a default variable that exists in game maker which stores the vertical speed at which a background moves.
• [0] is used to select which background should move. We assigned our image to background[0] and that’s the one we want to move.
• = lets me assign a new value to the background speed.
• 0.5 is how fast I want it to move. The height of the screen starts from 0 at the top, until the maximum at the bottom, so setting a positive value to the speed will make the background move downwards. If I had set a negative value, it would instead move upwards.

Note: having values below 1 can cause flickering as the game is unable to draw half pixels properly. 0.5 worked for me, but 0.2 looked awful. If you want to be safe, keeping speed values above 1 should always work smoothly.

• ; indicates the line of code is complete and ends that specific instruction.

Practice

Add a second layer of background stars above the one we just made to give the illusion of depth.

Tips:

• Your background will need to have some transparency so we can see the starts layer in the back.
• Bigger, brighter objects and a faster speed will give the illusion that the new layer is closer to the player.

Example results

Art:

Room background 2:

Room creation code:

Practice

Now try to create the same effect with a horizontal scroll instead of a vertical one.

Tips:

• vspeed stands for vertical speed, what do you think horizontal speed might be?
• Game maker position values start with the coordinates x = 0, y = 0 in the top left corner of the screen. Values increase when you go further right or down. If your player object faces towards the right like mine, you’ll want the background to scroll towards the left.

Example result