Home > SoulHow > SoulHow to work with surfaces (Game Maker)

SoulHow to work with surfaces (Game Maker)

July 18, 2008

NOTE: Comments are locked. I no longer answer questions about the Game Maker tutorials on this blog; I suggest you take any questions to the Game Maker Community. For more info, view the FAQ page.

Skill Level: Advanced user (7)

Welcome to the surfaces SoulHow article. In this article you will learn how to use surfaces in Game Maker. They can be used for many purposes, such as neat transitions, dynamic textures, and custom sprites made at runtime. A lot of people think surfaces are some magical, superdifficult concept you shall never understand except by…witchcraft. Got you.

The basic idea is this: A surface is like a blank canvas. Imagine going to the art store, and buying a blank canvas. On this canvas, you can paint whatever you want, and put it wherever you want on the wall. You can paint over what you’ve already painted, and you can rotate the canvas as well. However, unlike what is possible with a physical canvas, with surfaces, you can also scale and stretch, alpha blend, and transparify.

As I mentioned, first you need a blank canvas. So you go to the store and buy one. Or, in Game Maker, you call surface_create(), give it the width and height of the surface to be created, and catch the return value in a variable. The variable now holds the index number of your brand shiny new surface. Actually, it’s not shiny yet; you have to make it shiny. Or dull. Or whatever you want.

On this new surface, you can draw whatever you want. How do you do this, though? All drawing functions draw on the screen! Is there no possible way to get my drawing to go onto this surface?!

Of course there is, silly. You use surface_set_target() and feed it the index of your surface as an argument, and GM now knows that all further drawing should be done on that surface. Giving a value of -1 or using surface_reset_target() will tell GM to draw on the screen again.

Note: Contrary to common sense, do NOT switch drawing targets or draw on a surface in the draw event. Only in other events.  As stated in the GM manual, it will “cause serious problems with the projection and viewport”. So don’t.

First though, you have to clear the surface to nothing; that way, your surface doesn’t have to always be a rectangular drawing. Imagine painting on a glass canvas, where you can see what you paint but everything else is see-through. To clear the surface, use draw_clear_alpha(), and give it two arguments: c_white (for “color”), and then 0 (for “alpha”). This tells GM to make the surface completely transparent, essentially clearing it to no color at all.

Okay, now you can start drawing on the surface. You might do something like this in the create event (or anywhere but the draw event; see above):


Let’s look at this line by line. First, we create a surface with the size of 32×32. Then we change the drawing target to the new surface. Next we draw a sprite and an outline of a circle on our surface, and reset the drawing target back to the screen.

There’s one thing to note here. When you draw on a surface, you need to ignore the room coordinates. Only worry about the surface. That means that 0,0, is no longer the upper-left corner of the room, but rather the upper left corner of the surface.

Imagine standing in a room with a large wall in front of you, and a canvas off to your right. When you set the drawing target to the surface, you’re turning away from the large wall and looking directly at the canvas. The wall means nothing. Then when you reset the target after painting on the canvas, you’re turning back to the wall, and when you finally draw the canvas on the screen you take the canvas and hang it on the wall.

Oh yes, I’ve forgotten that part. Drawing the surface on the screen. What good is it, if you don’t actually put it somewhere? To do this, you use draw_surface. (there are a few other drawing functions, like draw_surface_stretched, draw_surface_tiled, etc.; however they do the same thing as draw_surface but with more parameters. Just like draw_sprite_ext compared to draw_sprite)

draw_surface must go in the draw event, which is safe because you won’t be messing with the drawing target. Once you’ve drawn on the surface and reset the drawing target, you can draw the surface on the screen however you want, whenever you want. So after the above code, you might place this code in the draw event:


And your surface will be drawn 32 pixels above the player object. All done.

And that’s it. To have some more dynamic effects, you draw different things on the surface and draw it in different ways. You can also create a sprite from a surface using sprite_create_from_surface(), or a background with background_create_from_surface(). Yet even more fancy functions await you in the surfaces section of the GM manual; check it out and start practicing.

If you enjoyed this article, please consider checking out the rest of the blog.

If you have a technical question, such as “How do I do this” or “this is not working right” (relative to something with your Game Maker game after reading this tutorial), please head over to the Game Maker Community and ask there.  I can’t answer any such questions in this blog and the members at the GMC will be more than capable to help you.  For more info, go to this blog’s FAQ page.

  1. October 2, 2008 at 6:51 am

    Very nice. your description of the surfaces (canvas/wall) was great. helped me understand it very easily.

    i can now draw

  2. Psyckho
    September 13, 2008 at 2:28 am


    yay, thanks, now i can use surfaces :D

  1. June 1, 2011 at 2:10 am
Comments are closed.
%d bloggers like this: