How to make a rpg game with phaser and html5 tutorial 1

Introduction to this series on how to make a rpg game

In this series of phaser tutorials we will show you how to make a rpg game from scratch. From building tile maps to displaying them on screen and adding characters in your game. We will even show you how to draw your own game assets using inkscape our favourite graphical editor for creating game assets. We specifically will get into the details of tile maps in phaser itself.

Initial game assets

To begin with we will share a very basic tile set we constructed in under ten minutes with inkscape.

Inkscape preview of our rpg game tileset
Inkscape preview of our rpg game tileset

You can download this asset below and once again we are making this freely available for you to use in your game development projects.

Free rpg tile set game asset
Free rpg tile set game asset

Once you have this you would want to head over to www.mapeditor.org and get yourself a copy of a piece of software called tiled.

Building our map

Once you have tiled installed and open and running. Let’s start to create the map file for our role playing game. First of all we want to create a new map you can do this by doing the following:

Press ctrl+N to create a new map then use the following settings :

Settings for tiled to create our rpg game map
Settings for tiled to create our rpg game map

You should now have a blank canvas like this to work on:

Blank tiled canvas for our rpg game map
Blank tiled canvas for our rpg game map

To make our map a bit more organised and intuitive we initially will add some tile layers to our map. Copy what we have done here :

Tile layers for our RPG game
Tile layers for our RPG game

Why have multiple tile layers?

When we get to the portion of loading in our map into phaser, we may want to add collision on certain layers. Overlapping on certain layers. Also especially with objects we want to interact with we would like to have a layer for this as well so that we know which objects we can interact with.

Loading the tile set

Now that we are this far, you can use the tile set we have provided and load it up into tiled.

New tileset loading settings for our rpg game
New tileset loading settings for our rpg game

Lets paint our map

Now that you have your tile set loaded you can simply paint a map, make sure to keep all your tiles separate on each layer. See like below:

An example of a how to make a rpg game map
An example of a how to make a rpg game map

Whats up next

In our next tutorial we want to start bringing in our map as well as start building some of the phase constructs. ThenĀ go through some basic concepts about role playing games.

To watch our you tube tutorial video check it out below:

 

Comments 8

Leave a Reply

Your email address will not be published. Required fields are marked *