sprite moves to mouse position problem

[caymanbruce]

Hi I am trying to write a tiny program so that my sprite can move to my mouse position on the broswer (viewport content area). However, the method I am using is not accurate, the sprite always goes a few pixels away of my mouse position. I wonder if there is a better way to do this.

Currently my code is like this:

const stage = new Container();
stage.interactive = true;
stage.hitArea = new Rectangle(0, 0, 600, 600);

stage.mousemove = moveHandler;

const c = document.createElement('canvas');
// build a canvas element
const sprite = Sprite.from(c);

function movehandler(event) {
    const x = event.data.global.x;
    const y = event.data.global.y;
    sprite.rotation = Math.atan2(y - sprite.y, x - sprite.x);
}

function play() {
  sprite.x += 2 * Math.cos(sprite.rotation);
  sprite.y += 2 * Math.sin(sprite.rotation);
}

function animate() {
  requestAnimationFrame(animate);
  play();
  renderer.render(stage);
}

animate();

The sprite moves when my mouse moves but it doesn't go to the same direction. It always goes slightly away from my mouse position, maybe 3-4 pixels. I have also tried to update the sprite's rotation every tick but the problem still exists. When I am not using PIXI.js I don't get this kind of problem. What is the correct way to make my sprite move to the right direction of my mouse in PIXI.js v4?

[ClusterAtlas]

Set the sprite's anchor to 0.5.

sprite.anchor.set(0.5, 0.5);

 

Note that this just centers it, useful if using a crosshair.

If you're using a pointer-style sprite however, just adjust those two (x & y) values.

Values 0 to 1.

[caymanbruce]

7 minutes ago, ServerCharlie said:

Set the sprite's anchor to 0.5.

sprite.anchor.set(0.5, 0.5);

 

Note that this just centers it, useful if using a crosshair.

If you're using a pointer-style sprite however, just adjust those two (x & y) values.

Values 0 to 1.

I have also tried that but the sprite behaves abnormally. It will suddenly move to the opposite direction then go to the mouse position when my mouse moves. I have found my problem similar to the effect of this one: http://proclive.io/shooting-tutorial/. Notice that when the rabbit shoots the bullet it doesn't go to the exact position of your mouse if you click on upper side or lower side of the map. Only difference is that I use a `mousemove` event and my sprite is always moving on the map.

[ClusterAtlas]

Don't know why it moves crazy, but anyways shouldn't you be using the interaction manager?

 

 

INTERACTION MANAGER:

var interactionManager = new PIXI.interaction.InteractionManager(
    PIXI_APP.renderer,
    {
        autoPreventDefault: true
    }
);

interactionManager.defaultCursorStyle = "none";

 

 

on load of pixi loader:

 

// the cursor sprite
   var CursorSprite = new PIXI.Sprite(
        PIXI.utils.TextureCache[CrosshairTypes.typeOne.texture]
    );
        
    CursorSprite.anchor.set(0.5, 0.5);
    CursorSprite.scale.set(0.4, 0.4);
    stage.addChild(CursorSprite);

    PIXI_APP.ticker.add(function(delta){
        CursorSprite.position.set(
            interactionManager.pointer.global.x,
            interactionManager.pointer.global.y
        );
    });

[caymanbruce]

1 hour ago, ServerCharlie said:

Don't know why it moves crazy, but anyways shouldn't you be using the interaction manager?

 

 

INTERACTION MANAGER:

var interactionManager = new PIXI.interaction.InteractionManager(
    PIXI_APP.renderer,
    {
        autoPreventDefault: true
    }
);

interactionManager.defaultCursorStyle = "none";

 

 

on load of pixi loader:

 

// the cursor sprite
   var CursorSprite = new PIXI.Sprite(
        PIXI.utils.TextureCache[CrosshairTypes.typeOne.texture]
    );
        
    CursorSprite.anchor.set(0.5, 0.5);
    CursorSprite.scale.set(0.4, 0.4);
    stage.addChild(CursorSprite);

    PIXI_APP.ticker.add(function(delta){
        CursorSprite.position.set(
            interactionManager.pointer.global.x,
            interactionManager.pointer.global.y
        );
    });

I don't know. I just searched the forum and found that using `mousemove` event also gives the same position.  I will give it a go and let you know if this works better. The event object also contain the original mouse event and I have compared the position information of the original mouse event with the global position in `mousemove` event and I found no difference.

 

EDIT: I have tried this:

 

