Sign in to follow this  

How to start dragging with mouse, graphics object I created onInputDown?

Recommended Posts

I am kind of lost in this events system.

I have a button which when i press it creates new graphics object. I want to be able to drag this object while the mouse button is down and when I release it this object should be destroyed.

Tried several things but I am lost in sending context objects. 

How this functionality should be done correctly? ( I remember in Flash was easy, just use startDrag() and the newly created object start to follow the mouse as you move it)

Here is my sample code which works partially:

var horizontalBaffleBtn = null,
    horzBaffle = null;

    horizontalBaffleBtn = gameObject.add.button(10, 10, frnConstr.ImageAssetKeys.HORIZONTAL_BAFFLE);
                .add(function () {
                      this.frnPart = this
                                                  gameObject.input.x, gameObject.input.y,
                                                  50, thickness,
                                                  constGr.DEFAULT_GRAPHICS_BORDER_SIZE, constGr.Colors.BLACK, 1,
                                                  utils.getHexColor(shelveCssColor), 1);
                      this.frnPart.inputEnabled = true;
                      this.frnPart.input.start(0, true);
                 {context: grContext, grUtils: this, frnPart: horzBaffle});

    console.log(horzBaffle);// prints null () {
                                        this.destroy(); // breaks here, horzBaffle is null
                                    }, horzBaffle);


Share this post

Link to post
Share on other sites

Ok. this maybe can be broken in two parts:

First the horzBaffle is null because of some JavaScript rules.

And second, is this the right way to create and start dragging the object with mouse without pressing the object first?

(I press the horizontalBaffleBtn, new object is created and while the mouse is down this object follows it. When mouse button is released this object is destroyed )

Share this post

Link to post
Share on other sites

Well this was going nowhere. I decided to use update() function to update position, something like:

update: function () {
    if (utils.isTruthy(horzBaffleObj)) {
          if (gameObject.input.mousePointer.isDown) {

              horzBaffleObj.x = gameObject.input.mousePointer.x;
              horzBaffleObj.y = gameObject.input.mousePointer.y;

          } else {


Still I don't get exact mouse pointer position. It is shifted a bit, by the size of the button I press on(The grey area around "the horizontal baffle" text) , haha:



Is there some property in Phaser.Game that contains all graphics, so that I don't create my own?

It clutters my code.

EDIT: but still it is shifted like the image above :)

EDIT: the shift comes from when creating the button. I replaced gameObject.input.x and y with x = 25 and y = 0.

Now it works :D

Share this post

Link to post
Share on other sites

The problem i had was, I tried to create new object and add multiple event listeners inside the same method. I guess that it is how JS works when you send context object to callback method. Outside of the callback method this context object is null :D

Anyway I found that on update() function I can detect when mouse is down and set x/y coordinates of my new rectangle object. The top code now is just creating rectangle which is then set as top level variable i.e it doesn't disappear, which means I can freely update its position.

And now I add it to instead of some child graphics object.

Advanced stuff, its quite confusing :D

The shift of x/y was because I had leftover input x/y from the previous experiment :)

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.

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.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.