Point-and-click-movement?

[markus.n]

Hi,

I'm doing my first game with Phaser, in a similar style of 2d point-and-click adventure games. All the controls of Phaser seem very nice for platformers, but this feels very unintuitive. What I need to do is to move an animated spritesheet character to where i click (or tap) on a flat 2d screen, preferrably with an even pace from start to finish. I started with this similar example: http://examples.phaser.io/_site/view_full.html?d=basics&f=04+-+image+follow+input.js&t=04%20-%20image%20follow%20input The main differences are that I want the Y coordinate to stay the same all the time (easy) and that the character should stay still until there's a click.

 

I've tried all kinds of combinations with e.g.:
- game.input.activePointer.isDown (doesn't really help, since I don't want to hold the mouse button while the character is walking).

- game.input.activePointer.justReleased (doesn't help either, since the walking time isn't standard, and the character keeps moving with the mouse after it's reached its destination already)
- game.physics.arcade.moveToPointer (would be perfect, if there just was a parameter for stopping when it reaches the point, now it just keeps going.)
- game.physics.arcade.moveToXY(player, game.input.activePointer.clientX). (same as before)

Any help is greatly appreciated!

[Mike]

Check my demo scene: http://mihail.ilinov.eu/games/AdventureJS/

 

It's older Phaser version but the concept is:

- you have a walk-able area (in your case is a walk-able line since y is constant)

- every mouse click you get the coordinates, and use only the X value

- set a X target where the player should go, mark him as walking and start walking animation

- then in a update loop check if player is walking move him   "X" pixels to the target value (you must check if you need to add or substract from the current player.x value)

- and when the player.x and target.x are equal  or over/under you stop the player animation, clear the walking state and clear the target.x 

 

I hope this make sense for you.

[Heppell08]

I'd variable the x co-ord as

Var distance;

distance = this.world.width - this.word.width - player.x;

Then use the distance variable to tell how much X has been moved. Disregarding the Y and keeping then use the moveToPointer and that 'should' do quite a bit to getting a desired effect.

[Heppell08]

Edit:

distance = this.world.width - this.world.width + player.x;

[markus.n]

Thanks a lot, got it to work! Mike's game was extremely helpful in many aspects, will steal some other parts of it too.

However, I needed to do one minor but important change to the code because of the newer Phaser version (I struggled hours with this). Here it is, hopefully it'll help someone else:

tween = this.game.add.tween(this.hero).to({ x: this.mouseTargetX, y: this.mouseTargetY }, duration, Phaser.Easing.Linear.None, true);

needs to be changed to

tween = this.game.add.tween(this.hero.body).to({ x: this.mouseTargetX, y: this.mouseTargetY }, duration, Phaser.Easing.Linear.None, true);

Otherwise only the animation starts and the character keeps still! There were some other errors too with the version change, but they were easy to track from the console.

[pacopistola]

Hi! Im totally new to Phaser as well and would love to make  a point and click. Would you mind sharing the changed version of Mikes code for the new Phaser version? I dont get it to work myself: the character only jumps once to the clicked location and thats it. 

Thanks a lot!

[markus.n]

I'm happy to report that during the last year this project of ours has grown to a full-blown Phaser-based point-and-click engine with dialogues, inventories, cutscenes, assets and an editor to create it all dynamically!   We're intending to make it open-source in a few months, but it's still very much work in progress and heavily customized to our own specific needs.

To answer your question meanwhile, here's a stripped-down version of our moveCharacter function along with a few other lines of code, hope they'll help:

// Clickplate is an invisible screen-size sprite, which registers clicks for movement and dialogues, whenever there's nothing else to click// NEEDS TO BE IN THE BEGINNING so that everything else that's clickable comes on top of it!this.clickplate = this.game.add.sprite(0, 0, 'clickplate');this.clickplate.anchor.setTo(0, 0);this.clickplate.inputEnabled = true;this.clickplate.events.onInputDown.add(this.moveCharacter, this);this.game.camera.follow(this.character);// Move character to a defined point moveCharacter: function(sprite, pointer, customTarget) {    if (this.character.clickToMove || customTarget != null) {      if (this.characterTween && this.characterTween.isRunning) {        this.characterTween.stop();      }      if (customTarget == null) { // No target in function call = normal click-movement        this.character.targetX = pointer.worldX; // "worldX" instead of just "x" is important so that the player can move      }      else { // Cut scene movement with target in function call        this.character.targetX = customTarget;      }      if (this.character.x < this.character.targetX) { // Define which way the character is facing when walking        this.character.scale.x = 1; // Character faces right      }      else {        this.character.scale.x = -1; // Character faces left      }      // defaultWalkingVelocity is pixels per second that the character will move.      // Y is 500 by default, 3d movement can be added by calculating/adding that too.      var duration = (this.game.physics.arcade.distanceToXY(this.character, this.character.targetX, 500) / this.defaultWalkingVelocity) * 1000;      this.character.animations.play('walkAni');      this.characterTween = this.game.add.tween(this.character).to({x: this.character.targetX, y: 500}, duration, Phaser.Easing.Linear.None, true);      this.characterTween.onComplete.add(function() {this.character.animations.play('idleAni')}, this);    }}