[Tutorial] Part I : How to create a HTML5 game using Tiled Map Editor

in gamedev •  2 years ago

Part 1: Introduction

Today I m going to walk you through how to use Tiled Map Editor to create a simple platformer game.


I have created several games using this tool and I find it really easy to use.
Check out my game below:

Doge Warrior Screenshot01.png

Doge Warrior Adventure

Tools required

First thing first, you will need to download essential softwares mainly Tiled Map Editor and Gimp

Tiled Map editor

Download Tiled Map Editor tiled_logo

Tiled map editor is a very good tile placing tool. You can design your game level using it and export it to json format.


Download GIMP logo

GIMP is a free open source Graphics authoring tool for those who cannot afford Photoshop.

Creating Tile Set Sprites to be used on Tiled Map Editor


Before you can design your game level, you need to first create your game sprites, which are all the graphics in the game).

I am not going to cover how to create tile sets since
there are plenty of good tutorials on youtube how you can create decent tile sets.

For example:



Tile size considerations

Now, when you create your tile sets, try not to make the tile size too small or too big.

If you know how big is your view port, it is preferable that the viewport size is divisible by your tile size, Although not mandatory, it makes things easier later, for instance, when you want to decide for those objects which are x tiles away from player and is not visible to the camera to be in active state etc..

For example my game viewport is 1200 x 800, I find the size 40 x 40 is quite optimal for my game.

Also you have to consider how big is your main character, and I always try not to make the main character too big because having a big main character will obscure the view. You also have to think about the size of the bosses relative to the main character on how much viewing area you have to reserve.

While on the other hand if you have your main character too small, the players can see too much of the view, which may cause lesser feeling of venturing into new area, which may bore the players since most time is spent walking the characters inside the viewed area ( unless you make it walk really fast ).

Alright, that's all for now, I ll walk you through how I use Tiled Map Editor for my game in the next episode..

To be continued...

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

You can consider to join the minnowsupport to get more follower and at least $0.5 per post



Is there an html 5 game engine you are using as well? I've never created a tile map before. I want to learn more about making html 5 games.


I didn't use any. But I would recommend using one like Melon JS http://melonjs.org/


You sure say meep a lot.


That is some seriously interesting post. Looking forward to part 2. I have not time for video game programming. But hey who knows.