DNGunpla

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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.