Simple Background Gradient Render

tagwolf

Member
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 #)
// UPDATE: 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.
// (Thanks to gnysek for pointing this out!)
// 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!​
 
Last edited:

chance

predictably random
Forum Staff
Moderator
This is an immediate style improvement and extremely low compute cost and effort.
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.
 

tagwolf

Member
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.
Oh very true! I should add that option to the tutorial.
 

tagwolf

Member
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.
Thanks! Updated and gave you credit <3
 
Top