Sorry your browser is not supported!

I'm currently in the progress of developing a 2D RPG tutorial alongside an RPG. However I don't want to post anything on the DBP board until I know it's good. So I decided to get some feedback on what I have so far. I've only finished the first section - loading and displaying maps - but it's still pretty big. I'll add to it as it grows.

Here it is so far:

*******************************************************************
*******************************************************************
*******************************************************************

Tutorial: Making a 2D RPG with DarkBASIC Professional

Overview

This is a tutorial on making 2D RPGs with DBP. It will be divided into several parts:

-Introduction
-Creating Our Engine, Part 1: Loading and Displaying Tile-Based Maps
-Creating Our Engine, Part 2: Player Actions
-Creating Our Engine, Part 3: Spawning and Interacting with Entities
-Creating Our Engine, Part 4: Spawning and Interacting with NPCs and Dialogue
-Creating Our Engine, Part 5: Turn-Based Combat
-Creating Our Game, Part 1: Making a Plot
-Creating Our Game, Part 2: Making our Media
-Creating Our Game, Part 3: Creating our Scripts
-Creating Our Game, Part 4: Putting it all Together
-Conclusion

The first half will be about creating our RPG engine, and the second half will be about using that engine to make a game.

NOTE: This tutorial is not aimed at absolute beginners. It's recommended that you have a good understanding of variables, arrays, and UDTs.

Introduction

Before we start making a game, we have to make our game engine. More specifically, an RPG engine. A game
engine contains all of the common components of games. These things are coded into the engine and handled by the engine, so we don't have to
deal with stuff like collision; the engine handles that for us. An RPG engine is a little more specific, though. An RPG engine typically
has a combat system, some kind of economy or market system, an NPC system, as well as several other parts. We don't
want to have to write out 500 lines of code every time we want to talk to an NPC. Instead we can code that into the engine, and
when we want to engage in conversation we can call a function and have our engine handle it for us. However we don't
want our engine to do too much work. We want to leave our engine flexible, so the engine won't handle everything. On ther other hand we also
don't want the engine to just sit around and do nothing while we code everything right into our game. So we need to find a nice
medium; we want our engine to do a lot of work, but at the same time we also want to maintain a certain level of flexibility.
So here are some of the components which will be programmed right into our engine:

-Character movement and collision. We don't want to handle this, as it's very basic and easy to program into our engine.
However our engine won't do everything. We'll just tell the engine how when to move our character, how fast and in what direction.
This way we still maintain that flexibility we want.
-NPC interaction. Once again this is definitely better handled by the engine than the game code. When our character
talks to an NPC we don't want to have to draw the dialogue box, set the text size and font, etc. We'll have the engine
do this, and we'll just tell it what we want our character to say, and what we want the NPC to say.
-Combat. RPG combat, be it turn-based or real-time, can be very complex and it's most definitely something our engine should handle.

And this is just a *very* basic list. These are three examples of things that we don't really want to code every time we make a game.

Now that we've covered a fair bit of information about engines and our engine in specific, I think we can begin the creation of our engine.

Creating Our Engine, Part 1: Loading and Displaying Tile-Based Maps

2D RPG maps are typically divided into many different rows and columns, forming a map 'grid' of sorts. Each individual cell
of this grid is called a 'tile'. We can fill these tiles with things such as grass, dirt, and water to create our maps. Using this approach
to make our maps is very useful for many reasons:

-Reusability in different maps. Using only for or five images of dirt, grass, water, and sand we can make TONS of different maps.
-It saves space. Rather than having, say a dozen different 800x600 maps, we can could have maybe 3 or 4 200x100 tilesets that comprise all of our maps.
-It makes collision easy. Since we have a grid, we can set some tiles to be collidable and some tiles to be passable. Passable tiles would be things
like grass and dirt, while collidable tiles would be things like a house, a fence, or mountains.

So how are we going to make these maps? Well, I could go through how to make a 2D tile-based map editor. But this tutorial will already be massive as it is, and I've
revently found a map editor much better than anything I could make. It's called Tile Studio, and it's very well-made,
easy to use, and free. It also has a bunch of extra abilities such as a built-in tile editor to make your tiles with. Anyways it is the tool of choice for
this particular project, and this tutorial depends on using this editor so I highly suggest you use it. All the map loading and what not is specifically for this editor.

I'm not going to go into great detail on how to make maps with this editor. They have a tutorial on their site that's fairly simple. However, if you're looking for tiles to use with this editor,
check out RPG Palace. They have a bunch of RPG tiles that you're free to use in any project. So I'll leave you at this point to go and make you're map. When you've
made it and want to export it in the correct format come back.

Done yet? Don't worry, I can wait...

Ok. So hopefully you've learned the basics of Tile Studio and managed to make some kind of map. Here's what I've come up with:



I know it's pretty bad, but it doesn't need to be good. Anything basic will do. Now that you're done with your map, you need to export it. However,
it's not as simple as you would think. Tile Studio has no default map exporter. Instead, it provides a rather simple scripting language which allows us to create
our own exporters. Once again I'm not going to cover this here, because the Tile Studio site has tutorials on it. Here's a basic exporter I've come up with:



Take this snippet, paste it in a text file, rename it as "DBPExport.tsd" (make sure you include the tsd file extension) and save it in the
Tile Studio folder. Then in Tile Studio go to Code->Code Generation Settings and choose our new file as the code generation definition.
Now, to export your map, go to Code->Export Code and it'll export your map as "<mapidentifier>.gm" where mapidentifier is the name of our map.
Okay, now you should have your map file (.gm file) and a folder labeled 'Graphics'. This folder contains the image required for our map. The image
contains every different tile in our map. When we load the map, we'll grab each of these tiles individually so we have them as separate images.

