Graphics Parallax Backgrounds

Discussion in 'Tutorials' started by GMWolf, Jun 21, 2016.

  1. GMWolf

    GMWolf aka fel666

    Joined:
    Jun 21, 2016
    Posts:
    3,184
    GM Version: GameMaker:Studio v1.4.1757
    Target Platform: ALL
    Download: N/A
    Links: YouTube Video
    Summary:
    Add parallax scrolling backgrounds easily in gamemaker, with a procedural script to automatically detect settings set in the room editor.

    Tutorial:

    I would love to see what you guys come up with!
     
    Last edited: Jun 12, 2017
  2. Kazumo

    Kazumo Member

    Joined:
    Jun 20, 2016
    Posts:
    4
    Seems great, thank you so much for posting it!
     
  3. chance

    chance predictably random Forum Staff Moderator

    Joined:
    Apr 22, 2016
    Posts:
    745
    I meant to comment on this when it was posted, so I'm glad it was bumped.

    This is a simple and intuitive approach to view-based parallax scrolling. Your approach puts the room editor settings to good use. I typically define my background parameters in code. But I may be adopting your approach from now on.

    This is an excellent addition to the Tutorials forum. Thank you.
     
    Last edited: Jun 26, 2016
    GMWolf likes this.
  4. NazGhuL

    NazGhuL NazTaiL

    Joined:
    Jun 20, 2016
    Posts:
    515
    I like the way you manage it. Same thing as Chance, I will use this method.

    It's the first time I saw someone who use large font for a video tutorial. +1 ;)
     
  5. eddx

    eddx Member

    Joined:
    Oct 15, 2016
    Posts:
    4
    How about same thing but for TDS with tile layers? ;)
     
    GMWolf likes this.
  6. toxigames

    toxigames Member

    Joined:
    Jun 20, 2016
    Posts:
    190
    Gamemaker supports up to 7 backgrounds through the room editor. Does this mean your solution is limited to using no more than 7 backgrounds? or is there a workaround for this?
     
    Last edited: Jan 26, 2017
  7. toxigames

    toxigames Member

    Joined:
    Jun 20, 2016
    Posts:
    190
    error post, sorry.
     
  8. GMWolf

    GMWolf aka fel666

    Joined:
    Jun 21, 2016
    Posts:
    3,184
    The workaround would be to define everything in code, including drawing thet backgrounds.
    But its fairly rare to need more than 8 backgrounds.

    If you are using GMS2, you can have as many backgrounds as necessary.
     
  9. toxigames

    toxigames Member

    Joined:
    Jun 20, 2016
    Posts:
    190
    okay thats nice, thanks
     
  10. Brysuiker

    Brysuiker Member

    Joined:
    Apr 28, 2017
    Posts:
    10
    Certainly will be of use. Thanks a lot!
     
    GMWolf likes this.
  11. Spike11

    Spike11 Member

    Joined:
    Apr 6, 2017
    Posts:
    20
    Great tutorial. Thanks! :)
     
    GMWolf likes this.
  12. Greys0n

    Greys0n Member

    Joined:
    Feb 8, 2017
    Posts:
    11
    i was looking for such tutorial, thanks pal
     
    GMWolf likes this.
  13. Calum

    Calum Member

    Joined:
    Apr 29, 2017
    Posts:
    6
    This is super helpful but I seem to have a problem were just tapping the left or right arrow keys to change the direction of the player, this makes the backgrounds move (Kind of like a judder) very quickly.

    I'm a complete noob at this and have so far only completed an Udemy course in making a game in GameMaker. :p Has anyone else experienced this problem?

    Thanks in advance

    C

    EDIT - I seem to have minimised this a lot (though it still happens a smidge) by reducing the * in the first line of code from 5 to .05
     
    Last edited: May 17, 2017
  14. samyak

    samyak Member

    Joined:
    Jul 19, 2016
    Posts:
    90
    What is the method to add infinite scrolling backgrounds in GM 2?
     
  15. Nocturne

    Nocturne Friendly Tyrant Forum Staff Admin

    Joined:
    Apr 13, 2016
    Posts:
    6,341
    ;)
     
    HayManMarc likes this.
  16. GMWolf

    GMWolf aka fel666

    Joined:
    Jun 21, 2016
    Posts:
    3,184
    That would be the way :)
    But if you would like a video tutorial nonetheless, you may be in luck as I am going to get a lot of free time soon to make a batch of videos. I will probably include one on Paralax scrolling in GMS2.
     
    samyak likes this.
  17. samyak

    samyak Member

    Joined:
    Jul 19, 2016
    Posts:
    90
    I have another problem-- I I had created a room(room1) in GM2 , with all objects , etc working. Then I created another room(room0), placed it before the previous room in resource tree. I place an object in the new room(room0) with an event with room_goto_next(); But in-game when I go to the next room(room1) from room0, all objects except a few don't appear. Plz help.
     
  18. Nocturne

    Nocturne Friendly Tyrant Forum Staff Admin

    Joined:
    Apr 13, 2016
    Posts:
    6,341
    If you swap the rooms around again does it work? So you go straight to room1?
     
  19. samyak

    samyak Member

    Joined:
    Jul 19, 2016
    Posts:
    90
    Yes, by swapping, it works.
    Thing to note that, in my problem,1. all objects, except for the o_player object, are invisible. They don't even work.
    2. Objects that have health-bar drawn, or have text drawn , work.
     
    Last edited: Jun 6, 2017
  20. Landonbay

    Landonbay Member

    Joined:
    Jun 1, 2017
    Posts:
    64
    will this work with Game Maker Studio 2?
     
  21. CobaltBW

    CobaltBW Member

    Joined:
    Jun 9, 2017
    Posts:
    5
    Hey, great script. I've used a few parallax scrolling methods in the past, and this by far seems to be the best due to its flexibility and long-term ease of use. The only problem is, as stated before, that it has some major compatibility issues with Game Maker Studio 2 due to the transition to the new layer system. I've been able to work around this quite nicely and I'd like to offer up my own code, for the sake of anyone who might be trying to work it into their own GMS2 project. It's quite extensive code-wise, but in the long run it offers the same quality of life as the GMS 1.4 code.

    As a bonus, not only have I made the code work with tilemaps and backgrounds, but I've worked in auto-scroll compatibility as well -- not only can your parallax backgrounds autoscroll simultaneously, but they'll scroll in proportion to how much parallax they've been assigned.

    This code should go into the Create or Room Start event of your parallax object:
    Code:
    /// @description Get layer, tilemap, and background properties
    
    //Get all layers
    layers = layer_get_all();
    var layers_length = array_length_1d(layers);
    
    //Get all elements
    elements = 0;
    tilemaps = 0;
    backgrounds = 0;
    for (var l = 0; l < layers_length; l++;) {
        layer_elements = layer_get_all_elements(layers[l]);
        var layer_elements_length = array_length_1d(layer_elements);
        elements += layer_elements_length;
        //Get element types
        for (var e = 0; e < layer_elements_length; e++)
            switch layer_get_element_type(layer_elements[e]) {
            case layerelementtype_background:
                //Get background
                var bg = backgrounds;
                background_id[bg] = layer_elements[e];
                background_time[bg] = 0; //This is used to keep track of autoscrolling. We'll need it since the parallax will naturally override any autoscroll.
                background_layer[bg] = layers[l];
                var xo = layer_get_x(background_layer[bg]);
                var yo = layer_get_x(background_layer[bg]);
                background_parallax_hspeed[bg] = xo/100;
                background_parallax_vspeed[bg] = yo/100;
                backgrounds++;
                break;
            case layerelementtype_tilemap:
                //Get tilemap
                var tm = tilemaps;
                tilemap_id[tm] = layer_elements[e];
                tilemap_layer[tm] = layers[l];
                var xo = layer_get_x(tilemap_layer[tm]);
                var yo = layer_get_y(tilemap_layer[tm]);
                tilemap_parallax_hspeed[tm] = xo/100;
                tilemap_parallax_vspeed[tm] = yo/100;
                tilemaps++;
                break;
        }
    }
    
    //Enable this line of code if you need to debug
    /*show_message("Found "
    + string(layers_length) + " layers, "
    + string(elements) + " elements, "
    + string(backgrounds) + " backgrounds, and "
    + string(tilemaps) + " tilemaps."
    );*/
    
    What this code does is get all of the layer, background, and tilemap information of the current room, so that we can reference it later when we try to scroll the background.

    Put this code into one of your step or draw events (I personally recommend Draw Begin):

    Code:
    var cx = <<<insert camera view x, or whatever you happen to be using>>>
    var cy = <<<camera view y>>>
    
    //Update background properties
    for (var bg = 0; bg < backgrounds; bg++) {
        var l = background_layer[bg];
        //Scrolling formulas
        var lx =(cx+background_time[bg]*layer_get_hspeed(l))*background_parallax_hspeed[bg];
        var ly =(cy+background_time[bg]*layer_get_vspeed(l))*background_parallax_vspeed[bg];
        //Perform parallax and autoscroll
        layer_x(l,lx);
        layer_y(l,ly);
        //Update autoscroll position
        background_time[bg]++; //Note: If you have a pause function or something similar, you may want to add an if statement here so that your background doesn't autoscroll when it's not supposed to.
    }
    
    //Update tilemap properties
    for (var tm = 0; tm < tilemaps; tm++) {
        tilemap_x(tilemap_id[tm],cx*tilemap_parallax_hspeed[tm]);
        tilemap_y(tilemap_id[tm],cy*tilemap_parallax_vspeed[tm]);
    }
    
    
    The only thing you'll really need to do here is plug in your own views, which you may have set up differently than I do in my project. Other than that, the code should be pretty much good to go. Tell me if this helps.
     
    Zerb Games and GMWolf like this.
  22. GMWolf

    GMWolf aka fel666

    Joined:
    Jun 21, 2016
    Posts:
    3,184
    Hey that very Cool, thanks for sharing the code!

    I have been planning to make a tutorial for CMS 2. I may inspire myself by some of your code!
     
    CobaltBW likes this.
  23. Landonbay

    Landonbay Member

    Joined:
    Jun 1, 2017
    Posts:
    64

    Just ran this code straight, and it does part of what I want to. (would I be allowed to use this code for the game?)
    so what if I have other layers that need to move at different speeds? is it the same process, what do I need to do?
     
  24. Izumi

    Izumi Member

    Joined:
    Jan 22, 2017
    Posts:
    3
    Hello! My code is just like yours but the Create event of the parallax object is running forever, so the game won't even load :(
    Code:
    parallax[0] = 0
    
    for (var i=0; background_visible[i]; i++)
    {
        parallax[i] = background_x[i]/100;
    }
    All my backgrounds are visible, do you have any idea what might be causing this?
     
  25. GMWolf

    GMWolf aka fel666

    Joined:
    Jun 21, 2016
    Posts:
    3,184
    As far as i can tell, This should terminate. How many backgrounds do you have?
    are you sure this code snippet is the one that istn terminating? (add a show_message at the end to check)
     
  26. Izumi

    Izumi Member

    Joined:
    Jan 22, 2017
    Posts:
    3
    I'm using 7 backgrounds. At the debugger, the value for i is tending to infinite. I added a show_message after the loop but it was never activated

    EDIT:
    Since my backgrounds will be visible all the time I just changed the loop stop condition to "i <= 7". Now is working fine
     
    Last edited: Jun 20, 2017
  27. CobaltBW

    CobaltBW Member

    Joined:
    Jun 9, 2017
    Posts:
    5
    Sure, knock yourself out.

    If you're talking about having different autoscroll speeds, it should already be set up for that. The code defines each layer's speed individually based on the background speed defined in the room editor.
    The only problem with the way I have it set up is that if your parallax (x/y background offset) is 0, autoscroll speed will also be 0 by proxy of it being multiplied by parallax. If you don't want it to be affected by parallax, change lines 41-42 in the draw/step event so that it calculates the autoscroll offset separate from parallax, like so:
    Code:
        var lx =(cx*background_parallax_hspeed[bg])+background_xoffset[bg];
        var ly =(cy*background_parallax_vspeed[bg])+background_yoffset[bg];
    
     
  28. flykidsblue1

    flykidsblue1 Member

    Joined:
    Jul 6, 2017
    Posts:
    37
    Hey man, nice job, I implemented your code to my game. The only problem is that one of the backgrounds(once it reaches the end) doesn't wrap and start again, it just diasappers, how would I make it to wrap around the screen?
     
  29. flykidsblue1

    flykidsblue1 Member

    Joined:
    Jul 6, 2017
    Posts:
    37
    never mind, got it to work, thanks!
     
  30. Geoff Moore

    Geoff Moore Member

    Joined:
    Oct 5, 2016
    Posts:
    46
    This is awesome!! Is there any way I can still give the baclgrounds an x offset, so they don't all start at the 0 position of the room? Or will I just have to include blank space in the image?
     
  31. GMWolf

    GMWolf aka fel666

    Joined:
    Jun 21, 2016
    Posts:
    3,184
    You would have to define the offsets and paralax factors in code.
     
  32. Geoff Moore

    Geoff Moore Member

    Joined:
    Oct 5, 2016
    Posts:
    46
    I see. How about if I wanted a background to scroll by itself (for example, a sky background with clouds), even when the view isn't moving? It would also be affected by the view's movement. Is it possible to do that and still use this method?
     
    Last edited: Jul 22, 2017
  33. Snayff

    Snayff Member

    Joined:
    Jul 18, 2017
    Posts:
    213
    Just gave the script from @CobaltBW ago in GMS2 and seems pretty easy to get going! Thank you for sharing!
     
    GMWolf likes this.
  34. CleanWater

    CleanWater Member

    Joined:
    May 29, 2018
    Posts:
    50
    Great tutorial! But I'm already using the view_xview and view_yview to follow my player. This code makes the "camera" shake in a strange way when I'm moving the player on my platform game.

    Is there any workaround for this?
     
  35. GMWolf

    GMWolf aka fel666

    Joined:
    Jun 21, 2016
    Posts:
    3,184
    Try changing the depth of the parallax controller so it updates the background after the camera is updated.
     
  36. TyrantZERO

    TyrantZERO Member

    Joined:
    Oct 18, 2018
    Posts:
    5
    I'm having the same issue and changing the depth of the parallax controller doesn't seem to be fixing the issue. Any ideas? It's a great tutorial and the scrolling looks great, apart from the stuttering of course :)
     
  37. TyrantZERO

    TyrantZERO Member

    Joined:
    Oct 18, 2018
    Posts:
    5
    *EDIT Never mind, my question was answered earlier in the thread.
     
    Last edited: Oct 23, 2018
  38. TyrantZERO

    TyrantZERO Member

    Joined:
    Oct 18, 2018
    Posts:
    5
    Where exactly did you change the loop code? I'm having trouble figuring it out.
     
  39. Jack McRip

    Jack McRip Member

    Joined:
    Dec 25, 2018
    Posts:
    11
    Thank you.
    So nice :)
     
  40. BigBrotherBear

    BigBrotherBear Member

    Joined:
    Sep 17, 2016
    Posts:
    6
    Glorious. Exactly what I needed.
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice