Moving a sprite programaticlly

[Lomaz]

Alright, so I've been using phaser as part of my game for a bit now.  The issue I am running into is I can't move (teleport) my player's sprite via code.. 

 

Here's how things are set up, what I need, and how I'm doing it right now to "fake" what I need.

 

So I use phaser for the map function of my game..   the player's location, as well as what map they're on is stored serverside, and before the game starts an AJAX call gets the sprite's location.  as the game runs every 20 or so frames the client sends an ajax "ping" back to the server telling it of it's new location, and the server in turn does the required due-diligence, then stores the new location in the table.. this way whenever the game is reloaded, the correct position is pulled from the database, and the sprite is dropped where he left off, on the map he left off on.

 

Now the issue I have is when talking to NPC's, or changing maps, I want to be able to move the sprite off the NPC, or to the enterence of a new map (this is less important) 

 

I've tried just about everything posted on here, and nothing seems to work.. the sprite will teleport to where I want him to, but as soon as I move or anything he snaps back to his original position, the camera is also set to follow the sprite but that doesn't seem to happen either when I try to move him.

 

Right now I have it set up that if you talk to an NPC or change location, the client will send a ping to the server with the desired location, and stop sending pings after that, then when done talking, or on area change the entire page refreshes, so on load the sprite's location is pulled, and he is where I want him to be.

 

This was okay before but since I started adding quest NPC's refreshing after talking to every NPC is unacceptable.

 

I also tried to have it simply reload the entire phaser game.. this would be better but it seems nearly impossible to actually cleanly kill a phaser game for some reason.

 

Any ideas on how to move my sprite successfully without the entire refresh workflow?  would greatly increase the play-ability of my game!

 

