Introduction To Game Design & Programming in GameMaker Studio 2
Page 5
if global.level<13 exit;
if can_shoot_2==false exit;
alarm[1]=room_speed;
show_debug_message("Missile 2");
var xx = x + lengthdir_x(64, image_angle);
var yy = y + lengthdir_y(64, image_angle);
missile=instance_create_layer(xx,yy,"Missiles",obj_player_missile;
missile.image_angle=image_angle;
missile.direction=image_angle;
missile.speed=10;
can_shoot_2=false;
alarm[2]=room_speed*1.5;
The code for weapon 1 and 2 addon for top and bottom Alarm Event code is:
alarm[0]=(room_speed*3)+room_speed*5/global.shoot_speed;
ang=image_angle;
xx = x + lengthdir_x(32, ang);
yy = y + lengthdir_y(32, ang);
bullet=instance_create_layer(xx,yy,"Missiles",obj_bullet_1);
bullet.direction=ang;
bullet.speed=5;
bullet.image_angle=ang;
if global.level<6 exit;
bullet=instance_create_layer(xx,yy,"Missiles",obj_bullet_1);
bullet.direction=ang-30;
bullet.speed=5;
bullet.image_angle=ang-30;
bullet=instance_create_layer(xx,yy,"Missiles",obj_bullet_1);
bullet.direction=ang+30;
bullet.speed=5;
bullet.image_angle=ang+30;
We’ll change that to:
alarm[0]=(room_speed*1.5)+room_speed*5/global.shoot_speed;
ang=image_angle;
xx = x + lengthdir_x(32, ang);
yy = y + lengthdir_y(32, ang);
bullet=instance_create_layer(xx,yy,"Missiles",obj_bullet_1);
bullet.direction=ang;
bullet.speed=7;
bullet.image_angle=ang;
if global.level<6 exit;
bullet=instance_create_layer(xx,yy,"Missiles",obj_bullet_1);
bullet.direction=ang-30;
bullet.speed=7;
bullet.image_angle=ang-30;
bullet=instance_create_layer(xx,yy,"Missiles",obj_bullet_1);
bullet.direction=ang+30;
bullet.speed=7;
bullet.image_angle=ang+30;
Similary we’ll change the code for the second weapon, top and bottom from:
/// @description Calculate Position
alarm[0]=(room_speed*3)+room_speed*4;
ang=image_angle;
xx = x + lengthdir_x(32, ang);
yy = y + lengthdir_y(32, ang);
bullet=instance_create_layer(xx,yy,"Missiles",obj_bullet_2);
bullet.direction=ang;
bullet.speed=5;
bullet.image_angle=ang;
to:
alarm[0]=room_speed*4;
ang=image_angle;
xx = x + lengthdir_x(32, ang);
yy = y + lengthdir_y(32, ang);
bullet=instance_create_layer(xx,yy,"Missiles",obj_bullet_2);
bullet.direction=ang;
bullet.speed=7;
bullet.image_angle=ang;
A quick play through for a few minutes, shows a marked improvement.
HUD is not in keeping with the rest of the game
We’ll add a background for the HUD and change the font used for HUD.
A quick look on GameDeveloperStudio.com finds a suitable sprite, which matches in with the menu room.
I found suitable sprite, Papyrus
The updated HUD code now looks like this:
/// @description Draw HUD
draw_set_font(font_menu);
draw_set_colour(c_black);
draw_set_halign(fa_center);
draw_set_valign(fa_middle);
draw_set_alpha(0.5);
draw_sprite(spr_hud,0,0,0);
draw_text(200,40,"Score "+string(score));
draw_text(200,80,"Highscore "+string(global.highscore));
draw_text(500,40,"Level "+string(global.level));
draw_text(500,80,"Power "+string(global.pow));
if obj_player.shield>0
{
draw_text(800,40,"Shield Active");
}
else
{
draw_text(800,40,"No Shield");
}
draw_text(800,80,"Health "+string(health));
draw_set_alpha(1);
The game after applying, makes the game level look like the screen shot shown in Figure 6_6:
Figure 6_6: Showing updated HUD
Aspect ratio should be changed
Another bit of feedback from my beta testers was the screen ratio.
We’ll make some changes to make the game more widescreen. I quick search on the net told me that the average minimum screen resolution width is 1366, so we’ll change the window size to 1300 to accommodate this.
The steps for doing this:
Change the room size for all rooms, so they have a width of 1300
Resize sprite for in game HUD
Change drawing locations of text for in game HUD
After updates, the game room looks like that in Figure 6_7:
Figure 6_7: Showing game with new screen ratio
Collision masks are impresise
Figure 6_8 shows a sprite collision mask before changes:
Figure 6_8: Showing default mask settings
The problem with this is obvious, it will detect a collision well to the left of the sprites actual image. Due to the fact the sprite changes size with each subimage, we’ll change the collision setting to use precise per frame setting as shown in Figure 6_9:
Figure 6_9: Showing new mask settings
Using this collision masking too often can slow down your game, so should only be used when needed. We’ll also use this for the player’s sprite mask, as it also changes size each frame.
Figure 6_10 shows an updated mask, using a rectangle, which is better that the above option, when you want to set a a collision that doesn’t change too much:
Figure 6_10: Showing a manual rectangle mask
I would now go through and check the masks for all sprites used in the game.
GUI life and dots not in keeping with game style
We’ll change the colour of the health bar, and position it in the middle above the enemy. We’ll also add a player’s health bar at the bottom of the game window. See the programming section for the relevant code. The dot, used for detecting player hitting target area of the boss enemy, can just be made invisible.
To visually show damage to player
We’ll make the player flash red when it receives any damage. We’ll use a similar system to that which was used for the boss enemy.
Figure 6_11 shows game room with changes made:
Figure 6_11: Showing changes applied from beta testing
Once you’ve made all the changes based on your feedback, I suggest one further round of beta testing, just to check no bugs remain.
The download has a file Game_Final, you can play this to see the finished game.
Debugging
Another stage of development is debugging, which goes hand in hand with writing the code. You can add (and then remove when fixed) code that will display messages in the console window. This could include simple messages such as, “Collision With Enemy Detected”, which the code would be:
show_debug_message(“Collision With Enemy Detected”);
Or include values or strings of variables, for example the code below:
show_debug_message(“Health is now “+string(health));
Figure 6_12 shows the effect when added to a collision event with an enemy projectile, console window output is shown, the first with shield active so taking no damage, then again without shield showing damage taken:
Figure 6_12: Showing console window
This is great to use if only test the occasional object instance or event that happens every so often, but if you try to debug lots of things as once, the console window would fill up quicker than you could read it. Fortunately, GameMaker Studio 2 come with quite
an impressive debugger. I suggest you spend some time learning the basics of it.
Chapter 7 Programming
Programming Introduction
The Programming Introduction covers the initial basics you will need to work through the programming chapter, it is strongly suggested that you do this section before attempting anything else, if you are new to GameMaker Studio 2 / GML.
In this section we’ll make a very basic clicker type game. You'll learn the basics of how to set up and use the following:
Rooms
Sounds
Sprites
Fonts
Objects
Drawing
GUI
Alarms
INI Files
Randomization
Create Events
Mouse Events
Step Events
There will be an object instance that appears at random positions and the aim of the game is to click it before the timer runs out. Each time you successfully click the object the timer will get faster and it will magicaly jump to a new position. If you don’t click the object before the time runs out, you will lose a life – and it jumps to a new position. If you lose all your lives, then the game is over. We’ll also have basic menu that shows the current highscore of the game if present.
This game is here to show you around GameMaker Studio 2’s IDE, setting up objects and programming what they do, how to assign sprites and play sounds. It certainly wont win any awards, but does serve as great introduction. The sketch below shows the ideas for the menu room and game room:
SKETCH A
Sketch B
Resources
The resources for this mini game are in the download you got with this book. See the acknowledement page at the front of the book for the source of these assets.
Sprites
Sprites are images that will be used in your game. You’ll use them to display the player, enemy, and other graphics in your game. Images needed for this
Sprites will generally be drawn by referencing or assigning them to objects. Next, load in the sprites for this game.
There are five of them, spr_logo, spr_start, spr_target, spr_exit, and spr_lives.
You can create a new sprite by clicking the right-clicking where shown in Figure 7_1:
Figure 7_1. Showing where to click to create a sprite
Then select Create Sprite as shown in Figure 7_2:
Figure 7_2: Creating a new sprite
Name the sprite spr_logo and click the import button, as shown in Figure 7_3:
Figure 7_3: Naming sprite and clicking import
Select spr_logo, shown in Figure 7_4:
Figure 7_4: Selecting sprite image
Name the sprite spr_logo and click Load Sprite, select the file shown below, then Open, set the Origin to the center, the setting for this is shown in Figure 7_5:
Figure 7_5: Setting the origin to middle center
Repeat this for the remaining sprites, naming them spr_exit, spr_lives, spr_start, and spr_target. Set the origin of all sprites to middle center. The origin is point in the sprite where it will be positioned in the room.
When done, the resources tree will look like that in Figure 7_6. You can change the order if you want to by clicking and dragging an asset.
Figure 7_6: Showing sprite resources
This game only uses a few sprites, though some games can run into many hundreds. You can organize sprites (or other assets) by right-clicking in the resource’s tree and creating a folder. You can then drag the assets to the created folder. You can sort by the room, or the type or any other way you want.
Rooms
Note: When starting out, ensure all rooms have the same size settings, for example a width of 800 and a height of 400. If rooms have different sizes then anything drawn may be distorted.
Rooms are where the action takes place and where you put your objects. You’ll use these objects to display graphics, process user input, play sounds, and make other things happen.
We will create two rooms. The first will be a splash screen that shows some information about the game, while the second room will be where the actual gameplay takes place. First create two rooms; name them room_menu and room_game. Set the room size for each as 800 by 400.
You can do this by clicking the right clicking where shown in Figure 7_7 and selecting Create Room:
Figure 7_7: Creating a room
Right click on the room room0 in the resource tree and select rename, rename as room_menu. Set the room dimensions as shown in Figure 7_8:
Figure 7_8: Setting room dimensions
Repeat this process for room_game, again setting the dimensions to 800 by 400.
The room at the top of the section of rooms in the resources tree will be the first room to run when the game starts. Ensure that room_menu is the first room to run.
Sounds
Sounds can be music or sound effects. You name each one and use code later to play the sound when you want to hear it. We will load them now, so we can simply refer to them later.
The example uses two sounds: snd_click and snd_miss.
You can do this by right clicking and selecting the the Create a sound option, as shown in Figure 7_9:
Figure 7_9. Create a new sound
Select the appropriate sound from the resources folder as shown in Figure 7_10, and name as snd_click:
Figure 7_10: Loading in a sound resource
Repeat this with the sound file snd_miss.
Fonts
If you want to display text or variables on screen in your game, you’re going to need to define and name some fonts. You can then set drawing to this font when you want text or variable values displayed. A font can be created by clicking the Create a font button by right-clicking where shown and select Create Font:
Figure i-11. Creating a font
Set the font name as font_hud and the size as 20 Arial as shown in Figure 6_12:
Figure 7_12: Naming and setting a font
Objects
Objects are the life blood of GameMaker Studio 2. Objects are used for displaying sprites, playing sounds, drawing text, detecting movement, processing functions, performing math calculations, and more.
Next we'll create the objects. There are five of them: obj_logo, obj_start, obj_target, obj_exit, and obj_hud.
First create the object obj_logo and assign the sprite to it.
This can be done by right clicking on Objects in the resource tree and selecting Create Object.
Name this object as obj_logo, as shown in Figure 7_13:
Figure 7_13: Creating a new object
Next is to assign a sprite to this object, assign the sprite spr_logo as shown in Figure 7_14:
Figure 7_14: Assigning a sprite to an object
Then click ok.
Next create a new object, obj_start and assign the sprite spr_start.
The next step is to program some Events. Events are things that happen. The events you’ll use most are the Create Event, Step Event, Alarm Event, and Draw Event. These can be set up using GameMaker Studio 2’s built-in GUI.
Do this by clicking Add Event then Create Event, as shown in Figure 7_15:
Figure 7_15: Making a create event
Drag the windows around using the Middle Mouse Button, so the window looks like that shown in Figure 7_16:
Figure 7_16: Showing window with create code in focus
In the open window, enter the following code:
/// @description Set Up
//see if ini file exists and load saved score ini_open("savedata.ini"); //open file savedata.ini
global.highscore = ini_read_real("score", "highscore", 0); //set global.highscore to value or set as 0 if no value present
ini_close(); //close ini file - always do this after loading or saving data
//set starting values for game:
score=0;
lives=5;
This code will load any high score from a previous play of the game to the variable
global.highscore, set current score to 0, and lives to 5. It is not important at this stage to understand this code. The purpose of this exercise is to learn how to add GML code to an event.
When you’ve added the code, the open window will look as shown in Figure 7_17.
Figure 7_17. Showing code added
Next create a new event, a Mouse Left Button Pressed Event as shown in Figure 7_18:
Figure 7_18: Creating a mouse left button released event
The code for this event is:
/// @description goto the room room_game
room_goto(room_game);
Next open up obj_logo and add a Draw Event by clicking Add Event followed by Draw Event, as shown in Figure 7_19:
Figure 7_19: Selecting a draw event
The code for this event is:
/// @description Drawing Stuff
draw_self(); //draws sprite assigned to this object
draw_set_font(font_hud); //set font
draw_set_halign(fa_center); //set horizontal alignment for drawn text
draw_set_colour(c_white); //sets drawing colour as black