Skip to content

Intro to canvases

Canvases

Canvases are at a very raw state in gooey.

A canvas is simply a widget consisting of a surface. It lets you render that surface as part of your panel.

Constructor

UITextBox(_id, _x, _y, _width, _height, _surface, _relative_to=UI_DEFAULT_ANCHOR_POINT)
  • id is the string ID.
  • x and y are the offsets with respect to the anchor point.
  • width and height are the desired width and height of the surface.
  • surface is a reference to the surface you want to draw.
  • relative_to is the anchor point, as usual from the UI_RELATIVE_TO enum.

Updating the canvas

You can use the getSurface method to get the reference to a surface, and then use GameMaker's surface_set_target to draw on it whenever needed. You can also directly set the surface reference with setSurface.

Surfaces in GameMaker

Surfaces in GameMaker are volatile, this means at certain points they can cease to exist (for example, if you minimize the game window). You will need to handle this somehow.

Example

Let's create a quick example of a panel that displays an in-game photo camera. I used both Game Endeavor's Mystic Woods asset and lYASeeK's MiniFolk Animals pack. The core of the code is creating the canvas widget and then using surface_copy_part to copy the center of the application_surface surface - the default surface to which graphics are rendered in GameMaker.

1
2
var _surf = surface_copy_part(self.new_surf, 0, 0, application_surface, 960/2 - 250/2, 540/2 - 250/2, 250, 250);
var _canvas = new UICanvas("Canvas", 0, 0, surface_get_width(self.new_surf), surface_get_height(self.new_surf), self.new_surf, UI_RELATIVE_TO.MIDDLE_CENTER);

We also want to be able to "take a new photo" (i.e. update the surface) when clicked. Let's define a callback for that:

3
4
5
6
7
8
_canvas.setCallback(UI_EVENT.LEFT_RELEASE, function() {
    var _s = ui_get("Canvas").getSurface();
    surface_set_target(_s);
    surface_copy_part(_s, 0, 0, application_surface, 960/2 - 250/2, 540/2 - 250/2, 250, 250);
    surface_reset_target();
});

The finished example looks like this. Use W A S D to move the character to a spot where you'd like a photo to be taken, then press Space to take the photo. This will create a panel with a canvas widget and the photo you took. With the panel open, you can still move (since it's on the GUI layer) and choose a new spot - then retake the photo by clicking on it. To close (and destroy) the panel, click on the close button or press Space again.

Not working?

Remember, if keyboard interaction is not working, make sure to click on the black bar just above the game canvas, to activate the iframe element - otherwise keys are processed by the site itself.