From 3d22d0e16914a6bb3e4bb007f63106b214159f27 Mon Sep 17 00:00:00 2001
From: Richard Davey <rdavey@gmail.com>
Date: Thu, 12 Sep 2013 02:18:23 +0100
Subject: [PATCH] Fixed a bug in the tilemap rendering so the tile offsets were
 wrong. Now renders perfectly :) Also fixed issue that would cause the World
 to resize smaller than the game size (not allowed for rendering reasons).

---
 examples/assets/maps/mario1.json |  39 ++++++++++++++++
 examples/assets/maps/mario1.png  | Bin 0 -> 3181 bytes
 examples/mario.php               |  78 +++++++++++++++++++++++++++++++
 examples/tilemap.php             |   9 ++--
 src/core/World.js                |  11 ++++-
 src/tilemap/Tilemap.js           |   2 +
 src/tilemap/TilemapLayer.js      |  51 +++++++++++++++++---
 src/tilemap/TilemapRenderer.js   |  13 +-----
 8 files changed, 180 insertions(+), 23 deletions(-)
 create mode 100644 examples/assets/maps/mario1.json
 create mode 100644 examples/assets/maps/mario1.png
 create mode 100644 examples/mario.php

diff --git a/examples/assets/maps/mario1.json b/examples/assets/maps/mario1.json
new file mode 100644
index 00000000..ffff33bb
--- /dev/null
+++ b/examples/assets/maps/mario1.json
@@ -0,0 +1,39 @@
+{ "height":13,
+ "layers":[
+        {
+         "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 5, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 8, 1, 1, 1, 1, 1, 2, 3, 3, 3, 4, 1, 1, 1, 1, 6, 7, 7, 8, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 8, 1, 1, 1, 1, 1, 2, 3, 3, 3, 4, 1, 1, 1, 1, 6, 7, 7, 8, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 8, 1, 1, 1, 1, 1, 2, 3, 3, 3, 4, 1, 1, 1, 1, 6, 7, 7, 8, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 8, 1, 1, 1, 1, 1, 2, 3, 3, 3, 4, 1, 1, 1, 1, 6, 7, 7, 8, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 9, 10, 1, 2, 3, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 8, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 7, 7, 8, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 8, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 7, 7, 8, 1, 11, 12, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 8, 1, 1, 13, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 7, 7, 8, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 8, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 6, 7, 7, 7, 8, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 14, 1, 6, 7, 8, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 15, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 16, 17, 18, 16, 16, 16, 16, 16, 1, 1, 1, 16, 16, 16, 15, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 15, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 16, 16, 16, 1, 1, 1, 1, 16, 15, 15, 16, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 19, 19, 1, 1, 1, 1, 1, 1, 1, 1, 20, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 21, 22, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 19, 19, 19, 1, 1, 1, 1, 1, 1, 1, 1, 20, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 23, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 24, 25, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 26, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 19, 19, 19, 19, 1, 1, 1, 1, 1, 1, 1, 1, 20, 1, 1, 1, 1, 1, 27, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 13, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 28, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 13, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 29, 1, 1, 1, 1, 1, 1, 30, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 19, 19, 19, 19, 19, 1, 1, 1, 1, 1, 1, 1, 1, 20, 1, 1, 1, 1, 31, 31, 31, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 15, 1, 1, 1, 16, 15, 16, 15, 16, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 32, 33, 1, 1, 1, 1, 1, 1, 1, 1, 1, 32, 33, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 16, 15, 16, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 16, 1, 1, 1, 1, 1, 16, 28, 1, 1, 1, 1, 15, 1, 1, 15, 1, 1, 15, 1, 1, 1, 1, 1, 16, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 16, 16, 1, 1, 1, 1, 1, 1, 19, 1, 1, 19, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 19, 19, 1, 1, 19, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 16, 16, 15, 16, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 19, 19, 19, 19, 19, 19, 1, 1, 1, 1, 1, 1, 1, 1, 20, 1, 1, 1, 1, 34, 35, 36, 1, 1, 1, 1, 1, 1, 1, 37, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 32, 33, 1, 1, 1, 1, 1, 1, 38, 39, 1, 1, 37, 1, 1, 1, 1, 1, 1, 40, 41, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 37, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 19, 19, 1, 1, 19, 19, 1, 1, 1, 1, 37, 1, 1, 1, 19, 19, 19, 1, 1, 19, 19, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 19, 19, 19, 19, 19, 19, 19, 1, 1, 1, 1, 37, 1, 1, 1, 20, 1, 1, 1, 31, 42, 42, 42, 31, 1, 1, 1, 1, 1, 43, 44, 45, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 37, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 32, 33, 1, 1, 1, 1, 1, 1, 1, 1, 38, 39, 1, 1, 1, 1, 1, 1, 38, 39, 1, 43, 44, 45, 1, 1, 1, 1, 1, 46, 47, 1, 1, 1, 1, 1, 1, 37, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 43, 44, 45, 1, 1, 1, 1, 1, 48, 49, 1, 1, 1, 1, 1, 1, 37, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 19, 19, 19, 1, 1, 19, 19, 19, 1, 1, 43, 44, 45, 1, 19, 19, 19, 19, 1, 1, 19, 19, 19, 1, 1, 1, 37, 1, 32, 33, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 32, 33, 1, 19, 19, 19, 19, 19, 19, 19, 19, 1, 1, 1, 43, 44, 45, 1, 1, 20, 1, 1, 1, 35, 35, 50, 35, 35, 1, 1, 37, 1, 43, 44, 51, 52, 45, 1, 1, 1, 1, 1, 1, 53, 54, 54, 54, 55, 43, 44, 45, 1, 56, 57, 1, 53, 54, 55, 1, 1, 38, 39, 1, 1, 1, 1, 1, 1, 1, 1, 38, 39, 58, 59, 54, 54, 55, 1, 38, 39, 43, 44, 60, 61, 62, 57, 63, 64, 1, 38, 39, 53, 54, 54, 54, 55, 43, 44, 45, 1, 1, 1, 1, 53, 54, 55, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 53, 54, 54, 55, 1, 65, 66, 67, 68, 60, 61, 45, 1, 1, 1, 1, 69, 70, 53, 54, 54, 54, 55, 43, 44, 45, 1, 1, 1, 1, 53, 54, 55, 1, 71, 72, 66, 65, 66, 58, 73, 1, 1, 1, 1, 19, 19, 19, 19, 54, 54, 19, 19, 19, 19, 43, 44, 60, 61, 19, 19, 19, 19, 19, 1, 1, 19, 19, 19, 19, 55, 43, 44, 45, 74, 75, 1, 1, 53, 54, 55, 1, 1, 1, 76, 77, 78, 1, 1, 1, 38, 39, 19, 19, 19, 19, 19, 19, 19, 19, 19, 1, 1, 43, 44, 60, 61, 45, 1, 19, 1, 1, 1, 35, 35, 79, 35, 35, 55, 43, 44, 45, 80, 80, 81, 82, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 83, 84, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 85, 86, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 83, 84, 87, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 1, 1, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 1, 1, 1, 80, 80, 80, 80, 80, 80, 88, 89, 90, 80, 80, 80, 80, 80, 80, 80, 91, 92, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 93, 94, 88, 80, 88, 85, 86, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 1, 1, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 95, 96, 97, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80],
+         "height":13,
+         "name":"ShoeBox Tile Grab",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":211,
+         "x":0,
+         "y":0
+        }],
+ "orientation":"orthogonal",
+ "properties":
+    {
+
+    },
+ "tileheight":16,
+ "tilesets":[
+        {
+         "firstgid":1,
+         "image":"..\/..\/..\/..\/..\/..\/Art\/Artwork for game inspirations\/Super Mario Level Maps\/NES\/mario-1-1_bank.png",
+         "imageheight":144,
+         "imagewidth":176,
+         "margin":0,
+         "name":"mario-1-1_bank.png",
+         "properties":
+            {
+
+            },
+         "spacing":0,
+         "tileheight":16,
+         "tilewidth":16
+        }],
+ "tilewidth":16,
+ "version":1,
+ "width":211
+}
\ No newline at end of file
diff --git a/examples/assets/maps/mario1.png b/examples/assets/maps/mario1.png
new file mode 100644
index 0000000000000000000000000000000000000000..9cc96c1754be7a6c91c88dccafe3cbc90becb301
GIT binary patch
literal 3181
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
TaiH#c00000NkvXXu0mjfU@!Dv

