Movement using pc.EVENT_MOUSEMOVE

Help & Support
1

Hello everyone,
I am trying to move player ship based on mouse event i.e. mousemove event. But when mouse cursor intersects player ship there is unexpected behavior like flickering. the code which I used for the movement is attached below please do have a look.


PlayerController.prototype.update = function (dt) {
    if (this.pointerLocked) {
        this.camera.worldToScreen(this.entity.position, this.screenPos);
        this.screenPos.z = 0;
        this.directionToMouse.sub2(this.pointerPos, this.screenPos);
        this.directionToMouse.y *= -1;

        var angle = Math.atan2(this.directionToMouse.x, this.directionToMouse.y) * pc.math.RAD_TO_DEG;
        var targetRotation = this.targetRotation.clone().setFromEulerAngles(90, 0, 90 - angle);
        var newRotation = this.newRotation.slerp(this.entity.getRotation(), targetRotation, 0.2);// slerp for smooth rotation
        this.directionToMouse.normalize().scale(this.movementSpeed);

        let condition = this.isPlayerInsideTheBoundary(this.entity.getPosition(), this.directionToMouse);
        // condition === true ? console.log("inside") : console.log("outside");
        if (condition) {
            let currentPlayerPosition = this.entity.getPosition()
            let targetPosition = currentPlayerPosition.clone().add(this.directionToMouse.clone());

            this.entity.setRotation(newRotation);
            this.entity.rigidbody.teleport(targetPosition);

            let cameraCondition = this.isPlayerCloseToBoundary(this.entity.getPosition())

            if (cameraCondition.isClose) {
                console.log(cameraCondition.side)
                this.adjustCameraPosition(cameraCondition.side, this.directionToMouse)
            } else {
                let cameraPosition = new pc.Vec3();
                cameraPosition.lerp(this.cameraEntity.getPosition().clone(), this.entity.getPosition().clone(), this.cameraLerpFactor);
                this.cameraEntity.setPosition(cameraPosition.x, cameraPosition.y, this.cameraEntity.getPosition().clone().z);
            }

        }
    }
}

NOTE : the function isPlayerInsideTheBoundary is just to check whether the player is inside the specified boundary or Not.

2

It’s not an explanation for the odd movement that you get (which is probably due to the slerp not being able to settle the rotation at such an acute angle), but you can circumvent the ‘wobble’ by simply not updating the rotation if the ship is ‘close’ to the cursor, e.g.

var threshold = 1; // not sure what your values will be, but play with this to affect distance
var distanceBetweenShipAndCursor = this.directionToMouse.length();
var isCursorOverPlayer = distanceBetweenShipAndCursor <= threshold;
if(isCursorOverPlayer) ... // don't update the player's rotation
``
2 Likes
3

@Albertos Any updates on this .setting threshold value didn’t work fine.

4

You basically only want to rotate the entity if the distance between the entity and the mouse is more than for example 1. Looking at your code I think it can be something like below, but I’m not sure.

var distance = this.screenPos.distance(this.pointerPos);
if (distance > 1) {
    // rotate 
}

I’m curious what you are checking with isPlayerInsideTheBoundary. What is the boundary?