Creating Your First JRPG Using GameMaker Studio 2

Step 1 - Getting Started - Project Setup and Character Movement

In this series we'll be walking through how to build a JRPG similar to the NES/SNES era Final Fantasy games. It won't be a full game with 10's or 100's of hours of content, but it will walk you though the basics of creating a world map, dungeons and towns, inventory and party systems and a simple battle system.

Resources

In each section of this series there will be a link for you to download the resources needed for that tutorial. This includes the images and sounds we'll be using in the current tutorial as well as a copies of the project as of the beginning and end point of the tutorial.
Getting Started Resource Pack

Setting Up The Game

If you haven't already, launch GameMaker Studio. From the start page, create a new project using GameMaker Language (also called GML). I'm going to name the project "JRPGTutorial". Before we get started we'll want to set some options that are going to impact how we develop our game. From the menu bar, click the "Game Options" button. It looks like a gear.
Setting Game Options in GameMaker Studio
Setting Frames Per Second in GameMaker Studio
Under "General" change the "Game Frames Per Second" to 60. This is the number of times the screen is redrawn every second and is also known as frame rate. By default this is set to 30 which might be fine for a traditional JRPG, but if you decide to do things that are more action oriented, things will look cleaner at a higher frame rate.
Under "Platform Settings" select "Windows" and then "Graphics". Check the options for "Interpolate colours between pixels" and "Use synchronization to avoid tearing". The first option will help smoothe out the edges of our graphics. "Use synchronization to avoid tearing" forces the game to only recalculate the image being displayed on the screen in between the physical screen redrawing. If we don't select this option and our game is not perfectly optimized we can end up with part of the screen displaying the previous frame and the rest displaying the next frame.

Make sure you click "OK" on both this window and the "Game Options" window to save the changes we've made.
Setting Windows specific graphics options in GameMaker Studio

Creating The Character

Creating a Sprite in GameMaker Studio
To create our character, the first thing we're going to do is create the images that will be used to show our character, also known as sprites in GameMaker Studio. For the character we're actually going to have 4 separate sprites containing the animation for the character walking up, down, left and right. To create the first sprite, in the resource tree right click on "Sprites" and click "Create". In the sprite properties panel, find the property for "Name" and change it to "spr_fuzzy_right".

Meet Fuzzy

Fuzzy is the main character we'll be using throughout our game. He's named fuzzy because I'm not a great artist, so my first attempt at creating a character came out looking really fuzzy. But I kept trying, looking at examples of how other people had created characters, and eventually I came up with something I was happy with. I point this out because even if you're not a great artist, musician, or storyteller it's still possible to create a fun game. Even if you're first game doesn't look fantastic, keep trying!
The character we'll be using in our JRPG made in GameMaker Studio

Back To Creating The Character

Editing an image in GameMaker Studio
What we need to do now is import the image of Fuzzy facing right from the resources pack. To do this we're going to click "Edit Image" in the sprite properties panel. Edit Image brings you to the image editor. You can create all your images right inside GameMaker Studio using the image editor, or use another tool like paint.net or Graphics Gale and import the images.
To import our image, from the menu select "Image -> Import Strip Image". Navigate to the resource pack and find the file called "Fuzzy_Right.png". In the window change the option for "Frames per Row" to 4. Leave "Frame Width" at 32 but change "Frame Height" to 48. Click "Convert". Click yes to the warning about importing replacing existing frames.
The Convert To Frames screen in GameMaker Studio
Playing animation in the Image Editor in GameMaker Studio
You'll see that you now have 4 frames across the top of the image editor, each with Fuzzy in a different position, all facing right. You can play all the frames by pressing the play button in the image editor to see what the animation looks like. You can play around with the speed of the animation, but make sure that if you change it, you change it back to 15 when you're done.
Close out the image editor using the "X" in the tab view to go back to your workspace. Next we want to setup what's called the "Collision Mask" for our character. The Collision Mask is the area of your sprite that GameMaker Studio will use to identify when two objects are overlapping. The reason our character is 32x48 is that the additional 16 pixels in height are used to overlap things like vertical walls, giving you the illusion that you can walk right up to the wall. We don't want the top 1/3rd of the image to count as a collision since we want it to overlap walls. Under "Collision Mask" in the sprite properties panel, change the "Mode" to "Manual" and then change the value for "Top" to 15. This number is "0 based", meaning 0 - 15 is 16 pixels. If you notice, the value for "Right" is 31 instead of 32, that's because pixel 0x0 counts as 1.
Setting the Collision Mask on a Sprite in GameMaker Studio
The final result of importing all our Sprites into GameMaker Studio
Now, on your own, go ahead and repeat the steps above to create "spr_fuzzy_left" using the file "Fuzzy_Left.png", "spr_fuzzy_up" using the file "Fuzzy_Up.png", and "spr_fuzzy_down" using the file "Fuzzy_Down.png". Also, make sure you adjust the collision mask for all 4 sprites. When you're all done you should have 4 sprites in your resource tree that look something like this.

Setting Up Your Character