literal 0
HcmV?d00001

diff --git a/examples/mario.php b/examples/mario.php
new file mode 100644
index 00000000..6205bd1c
--- /dev/null
+++ b/examples/mario.php
@@ -0,0 +1,78 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>phaser.js - a new beginning</title>
+    <?php
+        require('js.php');
+    ?>
+</head>
+<body>
+
+<script type="text/javascript">
+
+(function () {
+
+    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render });
+
+    function preload() {
+
+        //  First we load our map data (a csv file)
+        game.load.text('marioMap', 'assets/maps/mario1.json');
+
+        //  Then we load the actual tile sheet image
+        game.load.image('marioTiles', 'assets/maps/mario1.png');
+
+    }
+
+    var r;
+    var t;
+
+    function create() {
+
+        game.stage.backgroundColor = '#787878';
+
+        //  game, key, mapData, format, resizeWorld, tileWidth, tileHeight
+
+        //  This creates the tilemap using the csv and tile sheet we loaded.
+        //  We tell it use to CSV format parser. The 16x16 are the tile sizes.
+        //  The 4th parameter (true) tells the game world to resize itself based on the map dimensions or not.
+        
+        t = new Phaser.Tilemap(game, 'marioTiles', 'marioMap', Phaser.Tilemap.FORMAT_TILED_JSON);
+
+        //  SHould be added to the World and rendered automatically :)
+        r = new Phaser.TilemapRenderer(game);
+
+    }
+
+    function update() {
+
+        r.render(t);
+
+        if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
+        {
+            game.camera.x -= 8;
+        }
+        else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
+        {
+            game.camera.x += 8;
+        }
+
+        if (game.input.keyboard.isDown(Phaser.Keyboard.UP))
+        {
+            game.camera.y -= 8;
+        }
+        else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN))
+        {
+            game.camera.y += 8;
+        }
+
+    }
+
+    function render() {
+    }
+
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/tilemap.php b/examples/tilemap.php
index e09ec8c4..f3417566 100644
--- a/examples/tilemap.php
+++ b/examples/tilemap.php
@@ -44,6 +44,7 @@
         
         t = new Phaser.Tilemap(game, 'csvtiles', 'csvtest', Phaser.Tilemap.FORMAT_CSV, true, 16, 16);
 
