© The Author(s), under exclusive license to APress Media, LLC, part of Springer Nature 2023
B. TyersGameMaker Fundamentalshttps://doi.org/10.1007/978-1-4842-8713-2_13

13. Backgrounds

Ben Tyers1  
(1)
Worthing, West Sussex, UK
 

Most of your rooms will have some sort of background, whether it’s a solid color, a moving background, or a more complex parallax effect.

Backgrounds can be used for

  • Splash screens.

  • Backgrounds for levels.

  • Moving backgrounds for infinite runner type games.

Backgrounds are loaded in the same way as sprites. Load in the space background from the resources and name it bg_1.

If you wanted to move the background to the left, you can set the Horizontal Speed to a negative value, for example -2, in the room settings, as shown back in Figure 12-3.

Setting Up a Background

Rename the Background layer to Background_1 and set as shown in Figure 13-1.

A property dialog box of the room editor. It consists of Layers room 1 with instance and background, background layer properties with color horizontal and vertical tile, and X and Y offset.

Figure 13-1

Setting a background

Backgrounds can also be moved using code, which is more adaptable than using the room settings. Make an object obj_control, in the Create Event put:
/// @description setup
layer_y("Background_1",y);
layer_x("Background_1",x);
and Pop the following code into the Step Event of an object obj_control:
/// @description Background control
if keyboard_check(vk_up) layer_y("Background_1",y--);
if keyboard_check(vk_down) layer_y("Background_1",y++);
if keyboard_check(vk_left) layer_x("Background_1",x--);
if keyboard_check(vk_right) layer_x("Background_1",x++);

If you test it, you can move the background around.

Parallax Effect

Multiple backgrounds can be combined to create a Parallax Effect. This is when the foreground moves more quickly that the backgrounds.

Start a new project, and load in sprites from the asset folder Mountain Backgrounds.

Load in as shown in Figures 13-2 through Figures 13-4.

A Sprite window of b g 1. It has a sunset animated image in the working window with a width of 272 and a height of 160. The frame per second is 30.

Figure 13-2

Loading in a background

This sprite will be used for the far background, and will move very slowly – to give a sense of depth. Additional layers can be added, for example, a mountain as shown in Figure 13-2.

A Sprite window of a mountain in the working window for bg 2. The frame per second sets to 30, with the width and height set to 272 and 160, respectively.

Figure 13-3

Showing imported image bg_2

The mountain in the preceding image will be set to move slightly faster than the rear layer, helping to increase the parallax effect.

An even nearer background, really adds to the overall effect, as shown in Figure 13-4.

A Sprite window b g 3 has a series of mountains on the grid slide. The frame per second sets to 30, with the width and height set to 544 and 160, respectively.

Figure 13-4

Showing imported image bg_3

Create some new layers and assign the matching sprite. You can click Add Background Layer, as shown in Figure 13-5 to create a new background layer.

A room editor tab consists of layers of room 1 instance, background 3, 2, and 1. Highlights new background layer option at the bottom left.

Figure 13-5

Creating a new background layer

Next, name and order them as shown in Figure 13-5.

Now assign the sprites bg_1 to Background_1, and similarly for bg_2 and bg_3.

Set background_1 room settings, as shown in Figure 13-6.

A room editor tab consists of layers of room 1 instance and background 3 to 1. Background 1 layer properties has color, horizontal and vertical tile, stretch, X and Y offset, and horizontal and vertical speed.

Figure 13-6

Settings for background_1

Set up in a similar way with background_2 (with Horizontal Speed of -2) and background_3 (with Horizontal Speed of -3).

Test to see your parallax effect.

You could also do this via code by the backgrounds position, for example:
layer_hspeed("Background_0",25);

which would set Background_0 x position to 25.

Basic Projects

  1. A)

    Set a system that changes background image upon pressing 1, 2, or 3.

     
  2. B)

    Set up a tiled background that moves diagonally.

     

Advanced Project

  1. C)

    Make the background move in the direction of the arrow keys when pressed.

     
  2. D)

    Make a parallax with three layers, use code rather than room settings to make them move.

     

Useful Functions

You can make a background visible or not with:
bg = layer_background_get_id("Background");
layer_background_visible(bg,true);

which would set it to visible, false would hide this layer.

You can set the alpha of a given layer:
bg = layer_background_get_id("Background");
layer_background_alpha(bg,alpa_value);
You can scale the size of a background:
bg = layer_background_get_id("Background");
layer_background_xscale(bg, 2);
layer_background_yscale(bg, 2);

Summary

You now understand how to add backgrounds, make them move, and combine them to create a parallax effect.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.135.207.174