moving player by moveToXY canvas hidden barrier

[metalslug87]

Hello,

I have problem with moving player out of Canvas with help of moveToXY function. The canvas size is 400x600 and the tilemap is 2000x2000.
When I click on destination point the player is going to destination but he always stop on hidden barrier (Canvas bounds) and can't get further. When I move the player with keyboard he can go anywhere but with mouse click he can't make it.

Here is my code in update function:

 

  if (this.game.input.activePointer.isDown) {
        this.playerX = this.input.activePointer.x;
        this.playerY = this.input.activePointer.y;
        console.log("X: " + this.playerX + " Y: " + this.playerY);
  }

  if (this.game.physics.arcade.distanceToXY(this.player, this.playerX, this.playerY) > 5) {
        this.game.physics.arcade.moveToXY(this.player, this.playerX, this.playerY, 60, 0);
  }

 

[Cudabear]

Interesting.  Are you resizing the world to the size of the tilemap?

[tips4design]

How do you move the player with the keyboard? Did you turn off collideWithWorldBounds (or something like that) ?

 

[metalslug87]

yes, I am resizing: this.layer.resizeWorld();

This code is commented ( turned off ), so I think it's not the problem.

//this.player.body.collideWorldBounds = true;

It seems that the code below is not working out of canvas size

this.playerX = this.input.activePointer.x;
this.playerY = this.input.activePointer.y;

[metalslug87]

This is the whole code, maybe someone can figure it out

var GameState = function(game) {
};

GameState.prototype.preload = function() {
    this.game.load.spritesheet('dwarf', 'assets/dwarf.png', 20, 30);
};

GameState.prototype.create = function() {

    this.map;
    this.tileset;
    this.layer;
    this.player;
    this.cursors;
    this.bg;
    this.playerX;
    this.playerY;
    this.game.physics.startSystem(Phaser.Physics.ARCADE);

    this.map = this.game.add.tilemap('map-1');
    this.map.addTilesetImage('tileset-1', 'tiles-1');
    this.map.setCollisionByExclusion([ 1 ]);
    this.map.setCollisionByExclusion([ ], true, 'rocks');
    this.layer = this.map.createLayer('map');
    this.layerRocks = this.map.createLayer('rocks');


    this.player = this.game.add.sprite(200, 250, 'dwarf');
    this.game.physics.enable(this.player, Phaser.Physics.ARCADE);
    //this.player.body.collideWorldBounds = true;
    this.player.body.setSize(20, 30, 0, 0);
    this.player.frame = 0;
    this.game.camera.follow(this.player);

    this.layer.resizeWorld();
    this.layer.debug = true;

    this.cursors = this.game.input.keyboard.createCursorKeys();

};

GameState.prototype.update = function() {

    //player movement
    if (this.cursors.left.isDown) {
        this.player.body.velocity.x = -150;
    } else if (this.cursors.right.isDown) {
        this.player.body.velocity.x = 150;
    }

    if (this.cursors.up.isDown) {
        this.player.body.velocity.y = -150;
    } else if (this.cursors.down.isDown) {
        this.player.body.velocity.y = 150;
    } 
  
    this.player.body.velocity.x = 0;
    this.player.body.velocity.y = 0;

    if (this.game.input.activePointer.isDown) {
        this.playerX = this.input.activePointer.x;
        this.playerY = this.input.activePointer.y;   
    }

    if(this.game.physics.arcade.distanceToXY(this.player, this.playerX, this.playerY) > 5) {
        console.log("playerX: " + this.playerX + " --- playerY: " + this.playerY);
        this.game.physics.arcade.moveToXY(this.player, this.playerX, this.playerY, 60, 0);
    }

};
// end UPDATE

GameState.prototype.render = function() {

};

var game = new Phaser.Game(300, 400, Phaser.AUTO, 'game');

game.state.add('game', GameState, true);

 

[metalslug87]

I've found solution, thank you for your answers

if (this.game.input.activePointer.isDown) {
        this.playerX = this.input.worldX;
        this.playerY = this.input.worldY;  
        //console.log("X: " + this.playerX + " Y: " + this.playerY);
    }