# Is there a code for diagonal dragging?

## Recommended Posts

I am creating a game that requires diagonal dragging of an object.

Technically, how I want it to work is by scaling the object diagonally to make a rectangle or square.

Is there any way to code for it?

##### Share on other sites

I had a similar problem in a company I worked for before. We ended up doing it manually - not relying on Phaser's drag functionality but rather using tweens to update the object after some calculations are done.

##### Share on other sites

Do you have a code (or codepen) example of your starting point?

In general I'd say if you want to move something along a diagonal just replicate dx to dy so you always have Math.abs(x2-x1) = Math.abs(y2-y1) where x1,y1 would be the starting point of your drag and x2,y2 your current mouse pointer position.

Resolved to one of the pointer coordinates that would be y2 = y1 + Math.abs(x2-x1) then you can move the mouse everywhere but the point on the diagonal would move according to your pointer x position.

##### Share on other sites

18 hours ago, flow said:

Do you have a code (or codepen) example of your starting point?

In general I'd say if you want to move something along a diagonal just replicate dx to dy so you always have Math.abs(x2-x1) = Math.abs(y2-y1) where x1,y1 would be the starting point of your drag and x2,y2 your current mouse pointer position.

Resolved to one of the pointer coordinates that would be y2 = y1 + Math.abs(x2-x1) then you can move the mouse everywhere but the point on the diagonal would move according to your pointer x position.

I currently have the following object code to test the diagonal below

Quote

test: function(){
testBox.anchor.setTo(0.5);
testBox.scale.setTo(0.2);

testBox.inputEnabled = true;
testBox.input.enableDrag(true);
},

so how should I code it from here?

##### Share on other sites

@flow Any ideas how do I implement it?

##### Share on other sites

So its still a bit unclear to me if you want to drag the sprite along a diagonal or if you want to scale the sprite by dragging like a window resize.

I've decided to go for the 2nd one :-D

What it does is when you click the sprite you can move your mouse to scale it keeping the aspect ratio. To do that I simply use the x coordinate of the mouse to scale both x and y equally. Hope that helps :-)

``````var spriteScale = false;
var spriteScaleStartX, spriteStartSizeX;
var spriteScaleStartY, spriteStartSizeY;
var sprite;

var game = new Phaser.Game({
state: {
// This is equivalent to <https://examples.phaser.io/assets/>.
},

create: function() {
// this.physics.enable(sprite);
sprite.anchor.setTo(0.5);
sprite.scale.setTo(1.0);

sprite.inputEnabled = true;
spriteScale = true;
spriteScaleStartX = game.input.activePointer.position.x;
spriteScaleStartY = game.input.activePointer.position.y;
spriteStartSizeX = sprite.scale.x;
spriteStartSizeY = sprite.scale.y;
}, this);
spriteScale = false;
spriteScaleStartX = null;
spriteScaleStartY = null;
}, this);
},

update: function() {
if (spriteScale && spriteScaleStartX){
var factor = 1+(game.input.activePointer.position.x-spriteScaleStartX)/spriteScaleStartX;
sprite.scale.set(spriteStartSizeX*factor)
}
}
}
});``````

Codepen:

##### Share on other sites

Oh Okay thanks

I will try it out