A simple paint program made in Game Maker often draws directly onto a background which is not frequently redrawn. A screenshot is then taken. There is one way though, which is a lot more sophisticated than that one. It got several advantages: it enables layers, it is able to save the image without saving it as an image, it is (if you know the file structure) able to save it as a real file, png, gif etc. and it is much easier to manipulate the image. I have created this myself, and I am about to show you the scripts, and first of all is the initialization script:

<div style="clear: both;">w = 0 //Width of the image (drawing area)
h = 0 // Height of the image
size = 16 //Start size for the pencil
rtr = 0
srtr[1000] = 0
x_pos[1000] = 0 //Left top corner start
y_pos[1000] = 0 //Left top corner start
ssize[1000] = 0
i = 0
nr = 0
rtrd = 0
srtrd[1000] = 0
x_posd[1000] = 0 //Holding the square position (drawn or not)
y_posd[1000] = 0 //Holding the square position (drawn or not)</div>

As you can see at the description of variable size, this drawing system is grid based. Don’t abandon it as clumsy – because if the grid is just 1 pixel that’s the same as if you’d draw at mouse x and y position with whatever function you’d use, in your system. It’s an huge advantage as it enables a lot of different sizes and pencils.

size = argument0
w = 0
h = (-(room_height/15))
while(w<room_width) {
draw_line(w,0,w,room_height)
w +=size
}
while(h<room_height+(room_height/5)) {
draw_line(0,h-rtr,room_width,h)
h +=size
}

Above code draws the net of squares, which is useful both for you while testing and your users. Make some kind of control to make the squares (variable size) larger or smaller so that the user can define how big is pencil should be.

i = 0
while (i<nr) {
draw_rectangle(x_pos[i],y_pos[i],x_pos[i]+ssize[i],y_pos[i]+ssize[i])
i+=1
}

This simple (or at least short) code draws all selected squares. For a good functionality you will need to implement a set colour function on the line above draw_rectangle which reads from another array with the same indexes as the x_pos, y_pos and ssize has. It should be easy, just input colour[i] = selected_color when the user left click at a square. You will see what else happens when a user left click in this next script, and you might put the code in it:
if mouse_check_button(mb_left) {
x_pos[nr] = floor(mouse_x/size)*size
y_pos[nr] = (floor((mouse_y-(1-(frac((-room_height/15)/size))*size))

/size)*size)-(1-(frac((-room_height/15)/size))*size)+round(size/100)*64
ssize[nr] = size
srtr[nr] = rtr
nr+=1
}

i = 0

if mouse_check_button(mb_right) {
x_posd[nr+100] = floor(mouse_x/size)*size
y_posd[nr+100] = (floor((mouse_y-(1-(frac((-room_height/15)/size))*size))
/size)*size)-(1-(frac((-room_height/15)/size))*size)+round(size/100)*64
ssized[nr+100] = size
srtrd[nr+100] = rtr
while (i<nr) {
if (x_pos[i] == x_posd) && (y_pos[i] == y_posd)
&& (ssize[i] = ssized) && (srtrd = srtr[i]) {
x_pos[i] = -x_pos[i]
y_pos[i] = -y_pos[i]
exit;
}
i +=1
}
}

A lot of calculations, what are they? Although you are probably able to figure it out yourself I will explain some basic stuff.

y_pos[nr] = (floor((mouse_y-(1-(frac((-room_height/15)/size))*size))
/size)*size)-(1-(frac((-room_height/15)/size))*size)+round(size/100)*64

I love long calculations! It’s the y value of the clicked square we are calculating. It gets the position by dividing the clicked y position minues 1/15 of the room height divided on the square size multiplied by the size divided by the size… I’m just not going to explain this, sorry. I think some things have to be discovered by own mind efforts. What it basically does though is dividing, multiplying and finally rounds the number such that I get the left-top corner of the square – which acts as an ID.

Now, how to add several layers? This is simple, when you get the system. Just make every position array two-dimensional and let the second index indicate which layer it should be applied to. Then in the drawing code you must draw each layer in the order which will decide the depth of each layer. The hierarchy, which layer will be drawn with the lowest depth, could preferably be chosen by the user.

Because of my lack of explanation, I feel forced to attach an example file, and here it is (it just does the basic things; the fancy things are not added):
http://gmtutorials.com/files/paintexample.gmd

Here another version which works with Game Maker v 6.x - the only thing that is changed is that I set outline to false in function draw_rectangle.

http://gmtutorials.com/files/paintexample.gm6