Sign in to follow this  
caymanbruce

sprite moves to mouse position problem

Recommended Posts

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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites
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.

 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.