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).

photonstorm · photonstorm · commit 3d22d0e16914 · 2013-09-12T02:18:23.000+01:00
diff --git a/examples/assets/maps/mario1.json 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
+}
diff --git a/examples/assets/maps/mario1.png b/examples/assets/maps/mario1.png
diff --git a/examples/mario.php 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>
diff --git a/examples/tilemap.php b/examples/tilemap.php
@@ -44,6 +44,7 @@ function create() {
         
         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 @@ function update() {
 
         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
@@ -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
@@ -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
@@ -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
@@ -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;

Original file line number	Diff line number	Diff line change
`@@ -44,6 +44,7 @@ function create() {`
`44`	`44`
`45`	`45`	`t = new Phaser.Tilemap(game, 'csvtiles', 'csvtest', Phaser.Tilemap.FORMAT_CSV, true, 16, 16);`
`46`	`46`
	`47`	`+ // SHould be added to the World and rendered automatically :)`
`47`	`48`	`r = new Phaser.TilemapRenderer(game);`
`48`	`49`
`49`	`50`	`}`
`@@ -54,20 +55,20 @@ function update() {`
`54`	`55`
`55`	`56`	`if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))`
`56`	`57`	`{`
`57`		`- game.camera.x -= 4;`
	`58`	`+ game.camera.x -= 8;`
`58`	`59`	`}`
`59`	`60`	`else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))`
`60`	`61`	`{`
`61`		`- game.camera.x += 4;`
	`62`	`+ game.camera.x += 8;`
`62`	`63`	`}`
`63`	`64`
`64`	`65`	`if (game.input.keyboard.isDown(Phaser.Keyboard.UP))`
`65`	`66`	`{`
`66`		`- game.camera.y -= 4;`
	`67`	`+ game.camera.y -= 8;`
`67`	`68`	`}`
`68`	`69`	`else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN))`
`69`	`70`	`{`
`70`		`- game.camera.y += 4;`
	`71`	`+ game.camera.y += 8;`
`71`	`72`	`}`
`72`	`73`
`73`	`74`	`}`
Original file line number	Diff line number	Diff line change
`@@ -100,6 +100,7 @@ Phaser.Tilemap.prototype = {`
`100`	`100`	`}`
`101`	`101`
`102`	`102`	`layer.updateBounds();`
	`103`	`+ layer.createCanvas();`
`103`	`104`
`104`	`105`	`var tileQuantity = layer.parseTileOffsets();`
`105`	`106`
`@@ -159,6 +160,7 @@ Phaser.Tilemap.prototype = {`
`159`	`160`	`}`
`160`	`161`
`161`	`162`	`layer.updateBounds();`
	`163`	`+ layer.createCanvas();`
`162`	`164`
`163`	`165`	`var tileQuantity = layer.parseTileOffsets();`
`164`	`166`