const x = renderer.plugins.interaction.mouse.global.x;
const y = renderer.plugins.interaction.mouse.global.y;
sprite.rotation = Math.atan2(y - sprite.y, x - sprite.x);

it still moves towards the left or right of my mouse. And now if I set the anchor of my sprite to (0.5, 0.5) I can see that the sprite rotates around the mouse position if I move my mouse around. If I stop moving my mouse it goes to the mouse position.

[caymanbruce]

Here is how it looks like when I haven't set `sprite.anchor.set(0.5, 0.5)`.

Anchor is not set

Here is how it looks like when anchor is set:

Anchor is set

When anchor is not set the top left corner of the sprite goes to the direction of the mouse. However if the anchor is set everything becomes a mess.

[ivan.popelyshev]

guys, interactionManager has a error with mouse position in 4.4.0 , please use http://pixijs.download/dev/pixi.js or wait for today's 4.4.1 release

[caymanbruce]

1 hour ago, ivan.popelyshev said:

guys, interactionManager has a error with mouse position in 4.4.0 , please use http://pixijs.download/dev/pixi.js or wait for today's 4.4.1 release

I don't use interactionManager for now. I am just using the event object in `mousemove` event of the Container. Do you know how to solve this problem?

[ivan.popelyshev]

Actually, I dont think that bug affects your case.. Something else is wrong. Can you publish it on fiddle?

You are using InteractionManager, indirectly.

[ivan.popelyshev]

I opened http://pixijs.github.io/examples/#/basics/basic.js  and it works just fine:

 

var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

// create a new Sprite from an image path
var bunny = PIXI.Sprite.fromImage('required/assets/basics/bunny.png')

// center the sprite's anchor point
bunny.anchor.set(0.5);

// move the sprite to the center of the screen
bunny.x = app.renderer.width / 2;
bunny.y = app.renderer.height / 2;

app.stage.addChild(bunny);

app.stage.hitArea = app.screen;
app.stage.interactive = true;
app.stage.on('mousemove', function(event) { 
    const x = event.data.global.x;
    const y = event.data.global.y;
    bunny.rotation = Math.atan2(y - bunny.y, x - bunny.x);
});

// Listen for animate update
app.ticker.add(function(delta) {
    // just for fun, let's rotate mr rabbit a little
    // delta is 1 if running at 100% performance
    // creates frame-independent tranformation
    bunny.x += Math.cos(bunny.rotation) * delta;
    bunny.y += Math.sin(bunny.rotation) * delta;
});

 

[caymanbruce]

17 hours ago, ivan.popelyshev said:

I opened http://pixijs.github.io/examples/#/basics/basic.js  and it works just fine:

 

var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

// create a new Sprite from an image path
var bunny = PIXI.Sprite.fromImage('required/assets/basics/bunny.png')

// center the sprite's anchor point
bunny.anchor.set(0.5);

// move the sprite to the center of the screen
bunny.x = app.renderer.width / 2;
bunny.y = app.renderer.height / 2;

app.stage.addChild(bunny);

app.stage.hitArea = app.screen;
app.stage.interactive = true;
app.stage.on('mousemove', function(event) { 
    const x = event.data.global.x;
    const y = event.data.global.y;
    bunny.rotation = Math.atan2(y - bunny.y, x - bunny.x);
});

// Listen for animate update
app.ticker.add(function(delta) {
    // just for fun, let's rotate mr rabbit a little
    // delta is 1 if running at 100% performance
    // creates frame-independent tranformation
    bunny.x += Math.cos(bunny.rotation) * delta;
    bunny.y += Math.sin(bunny.rotation) * delta;
});

 

Thanks, here is my revision based on your code. I use a canvas element as the texture of my sprite but it just doesn't move as expected. However if I use a Graphics object as the texture it goes like the image texture and everything is fine. I guess it is the problem of using a HTMLCanvasElement as the texture. I still don't know how to use it properly. The reason I use a HTMLCanvasElement as the sprite's texture because I want it to have glow effect when I move the sprite.

 

[ivan.popelyshev]

Size of your canvas is very big compared to size of the circle. Try add that one before you make a circle, that way you'll understand:

ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, canvas.width, canvas.height);

 

[caymanbruce]

56 minutes ago, ivan.popelyshev said:

Size of your canvas is very big compared to size of the circle. Try add that one before you make a circle, that way you'll understand:

ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, canvas.width, canvas.height);

 

My bad. I forgot the default canvas size is 300px X 150px.