Is there a code for diagonal dragging?

[DNGunpla]

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?

[in mono]

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.

[flow]

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.

[DNGunpla]

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 = this.game.add.sprite(400, 300, 'yellowButton');
        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?

[DNGunpla]

@flow Any ideas how do I implement it?

[flow]

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: {
    preload: function() {
      // This is equivalent to <https://examples.phaser.io/assets/>.
      this.load.baseURL = 'https://cdn.jsdelivr.net/gh/samme/[email protected]/assets/';
      this.load.crossOrigin = 'anonymous';
      this.load.image('dude', 'sprites/phaser-dude.png');
    },
    
    create: function() {
      sprite = this.add.sprite(300, 100, 'dude');
      // this.physics.enable(sprite);
      sprite.anchor.setTo(0.5);
      sprite.scale.setTo(1.0);

      sprite.inputEnabled = true;
      sprite.events.onInputDown.add(function(){
        spriteScale = true;
        spriteScaleStartX = game.input.activePointer.position.x;
        spriteScaleStartY = game.input.activePointer.position.y;
        spriteStartSizeX = sprite.scale.x;
        spriteStartSizeY = sprite.scale.y;
      }, this);
      sprite.events.onInputUp.add(function(){
        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:

Codepen example

[DNGunpla]

Oh Okay thanks

I will try it out