CODEWITHSUNDEEP
javascriptphaser-framework
dwib
dwib

Reputation: 595

Save mouse location then have a second value that updates

I'm using the Phaser engine, and I want to have a line be drawn on a click and hold event from the initial mouse position and have it constantly update to draw to the mouse position as it moves. My problem is that when i try to store the initial mouse position it keeps changing. This seems like a simple problem but i'm not very good with this stuff. Here is the code:

var unitLine;
if(game.input.activePointer.isDown) {
    const firstX = game.input.x;
    const firstY = game.input.y;
    unitLine = game.add.graphics(100, 100);
    unitLine.beginFill(0xFF3300);
    unitLine.lineStyle(10, 0xffd900, 1);

    unitLine.moveTo(firstX, firstY);
    unitLine.lineTo(game.input.x, game.input.y);
}

that firstX and firstY are changing even when i declare them as a const. Not sure what to do here.

Upvotes: 0

Views: 47

Answers (2)

Stuart Aitken
Stuart Aitken

Reputation: 1012

It's because you're declaring them in the statement, so the declaration is newly hit each time and the variables are created afresh.

Firsly, you need to create the variables outside of the statement.

And then, to fix your issue, I would use a bool to lock them in.

Something like this:

var unitLine;
var firstX;
var firstY;
var needToset_XY = true;

if(game.input.activePointer.isDown) {

    if(needToset_XY){
        firstX = game.input.x;
        firstY = game.input.y;
        needToset_XY = false;
    }

    unitLine = game.add.graphics(100, 100);
    unitLine.beginFill(0xFF3300);
    unitLine.lineStyle(10, 0xffd900, 1);

    unitLine.moveTo(firstX, firstY);
    unitLine.lineTo(game.input.x, game.input.y);
}

This means the firstX and firstY values can't be changed after the first time.

If this is all in a game loop, you'll need to declare the top four variables outside of the loop, otherwise they'll renew themselves each time.

Upvotes: 0

Ethan
Ethan

Reputation: 4375

The problem is that you're setting firstX and firstY whenever the mouse isDown, so they're basically overwritten every frame that the mouse is down.

To get around this, try using Phaser's game.input.onDown function:

var game = new Phaser.Game(500, 500, Phaser.CANVAS, 'test', {
  preload: preload,
  create: create,
  update: update
});

function preload() {}

let firstX;
let firstY;

function create() {
  game.input.onDown.add(function() {
    firstX = game.input.x;
    firstY = game.input.y;
  }, this);
}
var unitLine;

function update() {
  if (game.input.activePointer.isDown) {
    unitLine = game.add.graphics(0, 0);
    unitLine.beginFill(0xFF3300);
    unitLine.lineStyle(10, 0xffd900, 1);

    unitLine.moveTo(firstX, firstY);
    unitLine.lineTo(game.input.x, game.input.y);
  }
}
<script src="https://github.com/photonstorm/phaser-ce/releases/download/v2.11.1/phaser.min.js"></script>

(Also, I had to change the 100, 100 to 0, 0)

Upvotes: 2

Related Questions