How to Make an RPG

In this tutorial, you’ll learn how to use pre-built frameworks to create your own reusable RPG engine. By the time you’re done, you’ll have the groundwork to create the RPG of your dreams! By .

Leave a rating/review
Save for later
Share

Learn how to make a RPG game for iOS!

Learn how to make a RPG game for iOS!

For as long as I can remember, I’ve been in love with role-playing games. There’s something so magical about an epic storyline set in a vast, intricate world.

But when it comes to actually programming a RPG, it’s easy to get intimidated by that same epic complexity!

Well, there’s some good news. There are now some killer tools, frameworks and tutorials to make this a lot easier than it used to be.

In this tutorial, you’ll learn how to use these frameworks to create your own reusable RPG engine. By the time you’re done, you’ll have the groundwork to create the RPG of your dreams!

This tutorial uses the Cocos2D game framework for iOS. Although you can follow along with this tutorial even if you’ve never used Cocos2D before, to get the most of this tutorial it helps to have some background knowledge. I recommend these three tutorials:

  1. How To Make a Simple iPhone Game with Cocos2D 2.X
  2. How To Make a Tile-Based Game with Cocos2D 2.X
  3. How To Use Animations and Sprite Sheets in Cocos2D

And that’s it – are you ready to roll the dice?

Getting Started

Your first step is an easy one: download the starter project.

Unzip the file and open MiniRPG.xcodeproj in Xcode. You’ll see something like this:

You can tap the screen and the hero will move in the direction you tap with some basic animation – but that’s about all it does for now. The rest is up to you!

Before you begin, let’s take a quick tour of the starter project so you understand how it works so far.

Resources\Characters

Character Animations Sprite Sheet

Character Animations Sprite Sheet

The Resources\Characters directory contains the sprite sheet for the hero’s animations (character.plist and character.pvr). The artwork was made for the Liberated Pixel Cup by various artists. The individual attributions can be found on each tileset’s respected page here.

This sprite sheet was made with a tool called TexturePacker.

Note: If you want to learn more about sprite sheets and Texture Packer, check our our How To Use Animations and Sprite Sheets in Cocos2D tutorial.

Resource\Tilemaps

The Resource\Tilemaps directory contains the tiles for the tile map (terrain_atlas.png, meta_tiles.png, obj_misk_atlas.png, and build_atlast.png). As mentioned above, the license for each tileset can be found here.

This directory also contains the tile map files themselves (town.tmx and room.tmx) that were created with the Tiled map editor. Download Tiled if you don’t have it already and open room.tmx. You will see the following:

RPG map made with Tiled Map Editor

You will see there are four layers in the map:

  • meta: If a tile is collidable, a special “transparent red” tile is drawn in this spot. It will not appear in the game – it’s only used as an easy way of tracking what’s collidable or not.
  • exit: Contains the exit to the room.
  • items: Decorations in the room like the bookshelf, stove, and bed.
  • walls: The walls of the room.
  • floor: The floor of the room.

Most of the layers are laid out in such a way to organize the tiles for layering. For example, the items layer is above the floor layer because you want to see the items on top of the floor. You will see more complex examples of this by opening up the Town.tmx file where I have things like ground and ground-helper to aid in drawing the environment.

Note: If you want to learn more about Tiled and making tile-map games in general, check out our How To Make A Tile Based Game with Cocos2D 2.X tutorial.

GameLayer.m

GameLayer.m contains the main game logic for the starter project so far. It does a few things so far:

  • init and loadMapNamed add the tile map and the hero to the layer.
  • update and setViewpointCenter keep the hero focused in the middle of the screen.
  • ccTouchEnded figures out where to move the player based on the tap, and calls setPlayerPosition appropriately.
  • setPlayerPosition checks the tile map’s “meta” layer to see if a given tile is collidable or not. If it’s not, it uses a move action to move the hero toward that tile and runs the appropriate animation based on the direction the sprite is moving in (by calling playerHeroMoveAnimationFromPosition).

Browse through the code until you have a good understanding of how it works. If there is anything you don’t understand, I strongly encourage you to read the tutorials mentioned in the introduction to make things a bit clearer.

That’s it for the starter project. At this point, your hero is safe and warm in their little room. But where should he go from here?

Your Quest, Should You Choose to Accept It

Over the course of this tutorial, not only will you learn how to make an RPG, you’ll also make a reusable RPG game engine that’s easy to expand and even rebrand for completely different games.

You will be adding the following components to this project to turn it into a full-fledged game:

  • Room navigation: Your hero doesn’t want to stay in this little room forever – he yearns for adventure! You’ll learn how to add doors to the map and change the character’s location when they cross the threshold.
  • NPC scripting: The game would be lonely (and boring) without other characters. You’ll learn how to create non-player characters (NPCs) that will drive the story and change their speech based on the player’s actions in the game. This will be done entirely in an easy-to-use scripting language called Lua that is ideal for scripting logic like this.
  • Questing: You’ll learn how to develop a reusable questing system that you can use in your own games. The system will also make it easy to add more areas and quests to your existing games in future updates.

Just like in an RPG, you can see how your quest to implement these features will lead to many other side quests – all for fun, fortune and glory, of course!

From Room to Room

Since the game uses a base tile map, switching between rooms is a simple matter of swapping out the tile map from under the character when they have walked over a certain area such as a door or a staircase.

Before you can switch to another area, though, you need to add two things:

  1. You need to define the location of the exit on the tile map;
  2. You need to build another area for your player to enter.

First, create an exit. Open room.tmx in the Tiled map editor. Below the Layers section, click the button to make a new Layer, and choose Add Object Layer, as shown in the screenshot below:

Note that this is different than the existing exit layer (a normal Tile Layer), because this new layer is an Object Layer. Object Layers allow you to define areas in the map with key/value properties that you can then easily retrieve in code. This is ideal for defining the area of the map where the exit is and defining where it should warp the player to.

Select the Insert Rectangle tool and draw a square over the stairs at the bottom of the room.

Now right-click on the square and select Object Properties. Set both the name and type to exit and add the following name/value pairs to the list of properties below:

  • destination: town
  • startx: 3
  • starty: 15

The destination specifies the name of the tile map that you want to load when the user steps onto this exit. The startx and starty properties specify the tile into which the user will spawn when switching between rooms. This is important to show that the user is coming from a door and not just randomly spawning on the map.

Save room.tmx. Now to step two – building another area for your player to enter.

Lucky for you, the town.tmx file is already included in the project. Open it up in Tiled and have a look around, but don’t make any changes to it yet!

Town RPG Map made with Tiled Map Editor

Remember that tile coordinate (0,0) in Tiled is the bottom left of the map. So coordinate (3, 15) is the area right below the door – count it out for yourself to see.