Jump to content

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

    horizontalBaffleBtn.events.onInputUp.add(function () {
                                        this.destroy(); // breaks here, horzBaffle is null
                                    }, horzBaffle);


Link to comment
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 )

Link to comment
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: gameObject.world 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

Link to comment
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 gameObject.world 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 :)

Link to comment
Share on other sites


  • Recently Browsing   0 members

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