Create an original RPG game: Chapter one.
You should start here to have a better idea where this is going!
After unzipping the source code package (right-click – save as to download),
double-click on it and this will start Game Maker. Run the game to get a feel of what it does. To do this, simply click on the green icon that is labelled Run the game.
This will start the game in demonstration mode. You do this from time to time to check if your game is running correctly.
When your games aren’t working properly, and you want to see what’s going wrong, you can also run the game in debug mode.
It does the same as running the game, except you have a small window that gives you info on what is going on as the game runs. This helps figure out what went wrong.
So for now, you’re just running the game normally, and this is what you see. Obviously, we’re just starting so it’s rather basic. We’ll worry about graphics later.
Click on the head or bag and rudimentary panels appear, each containing an inactive “square”. Run your mouse over the square and it changes color, but that’s all for now.
One of these panels is the inventory (bag) and the other is your character panel.
Click on the black top bar and hold the left mouse button down. Move the mouse around and you see the panel moves accordingly.
Click on the head or bag button again and the corresponding panel disappears.
There you have it, the early stages of interactive inventory management.
You might have noticed that below the world view area there are five squares, similar to the ones in the inventory and character panels. These make up the control bar.
Soon you’ll be able to find items in the room that will automatically appear in your inventory (given there is still space there), click and drag these items to the character panel to equip them, do the same towards the control bar to be able to use them by clicking on it there.
But for now, let’s look at how we’ve gotten these results so far.
Game programming with dynamic objects.
Don’t worry if you don’t know what objects are just yet. It will become very clear as you read on.
Before doing anything you will need to create a room. Right-click on Rooms and create one. Don’t do anything with it yet.
Then you create the objects (right click on Objects folder, just like sprites or rooms) Double-click on the new object in the panel, name it,
and then you associate the sprite.
For dynamic objects, (objects that don’t always look the same) I often prefer to not associate sprites, but use the draw event to call a piece of code.
The code will dispay the sprite according to variables that change as the player interacts with the game. This gives many more options than by using the limited point and click features.
-
Create the draw event (pick it from the options that appear by clicking on Add Event).
-
Select the Control Tab.
-
Click and drag “Execute Code” from the Control Tab to the list of actions.
Several objects are used at this point.
-
The character object (main_ch) which can move around and trigger a pop up when it hits something.
-
The north, east, south, and west doors. Only north and east are in that room, but the others are available for later rooms.
-
The horizontal and vertical wall pieces.
-
A table object.
-
Square objects for future inventory slots.
-
Topbar, and inventory objects.
-
A bag and character inventory objects.
Objects can be placed in the world view, or Rooms to appear in the game. Sometimes you won’t place them there at first but they will be created later by the game, according to situations that occur. They can react to different situations (be created, be destroyed, change appearance, move…). Those situations result from the programming and can be much more diverse by programming code than they can be with the point and click options.
Game programming – starting with the world view.
I started by creating a very basic world view, just for the sake of illustration. There is a character, with a very prominent nose that changes directions according to which arrow keys you use.
There are also a few walls, doors, and a table. Each was added directly to “room0” by opening the room, selecting the objects and clicking at the appropriate spot.
To make the character able to move around, you need to open the character’s Object Properties window. It’s already created so just double click on the main_ch object in the object list.
Add the left keyboard event by clicking Add event, then selecting the bottom left option, then selecting <left> in the list that appears.
At this point there are two options to consider. The first is to use the point and click tabs in the move tab on the right. The second is to insert a piece of code as seen previously.
Like I said before, I don’t like point and click. It is too limited and you don’t truly learn to program games by relying on those. It isn’t that hard to learn so…
The left event triggers Execute a piece of code from the control tab.
global.heading=4;
if instance_position(x-10,y,all)=noone x-=4
else if global.space_mess=0 global.space_mess=1;
This is the code when the left arrow key is pressed.
- Global is necessary when the variable heading is meant to be used in scripts other than the one it is included in.
- Heading = 4 means the character will be facing west (1 for N, 2 for E…).
- if instance_position(x-10,y,all)=noone checks for any type of object that intersects with the character’s x coordinate-10 (10 pixels to the left) and the character’s y coordinate.
o If there is anything just to the left of your character, that means the “if condition” is not met (it doesn’t find “no one” because it finds something). In that case it runs the statement found in “else”. “all” means it checks for anything at all – this can be replaced by specific object names.
o If there is nothing there, then the “if condition” is met. It moves the character 4 pixels to the left by subtracting 4 from its x coordinate.
else if global.space_mess=0 global.space_mess=1; is what happens when there is an object ten pixels to the left of your character while pressing the left arrow key.
o If the variable global.space_mess=0, then it changes the variable to 1. Space_mess stands for “space message”. If you run into a wall or the table, a message appears that reads “When facing an object hit SPACE to see your options”. This is just to demonstrate that you can trigger this. Hitting SPACE doesn’t do anything at this point.
o In the draw event, part of the associated code is: if global.space_mess=1 {…} which means that if the variable’s value is one then it will run what is in between the brackets.
§ show_message(“When facing an object hit SPACE to see your options”); This shows the message (the OK button is included automatically).
§ global.space_mess=2; This ensures that the message is only showed once. If I wanted that message to appear each time the player runs into an object I would set it back to 0 so the entire process could run again, or even simpler simply not have created this variable at all.
The control bar.
Below the world view there is a control bar made up of five “squares”.
These don’t show much unless you run the mouse over them. At this point they only react to Mouse Enter and Mouse Leave events. Again, you add events by double-clicking on the object it will apply to on the left. Then you add the Mouse Enter and Mouse Leave events the same way you added events previously.
At this point the game doesn’t require more than point and click so I used the Change sprite button in the main1 tab. This could change later though if I need this to trigger code (it will).
- Open the Object properties for a square object.
- Create Mouse Enter and Mouse Leave events.
- Select one of the two.
- Open the main1 tab.
- Click and drag
into the list of Actions.
- Double click on it then.
- Select the sprite you want it to change into.
and repeat for the other event.
In both cases, they change sprites accordingly. For this I used the predefined action “change sprite”.
In later versions these will react to items being “dragged into them”.
Game programming – click and drag inventory and action components!
This is what stands out at this point. Having control panels that can be dragged around the screen.
These are made up of two main elements: the topbar (black) and the brown surface that “follows” the topbar wherever it goes. Then there are the squares, or item slots. There is something very particular about these that we will discuss a bit later.
Creating and destroying the panels.
The first step is creating the panel. This happens when the left mouse button released event occurs for the adequate object (either the blue button for the character panel or the bag button for the inventory panel). Left mouse released doesn’t happen when the player clicks, it happens when he releases the button. Almost the same but not quite.
The code starts by checking if the topbar exists already. If it doesn’t, the if condition is met so it reads variable values, which will be used to define where the topbar is located. tbx is topbar x coordinate, tby is topbar y coordinate.
Then it will assign the location for the brown inventory box (just below it) and the item slot squares.
Then it will create the two, and since they are always a fixed distance from each other, when the topbar is clicked and dragged, the brown box follows.
But we still have to make the topbar react to clicking and dragging.
This is done in a very similar way, by using the No button mouse event on the topbar object, which is triggered when the mouse runs over the topbar without clicking. When this is active, it calculates the x and y distance between the mouse cursor and the top-left pixel of the topbar.
These variables are recalculated at every step (1/60th of a second according to Room Properties.)
When the mouse is clicked on the Topbar (Left Button mouse event), the variables stop changing and can be used to determine where the topbar is located at every step.
And the inventory box called equiped follows, as well as the squares.
A bit more detail about the code:
When the mouse is over the topbar and no button is pressed, this generates the “no button” event. What happens then is a constant recalculation of the distance between the mouse and the topbar’s “origin”.
Note that the origin can be set in the sprite’s settings. It can be the center of the topbar, or the top left corner (x=0 and y=0) or any coordinate you choose. This doesn’t matter much, as long as it is the same for all the objects involved.
This is how the distance between the mouse and the origin are calculated at each step:
global.tb_correct_x=mouse_x-x;
global.tb_correct_y=mouse_y-y;
tb_correct_x stands for topbar correct x (for the x coordinate). That’s a variable name I chose. Always be explicit with variables so that you can recognize their function when debugging, or reviewing your code for whatever reason.
mouse_x is the built-in variable for the mouse’s x coordinate.
x is the topbar’s built-in x coordinate. Note that it doesn’t need to be global since it is only used for the current object (topbar).
global.tb_correct_x and global.tb_correct_y are respectively the horizontal and vertical distance between the topbar’s top left corner (origin) and where the mouse is during that step. Those are global variables because I will use them later to determine where the topbar needs to be at each step.
When the left button is pressed over the topbar, this generates the Left Button mouse event for the topbar. The following code is then applied:
x=mouse_x-global.tb_correct_x;
y=mouse_y-global.tb_correct_y;
x and y stay at a constant distance from the mouse because since the no button event is no longer occurring, the recalculations aren’t happening. This means that global.tb_correct_x and global.tb_correct_y aren’t changing.
When you move the mouse, the topbar just “follows” as long as you keep the left button down.
global.equiped_x=x+global.equiped_correct_x;
global.equiped_y=y+global.equiped_correct_y;
This keeps the brown square at equal distance between the topbar’s origin (x and y), which means it “follows” as well.
global.square100_x=x+global.square100_correct_x;
global.square100_y=y+global.square100_correct_y;
This keeps the item slot square at equal distance between the topbar’s origin (x and y), which means it “follows” as well. This is included in each square’s step event (recalculates position at each step).
The same can be done for any other object. More item slot squares of course, but also any number of tabs, buttons (…).
Frequent problem.
If you look at the room settings you’ll see I changed the room speed (default = 30, I set it to 60). If it is too slow, the mouse keeps popping out of the topbar space because your mouse runs at system speed (much faster).
Changing the speed, however, also speeds up all the objects in the game. Your character walks faster for instance. Setting it too high would make the click and drag work better but you’d need to slow down the game with a sleep() command at each step.
Room speed being 60 means 60 steps occur per second instead of 30. There are better ways to fix this but I’ll leave it at that for now.
Back to Game Programming
Other posts of interest:
The power of sound for better productivity, creativity, training and state of mind.
If one of the arrow keys is pressed, this is an event that main_ch will respond to by carrying out the list of actions on the right. Arrow key actions for main_ch are execute a piece of code, which adjusts the direction the character is heading (global.heading), its coordinate (x or y depending on the key that is pressed) and checking if nothing is in the way:
main_ch is drawn. If space_message=1, it shows a message informing the player that the space key will show what options he has at any given point in the game if he is facing something.
Space is released. This changes a variable that will be used in the next main_ch object’s draw event. The variable changes if there is anything in one of the four directions, 10 pixels away. If not, it “sleeps” for 1/1000th of a second for each direction and then runs nothing_to_do(), another script that says there is nothing to do.
Recent Comments