Tilemaps with invisible collision layer in Phaser

Phaser, Tiled and Physics

While there are several TileMap tutorials for Phaser out there, I didn't find any using Phaser 2.3 with the P2 physics. For this reason I decided to write my own tutorial about. Phaser is a cool javascript library that for turning a HTML5 canvas elements into games.

Goal

Our goal in this tutorial is to use the program Tiled to create a map for our game. We will have a separate layer for collision data. In phaser we will display the background and foreground layer, but use the invisible collision layer for collision. We will use P2 physics, as some comments suggest that this physic works best with tilemaps.

How "Tales - Told & Untold" was born

From Pen&Paper to Boardgames to a Computer Game

“You cannot play with us, because we have already played 10 sessions of this game.”

“Tales, Told & Untold” - now a Computergame in developement - started as a game with dice, cards and boards.

 When I was a child, I went camping in Greece with around 40 school mates. Four boys from a higher grade were playing Dungeons and Dragons, but when I asked them to play with them, they said, this wasn't possible. I thought “What a stupid game, where people cannot join at the start of a new game session.”

So I decided to create a role playing game that was easy to learn and where people could join easily - and I failed miserably.

The game I created worked well - I played it with friends for 20 sessions over several years - but it was impossible for other players to join later. The rules were - in my honest opinion - easier than most pen& paper RPGs' rules, but my friends couldn't play the game without of me, because the rules were very complicated and because I never wrote them down.

My game - only called “Fantasy Game”, was different to classical pen&paper RPGs: