# Smoother Mouse Polling?

**URL:** <https://phaser.discourse.group/t/smoother-mouse-polling/6246>\
**Category:** Phaser 3\
**Created:** [May 8, 2020, 1:29pm UTC](https://phaser.discourse.group/t/smoother-mouse-polling/6246 "2020-05-08T13:29:47Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![TinyGuy](https://avatars.discourse-cdn.com/v4/letter/t/d26b3c/32.png) [@TinyGuy](https://phaser.discourse.group/u/TinyGuy)\
**Post date:** [May 8, 2020, 1:29pm UTC](https://phaser.discourse.group/t/smoother-mouse-polling/6246/1 "2020-05-08T13:29:47Z")

</div>

I’m basically looking to create something a bit like paint where you can draw on a canvas by dragging different tools across it

Having not used Phaser before I’m just playing around to see what works, at the moment I have an [x][y] grid of points and a ‘box’ (unloaded sprite) which I can drag around. As the box moves over the grid I mark the points at [x][y] and a reference to the point is pushed to another array for rendering in another colour

```
        // Create Snippet
        box.setInteractive();
        this.input.setDraggable(box);

        this.input.on('drag', function (pointer, gameObject, dragX, dragY) {

            gameObject.x = dragX;
            gameObject.y = dragY;
            points[dragX][dragY].touched = true; // Each point has a touched state and a Geom.Point
            changedPoints.push(points[dragX][dragY])
        });

        //Update snippet
        while (changedPoints.length)
            graphics.fillPointShape(changedPoints.pop().point, 4);

```

And this looks to work, I can drag the box and the points change colour

However if I try and drag the box quickly callbacks are missed and I get ‘gaps’ in my line, as shown below I’ve tried to draw a square (starting top left and moving to the right), as I speed up the line gets more and more broken

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/b/b17d6cc3b4293f10a90cc4ae5619375511cc0f9e.png)

Is there anyway to smooth this out, so the drag can function at faster speeds or is there another approach I could look into?

Thanks!

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [May 8, 2020, 2:57pm UTC](https://phaser.discourse.group/t/smoother-mouse-polling/6246/2 "2020-05-08T14:57:18Z")

</div>

[http://phaser.io/examples/v3/search?search=paint](http://phaser.io/examples/v3/search?search=paint)

---

<div class="post-metadata">

**Author:** ![BlunT76](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/blunt76/32/1454_2.png) [@BlunT76](https://phaser.discourse.group/u/BlunT76)\
**Post date:** [May 8, 2020, 3:00pm UTC](https://phaser.discourse.group/t/smoother-mouse-polling/6246/3 "2020-05-08T15:00:44Z")

</div>

Hi,  
[https://photonstorm.github.io/phaser3-docs/Phaser.Input.Pointer.html#motionFactor\_\_anchor](https://photonstorm.github.io/phaser3-docs/Phaser.Input.Pointer.html#motionFactor__anchor)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [May 8, 2020, 3:04pm UTC](https://phaser.discourse.group/t/smoother-mouse-polling/6246/4 "2020-05-08T15:04:44Z")

</div>

See [getInterpolatedPosition()](https://photonstorm.github.io/phaser3-docs/Phaser.Input.Pointer.html#getInterpolatedPosition) in [http://phaser.io/examples/v3/view/game-objects/render-texture/paint-interpolated](http://phaser.io/examples/v3/view/game-objects/render-texture/paint-interpolated).

---

<div class="post-metadata">

**Author:** ![BlunT76](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/blunt76/32/1454_2.png) [@BlunT76](https://phaser.discourse.group/u/BlunT76)\
**Post date:** [May 8, 2020, 3:13pm UTC](https://phaser.discourse.group/t/smoother-mouse-polling/6246/5 "2020-05-08T15:13:33Z")

</div>

getInterpolatedPosition seems to be a better solution.

---

<div class="post-metadata">

**Author:** ![TinyGuy](https://avatars.discourse-cdn.com/v4/letter/t/d26b3c/32.png) [@TinyGuy](https://phaser.discourse.group/u/TinyGuy)\
**Post date:** [May 8, 2020, 5:23pm UTC](https://phaser.discourse.group/t/smoother-mouse-polling/6246/6 "2020-05-08T17:23:35Z")

</div>

Thanks that looks like a great starting point, I was thinking about interpolation just after I posted

Having another play around and it’s definitely smoother, I’ve not got the drag functionality back in yet though

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/f/ff2896c0ace7b104cc0b0e4d954c3ffbaa95fa22.png)

The examples load in an image but don’t draw it onto the texture until mouse down. I’m just using a circle at the moment as my brush

I can’t figure out how to initialise it during `create` but not ‘add’ it to the scene - currently I always have a circle at 10,10 - I’ve tried not specifiying coordinates but then nothing seems to draw

Code snippet below:

```
    function create() {

        var rt = this.add.renderTexture(0, 0, 800, 600);

        // What kind of circle is this, possible to init but not add to scene?
        var point = this.add.circle(10,10, 4, 0x6666ff)

        this.input.on('pointermove', function (pointer) {

            if (pointer.isDown) {
                var points = pointer.getInterpolatedPosition(60);
                
                points.forEach(function (p) {
                    rt.draw(point, p.x, p.y);
                });
            }

        }, this);
    }
```

---

<div class="post-metadata">

**Author:** ![BlunT76](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/blunt76/32/1454_2.png) [@BlunT76](https://phaser.discourse.group/u/BlunT76)\
**Post date:** [May 8, 2020, 5:35pm UTC](https://phaser.discourse.group/t/smoother-mouse-polling/6246/7 "2020-05-08T17:35:45Z")

</div>

You can use negative values so it is not visible:  
var point = this.add.circle(-10,-10, 4, 0x6666ff)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [May 8, 2020, 5:39pm UTC](https://phaser.discourse.group/t/smoother-mouse-polling/6246/8 "2020-05-08T17:39:50Z")

</div>

I think this should be fine:

```javascript
var point = this.add.circle(10,10, 4, 0x6666ff).setVisible(false);

```

If you give `point` a partial alpha instead and then move it ‘pointermove’, you’ve made a cursor.

---

<div class="post-metadata">

**Author:** ![BlunT76](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/blunt76/32/1454_2.png) [@BlunT76](https://phaser.discourse.group/u/BlunT76)\
**Post date:** [May 8, 2020, 5:45pm UTC](https://phaser.discourse.group/t/smoother-mouse-polling/6246/9 "2020-05-08T17:45:44Z")

</div>

I searched for setVisible in the doc and didn’t see it, but it works… is the doc not up to date?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [May 8, 2020, 6:03pm UTC](https://phaser.discourse.group/t/smoother-mouse-polling/6246/10 "2020-05-08T18:03:21Z")

</div>

Idk how the search works exactly, but it’s in [https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Components.Visible.html#setVisible](https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Components.Visible.html#setVisible).

---

<div class="post-metadata">

**Author:** ![TinyGuy](https://avatars.discourse-cdn.com/v4/letter/t/d26b3c/32.png) [@TinyGuy](https://phaser.discourse.group/u/TinyGuy)\
**Post date:** [May 8, 2020, 8:53pm UTC](https://phaser.discourse.group/t/smoother-mouse-polling/6246/11 "2020-05-08T20:53:47Z")

</div>

Thanks again I really appreciate the help

I did try negative x,y but it didn’t feel like that was right way to do it, but hey, if it works it works

So I take it you can’t initialise a game object without placing it into the scene? The API says the x,y coordinates are optional but I cant see any explanation on how it expects optional params

I tried `var point = new Phaser.Geom.Circle({radius: 5})` but no luck, even `var point = new Phaser.Geom.Circle(10,10,5)` doesn’t do anything

I guess the circle created by `add.circle` is a different kind of circle? 🤔

I’ll do some digging around in the docs/examples a bit more and and see if I can better understand what’s happening behind the scenes

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [May 8, 2020, 8:59pm UTC](https://phaser.discourse.group/t/smoother-mouse-polling/6246/12 "2020-05-08T20:59:12Z")

</div>

You can do

```javascript
var point = new Phaser.GameObjects.Arc(this, x, y, radius, 0, 360, false, fillColor, fillAlpha);

```

But for this purpose I think making it invisible is simpler.

---

<div class="post-metadata">

**Author:** ![TinyGuy](https://avatars.discourse-cdn.com/v4/letter/t/d26b3c/32.png) [@TinyGuy](https://phaser.discourse.group/u/TinyGuy)\
**Post date:** [May 9, 2020, 11:02am UTC](https://phaser.discourse.group/t/smoother-mouse-polling/6246/13 "2020-05-09T11:02:31Z")

</div>

Ah so it’s an arc, I see

The set visible works great, spent a little more time this morning and added the drag back in

![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/4/41b81b2518644f95bf14fa5fd762ba669b11a89f.png)

I’ll have a look at smoothing out the strokes next as they’re a little jaggy right now!  
The examples use an image rather than circles so that may be a good starting point

Then I’m going to calculate an angle of rotation as the tool moves so multiple lines don’t overlap on diagonal/horizontal dragging, allowing you to make a complete circle

Again thanks for the help, feel free to close this thread