“How to make a bullet hell shmup in Game Maker”
Chapter 1: Getting Start and the main game GUI.
>> Download the project used in this tutorial here <<
Introduction
Though this tutorial is mainly for beginner, you are expected to have some basic knowledge of Game Maker. I’d recommend you to read Derek Yu’s Game Maker tutorial for beginner first. Follow his great tutorial up to chapter 2 or 3 should get you ready.
Making your first room
First of all, start Game Maker. I will be using Game Maker 7.0 professional in this tutorial. However, I believe it can be applied to any versions, registered or unregistered.
On the left panel you will see a tree structure. We need to first create a room for our game. This is where our game is going to take place. A room is like a stage or a scene where our game objects will interact with each other and create the actual game.
To create a room, simply right click on ‘Rooms’ and choose ‘Create Room’
Right click on the new room you just created and choose rename because any name is better than room0. Let’s name it ‘init_room’. This will be the very first room that the game enters. Hence its main task is to initialize anything before the game title screen start.
Now click on the setting tab. In here, we can set the room properties. Choose the size to be 640 x 480 and set the room speed to be 60. This is basically your frame per second, and 30 is too low in my opinion.
Save your game and click on run the game in debug mode. You should see a blank window with gray background. On the debug window, your fps should say 60 fps.
Folder Structure
If there’s no problem let’s go to where you save your source file. In order to make this tutorial easier to follow, I’d suggest you to name the folder the same as I did for now. After you got all the concepts you can, and I highly encourage you to, remake the game again with your own naming convention.
Create a new folder called ‘dat’. This will be your main resource folder. So any game resources should be in here
Then inside that folder, create the following folders.
- img
- bgm
Once you’re done. Find yourself a saudio.dll. Or you can just download it here. No matter how you got the dll, place it in the same level your source file is.
So basically your game folder structure should look like this
- Your game folder
- your source file
- saudio.dll
- dat
- img
- bgm
Let’s get back to Game Maker interface. Create another room and call it ‘shmup_room’. This will be the room for our main game. Don’t forget to set the room speed to be 60. Also, you might want to change the background color of this room and the init_room as well. Let’s choose black since it’s pretty common to start a game with a black screen before some swooshy title screen show up. You can change the background by clicking on the background tab, and choose the color to be black. Pretty easy, eh?
Making the main game’s GUI
Things will get pretty complicate from now, but nothing you can’t handle. We will be making a game interface. Something likes this.
First of all, create a new folder call ‘gui’ inside our ‘img’ folder. This will be where we store our gui graphic. To make this tutorial easier follow, you can use the graphics that come with the sample project I have for you at the top. (Those images were taken from Danmakufu, by the way)
Now, all four files, which are frame00 – 03 should be inside the gui folder. Then let’s get back to the GM interface.
It’s time for us to write some script. What we are going to do is to load the images externally. This will greatly enhance your game loading speed. Believe me, it is not fun having to wait 5-10 minutes everytime you debug your game! Don’t worry about your resource files being exposed for now; we can deal with that later 
In order to do this, we have to do it through scripting. So, let’s start with right clicking on ‘script’ in the left panel and choose create script. Name it ‘load_graphics’ so that we know what script we’re dealing with.
Double click on the script that we just created will open up a script editor. This will be where you write your script. I won’t go into details about syntax and all that jazz. You can read them up in GM help file.
Since the gui frame are separated into 4 parts, but they form just one gui when they’re put together. I think an array variable would make it easier to remember. You can create an array variable by simply type
|
array_name[array_index] = something
|
Also, since the graphic can be used by basically any objects. Hence, it’s logical to make it globally known. To do this, we put a keyword ‘global’ in front of the variable name.
All in all, to declare a global array would be something like this.
The above code means we assign 0 to the first element in the global array named gui_frame. (Array first element start with 0.)
Now, let’s move on to loading resource externally. Since all our four images won’t be using any transparency, we will use sprite_add instead of sprite_add_alpha.
|
sprite_add(filename, how many subimages(frames), precise collision?, tranparent?,
smooth?,preload?, xorigin, yorigin)
|
The words inside the parenthesis, separated by commas, are called ‘arguments’. A function will use these arguments to give us an appropriate result. In this case, to load a graphic and add it as a sprite, we need to know the filename, how many frames the sprite has, what kind of collision checking, will it be transparent, will it be smooth, should it be preload, and the anchor point of the image.
So in the end, our code of loading images externally would be:
|
//Load Pictures externally. Make game load MUCH faster.
//The arguments are like this
//sprite_add(filename, how many subimages(frames), precise collision?, tranparent?, smooth?,preload?, xorigin, yorigin)
//or
//sprite_add_alpha(filename, how many subimages(frames), precise collision?, preload?, xorigin, yorigin)
//LOAD GUI
global.gui_frame[0] = sprite_add(“dat/img/gui/frame00.png”,1,false,false,false,false,0,0)
global.gui_frame[1] = sprite_add(“dat/img/gui/frame01.PNG”,1,false,false,false,false,0,0)
global.gui_frame[2] = sprite_add(“dat/img/gui/frame02.PNG”,1,false,false,false,false,0,0)
global.gui_frame[3] = sprite_add(“dat/img/gui/frame03.png”,1,false,false,false,false,0,0)
|
According to the above code, we have created a global array called gui_frame. The array contains four elements, running from 0 – 3, and the elements are the graphic that we externally loaded.
However, script will be no used if nobody is using it. Therefore, we need to create an object that is responsible for calling this script. Right click on the object folder in the left panel and choose Create Object. Name it ‘initGame’ to let us know what this object does.
Now, double click on initGame object to open the object properties window. Click on Add Event and choose Create Event. This is because we want to load graphic at the very beginning.
Move your mouse to the right panel and click on the tab that says control. Under the code section, drag the first paper icon and drop it on the action box. This action is called ‘Execute a piece of code’ and will allow that object to perform whatever you tell it to do. In this case, we will tell initGame to call load_graphics so that we can actually make use of what we have written before.
Next, double click on the paper icon in the Actions box. This will open up another script editor with a window called Execute Code like the following picture
To execute the script you already wrote is really easy. Just type the script name, follows by () and viola! It will go look for your script and execute whatever you have written before.
Now, after we finish loading the graphic, we don’t want the player to stay here any longer. Hence we have to change the room to shmup_room, where our main game will take place. The function that is used for changing room is called room_goto(roomIndex). In this case, the roomIndex is shmup_room. Hence, our code will be
|
load_graphics()
room_goto(shmup_room)
|
Click ok to save changes. And we’re done with the object initGame for now.
We have an object that takes care of the graphic loading; however, we still need an object that is taking care of drawing them. There won’t be anything shown on the screen if no one is drawing them, right? Create a new object, name it oGUIFrame. Open up the object properties window but this time add Draw event instead of Create.
Add an action Execute a piece of code to the Draw event, just like what you did to the Create event of initGame. Now, a simple function used to draw a sprite is.
|
draw_sprite(image, subimage, x, y)
|
The function is pretty self-explanatory. I’ll give you the code here and you can play around with the number and figure how things work out yourself 
|
draw_sprite(global.gui_frame[0],0,0,0);
draw_sprite(global.gui_frame[1],0,32,0);
draw_sprite(global.gui_frame[2],0,32,465);
draw_sprite(global.gui_frame[3],0,417,0);
|
Now, we have everything ready. The only thing we need to do now is to place all these objects to their appropriate room. Go to init_room and place initGame in that room. This can be done by clicking on the Objects tab and choose initGame from the bottom left box. You can place it anywhere in the room but I prefer to put it at the first square at the top left ( position 0,0 ) If you see something like this then you’re doing it right.
Then, goto shmup_room and place oGUIFrame in that room, like what you did previously. And then run the game. You should see something like this.
And congratulations! You’re another step closer to complete your touhou game!
>> Download the project used in this tutorial here <<
Recent Comments