+        //  SHould be added to the World and rendered automatically :)
         r = new Phaser.TilemapRenderer(game);
 
     }
@@ -54,20 +55,20 @@
 
         if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
         {
-            game.camera.x -= 4;
+            game.camera.x -= 8;
         }
         else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
         {
-            game.camera.x += 4;
+            game.camera.x += 8;
         }
 
         if (game.input.keyboard.isDown(Phaser.Keyboard.UP))
         {
-            game.camera.y -= 4;
+            game.camera.y -= 8;
         }
         else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN))
         {
-            game.camera.y += 4;
+            game.camera.y += 8;
         }
 
     }
diff --git a/src/core/World.js b/src/core/World.js
index 8b9a775b..353be125 100644
--- a/src/core/World.js
+++ b/src/core/World.js
@@ -97,8 +97,15 @@ Phaser.World.prototype = {
 	*/
 	setSize: function (width, height) {
 
-		this.bounds.width = width;
-		this.bounds.height = height;
+		if (width >= this.game.width)
+        {
+            this.bounds.width = width;
+        }
+
+        if (height >= this.game.height)
+        {
+            this.bounds.height = height;
+        }
 
 	}
 	
diff --git a/src/tilemap/Tilemap.js b/src/tilemap/Tilemap.js
index a70b7128..a05861a8 100644
--- a/src/tilemap/Tilemap.js
+++ b/src/tilemap/Tilemap.js
@@ -100,6 +100,7 @@ Phaser.Tilemap.prototype = {
         }
 
         layer.updateBounds();
+        layer.createCanvas();
 
         var tileQuantity = layer.parseTileOffsets();
 
@@ -159,6 +160,7 @@ Phaser.Tilemap.prototype = {
             }
 
             layer.updateBounds();
+            layer.createCanvas();
             
             var tileQuantity = layer.parseTileOffsets();
             
diff --git a/src/tilemap/TilemapLayer.js b/src/tilemap/TilemapLayer.js
index cea29098..15228e79 100644
--- a/src/tilemap/TilemapLayer.js
+++ b/src/tilemap/TilemapLayer.js
@@ -82,13 +82,23 @@ Phaser.TilemapLayer = function (parent, id, key, mapFormat, name, tileWidth, til
 
     this.tileset = this.game.cache.getImage(key);
 
+    //  Sprite property surely?
     this.alpha = 1;
-    this.canvas = Phaser.Canvas.create(this.game.width, this.game.height);
-    this.context = this.canvas.getContext('2d');
-    this.baseTexture = new PIXI.BaseTexture(this.canvas);
-    this.texture = new PIXI.Texture(this.baseTexture);
-    this.sprite = new PIXI.Sprite(this.texture);
-    this.game.stage._stage.addChild(this.sprite);
+
+    this.canvas = null;
+    this.context = null;
+    this.baseTexture = null;
+    this.texture = null;
+    this.sprite = null;
+
+        // this.canvas = Phaser.Canvas.create(this.game.width, this.game.height);
+        // this.context = this.canvas.getContext('2d');
+
+        // this.baseTexture = new PIXI.BaseTexture(this.canvas);
+        // this.texture = new PIXI.Texture(this.baseTexture);
+        // this.sprite = new PIXI.Sprite(this.texture);
+
+        // this.game.stage._stage.addChild(this.sprite);
 
     this.mapData = [];
     this._tempTileBlock = [];
@@ -443,6 +453,32 @@ Phaser.TilemapLayer.prototype = {
         this.heightInTiles++;
         this.heightInPixels += this.tileHeight;
 
+    },
+
+    createCanvas: function () {
+
+        var width = this.game.width;
+        var height = this.game.height;
+
+        if (this.widthInPixels < width)
+        {
+            width = this.widthInPixels;
+        }
+
+        if (this.heightInPixels < height)
+        {
+            height = this.heightInPixels;
+        }
+
+        this.canvas = Phaser.Canvas.create(width, height);
+        this.context = this.canvas.getContext('2d');
+
+        this.baseTexture = new PIXI.BaseTexture(this.canvas);
+        this.texture = new PIXI.Texture(this.baseTexture);
+        this.sprite = new PIXI.Sprite(this.texture);
+
+        this.game.stage._stage.addChild(this.sprite);
+
     },
 
 	/**
@@ -456,6 +492,9 @@ Phaser.TilemapLayer.prototype = {
 
 	/**
     * Parse tile offsets from map data.
+    * Basically this creates a large array of objects that contain the x/y coordinates to grab each tile from
+    * for the entire map. Yes we could calculate this at run-time by using the tile index and some math, but we're
+    * trading a quite small bit of memory here to not have to process that in our main render loop.
     * @return {number} length of tileOffsets array.
     */
     parseTileOffsets: function () {
diff --git a/src/tilemap/TilemapRenderer.js b/src/tilemap/TilemapRenderer.js
index 24075450..964a3db6 100644
--- a/src/tilemap/TilemapRenderer.js
+++ b/src/tilemap/TilemapRenderer.js
@@ -43,8 +43,6 @@ Phaser.TilemapRenderer.prototype = {
             this._maxY = this.game.math.ceil(layer.canvas.height / layer.tileHeight) + 1;
 
             //  And now work out where in the tilemap the camera actually is
-            // this._startX = this.game.math.floor(camera.worldView.x / layer.tileWidth);
-            // this._startY = this.game.math.floor(camera.worldView.y / layer.tileHeight);
             this._startX = this.game.math.floor(this.game.camera.x / layer.tileWidth);
             this._startY = this.game.math.floor(this.game.camera.y / layer.tileHeight);
 
@@ -80,15 +78,8 @@ Phaser.TilemapRenderer.prototype = {
             }
 
             //  Finally get the offset to avoid the blocky movement
-            //this._dx = (camera.screenView.x * layer.transform.scrollFactor.x) - (camera.worldView.x * layer.transform.scrollFactor.x);
-            //this._dy = (camera.screenView.y * layer.transform.scrollFactor.y) - (camera.worldView.y * layer.transform.scrollFactor.y);
-            //this._dx = (camera.screenView.x * this.scrollFactor.x) + this.x - (camera.worldView.x * this.scrollFactor.x);
-            //this._dy = (camera.screenView.y * this.scrollFactor.y) + this.y - (camera.worldView.y * this.scrollFactor.y);
-            this._dx = 0;
-            this._dy = 0;
-
-            this._dx += -(this.game.camera.x - (this._startX * layer.tileWidth));
-            this._dy += -(this.game.camera.y - (this._startY * layer.tileHeight));
+            this._dx = -(this.game.camera.x - (this._startX * layer.tileWidth));
+            this._dy = -(this.game.camera.y - (this._startY * layer.tileHeight));
 
             this._tx = this._dx;
             this._ty = this._dy;