Smoother Mouse Polling?

Phaser 3
1

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
image936×737 5.52 KB

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!

2

http://phaser.io/examples/v3/search?search=paint

3

Hi,
https://photonstorm.github.io/phaser3-docs/Phaser.Input.Pointer.html#motionFactor__anchor

2 Likes
4

See getInterpolatedPosition() in http://phaser.io/examples/v3/view/game-objects/render-texture/paint-interpolated.

2 Likes
5

getInterpolatedPosition seems to be a better solution.

6

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
image1110×568 4.21 KB

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);
    }
7

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

1 Like
8

I think this should be fine:

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.

1 Like
9

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

10

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

1 Like
11

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? :thinking:

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

12

You can do

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.

1 Like
13

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

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