I'm working on my first Javascript game. It is a top down 2D view (think GTA 1/2). Now I'm having trouble with collision detection. I have multiple entities where one is the player and the other is a static object (let's say a wall for simplicity).
Each object has X/Y coordinates and the player also has a velocity and an angle (which way the player is facing from 0-360 degrees). The collision detection against the wall works fine and I stop velocity on one of the axis if the player collide having as result the player can "slide" agains the wall.
Now to the issue: Once the player collides agains the wall the movement on one of the axis is stopped. If the player after that turns around and facing away from the wall the movement of that axis is still stopped since ha collided.
I would like the player, if facing away from the object, is free to move how he want's how do I achieve this? I guess I need to figure out which way the player is facing and if he is facing against or away from the object?
for( var i = 0; i < GAME.entities.length; i++ ) {
if( this._collision( GAME.entities[i] ) ) {
var distanceX = GAME.entities[i].x - this.x;
var distanceY = GAME.entities[i].y - this.y;
if( distanceX < 0 )
distanceX *= -1;
if( distanceY < 0 )
distanceY *= -1;
if( !stopX ) {
stopX = ( distanceX > distanceY );
}
if( !stopY ) {
stopY = ( distanceX < distanceY );
}
}
}
I figured out how to do this:
var degrees = ( Math.atan2( GAME.entities[i].x - this.x, GAME.entities[i].y - this.y ) * 180 / Math.PI ) + this.angle
Related
I've looked for help of first player rotation on three.js for a while but most of the answers are outdated with functions which currently don't exist in the updated library.
I'm trying to make my code run so that the camera will rotate around it's own axis according to the position of the mouse on the screen.
The current rotation code is:
var scale = 10;
function viewKeys(){
document.addEventListener("mousemove", MouseMove, true);
function MouseMove(event) {
mouseX = event.clientX - divOffsetWidth;
mouseY = event.clientY - divOffsetHeight;
}
}
divOffset variables make the mouse positions read relative to the center of the HTML div.
function viewAnimate(){
camera.rotation.x = -((3/2)*(Math.PI*mouseY)) / (scale);
camera.rotation.y = -(2*(Math.PI*mouseX)) / (scale);
}
The viewKeys() function is called in the init() function and the viewAnimate() function is called within the animate() function.
Currently the code can rotate normally when the camera's position is (0,0,0) but if I move to a different position it looks as if the camera is rotating relative to the whole environment's axis.
I am aware that there are lots of control librarys for three.js but I would like to understand how to be able to rotate something on its own axis myself.
How do you suppose I change the rotation so that it works correctly?
If you want to rotate the camera yourself via the mouse, you will have to understand how Euler rotations work in three.js. See this answer.
One way to implement what you want is by using a pattern like so:
var scale = 1;
var mouseX = 0;
var mouseY = 0;
camera.rotation.order = "YXZ"; // this is not the default
document.addEventListener( "mousemove", mouseMove, false );
function mouseMove( event ) {
mouseX = - ( event.clientX / renderer.domElement.clientWidth ) * 2 + 1;
mouseY = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
camera.rotation.x = mouseY / scale;
camera.rotation.y = mouseX / scale;
}
I agree with you that experimenting with this would be a good learning experience.
three.js r.89
This one is bugging me quite a bit.
I'm trying to achieve rotation of a Cannon.Body based on the mouse input.
By using the (Cannon) Three FPS example to demonstrate, you can see what the issue is.
https://codepen.io/Raggar/pen/EggaZP
https://github.com/RaggarDK/Baby/blob/baby/pl.js
When you run the code and enable pointerlockcontrols by clicking on the "click to play" area and press W for 1 second to get the sphere into the view of the camera, you'll see that the sphere moves according to the WASD keys by applying velocity. If you move the mouse, the quaternion is applied to the Body, and the proper velocity is calculated.
Now turn 180 degrees, and the rotation on the X axis is now negated somehow.
When moving the mouse up, the sphere rotates down.
How would one fix such issue? Maybe I'm doing something wrong elsewhere, that might mess with the quaternion?
Maybe I should mention, in the playercontroller(pl.js), I'm applying the rotation to the sphereBody, instead of the yaw- and pitchObjects.
Relevant code from pl.js (Line 49):
var onMouseMove = function ( event ) {
if ( scope.enabled === false ) return;
var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
cannonBody.rotation.y -= movementX * 0.002;
cannonBody.rotation.x -= movementY * 0.002;
cannonBody.rotation.x = Math.max( - PI_2, Math.min( PI_2, cannonBody.rotation.x ) );
//console.log(cannonBody.rotation);
};
And (Line 174):
euler.x = cannonBody.rotation.x;
euler.y = cannonBody.rotation.y;
euler.order = "XYZ";
quat.setFromEuler(euler);
inputVelocity.applyQuaternion(quat);
cannonBody.quaternion.copy(quat);
velocity.x = inputVelocity.x;
velocity.z = inputVelocity.z;
Inside the animate() function, codepen (Line 305):
testballMesh.position.copy(sphereBody.position);
testballMesh.quaternion.copy(sphereBody.quaternion);
The problem is the way you assign angles to and from the Quaternions. The quaternion x,y,z,w properties are not directly compatible with angles, so you need to convert.
This is how to set the angle around a given axis for a CANNON.Quaternion:
var axis = new CANNON.Vec3(1,0,0);
var angle = Math.PI / 3;
body.quaternion.setFromAxisAngle(axis, angle);
Extracting the Euler angles from quaternions is probably not be the best way to attack the second part of the problem. You could instead just store the rotation around X and Y axes when the user moves the mouse:
// Declare variables outside the mouse handler
var angleX=0, angleY=0;
// Inside the handler:
angleY -= movementX * 0.002;
angleX -= movementY * 0.002;
angleX = Math.max( - PI_2, Math.min( PI_2, angleX ) );
And then to get the rotation as a quaternion, use two quaternions separately (one for X angle and one for Y) and then combine them to one:
var quatX = new CANNON.Quaternion();
var quatY = new CANNON.Quaternion();
quatX.setFromAxisAngle(new CANNON.Vec3(1,0,0), angleX);
quatY.setFromAxisAngle(new CANNON.Vec3(0,1,0), angleY);
var quaternion = quatY.mult(quatX);
quaternion.normalize();
To apply the quaternion to your velocity vector:
var rotatedVelocity = quaternion.vmult(inputVelocity);
Pro tip: don't use Euler angles if you can avoid them. They usually cause more problems than they solve.
I basically made two walls in the canvas. One in the top and one at the bottom. My player is controlled by the MOUSE and I wanted to know how to make the player not go through the walls.
Here's the function for the general collision between two objects:
function collides(a, b) {
var val = false;
val = (a.x < b.x + b.width) &&
(a.x + a.width > b.x) &&
(a.y < b.y + b.height) &&
(a.y + a.height > b.y);
return val;
}
Here's the code that detects collision detection:
if (collides(player, block)){
//I don't know what goes here.
}
Any help would be appreciated.
Reposition the player as you already do and also clamp the player's y position to always be between the top and bottom walls.
In your mousemove handler (or wherever the player is repositioned by the mouse):
// reposition the player as you already do
...
// and clamp the player to stay below the top wall
if( player.y < wall.y+wall.height ){ player.y = wall.y+wall.height);
// and clamp the player to stay above the bottom wall
if( player.y+player.height > wall.y ){ player.y = wall.y-player.height);
So I have this little javascript labyrinth game I've been working on. The player controls a character using the mouse cursor.
I have a semi-transparent .png bitmap for walls (all in one file), and the player.
The problem here is that I can't seem to make a working collision system.
Here's the essential part of the code:
// Calculate the distances between the cursor and the player
var xDistance = stage.getStage().mouseX - player.x;
var yDistance = stage.getStage().mouseY - player.y;
// Move the player
if (distance > 1) {
player.x += xDistance * easingAmount;
player.y += yDistance * easingAmount;
}
// Check collision for player (bounds)
var mapCollision = collisionMethod(bounds, mapLines, 1);
if (mapCollision) {
if (xDistance > 0 || xDistance < 0)
player.x -= xDistance * easingAmount;
else if (yDistance > 0 || yDistance < 0)
player.y -= yDistance * easingAmount;
}
CollisionMethod is actually ndgmr.checkPixelCollision.
The collision should slide along the walls. This collision only works when the player collides with Y-axis walls.
I am still pretty new with JS, and there's probably a better way to create collision for this kind of situation, so any kind of help or information would be greatly appreciated.
Thanks!
I am re-asking this question since I did not make myself clear in what I wanted in my last question.
Does anyone know how to do elastic collision or handle collision in Canvas using rectangles? Or can point me in the right direction?
I created a canvas that has multiple square and would like each square to deflect when they touch.
Here is a quick fiddle that I put together showing to black buffer canvases http://jsfiddle.net/claireC/Y7MFq/10/
line 39 is where I started the collision detection and line 59 is where I tried to execute it. I will have more than 3 squares moving around and want them to deflect if/when they touch each other
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d");
context.fillStyle = "#FFA500";
context.fillRect(0, 0, canvas.width, canvas.height);
var renderToCanvas = function (width, height, renderFunction) {
var buffer = document.createElement('canvas');
buffer.width = width;
buffer.height = height;
renderFunction(buffer.getContext('2d'));
return buffer;
};
var drawing = renderToCanvas(100, 100, function (ctx) {
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
});
var drawing2 = renderToCanvas(100, 100, function (ctx) {
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
});
var x = 0,
y = 0,
x2 = 200,
y2 = 10,
vx = .80,
vy = .80,
vx2 = .80,
vy2 = .80;
function collides(rectA, rectB) {
return !(rectA.x + rectA.width < rectB.x2 ||
rectB.x2 + rectB.width < rectA.x ||
rectA.y + rectA.height < rectB.y2 ||
rectB.y2 + rectB.height < rectA.y);
};
function executeFrame() {
x+=vx;
y+=vy;
x2+=vx2;
y2+=vy2;
if( x < 0 || x > 579) vx = -vx;
if( y < 0 || y > 265) vy = -vy;
if( x2 < 0 || x2 > 579) vx2 = - vx2;
if( y2 < 0 || y2 > 233) vy2 = - vy2;
if(collides(drawing, drawing2)){
//move in different direction
};
context.fillStyle = "#FFA500";
context.fillRect(0, 0, canvas.width, canvas.height);
context.drawImage(drawing, x, y);
context.drawImage(drawing2, x2, y2);
requestAnimationFrame(executeFrame);
}
//start animation
executeFrame();
Rectangular collision detection
To do a rectangular collision detection can be more complicated than it perhaps looks.
It's not just about figuring out if the two rectangles intersects or overlaps, but we also need to know at what angle they collide and what direction they move in order to deflect them properly, ideally transfer "velocity" to each other (mass/energy) and so forth.
This method that I present here will do the following steps:
First do a simple intersect detection to find out if they collide at all.
If an intersection: calculate the angle between the two rectangle
Divide a set primary rectangle into four zones of a circle where zone 1 is right, zone 2 is bottom and so forth.
Depending on zone, check in what direction the rectangle is moving, if towards the other rectangle deflect it based on which zone was detected.
➔ Online demo
➔ Version with higher speed here
Detect intersection and calculate angle
The code for detecting the intersection and angle is as follows, where r1 and r2 are here objects with properties x, y, w and h.
function collides(r1, r2) {
/// classic intersection test
var hit = !(r1.x + r1.w < r2.x ||
r2.x + r2.w < r1.x ||
r1.y + r1.h < r2.y ||
r2.y + r2.h < r1.y);
/// if intersects, get angle between the two rects to determine hit zone
if (hit) {
/// calc angle
var dx = r2.x - r1.x;
var dy = r2.y - r1.y;
/// for simplicity convert radians to degree
var angle = Math.atan2(dy, dx) * 180 / Math.PI;
if (angle < 0) angle += 360;
return angle;
} else
return null;
}
This function will return an angle or null which we then use to determine deflection in our loop (that is: the angle is used to determine the hit zone in our case). This is needed so that they bounce off in the correct direction.
Why hit zones?
With just a simple intersection test and deflection you can risk the boxes deflecting like the image on the right, which is not correct for a 2D scenario. You want the boxes to continue in the same direction of where there is no impact as in the left.
Determine collision zone and directions
Here is how we can determine which velocity vector to reverse (tip: if you want a more physical correct deflection you can let the rectangles "absorb" some of the other's velocity but I won't cover that here):
var angle = collides({x: x, y: y, w: 100, h: 100}, /// rect 1
{x: x2, y: y2, w: 100, h: 100}); /// rect 2
/// did we have an intersection?
if (angle !== null) {
/// if we're not already in a hit situation, create one
if (!hit) {
hit = true;
/// zone 1 - right
if ((angle >= 0 && angle < 45) || (angle > 315 && angle < 360)) {
/// if moving in + direction deflect rect 1 in x direction etc.
if (vx > 0) vx = -vx;
if (vx2 < 0) vx2 = -vx2;
} else if (angle >= 45 && angle < 135) { /// zone 2 - bottom
if (vy > 0) vy = -vy;
if (vy2 < 0) vy2 = -vy2;
} else if (angle >= 135 && angle < 225) { /// zone 3 - left
if (vx < 0) vx = -vx;
if (vx2 > 0) vx2 = -vx2;
} else { /// zone 4 - top
if (vy < 0) vy = -vy;
if (vy2 > 0) vy2 = -vy2;
}
}
} else
hit = false; /// reset hit when this hit is done (angle = null)
And that's pretty much it.
The hit flag is used so that when we get a hit we are marking the "situation" as a hit situation so we don't get internal deflections (which can happen at high speeds for example). As long as we get an angle after hit is set to true we are still in the same hit situation (in theory anyways). When we receive null we reset and are ready for a new hit situation.
Also worth to mention is that the primary rectangle here (whose side we check against) is the first one (the black in this case).
More than two rectangles
If you want to throw in more that two rectangle then I would suggest a different approach than used here when it comes to the rectangles themselves. I would recommend creating a rectangle object which is self-contained in regards to its position, size, color and also embeds methods to update velocity, direction and paint. The rectangle objects could be maintained by a host objects which performs the clearing and calls the objects' update method for example.
To detect collisions you could then iterate the array with these objects to find out which rectangle collided with the current being tested. It's important here that you "mark" (using a flag) a rectangle that has been tested as there will always be at least two in a collision and if you test A and then B you will end up reversing the effect of velocity change without using a flag to skip testing of the collision "partner" object per frame.
In conclusion
Note: there are special cases not covered here such as collision on exact corners, or where a rectangle is trapped between an edge and the other rectangle (you can use the hit flag mentioned above for the edge tests as well).
I have not optimized any of the code but tried to keep it as simple as I can to make it more understandable.
Hope this helps!
The answer is actually quite simple: swap the velocities of each block when they collide. That's it! Also for your collision test change RectA.x to just x, since they are normal variables given:
function collides(rectA, rectB) {
return !(x + rectA.width < x2 ||
x2 + rectB.width < x ||
y + rectA.height < y2 ||
y2 + rectB.height < y);
};
And swapping velocities:
if(collides(drawing, drawing2)){
var t = vx; var t2 = vy;
vx = vx2; vy = vy2;
vx2 = t; vy2 = t2;
};
And after those small changes we have working elastic collisions: http://jsfiddle.net/Y7MFq/11/