© The Author(s), under exclusive license to APress Media, LLC, part of Springer Nature 2023
B. TyersGameMaker Fundamentalshttps://doi.org/10.1007/978-1-4842-8713-2_4

4. More Drawing

Ben Tyers1  
(1)
Worthing, West Sussex, UK
 

There are also lots more drawing functions for formatting text, and for drawing sprites. This chapter will introduce you to them.

Text can be used for such things:

  • Scores and health

  • Player names

  • Game information

  • Pop-up text

  • Dialogue between characters

  • Menu options

You will want to use sprites for such things as:

  • Displaying the main player

  • Drawing lives as images

  • Displaying what weapons are currently available

  • Various in-game buttons

  • Instances the player can walk or jump on

  • Enemy instances

  • Game info such as health or timers

Note

Ensure you only try to draw variables that have already been defined – failure to do so will cause an error and crash your game.

Create a new project in GameMaker, along with a new object obj_example.

To use drawing functions, they need to be placed within one of the Drawing Events.

Note

Ideally, you should use drawing events for actual drawing code. Other code unrelated to drawing should be placed in an alternative event, for example, the Step Event.

Create a Draw Event for the object you just created.

Then place the following code into that event:
draw_text(50,50,"This is some example text");

This will draw the This is some example text at the given position.

You can also include strings and numbers, by converting the real to a string, for example:
var age=43;
draw_text(100,100,"I am "+string(age)+ " years old.");

This will draw the text I am 43 years old.

You can format text:

  • With different colors

  • Different fonts

  • To have vertical and horizontal alignment

Save the code you just wrote and close the object.

Make a new font (as shown back in Chapter 1, Figure 1-1), then choose a font and size, as shown in Figure 4-1.

A screenshot titled font: font example shows four panels. The panel on the top left reads, name: font example, select font- Arial, the group- default, and a checkbox, copy to project, to set a font.

Figure 4-1

Setting font and size

You will now set up the drawing style using this font:
draw_set_font(font_example); //Set the font you just created
draw_set_colour(c_purple); //Set the colour as purple
draw_set_halign(fa_center); //Horizontal center
draw_set_valign(fa_middle); //Vertical center
draw_text(200,100,"Some Example Text");//draws text
Note

Formatting will remain in place for all future drawing. It is good practice to set it each time just before drawing.

The text on the previous page will be drawn centered on the horizontal and vertical, in purple and using the set font.

You can force a new line using

For example:
/// @description drawing example
draw_set_font(font_example);
var text="Hello World";
draw_text(200,200,text);
This would look like that shown in Figure 4-2.

A screenshot titled, Created with Game Maker Studio 2, displays the text, Hello World, at the bottom right corner of the screenshot.

Figure 4-2

Showing force of a new line

