1. Hey! Guest! The 36th GMC Jam will take place between February 27th, 12:00 UTC - March 2nd, 12:00 UTC. Why not join in! Click here to find out more!
    Dismiss Notice

Simple Background Gradient Render

Discussion in 'Tutorials' started by tagwolf, Nov 27, 2019.

  1. tagwolf

    tagwolf Member

    Joined:
    Aug 6, 2016
    Posts:
    62
    Simple Background Gradient Render (No graphics required!)

    GM Version: 2.X
    Target Platform: ALL

    Summary:
    Immediately and with minimal effort make your games and prototypes looks better and more polished. I've seen so many GMS games that are using gray or flat black backgrounds. This is an immediate style improvement and extremely low compute cost and effort.

    Tutorial:
    1. Create an object called obj_render_background
    2. Create a Draw event
    3. Use the following code:
    Code:
    /// @description Background gradient
    
    // Available "built-in" colors:
    // c_aqua, c_black, c_blue, c_dkgray, c_fuchsia, c_gray, c_green, c_lime, c_ltgray,
    // c_maroon, c_navy, c_olive, c_purple, c_red, c_silver, c_teal, c_white, c_yellow
    
    // Square gradient colors
    top_left_color = c_ltgray;
    bottom_left_color = c_ltgray;
    top_right_color = $FFEFD5;
    bottom_right_color = $FFEFD5;
    
    // Rounded gradient colors
    inner_color = $FFEFD5; // Hex RGB example
    outer_color = c_ltgray;
    // Good reference for common hex color values (just use $ instead of #)
    // https://www.rapidtables.com/web/css/css-color.html
    
    // Just uncomment and comment the other one to switch
    // between left to right gradient vs radial gradient.
    // I'm sure you could also look up GMS2's other draw functions
    // and come up with some creative combinations!
    
    // Square gradient (left to right)
    //draw_rectangle_color(0,0,room_width,room_height,top_left_color,top_right_color,bottom_right_color,bottom_left_color,0);
    
    // Rounded gradient (just uncomment and comment the square one)
    draw_circle_color(room_width/2, room_height/2, room_width, inner_color, outer_color, 0);
    
    
    4. In the Room Editor, create a new instance layer just above the "Background" layer but below all your other Instance layers. Call it Background_Render
    5. Drag the obj_render_background on to the Background_Render layer.
    6. Enjoy!​
     
    Escaliburn likes this.
  2. chance

    chance predictably random Forum Staff Moderator

    Joined:
    Apr 22, 2016
    Posts:
    809
    I agree. Color gradients can add visual interest. As you show, the draw_rectangle_color() function is useful for that. And it's good for making gradual real-time changes to the gradient to change the mood.

    Drawing the gradient on a surface (once) and then displaying the surface can sometimes be a better choice. Of course, there's a trade off between computational overhead and memory. But that's something each game can consider.
     
    SnotWaffle Studios likes this.
  3. tagwolf

    tagwolf Member

    Joined:
    Aug 6, 2016
    Posts:
    62
    Oh very true! I should add that option to the tutorial.
     
  4. gnysek

    gnysek Member

    Joined:
    Jun 20, 2016
    Posts:
    1,381
    GameMaker uses BGR (blue, green, red) not RGB, so for example red is $0000FF, not $FF0000. Just replacing # with $ isn't enough, you need to swap last two chars with first two too.
     

Share This Page