Color Palette in GameMaker: Studio

In this tutorial, we’ll create a color palette for the user (or player) to pick a color from. Let me show you the final result:

Capture.PNG

It can have a variety of uses – you could be creating a paint program, or a player customization menu where the player can select a color for their character. Or, maybe you’re here because this could be just fun to learn! All in all, let’s get started!

Sprites

Here are the sprites we’ll be using for this tutorial:

 

The black-white bar (spr_value) is the one we’ll use to set the value (or lightness/brightness) of the color. Then there is the color palette (spr_palette) which will allow us to select the hue (horizontally) and the saturation (vertically) of our color. And the small sprite there is spr_picker, which will show up as the cursor inside the palette. When you import spr_picker into GameMaker, don’t forget to center its origin.

Make objects for the palette and value sprites (obj_palette, obj_value) so that we can proceed.

Color Palette

We’ll make the color palette first. So, open obj_palette and let’s start coding!

Create event:

//init globalvars
globalvar hue, saturation, value, color;
hue = 0;
saturation = 255;
value = 255;
color = make_colour_hsv(hue, saturation, value);

//init vars
cursor_x = x;
cursor_y = y;
pressed = false;

Here, we’re first initializing four global variables.

Global variables are variables which can be used by any object – unlike normal (local) variables, which are different for each object.

hue: this will contain the hue (0 to 255).

saturation: this will contain the saturation of the color (0 to 255).

value: this will contain the value/lightness/brightness of the color (0 to 255 as well).

color: this will contain the color, which is made using the hue, saturation and value variables and the make_color_hsv() function.

Then we’re initializing two local variables (cursor_x and cursor_y) which store the location of the cursor inside the palette which can be changed using the mouse.

Then the variable pressed is being initialized which will store the state of the palette – if it is true, that means the color is being edited, and vice-versa.

Step event:

color = make_colour_hsv(hue, saturation, value);

hue = cursor_x - x;
saturation = abs((cursor_y - y) - 255);

The first line is the same as the one in Create event. We’re just using it in Step event as well because we need the color to be calculated at every step.

Then, the next two lines calculate the hue and its saturation based on the cursor_x and cursor_y.

The abs() function returns the absolute value of the value inside the parenthesis.

Step event: (Add the code)

//1
if (mouse_check_button_pressed(mb_left)){
 if ((mouse_x >= x && mouse_x < x + 255) && (mouse_y >= y && mouse_y < y + 255))
 pressed = true;
}
//2
if (pressed){
 if (mouse_x >= x && mouse_x < x + 255) cursor_x = mouse_x;
 else if (mouse_x < x) cursor_x = x;
 else if (mouse_x >= x + 255) cursor_x = x + 254;

 if (mouse_y >= y && mouse_y < y + 255) cursor_y = mouse_y;
 else if (mouse_y < y) cursor_y = y;
 else if (mouse_y >= y + 255) cursor_y = y + 254;
}
//3
if (mouse_check_button_released(mb_left) && pressed){
 pressed = false;
}

Okay, this is some big code now. Don’t worry, it’s really easy. There are three conditions.

In the first one, it’s being checked if the mouse is being pressed inside the palette. If it is, pressed is turned to true.

In the second condition, it’s being checked if pressed is true. If it is, then first the cursor_x value is changed according to where the mouse_x is. If it is inside, let cursor_x be its value. If it is outside, let the cursor_x be on the edges. Then, the same for cursor_y.

In the third one, it’s being checked if the left mouse button is released while pressed is true. If it is, pressed is turned to false.

Draw event:

draw_self();

draw_sprite_ext(spr_picker, 0, cursor_x, cursor_y, 1, 1, 0, color, 1);

draw_self() will draw the palette as it is.

The second line is used to draw the cursor (spr_picker) at the cursor location, with its color set to the color picked from the palette – it’s in the second-to-last argument. You can read more about this function here.

Testing time!

Place obj_palette in a room and execute the program. Test it using your left mouse button and see the color being applied to the cursor – this shows that our code works!

gif1.gif

(I’m not using a different palette. The GIF has just messed up the colors. It will be like this in the other GIFs too)

Lightness/Value Bar

Now, let’s work on the value bar. Open obj_value and start coding!

Create event:

cursor_y = y;
pressed = false;

You know these two variables from the previous object. This one just has cursor_y and not cursor_x because there is only one dimension to handle here: value (vertical).

Step event:

value = abs((cursor_y - y) - 255);

if (mouse_check_button_pressed(mb_left)){
 if ((mouse_x >= x && mouse_x < x + sprite_width) && (mouse_y >= y && mouse_y < y + 255))
 pressed = true;
}
if (pressed){
 if (mouse_y >= y && mouse_y < y + 255) cursor_y = mouse_y;
 else if (mouse_y < y) cursor_y = y;
 else if (mouse_y >= y + 255) cursor_y = y + 254; 
}
if (mouse_check_button_released(mb_left) && pressed){
 pressed = false;
}

In the first line, it calculates the value variable according to the cursor_y variable.

The next part is very similar to the previous Step event that we did for obj_palette. It enables pressed if left mouse button is pressed inside the palette. Then changes cursor_y to the appropriate location, and disables pressed if left mouse button is released.

Draw event:

draw_self();

draw_sprite(spr_picker, 0, x + sprite_width/2, cursor_y);

This one is almost the same as well. It draws the main sprite and then the cursor, with its x position in the sprite’s center and y position at cursor_y.

Test it!

Place obj_value in the room wherever you like, and execute. Now, you can change the value/lightness of the color too – you now have full control over choosing your color!gif2.gif

Works great!

If you want the value bar to change according to the hue and the color palette to change according to the value, you may replace their respective draw_self() functions with these draw_sprite_ext() functions:

For obj_palette:

draw_sprite_ext(sprite_index, image_index, x, y, image_xscale, image_yscale, image_angle,
make_colour_hsv(0, 0, value), image_alpha);

For obj_value:

draw_sprite_ext(sprite_index, image_index, x, y, image_xscale, image_yscale, image_angle,
make_colour_hsv(hue, saturation, 255), image_alpha);

It’ll result in this:

gif3.gif

Conclusion

Now, you have the variable named color which has your color in it. You can use this for anything you want. If you want to know how to change the color of an object’s sprite using code, read this.

Download this project

Need more help, or want to ask something? Use the comment section below or mail me at gurpreetsingh793@gmail.com. If it helped you out, why not share it with others and help them out too? 😉 Also, scroll down to the bottom of this page and press Follow to stay updated on new tutorials.

Join your fellow GameMakers on GameMaker’s Guild (Facebook) and on the GameMaker Community (YoYoGames forum).

Thanks for being here, and have a great day!

 

 

 

 

 

 

 

Advertisements

2 thoughts on “Color Palette in GameMaker: Studio

  1. Hello, this is an awesome tutorial! I’ve noticed this is pretty big though and my game resolution(384×216) is small how can I make this for a small resolution? Any ideas or tips?

    Like

    1. I think you’ll have to tinker with the values in the code based on your palette sprite size. In this tutorial, the sprite size is 256×256. So, the values in the code are like 255 or 254 and so on (subtracting one pixel or two). So, suppose you wanted to reduce the size by half (to 128×128), you’d have to change the code like..

      saturation = abs((cursor_y – y) – 255)

      ..to…

      saturation = abs((cursor_y – y) – 128) * 2

      …So, basically you just had to halve the operation values but then multiply them back by the number you divided so that the output comes under the 0-255 scale.

      You don’t have to worry about the code which automatically takes values from sprite_width/height.

      This is untested, but if done correctly, should work.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s