As mentioned previously, you can combine strings and reals. For example, you can do the following code in the Create Event of an object, obj_example:
/// @description An Example
name="Benjamin";
age=43;
country="England";
food="Cheese";
and a Draw Event with:
draw_set_font(font_example);
draw_set_halign(fa_right);
draw_set_valign(fa_top);
draw_set_colour(c_green);
draw_text(800,200,"My name is "+name+". I am
"+string(age)+" years old. I live in
"+country+". My favourite food favourite food is
"+food+".");

Another important element of GameMaker is sprite control. You’re likely to use sprites a lot in your game. The aim of this section is to draw a sprite in a few different ways. The default way of drawing the sprite with default settings would be to assign it to an object and have nothing in the Draw Event. You can of course use a Draw Event and draw the sprite manually.

Go ahead and load in a sprite from the assets folder spiky land sprites. Name this as spr_test and resize to 128x128, as shown in Figures 4-3 and 4-4.

A screenshot titled Sprite: spr test shows two panels. The panel on the left reads name: spr test; image: size- W:369, H:369; edit image; import. The panel on the right reads 30 frames per second 0 by 0 top left, and an imported sprite at the top and a resized sprite appear at the bottom.

Figure 4-3

Showing imported and resized sprite

You can quickly resize the image as shown in Figure 4-4.

A screenshot titled Sprite: spr_test shows two panels. The panel on the left reads name: spr_test; image: size- W:369, H:369; edit image; import. The symbol below the tab, size, is within a bold square. The panel on the right reads 30 frames per second 0 by 0. The tab, resize properties: spr_test, shows tabs named current and preview sizes of a sprite while the tab, scale image, within a bold box shows a symbol and option to change width, height, and a checkbox called maintain aspect ratio.

Figure 4-4

Showing how to resize sprite

Go ahead and create an object obj_example. Put the following in the Draw Event and then test your game.
/// @description drawing
draw_sprite(spr_test,0,200,200);

This will draw the sprite spr_test at position 200,200. The 0 tells the program which frame of the image to draw.

You can also draw a sprite with more settings, for example:
draw_sprite_ext(sprite,subimage,x,y,xscale,yscale,rotation, colour,alpha);
This allows for more flexibility on how the sprite is drawn. Allowing you to set which sprite, subimage, scale, rotation and color blending and its alpha (transparency), it is drawn with, for example:
draw_sprite_ext(spr_test,0,180,120,0.8,1.5,25,c_red,1)
which would draw as shown in Figure 4-5.

A screenshot titled, Created with Game Maker Studio 2, displays a red sprite at the bottom right corner of the screenshot.

Figure 4-5

Example of draw_sprite_ext

Color blending, for example, can be used to visually show damage to a player or enemy. If you want to draw a sprite with the default settings, this will be done automatically.

Sprites can also consist of multiple subimages (frames) that can be played in sequence to create an animation.

Note

GameMaker starts the subimage frame at position 0, so your first frame (if you have subimages) will be 0.

Figure 4-6 shows how to import multiple images. Click the first image, scroll the window down and click the last image while holding the Shift Key, then click on Open.

A screenshot titled, sprite: spr boy at the top and contents of a folder, new book, at the bottom. Sprites are accessed in the following order. New book, assets, graphics, and animated boy. Multiple sprites are selected to make an animation.

Figure 4-6

Importing multiple images

Assign this sprite to an object, obj_example.

Delete any Draw Event if you have one present (right click and select delete).

Note

If you are using a drawing event, you will be required to tell the program to draw the sprite. You can use draw_self() or draw_sprite_ext.( )

You can also set the sprites origin, which is the position where it will be anchored when you draw it, for example, change the sprite you currently have, as shown in Figure 4-7.

A screenshot shows a sprite at the left while the coordinates read 50 by 80 middle center.

Figure 4-7

Setting the origin to middle center

Make this change now.

Another variable that you’ll find useful is image_xscale and image_yscale. This can be used to great effect in making a sprite flip when the direction changes.

Pop the following code into a new Step Event:
/// @description Movement and sprite control
if keyboard_check(vk_left)
{
      x-=2;
      image_xscale=-1;
}
if keyboard_check(vk_right)
{
      x+=2;
      image_xscale=1;
}

If you now test your game, you can move the character left and right and the sprite will face the correct direction.

You can also change the subimage and animation speed through code:
image_index=2;
image_speed=0;

which would set the 3rd subimage and turn off animation.

You can manually set the angle of an image using code, such as:
image_angle=30;
If you have a moving object, you may want the image angle to match the direction, so it points in the direction it is moving. This can be done with:
image_angle=direction;
Another useful feature is a sprite strip, which may, for example, look like that shown in Figure 4-8.

An illustration shows 10 one-dollar coins in a straight line from left to right.

Figure 4-8

Showing a sprite strip

You can import this as a strip and GameMaker will automatically break it down into subimages for you. Just import as shown in Figure 4-9.

A screenshot displays a tab that reads the image, which in turn shows several options in a drop-down menu. The twelfth option, import strip image, appears highlighted and circled.

Figure 4-9

Selecting import strip image

GameMaker should then import and crop the frames as needed, though sometimes you may need to manually enter the values. Figure 4-10 shows an imported sprite strip converted.

A screenshot titled, Sprite: spr test, shows two panels. The panel on the left reads name: spr test; image: size- W: 496, H: 496; edit image; import. The panel on the right reads 30 frames per second, 0 by 0, top left, and a one-dollar coin sprite on the top converted into a sprite strip, as 10 one-dollar coins, at the bottom.

Figure 4-10

Showing sprite strip converted

A similar process can be used if you’re importing a spritesheet, just set up the number of frames and frame size, as shown, for example, in Figure 4-11.

A screenshot titled Convert to Frames shows dimensions on the left and a sprite sheet on the right.

Figure 4-11

Showing sprite sheet importing

Basic Projects

  1. A)

    Draw a sprite that rotates.

     
  2. B)

    Make a program that draws players lives as heart images. Allow the player to press arrow keys to change lives between 1 and 6.

     

Advance Projects

  1. C)

    Draw clouds that move across the screen at different speeds and with different alpha values.

     
  2. D)

    Create an instance that follows a path and points in the direction it is moving.

     

Useful Functions

There are times when you may want an instance to slowly move to a direction. One method is:
speed=2;
target_direction=point_direction(x,y,mouse_x,mouse_y);
angle_diff=angle_difference(target_direction,image_angle);
image_angle+=angle_diff*0.03;
direction=image_angle;
draw_self();  draw with current settings
draw_sprite_stretched(); quick way to change size of a sprite when drawing
draw_sprite_part(); great for health / stamina bars

Summary

You can now do some more advanced text handling and know the basics of sprite control. You understand that animations are made of subimages that are played in sequence. You should now know how to use scaling to change which direction a sprite points in. You now are aware of how to set a subimage and change the animation speed.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.191.175.159