Problem #5: Unreliable tilemap collision

I programmed my NPC to move on its own, but due to the tilemap collision being unreliable, sometimes the NPC just can't move the way I intended it to.

Sometimes it can, sometimes it can't.

I can't have a game that can only work by chance, so I decided not to use the tilemap at all.
I replaced the tilemap with sprites.
But the tilemap is still kinda helpful with the positioning of the object sprites. Like for example, if Tiled is telling me the tile is at (17, 32), that means the position I need to code is (17*32, 32*32) because one tile in my map is 32x32 pixel large.

This kinda make the replacing quite fast. But the code becomes quite bulky due to the number of objects in the game.

Problem #4: Sprites fall through the tilemap

Another problem that I face after creating the tilemap is that, although I intend to use tilemaps for platforms, sometimes the character would fall through the platform, or just go through it.

(And actually only after I get this problem I started thinking that it might be good to make a log of the development for future reference)

After thorough googling, I find the solution from this thread:
http://www.html5gamedevs.com/topic/4929-20-arcaded-tile-collision-issue/

This line of code in function update() do the magic:

this.game.physics.arcade.TILE_BIAS = 40;

The number 40 also did the magic for me, so I didn't change the value. But if you find your character still going through the tiles, just increase the value.

Problem #3: Making a tilemap

Oh hell, it took me some time to really understand how to make a tilemap.

1. Firstly, you have to have a tilemap editor.
In this case, I chose the most popular tilemap editor, Tiled. The reason is mostly because when I tried to google things related to tilemap, most people refer to Tiled as the editor they're using. So I guess it will be easier for me to ask around when I have any problem.

2. After making new tilemap, go to Map - New Tileset, and choose the tilemap texture that you have. If you don't have any, you can choose one given in Phaser first tutorial.

3. Take note of the name of your layer:

In the picture above, the name of the layer is "Tile Layer 1". This is the name that you will have to put in your code later.

4. In this case, I only use 1 tile, which is the first green tile (among many other green tiles). If you right-click on the tile, you can see the properties.

Select Tile Properties, and you can give it a property by double-clicking on the name and the value.

5. Save your map as .JSON file. If you open the file in your text editor, you will see that there's a number on the tile that you gave properties.

In the case above, I gave another property of "Test2" to another tile. The number above the property is the Tile ID. So my first tile with the property "Test" has Tile ID of 185, and "Test2" has Tile ID of 235. Knowing your tile ID is very important to set collision. I find giving properties to each of your tiles quite tedious. If anybody knows the easier way to see the tile ID, please tell me.

(To be honest I don't even think you need to do all those steps. It's just that I don't know how to see the tile ID, although I can still work around it)
(Since it's my first time working with tilemap, it took me hours to understand all of the above)

6. Now we go back to coding!
In the function preload(), load your map and tiles:

game.load.tilemap('map', 'assets/test.json', null, Phaser.Tilemap.TILED_JSON);
game.load.image('tiles', 'assets/platform.png');

Don't forget to declare your map and layer.

In the function create(), add:

map = game.add.tilemap('map');
map.addTilesetImage('testmap', 'tiles');
map.setCollisionBetween(0, 10);
 
layer = map.createLayer('Tile Layer 1');
layer.resizeWorld();

The setCollisionBetween() means the tiles with the ID from 0 to 10 will collide with our sprites. This is easier, since I can just put setCollisionBetween(0, 500) and thus even if I don't know the tile ID, chances are it will be between 0 and 500.
In the function map.createLayer(), you have to put the name of the layer in your .JSON file, which in my case is "Tile Layer 1".

And voila, you're done. It's so easy it makes me wonder why I spent hours trying to get it right.

Now that I'm done working with the game mechanic, I can start making the sprites :3

Problem #2: Centering the game and make camera follow the player

I want my game to be on the center of the screen, so I asked my best friend (Google) on how to do that. Being able to find solutions through Google is a good skill to have.

Basically, I stumbled upon this thread: http://www.html5gamedevs.com/topic/1609-centering-canvas/

But it doesn't work. Basically after poking around in other threads and spending around an hour to do so, I realized that the code is wrong. You're supposed to put this code inside the create() function:

this.game.scale.pageAlignHorizontally = true;
this.game.scale.pageAlignVertically = true;
this.game.scale.refresh();

and voila, it's in the center.

(But it's not in the center when I put it in the web. Dammit, some more problems to solve.)

The next one is I want the camera to follow the player. Now I'm not sure why I seemed to be having a hard time yesterday, but actually it's just putting this code inside the function create():

player.anchor.setTo(0.5, 0.5);
game.camera.follow(player, Phaser.Camera.FOLLOW_PLATFORMER);

And you don't actually need the first line. See how easy it is to do stuff in Phaser? :D

Problem #1

Following the "Getting Started" to install Phaser, I find some problems, especially when installing the local server.

I used WAMPServer to make a local server, but when you do that, you have to make sure that you don't have Apache or MySQL (not sure about this) installed already. In my case, apparently I installed Apache 2.2 some time ago, and WAMPServer installed Apache 2.4 for me, and both of them collided. After uninstalling all Apache and installing WAMPServer again, everything works just like in the Getting Started tutorial.

If you use WAMPServer, make sure that your tray icon turns green. Green means everything started nicely. If it's orange or red in colour, that means there's a problem.

To download the repository of Phaser, I use SmartGIT. It's quite easy to do.
In the website, copy the link for the clone (it's basically the same link, just add .git at the end):

In SmartGIT, just choose Project -> Clone (or just press Ctrl + Alt + O)
Copy the link in the box for "Repository Link", click next, and when they ask you to specify the path, it's basically the place where you want to copy the whole repository.

If you don't have any problem, you should be able to go through Part 6 of Getting Started without a hitch.

In my case, since my server couldn't work, although when I go to localhost they tell me "It works!" but when I go to directory under localhost, eg "localhost/test" (after I created a folder called "test" in the webroot), they show me 404 not found.

It took me good two hours just to find out what the problem was u_u

Putting stuff here because Tumblr is not working on my browser

Recently I found this HTML5 game framework called Phaser, and I think it's pretty awesome for newbies!

Since I'm not very familiar with JavaScript (or programming in general), I find Phaser quite user-friendly. Moreover, there are many examples for you to get used to the functions there, and the support in the forum is superb!

Just by following the first tutorial you can make something like this:

http://necha.syuriken.jp/phasertest

So I decided to make a simple game on this June holiday!