Sign in to follow this  
markus.n

Point-and-click-movement?

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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);    }}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.