Now that we have a map to test, we can start the actual code. When I start a project, I always start with some dividers to keep my code organised, as well as some setup code:



You don't have to do this, but I reccomend that you at least do something similar to help you with organisation.

Let's start with setting up some UDTs, arrays, and variables.

We're going to have two types for our maps: TTile, and TMap. I think their use is fairly obvious; we'll use TTile for tiles and TMap for maps.
Here is our TTile UDT:



The first variable in this type is 'Img'. This will be used to contain the image ID of the image used for this tile. The second variable is the same,
except that we'll use for the tile's sprite rather than image. The third variable, 'collidable', is whether or not our character can pass through this tile. For things
like walls, this variable will equal 1, while for stuff like grass it'll be 0. The last variable is just a general flag for our tile. It can be used to describe various
deatils of the tiles. For instance if the tile is a 'hurt-zone', such as lava, then we might give it a certain flag so we know when our character is over lava.

Next is our map UDT:



This is also pretty simple. The 'Name' variable is the name of the map, and the X and Y tile sizes are the size of the map in tiles. It's pretty basic for now.

Now for a a variable and a couple arrays.



The first variable, Map, is the variable which will hold our currently loaded map. Since we'll never have more than one map loaded at a time
we don't need an array. The first array, MapTiles( 30, 20 ), contains the tile data for
the currently loaded map. The two numbers are the row and column of the tile we're accessing.For instance, if we want to access tile ( 5, 4 ),
we'd write MapTiles( 5, 4 ) and access it like that,. We can use this array to access the sprite, image, collidability and flag
of every tile.. The second array will contain all the tile images of the currently loaded map.

Now that we've got our UDTs and arrays set up we can start with some functions. Our first function will be LoadMap():



Where FileName is the filename of our map file.

We're going to start by opening a file to read it:



Open To Read will allow us to open a file and read it with commands such as 'Read String' and 'Read Integer'.

Now we're going to read the first two lines of the file: the name of our map, and the filename of our tileset.



ReadString is a variable which we'll use to store each line of our file in. So we'll read a line, store it in ReadString, then do something with this data.
The first line of our map file is the name, and we'll store it in Map.Name. The second line is the filename of the image which contains
the tiles used in our map; this image is called our tileset.

Now we can load our tileset and grab each tile of the tileset and store it in TileImages( ).



The first line of this code will load our tileset image. We use the id 10000 because I know it's not in use, and we're going to be deleting this image soon anyways.
The second line pastes this image to the screen so we can grab sections of it. The third line will create a variable called CurrentTile, which will store the current tile being grabbed.
The next section might be a little confusing. We're going to loop through the rows and columns of our tileset, and grab each tile of the tileset and store it in TileImages.
We use a For Next loop embedded in another For Next loop, so we can loop through the tiles one row at a time, starting at the top. Every loop we increase the
variable CurrentTile so we don't accidentally write to the same element twice. In the second line we assign a free image ID to the current
element of theTileImages() array. Then we grab the image, which looks confusing but upon closer inspection it's simpler than it seems.

Now we continue and read the rest of the file, and fill our MapTiles array accordingly.

Here's the code we're using to read the rest of the file:



We start with some variables, X and Y. These store the current tile that we're reading info about.
Next we have a For Next loop to go through the lines of our file. The first thing we do is check to see if we're at the end of the file, by checking to see if the line is blank.
If it is, then we've reached the max X and Y values, so those must be the size of our map. Then we exit the loop. If it isn't we continue to read the file. Here's how the file
is layed out for each tile:

-The row of the tile.
-The column of the tile.
-The tile image of the tile.
-The collidability of the tile.
-The flag of the tile.

So we start by reading the row and column values. This will tell us what tile we're working with. We store these values in X and Y.
Then we read the tile image. This is stored in MapTiles( X, Y ).Img. Next we set MapTiles( X, Y ).Spr to an unused sprite ID.
Now we read the last two values and store them in MapTiles( X, Y ).Collidable and Flag.

Now we just have to close the file, clear the screen, and update it:



Woohoo! We're done with loading maps. You now have functional code we can use to load maps made with Tile Studio. Now we're going to learn how to display these.

Displaying these maps is fairly simple:



First we have two variables, XPos, and YPos. These are the positions we want to draw our map at. Generally we want to
draw our map at the center of the screen, so we find what coordinates we want to position our map at to have it centered perfectly.
Now we have some loops similar to the one we had earlier; a For Next embedded in another For Next loop. This part
basically runs through every tile in MapTiles( ) and draws it at X times the tile's size, and Y time's the tile's size. We use the image we loaded earlier
and stored in MapTiles().Img.

Ok, if you followed all of this correctly, your code should resemble this:



You'll have to add the LoadMap() part with your map file as the parameter, and in the main loop you'll have to add the DrawMap() part.

Voila!

*******************************************************************
*******************************************************************
*******************************************************************

Any suggestions are welcome and if you spot any problems point them out. Thanks.

Really nice.

You should make a demo with files and executable tough.

It looks clean and easy!

Thanks! Ya, the final version will include all the media and stuff.

This is more of a WIP version, and I'll try to add to it as I develop my game. I don't really expect anyone to use it at this point.

Hey, when I save the code at the beginning of this tutorial (I used .tsd) it still comes up as a text file, and it's not in Tile Editor. What do I do?

Is this dead? has it been continued somewhere else?