Final commit before rebuilding the Tilemap system.

Author: photonstorm

examples/games/starstruck.php

@@ -31,6 +31,7 @@ function create() {
         game.stage.backgroundColor = '#000000';
 
         bg = game.add.tileSprite(0, 0, 800, 600, 'background');
+        bg.fixedToCamera = true;
 
         map = game.add.tilemap(0, 0, 'level1');
         map.setCollisionRange(1, 12, true, true, true, true);

examples/tilemaps/mapcollide.php

@@ -1,5 +1,5 @@
 <?php
-    $title = "Test Title";
+    $title = "Tilemap Collision";
     require('../head.php');
 ?>
 
@@ -16,6 +16,7 @@ function preload() {
 
     var map;
     var p;
+    var cursors;
 
     function create() {
 
@@ -31,42 +32,51 @@ function create() {
 
         p = game.add.sprite(32, 32, 'player');
 
+        p.body.gravity.y = 10;
         p.body.bounce.y = 0.4;
         p.body.collideWorldBounds = true;
 
+        game.world.setBounds(0, 0, map.width, 600);
+
         game.camera.follow(p);
 
+        cursors = game.input.keyboard.createCursorKeys();
+
     }
 
     function update() {
 
-        // map.collide(p);
+        map.collide(p);
 
         p.body.velocity.x = 0;
-        // p.body.acceleration.y = 500;
 
-        if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
+        if (cursors.up.isDown)
         {
-            p.body.velocity.x = -150;
+            if (p.body.touching.down)
+            {
+                p.body.velocity.y = -400;
+            }
         }
-        else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
+        else if (cursors.down.isDown)
         {
-            p.body.velocity.x = 150;
+            // game.camera.y += 4;
         }
 
-        if (game.input.keyboard.isDown(Phaser.Keyboard.UP))
+        if (cursors.left.isDown)
         {
-            if (p.body.touching.down)
-            {
-                p.body.velocity.y = -200;
-            }
+            p.body.velocity.x = -150;
+        }
+        else if (cursors.right.isDown)
+        {
+            p.body.velocity.x = 150;
         }
 
     }
 
     function render() {
 
-        game.debug.renderSpriteCorners(p);
+        game.debug.renderCameraInfo(game.camera, 32, 32);
+        // game.debug.renderSpriteCorners(p);
         game.debug.renderSpriteCollision(p, 32, 320);
 
     }

examples/world/fixed to camera.php

@@ -71,10 +71,6 @@ function update() {
     function render() {
 
         game.debug.renderCameraInfo(game.camera, 32, 32);
-        // game.debug.renderSpriteInfo(d, 32, 200);
-        // game.debug.renderWorldTransformInfo(d, 32, 200);
-        // game.debug.renderLocalTransformInfo(d, 32, 400);
-        // game.debug.renderSpriteCorners(d, false, true);
 
     }
 

src/tilemap/Tilemap.js

@@ -71,6 +71,9 @@ Phaser.Tilemap = function (game, key, x, y, resizeWorld, tileWidth, tileHeight)
 	*/
     this.visible = true;
 
+    this.width = 0;
+    this.height = 0;
+
     /**
 	* @property {boolean} tiles - Description.
 	* @default
@@ -86,6 +89,7 @@ Phaser.Tilemap = function (game, key, x, y, resizeWorld, tileWidth, tileHeight)
     var map = this.game.cache.getTilemap(key);
 
     PIXI.DisplayObjectContainer.call(this);
+
 	/**
 	* @property {Description} position - Description.
 	*/
@@ -102,6 +106,8 @@ Phaser.Tilemap = function (game, key, x, y, resizeWorld, tileWidth, tileHeight)
 	*/
     this.renderer = new Phaser.TilemapRenderer(this.game);
 
+    this.fixedToCamera = true;
+
     /**
 	* @property {Description} mapFormat - Description.
 	*/
@@ -120,7 +126,7 @@ Phaser.Tilemap = function (game, key, x, y, resizeWorld, tileWidth, tileHeight)
 
     if (this.currentLayer && resizeWorld)
     {
-        this.game.world.setBounds(0, 0, this.currentLayer.widthInPixels, this.currentLayer.heightInPixels);
+        this.game.world.setBounds(0, 0, this.width, this.heightIn);
     }
 
 };
@@ -169,6 +175,9 @@ Phaser.Tilemap.prototype.parseCSV = function (data, key, tileWidth, tileHeight)
     this.collisionLayer = layer;
     this.layers.push(layer);
 
+    this.width = this.currentLayer.widthInPixels;
+    this.height = this.currentLayer.heightInPixels;
+
     this.generateTiles(tileQuantity);
 
 };
@@ -227,6 +236,16 @@ Phaser.Tilemap.prototype.parseTiledJSON = function (json, key) {
         this.currentLayer = layer;
         this.collisionLayer = layer;
         this.layers.push(layer);
+
+        if (this.currentLayer.widthInPixels > this.width)
+        {
+            this.width = this.currentLayer.widthInPixels;
+        }
+
+        if (this.currentLayer.heightInPixels > this.height)
+        {
+            this.height = this.currentLayer.heightInPixels;
+        }
     }
 
     this.generateTiles(tileQuantity);
@@ -466,6 +485,14 @@ Phaser.Tilemap.prototype.update = function () {
 
     this.renderer.render(this);
 
+    if (this.fixedToCamera)
+    {
+        // this.displayObject.position.x = this.game.camera.view.x + this.x;
+        // this.displayObject.position.y = this.game.camera.view.y + this.y;
+        this.position.x = this.game.camera.view.x + 0;
+        this.position.y = this.game.camera.view.y + 0;
+    }
+
 };
 
 /**