Phaser Isometric Camera Follow Sprite Glitches

[vinceiv]

Outside of camera dead zones when the sprite moves it seems to me that the sprite moves first then the camera catches up to it,

Instead of both the sprite and the camera moving cohesively as one unit..  I am updating the players location 

by updates from server & I am using the Phaser Isometric plugin that requires use of Arcade Physics.

I have been racking my brain on this for days so I finally decided to join this helpful community.  

 

Thank you in advanced! 

/// <reference path="phaser.d.ts"/>
/// <reference path="socket.io-client.d.ts"/>


var Arenaio = (function () {
    
   //Properties
   var socket = io();
   var text;
   var coordString;
   
   //Player object
   var mPlayer = {};
   //Arrays for players and sprites
   var players = [];
   var playerSprites = [];
   
   var hearts = [];

    
   socket.on('connected', function (data) {
       socket.emit('connected', data);
       console.log("UUID: " + data);
    });

    //Get player initial location from server
    socket.on('init', function (p) {
        mPlayer.x = p.x;
        mPlayer.y = p.y;
        mPlayer.scale = p.scale;
        mPlayer.uuid = p.uuid;
               
        console.log("Should have received my player data");
        console.log(mPlayer.x);
        console.log(mPlayer.y);
    });
    
    //Get array of users from server on initialization 
    socket.on('initServerPlayers' , function(v){
        players = v;  
        
            
        
        console.log('Players in the server: ');
        for (var i = 0 ; i < players.length ; i++)
        {
            console.log(players[i].uuid);
        }
        
        
    });
    
    //This is going to be handled like sh** change this
    socket.on('heartUpdates' , function(inHearts) {
        
        for (var i = 0 ; i < inHearts.length ; i++)
        {
            var nHeart = game.add.isoSprite(inHearts[i].x , inHearts[i].y, 0 , 'heart');
            hearts.push(nHeart);
            hearts[i].anchor.setTo(0.5);
            
        }
     

        
    });
    
    socket.on('updateEvents' , function(updates) {
           
           
           //Change player values !!!!!!! change to only updates
           for (var i = 0 ; i < updates.length ; i++)
           {
                 //Get players position from server and checks against player
                 if (updates[i].uuid == mPlayer.uuid)
                 {
                     mPlayer.x =  updates[i].x;
                     mPlayer.y =  updates[i].y;
                     mPlayer.scale =  updates[i].scale;
                 } 
                 else {
                       for (v = 0 ; v < players.length ; v++ )
                       {
                           if (updates[i].uuid == players[v].uuid)
                           {
                                  players[v].x = updates[i].x;
                                  players[v].y = updates[i].y;
                                  players[v].scale = updates[i].scale;
                            }
                        }
                 }
           }
           
           updates = [];
           
    });
    
    
   //when user connects add them to array     
    socket.on('joinUser' , function(join) { 
       
        players.push(join);        
        var i = playerSprites.length;
        var newPlayer = game.add.isoSprite(join.x, join.y, 0 , 'char');
        playerSprites.push(newPlayer);
        playerSprites[i].anchor.setTo(0.5);
        //game.physics.isoArcade.enable(playerSprites[i]);


        players[players.length - 1].spriteRef = i;
        console.log('Player Joined, UUID: ' + join.uuid);
        
        obstacleGroup.add(newPlayer);

    });
    
    //Handle client disconnections
    socket.on('disconnect', function(socketId){
        
        for (i = 0 ; i < players.length ; i++) 
        {
            //Check socketId with array of socketIds
            if (players[i].uuid == socketId)
            {
                //Get ref to sprite and kill it from array
                playerSprites[players[i].spriteRef].body = null;
                playerSprites[players[i].spriteRef].destroy();
                
                playerSprites.splice(players[i].spriteRef , 1);
                players.splice(i ,1);
            }
        }
        
    });
    
    function Arenaio() 
    {
       /* Deprecated
        var _this = this;
       */
        game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, 'content', { preload: this.preload, create: this.create, update: this.update, render: this.render });
        var bTile;
    }
    
    createLivePlayers = function() 
    {
           
        if (players.length != 0)
        {
             for (i = 0 ; i < players.length ; i++)
            {
              var x;
              x = game.add.isoSprite(players[i].x, players[i].y, 0 ,'char');
              playerSprites.push(x);
              playerSprites[i].anchor.setTo(0.5);
              
              game.physics.arcade.enable(playerSprites[i]);
              players[i].spriteRef = i;
              
              obstacleGroup.add(x);
             }
        }
    }
    
    Arenaio.prototype.preload = function () 
    {
        
        this.game.advancedTiming = true;
        
        this.game.plugins.add(new Phaser.Plugin.Isometric(this.game));
        this.game.iso.anchor.setTo(0.5 );

        //background image because
        // this.game.load.image('logo', 'pic.jpg');
        this.game.load.spritesheet('char', 'kaneki.png', 100, 100);
        this.game.load.image('tile', 'space.png');
        this.game.load.image('heart' , 'heart.png');
        
        this.game.load.start();
        
        this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT;
        this.game.scale.refresh();
        this.game.scale.minWidth = 240;
        this.game.scale.minHeight = 170;
        this.game.scale.maxWidth = 7000;
        this.game.scale.maxHeight = 4000;
        
        this.game.time.desiredFps = 60;
        
        this.game.world.setBounds(0, 0, 10000, 4000);
     
        this.game.physics.startSystem(Phaser.Plugin.Isometric.ISOARCADE);

    };

    Arenaio.prototype.create = function () 
    {
        //console.log(mPlayer.x);
        
        //this.background = this.game.add.tileSprite(0, 0, this.game.world.width, this.game.world.height, 0 , 'tile');
        this.game.stage.backgroundColor = "0xde6712";
        
        this.game.physics.isoArcade.gravity.setTo(0 , 0 , 0);
      
        tileGroup = this.game.add.group();
        obstacleGroup = this.game.add.group();
        
        for (var xT = 4624; xT > 0; xT -=34 ) {
               for (var yT = 2890; yT > 0; yT-=34 ){
                   bTile = this.game.add.isoSprite(xT, yT, 1 , 'tile', tileGroup);
                   bTile.anchor.set(0.5);
               }
        }
        
     
        
        
   
        this.charSprite = this.game.add.isoSprite(this.game.world.centerX, this.game.world.centerY, 0, 'char' );
        this.charSprite.anchor.setTo(0.5);
       
       
        this.game.physics.isoArcade.enable(this.charSprite);
        this.charSprite.body.moves = false;
        this.charSprite.body.collideWorldBounds = true;
        
        this.game.camera.follow(this.charSprite,  Phaser.Camera.FOLLOW_TOPDOWN_TIGHT);
 
        this.cursors = this.game.input.keyboard.createCursorKeys();
        
        
        coordString = "( " + mPlayer.x + " , " + mPlayer.y + ")";
        
        text = this.game.add.text(0, 0, coordString, {
        font: "65px Arial",
        fill: "#ff0044",
        align: "center"
        });
        
        text.fixedToCamera=true;
    };
    
    Arenaio.prototype.update = function () 
    {
        this.game.input.update();
        
        
        //to ensure that socket game has received initial players from server check if array is empty
        //if so give em life!
        if (playerSprites.length == 0 )
        {
              createLivePlayers();
        }
      
        //change this to tell server player is moving direction instead of handling on client
        if (this.cursors.down.isDown) {
            down();
        }
        if (this.cursors.up.isDown) {
            up();
        }
        if (this.cursors.left.isDown) {
            left();
        }
        if (this.cursors.right.isDown) {
            right();
        }
        
        if (playerSprites.length > 0)
        {
       
             //Possibly throttle data by only working with changes from previous states
             for (var p = 0 ; p < players.length ; p++)
             { 
                 /* Do i need to check for undefined? 
                  if (typeof playerSprites[p] != 'undefined'){
                  playerSprites[p].isoPosition.setTo(players[p].x , players[p].y, 0);
                  }
                  */
                  
                  playerSprites[players[p].spriteRef].isoPosition.setTo(players[p].x, players[p].y, 0);
             }
        }
        
        //Text coordinates for player
        this.charSprite.body.moves = false;      
        this.charSprite.isoPosition.setTo(mPlayer.x , mPlayer.y , 0);
        text.setText("( " + mPlayer.x + " , " + mPlayer.y + ")");
        
       
       
        this.game.world.bringToTop(obstacleGroup);
    };
    
    Arenaio.prototype.render = function ()
    {
        
        /*
        obstacleGroup.forEach( function (each){
            this.game.debug.body(each);
            console.log('ghe');
        });
        this.game.debug.body(this.charSprite);
        */
    };
    
    ////MOVEMENT FUNCTIONS SEND TO SERVER
    function left() {
        socket.emit('update' , 'moveLeft');
    }
    function right() {
        socket.emit('update' , 'moveRight');
    }
    function up() {
        socket.emit('update' , 'moveUp');
    }
    function down() {
        socket.emit('update' , 'moveDown');
    }
    
    
    var Player = (function () {
    function Player(x, y, uuid, scale, spritetype) {
        this.x = x;
        this.y = y;
        this.uuid = uuid;
        this.scale = scale;
        this.sprite = spritetype;
    }
    return Player;
    }());


    /////////////////Helper Methods
    Arenaio.prototype.printUUID = function () 
    {
        console.log(this.player.uuid);
    };
   
    return Arenaio;
}());

window.onload = function () {
    var game = new Arenaio();
    
    
    //this.game.state.add('Start');
    //game.state.add('Game', Arenaio.Game);
    
    //game.state.start('Game');
    
    
};