Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Is there a code for diagonal dragging?


DNGunpla
 Share

Recommended Posts

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.

Link to comment
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 = 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?

Link to comment
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: {
    preload: function() {
      // This is equivalent to <https://examples.phaser.io/assets/>.
      this.load.baseURL = 'https://cdn.jsdelivr.net/gh/samme/phaser-examples-assets@v2.0.0/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

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...