So now that we have all the sprites for our character created, how exactly do we show him on the screen? This is where we'll get into the fundamentals of any game, objects and rooms.
The first step is to create a new object. Objects are like models for things that exist in our game. Think of them as the blueprint for a house. In your resource tree, find the node labeled "Objects", right click and select "Create". Just like when we created a sprite, find the name property and change the name to "obj_player".
Are you noticing a theme with naming here? For our sprites we named everything "spr_XXX" and now our object is "obj_XXX". As a matter of good practice, everything we add to our project is going to get a prefix like that. Prefixes not only allow us to quickly identify what something is, they help us organize and group things together in a logical way.
In the object properties window in your workspace, under the option for "Sprite", click in the area where it says "No Sprite" and select "spr_fuzzy_right". We're going to dynamically modify this as we move the character around, but this gives us a default image to use for our character.
In the object properties window, click "Events" to open the events window for the object. Then, click "Add Event -> Create". This is going to create a new "Create" type event that runs every time a new instance of "obj_player" is created in the game. Inside the create event, enter the following code.
The first 4 lines are called macros. They allow us to define shortcuts to various things in our project. In this case we're telling GameMaker Studio that anytime we use the word RIGHT, we really mean "spr_player_right". This gives us a simple place to change which sprites are associated with an object, so we can use "UP", "DOWN", "LEFT" and "RIGHT" throughout our code, and then if we decide to change the sprites associated with those directions later we can just come and change them in one place. The next two lines define variables that we'll use in our movement routine and sets their default values. By default we'll be moving 4 pixels for every frame, and we starting off our character facing right.
#macro RIGHT spr_fuzzy_right;
#macro LEFT spr_fuzzy_left;
#macro UP spr_fuzzy_up;
#macro DOWN spr_fuzzy_down;

move_speed = 4;
player_direction = RIGHT;
Next, select "Add Event -> Step -> Step". A step event executes once for every frame of the game, so in our case this event will execute 60 times every second for every instance of an object in the current room. This is important to keep in mind because it could potentially cause some lag in your game if the event isn't written efficiently. Inside the step event we just created, enter the following code.
 x_axis = 0;  
y_axis = 0;  
if(keyboard_check(vk_right))  
{  
    x_axis = move_speed;  
    player_direction = RIGHT;  
}  
else if(keyboard_check(vk_left))  
{  
    x_axis = move_speed * -1;  
player_direction = LEFT;  
}  
else if(keyboard_check(vk_up))  
{  
    y_axis = move_speed * -1;  
    player_direction = UP;  
}  
else if(keyboard_check(vk_down))  
{  
    y_axis = move_speed;  
    player_direction = DOWN;  
}  
if(x_axis != 0 || y_axis != 0)  
{  
    x = x + x_axis;  
    y = y + y_axis;       
    sprite_index = player_direction;       
    image_speed = 0.5;  
}  
else  
{  
    image_index = 0;  
}  
The first two lines set our default movement to 0. Next we used the function "keyboard_check" to check for "vk_right". This checks the current state of our keyboard to see if the right arrow key is being pressed. "keyboard_check(vk_right)" will return true if the right arrow key is currently pressed, so we'd go ahead and set our movement along the x axis to be equal to the movement speed, and set the player direction to be equal to the macro "RIGHT", meaning right now we want to use the sprite "spr_player_right".

The next set of "else if" statements do the same thing for the left, up and down arrow keys, setting our movement speed along the x or y axis as appropriate. You'll notice that to move left or up we actually take our movement speed and multiple it by -1. That gives us the ability to reduce the values of our x and y positions without needing to have a positive and negative movement speed.

Following that, we check to see if our x_axis or y_axis variables are anything other than 0. If so, we take "x" and set it equal to our current x value plus the value we determined for our movement speed along the x axis. We also do the same thing for "y". x and y are special variables in an object that correlate to the object's position inside the room, so by setting this x and y values we are actually moving our object around the screen. We also set "sprite_index" equal to our player_direction. sprite_index is also a special variable in an object that allows us to assign which sprite is associated to an object. "image_speed" is another special property of an object that determines how fast we cycle through the frames of our sprite animation. Finally, if we weren't moving in any direction we set "image_index" to 0. This is the first frame of animation for our sprite, which in our case is the normal standing position.

Displaying The Character And Moving Around

The next thing we need to do is put our character in a room in order to let him move around. Rooms in GameMaker Studio are the equivalent of levels or dungeons, towns, the world map, etc. If you look in the resource tree under "Rooms" you'll see that GameMaker Studio has already created a default room for you called "room0". Having at least one room is a requirement for a GameMaker game. The first thing we'll do here is rename "room0" to "rm_world_map". You can change the name of a room by slowly double clicking on the room in the resource tree, or right clicking and selecting "Rename".
Changing the name of a Room in GameMaker Studio
Adjusting Room properties in GameMaker Studio
Next we'll need to insert an instance of our player into the room. If an object is the blueprint for a house, an instance is the actual house. Double click on "rm_world_map" to open the room editor. Next, click on "obj_player" in the resource tree and drag it out to the center of the room. The exact position doesn't matter.

Next, in the bottom left hand corner of the screen you'll see the Properties panel for the room. I've expanded mine to capture all the settings in one screenshot, but it's usually much smaller than this. Right under "Room Settings" you'll see options for Width and Height. We'll be changing these to 1280 and 720 respectively. Next, still in the room properties, expand the options for "Viewports and Cameras". Check the box for "Enable Viewports", expand "Viewport 0" and check the box for "Visible". Still under "Viewport 0", under the "Camera Properties" change the width and height to 1280 and 720, then under "Viewport Properties", again, change the width and height to 1280 and 720. Under the heading "Object Following", click where it says "No Object" and select "obj_player".

Running Our First Game

And now we're ready to run our game! Go ahead and click the "Run" button in the toolbar. It looks like a right facing arrow. You should see a black screen with your character in the middle. If you've done everything correctly you can press the left, right, up or down arrow keys and your character will start walking around!
Running a game in GameMaker Studio

Next Time

Congratulations on creating your first JRPG! You'll notice it's a bit lacking though. Keep following along with our next tutorial where we'll create a nice map to walk around in and put up some walls to prevent things like being able to walk off the screen!