Create an original RPG game: Chapter 1, part 3.

 

You should start here to have a better idea where this is going!

 

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).

 

 

 

1. Open the Object properties for a square object.
2. Create Mouse Enter and Mouse Leave events.
3. Select one of the two.
4. Open the main1 tab.
5. Click and drag  into the list of Actions.
6. Double click on it then.
7. Select the sprite you want it to change into.
8. 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”.

 

Back to Game Programming 

Post Footer automatically generated by Add Post Footer Plugin for wordpress.

Create an original RPG game: Chapter 1, part 4.

 

You should start here to have a good idea what this is about, and do things in order!

 

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 

Post Footer automatically generated by Add Post Footer Plugin for wordpress.

 

This is the second chapter of the RPG game programming tutorials (click and drag inventory and action). Get the GM source code: right-click, save target as. If you just got here you should start there!

 

We’re going to go one step further into elaborating dynamic inventory management. So far, we were able to open a bag using an inventory icon and drag that bag around the room. Now that bag will include items you’ve found playing the game.

 

Of course this requires that it be possible to find items in the game, so that part is covered as well.

 

Part I: What is new – taking game programming into new perspectives.

 

Just like the first time, let’s start by running the game. Put the source code  in the same folder you put the first one, then double click on it to run it with GM. Run the game by clicking Run the game.

 

 

It starts just the same as it did before, but now when you click on space when you are near the table there is a reaction.

 

 

 

At this point, we are using GM’s built-in dialog boxes. We can make our own from scratch, or customize those somewhat. That will come in later tutorials. For now, we are programming game interaction using those.

 

This game interaction will lead to finding items that will automatically be added in the player’s inventory. In this case we find cookies and a watergun (hey, this is rated PG!)

 

Run through the options and when you’ve found the cookies and the gun, check your inventory.

 

You do this by clicking the bag icon on the right. This is what you see:

 

 

 

Click on the black top bar and hold the left mouse button down.  Move the mouse around and you see the panel, as well as the newly included objects, move accordingly. 

 

Click on the head or bag button again and the corresponding  panel disappears.

 

We are one step further into interactive inventory management. Let’s look in the game programming code and see how we got it to work.

 

 Back to Game Programming.

Post Footer automatically generated by Add Post Footer Plugin for wordpress.