Hello, I would like to know if there is a way to see which direction the player is turning with the mouse, since this is a first person game. Any help is apprechiated.
Hi @WHISPEROFWIND,
You can monitor mouse movements in Javascript and use the values inside of Playcanvas. You can see how it’s down in the First Person Shooter tutorial project here:
https://developer.playcanvas.com/en/tutorials/first-person-movement/
If you look at the second image on the page, the part you will be looking for is near the bottom:
The listener for _onMouseMove() is created in the initialize() function :
I hope this is helpful
1 Like
is there a way to make an if statement with the last screenshot? if so, can you show me how to make one?
Could you elaborate on what you mean? The last screenshot points the mousemove event to the code in the code in the first screenshot, specifically the _onMouseMove() function. That is the code that runs when the mouse moves.
As you can see, there is already an if statement in there. That particular if statement check to see if the mouse is hidden or if the left mouse button is down.
if (app.keyboard.wasPressed(pc.KEY_SPACE)) {
if (// player is turning left or right) {
console.log("yay");
}
}
this is what im asking if i can achieve
So, you would want to keep things like checking if a key was or is pressed in your update function, instead of while the mouse is moving.
Based on the example you wrote above, you’re wanting to check if a player is turning left or right after space was pressed in the previous frame, is that correct?
Yes, that is correct.
So this is just the first thing that comes to my mind, but it should work. There is likely a more efficient way to do this.
I would start by creating a variable in my initialize() function. I’ll use the tutorial project I linked to’s code for these examples:
FirstPersonMovement.prototype.initialize = function() {
this.force = new pc.Vec3();
this.eulers = new pc.Vec3();
this.turnDir = null; //Adding variable to check for turn direction
var app = this.app;
// Listen for mouse move events
app.mouse.on("mousemove", this._onMouseMove, this);
// when the mouse is clicked hide the cursor
app.mouse.on("mousedown", function () {
app.mouse.enablePointerLock();
}, this);
// Check for required components
if (!this.entity.collision) {
console.error("First Person Movement script needs to have a 'collision' component");
}
if (!this.entity.rigidbody || this.entity.rigidbody.type !== pc.BODYTYPE_DYNAMIC) {
console.error("First Person Movement script needs to have a DYNAMIC 'rigidbody' component");
}
};
With that made, I can check when the mouse moves what direction it’s moving in with the delta values passed by the event (e.dx and e.dy) and change my variable:
FirstPersonMovement.prototype._onMouseMove = function (e) {
// If pointer is disabled
// If the left mouse button is down update the camera from mouse movement
if (pc.Mouse.isPointerLocked() || e.buttons[0]) {
this.eulers.x -= this.lookSpeed * e.dx;
this.eulers.y -= this.lookSpeed * e.dy;
if(e.dx > 0) {
this.turnDir = 'right';
}
else if(e.dx < 0) {
this.turnDir = 'left';
}
else {
this.turnDir = null;
}
}
};
Then in my update function, I could use something like the if statement you supplied in my update() function to check if the player was turning that frame and push a message to the console:
FirstPersonMovement.prototype.update = function(dt) {
//...
if (this.app.keyboard.wasPressed(pc.KEY_SPACE)) {
if (this.turnDir === 'right') {
console.log('Turning right last frame');
}
else if (this.turnDir === 'left') {
console.log('Turning left last frame');
}
else {
console.log('Not turning last frame');
}
}
this.turnDir = null;
};
The reason I set this.turnDir to null at the end of the update() is so that if the player does not move the mouse, and presses space again, the previous turning value will not be saved.
This code is not tested, so you might have to fiddle with it, but it was my first thought in how to approach this question.
I hope this is helpful!
2 Likes
thanks!