Here's some code, so you can see what I'm workin with:

	main_state = {		preload : function() {						game.time.advancedTiming = true;			game.load.tilemap('tilemap', '../JSON/'+playerMap+'.json', null, Phaser.Tilemap.TILED_JSON);			game.load.spritesheet('walker', '../images/map-sheets/sprite.png', 48, 47);			console.log(game);			game.load.image('Tiles', '../images/map-sheets/allTiles.png');			game.load.image('Caves', '../images/map-sheets/fadeToBlack.png');			game.load.image('doodads', '../images/map-sheets/doodads.png');		},		create : function() {			$('#loadingGray').hide();			game.physics.startSystem(Phaser.Physics.P2JS);	 			game.stage.backgroundColor = '#787878';			map = game.add.tilemap('tilemap');			map.addTilesetImage('Tiles', 'Tiles');				map.addTilesetImage('Caves', 'Caves');				map.addTilesetImage('doodads', 'doodads');			map.addTilesetImage('treeTest', 'treeTest');			game.canvas.id = 'gameCanvas';			map.layers.forEach(function(entry) {				layers.push(map.createLayer(entry.name));			});			map.setCollisionBetween(1, 500, true, 'Walls');			layers[0].resizeWorld();				console.log(layers.length + "-----------");			tileObjects = game.physics.p2.convertTilemap(map, layers[layers.length - 1]);				player = game.add.sprite(playerX, playerY, 'walker');			player.animations.add('walk');			game.physics.p2.enable(player, false);			player.anchor.set(0.5, 0.5);			player.body.setCircle(20);			player.body.mass = 100;			game.camera.follow(player);				this.shadowTexture = this.game.add.bitmapData(this.game.width, this.game.height);			// Create an object that will use the bitmap as a texture			this.lightSprite = this.game.add.image(this.game.camera.x, this.game.camera.y, this.shadowTexture);			// Set the blend mode to MULTIPLY. This will darken the colors of			// everything below this sprite.			this.lightSprite.blendMode = Phaser.blendModes.MULTIPLY;								},		update : function() {			if(($('#main-mapContainer').hasClass('hiddenMap') != true)){				player.body.setZeroVelocity();				active = true;				if(reload == false && (!$("#chatInput").is(":focus"))){					//console.log(game.time.fps);					ping++;					if(ping == 20){						if(playerX != savedX || playerY != savedY){							locationCall(playerX, playerY, playerMap);						}						ping = 0;					}					if (this.input.keyboard.isDown(Phaser.Keyboard.UP) || this.input.keyboard.isDown(Phaser.Keyboard.W) || game.input.activePointer.isDown) {						player.body.velocity.x = Math.cos(player.body.rotation) * walk;						player.body.velocity.y = Math.sin(player.body.rotation) * walk;						player.animations.play('walk', 8, true);					} else if (this.input.keyboard.isDown(Phaser.Keyboard.DOWN) || this.input.keyboard.isDown(Phaser.Keyboard.S)) {						player.body.velocity.x = -(Math.cos(player.body.rotation) * walk/2);						player.body.velocity.y = -(Math.sin(player.body.rotation) * walk/2);						player.animations.play('walk', 4, true);					} else {						player.animations.stop(true, false);					}					playerY = player.y;					playerX = player.x;					var pointer = this.game.input.activePointer;					player.body.rotation = Math.atan2(pointer.worldY - player.y, pointer.worldX - player.x) + (Math.PI * 2);					var playerPoint = new Phaser.Point(player.x, player.y);					var mag = Math.sqrt(Math.pow(pointer.x - player.x, 2) + Math.pow(pointer.x - player.x, 2));					var mousePoint = new Phaser.Point(pointer.x, pointer.y);					var zeroangle = Math.atan2(pointer.y - player.y, pointer.x - player.x);					layerName = null;					shop = 0;					layers.forEach(function(entry) {						if((map.getTileWorldXY(player.body.x, player.body.y,48,48, entry)) != null){							if(map.getTileWorldXY(player.body.x, player.body.y,48,48, entry).layer.name != "doodads"){								layerName = map.getTileWorldXY(player.body.x, player.body.y,48,48, entry).layer.name;								shop = map.getTileWorldXY(player.body.x, player.body.y,48,48, entry).layer.properties.shop;								newX = map.getTileWorldXY(player.body.x, player.body.y,48,48, entry).layer.properties.x;								newY = map.getTileWorldXY(player.body.x, player.body.y,48,48, entry).layer.properties.y;								newMap = map.getTileWorldXY(player.body.x, player.body.y,48,48, entry).layer.properties.map;								locationScript = map.getTileWorldXY(player.body.x, player.body.y,48,48, entry).layer.properties.script;								underground = map.getTileWorldXY(player.body.x, player.body.y,48,48, entry).layer.properties.underground;								quest = map.getTileWorldXY(player.body.x, player.body.y,48,48, entry).layer.properties.quest_id;							}						}					});					if(	underground == 1){						this.lightSprite.reset(this.game.camera.x, this.game.camera.y);						this.updateShadowTexture();					}					if(layerName != null){						$("#divScript").html(locationScript);						if(shop == 1){							$('#mapBtn').hide();							$('#shopBtn').show();							openShop(layerName);							locationCall(playerX, playerY + 50, true);							}else if(quest > 0){							openQuest(quest);													}else{							if (layerName.charAt(0) == '_'){								if(reload == false){									map = newMap;									$('#loadingDiv').show();									reload = true;									ajaxCall2.abort();									locationCallNonAsync(newX, newY, newMap);														location.reload();								}							}else{								if (layerName != loc){									loc = layerName;									$('#divLocation').html('Location: ' + layerName);									showLocation(layerName);									console.log(layerName);									console.log(ajaxCall("text", "updateZone", layerName));								}							}						}					}				}			}else{				player.body.setZeroVelocity();				active = false;			} 	 		},		updateShadowTexture: function(){			this.shadowTexture.context.fillStyle = 'rgb(55, 55, 55)';		this.shadowTexture.context.fillRect(-100, -100, this.game.width + 200, this.game.height + 200);		var radius = 300;		heroX = player.x - game.camera.x;		heroY = player.y - game.camera.y;				// Draw circle of light with a soft edge		var gradient =			this.shadowTexture.context.createRadialGradient(				heroX, heroY, 180 * 0.75,				heroX, heroY, radius);		gradient.addColorStop(0, 'rgba(255, 255, 255, 1.0)');		gradient.addColorStop(1, 'rgba(255, 255, 255, 0.0)');		this.shadowTexture.context.beginPath();		this.shadowTexture.context.fillStyle = gradient;		this.shadowTexture.context.arc(heroX, heroY, radius, 0, Math.PI*2, false);		this.shadowTexture.context.fill();    // This just tells the engine it should update the texture cache    this.shadowTexture.dirty = true;		},			render: function(){			//game.debug.spriteBounds(player);			game.debug.text(game.time.fps || '--', 600, 300, "#00ff00");   		},	};	game.state.add('main', main_state);	game.state.start('main');

Most of it is not relevant, but that's okay, easier to show it all then show what I think is vital and maybe miss somthing.

 

If you want to see what I mean you can also go to..

 

http://kal-rul.com/

 

and log on with testing///testing

 

note: only 1 active session is available per account, so if you get kicked off, it's someone else trying to get on.

 

If there is any other information I can give that would help let me know!

Hope to get this resolved! thanks!

[rgk]

Try disabling moving on the body sprite when you teleport and then enable it again.
http://phaser.io/docs/2.3.0/Phaser.Physics.Arcade.Body.html#moves

[Lomaz]

Does this work on P2 physics?  it's under the Arcade lib.

[rgk]

Sorry, I should have noticed you were using p2. I believe setting your sprite body to static, teleporting and then setting it back to dynamic should do the trick. http://phaser.io/docs/2.3.0/Phaser.Physics.P2.Body.html#static

[Lomaz]

Thanks! I will try as soon as I get off work. hope it works, to me this would fix the biggest performance issue in my game!

 

What should I use to move them. just sprite.x?  or sprite.body.x?

[rgk]

sprite.poisition should do the trick. the physics are most likely causing the issue via them trying to correct the changes.

[Lomaz]

player.body.static = true;player.x = 1600;player.body.x = 1600;player.body.static = false;

appears to do the trick.. kinda.. the camera isn't snapping to sprite (right away, does on move).. any way you know of to make this happen? it may not be an issue, won't know tel I actually implement it.

[Lomaz]

Can you explain this to me? after toggling the static attribute my player.body.mass goes crazy, it was set to 1.whatever e325 or something ridiculous like that, and I am no longer able to interact with walls.

 

Fixed it with player.body.mass = 100;

 

but still seems a bit strange, what ya think?

[rgk]

I've heard of that bug, I'm not to sure but yeah you need to reset mass, its just so you can stop the physics for trying to correct your teleport change.