markus.n 4 Report post Posted March 24, 2014 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! 1 salcapolupo reacted to this Share this post Link to post Share on other sites
Mike 56 Report post Posted March 24, 2014 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. 2 salcapolupo and theNeedle reacted to this Share this post Link to post Share on other sites
Heppell08 78 Report post Posted March 24, 2014 I'd variable the x co-ord asVar 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
Heppell08 78 Report post Posted March 24, 2014 Edit:distance = this.world.width - this.world.width + player.x; Share this post Link to post Share on other sites
markus.n 4 Report post Posted March 25, 2014 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 totween = 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. 1 salcapolupo reacted to this Share this post Link to post Share on other sites
pacopistola 0 Report post Posted June 12, 2015 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
markus.n 4 Report post Posted July 7, 2015 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); }} 2 WombatTurkey and brendaespadas reacted to this Share this post Link to post Share on other sites