Gravity in 2d games(360 degrees) - javascript

Hello all I am trying to make a game with the Phaser game engine and would like to implement some sort of 360 gravity. Essentially I just want the player to be able to rotate around the sphere. I was wondering what would be the best way to do this in phaser. I know that you can set objects gravities but you can only do so in the x and y direction. Any help is greatly appreciated!

you should use the concept of vectors for this.
like you want as a planet attracts towards another sun in a orbit.
then define
function Vector(x, y){
this.x = x || 0;
this.y = y || 0;
}
and these are pseudo codes
get acceleration vector direction by
vector(sun.position.x-planet.position.x,sun.position.y-planet.position.y)
then
planet.velocity.x+=acceleration.x
planet.velocity.y+=acceleration.y
for further using vector you can try
http://www.metanetsoftware.com/technique/tutorialA.html

Related

Send object backwards down its -z axis [duplicate]

I'm trying to move a cube in three.js based on its rotation but not sure on how to go about it.
As of now I can rotate the cube's z-rotation with the A & D keys. And with the W key I would like it to move forward relative to its rotation.
From 2D I would so something along the lines of:
float angle = GradToRad(obj.rotation);
obj.x = obj.x + cos(angle) * velocity;
obj.y = obj.y + sin(angle) * velocity;
Here's an image of the current implementation.
How can I apply something similar in three.js?
Objects can be considered to be facing their positive-Z axis. So to move an object forward, relative to it's own coordinate system, you can use
Object3D.translateZ( distance );
three.js r.57
It might be easiest to express both rotation and translation in a single (homogenous projective) 4×4 matrix. The Object3D.matrix member in three.js already does that, although you might have to set matrixAutoUpdate to false to use that directly. Then you can move use the translate method to move the object in its own reference frame.
Your 2D method is exactly how I did it in three.js. For the Y position I'm using a terrain collision technique (which still needs work);

Updating an intrinsic rotation with an extrinsic rotation

I am trying to model a Rubik's Cube for a personal project, using Zdog for lightweight 3d graphics. Zdog uses a {x,y,z} vector to represent rotation - I believe this is essentially a Tait-Bryan angle.
To animate a rotation of the top, right, front, etc side, I attach the 9 blocks to an anchor in the center of the cube and rotate it 90 degrees in the desired direction. This works great, but when the animation is done I need to "save" the translation and rotation on the 9 blocks. Translation is relatively simple, but I'm stuck on rotation. I basically need a function like this:
function updateRotation(xyz, axis, angle) {
// xyz is a {x,y,z} vector
// axis is "x", "y", or "z"
// rotation is the angle of rotation in radians
}
that would apply the axis/angle rotation in world coordinates to the xyz vector in object coordinates. Originally I just had xyz[axis] += angle, but this only works when no other axis has any rotation. I then thought I could use a lookup table, and I think that's possible as I only use quarter turns, but constructing the table turns out to be harder than I thought.
I am starting to suspect I need to translate the xyz vector to some other representation (matrix? quaternion?) and apply the rotation there, but I'm not sure where to start. The frustrating thing is that my blocks are in the right position at the end of the animation - I'm just not sure how to apply the parent transform so that I can detach them from the parent without losing the rotation.
As far as I can tell, this can't be done with Euler angles alone (at least not in any easy way). My solution was to convert to quaternions, rotate, then convert back to Euler:
function updateRotation(obj, axis, rotation) {
const {x, y, z} = obj.rotate;
const q = new Quaternion()
.rotateZ(z)
.rotateY(y)
.rotateX(x);
const q2 = new Quaternion();
if (axis === 'x') {
q2.rotateX(rotation);
} else if (axis === 'y') {
q2.rotateY(rotation);
} else if (axis === 'z') {
q2.rotateZ(rotation);
}
q.multiply(q2, null);
const e = new Euler().fromQuaternion(q);
obj.rotate.x = e.x;
obj.rotate.y = e.y;
obj.rotate.z = e.z;
obj.normalizeRotate();
}
This uses the Euler and Quaternion classes from math.gl.
(It turned out Zdog actually uses ZYX Euler angles as far as I could tell, hence the order of rotations when creating the first quaternion.)

THREE.js - making a little squishy 3D ball

I am new to THREE.js. I have some questions...
can someone help me with simple squishing this ball when he contacts the border and change direction? or maybe just scaling the ball from angle of contacting border point? to make this ball little more realistic
some code: Making rotating 3d sphere with velocity
code from this theme:
THREE.js - moving a 3D ball with a rotation
for (var y = 0; y < 16; y++)
for (var x = 0; x < 16; x++)
if ((x & 1) != (y & 1)) ctx.fillRect(x * 16, y * 16, 16, 16);
var ballTex = new THREE.Texture(canv);
ballTex.needsUpdate = true;
Sorry for my bad English!
If the ball is rolling when it hits an edge, it'd be really difficult to create a believable squish by using the .scale attribute, since that only affects its scaling along the x, y, or z axis.
The best way to realistically achieve this effect is to use a physics engine to detect collisions and morph the geometry accordingly. There's already an example of this on the Three.js website. You can look at its source code to follow along. Just keep in mind it uses Ammo.js as its physics engine, so you'd need to learn how to use the Ammo API if you want to make modifications.

JavaScript - Angular Velocity by Vector - 2D

I am making a game in JavaScript, with the Canvas API.
I perform circle to segment collision, and I need to calculate the anglar velocity for the circle by its velocity vector, I use this formula to do it:
ball.av = ball.v.length() / ball.r
// ball.av = angular velocity
// ball.v = velocity vector, contains x and y values
// .length() = returns initial velocity (pythagoras) for example: return Math.sqrt(ball.v.x * ball.v.x + ball.v.y * ball.v.y)
// ball.r = radius
Now since a square root can't be negative, this won't work when the ball is supposed to rotate anti-clockwise. So, I need a signed version of the initial velocity that also can be negative, how do I calculate that?
I've heard about that the Wedge product is working for this, and I've read many articles about it, but I still don't understand how to implement it to my code, please help!
In the general case, if the ball is rolling on a surface then the angular velocity would be the cross product of the velocity with the surface normal over the radius.
ball.av = CrossProduct(surfaceNormal, ball.v) / radius;
But if you are always on a flat surface along the x direction then this simplifies to this:
ball.av = -ball.v.x / ball.r;
Here is crossproduct for you if you don't have it.
float CrossProduct(const Vector2D & v1, const Vector2D & v2) const
{
return (v1.X*v2.Y) - (v1.Y*v2.X);
}
NOTE: if the ball rolls backwards just add a '-' sign to your calculations or swap the parameters in the crossProduct call but I think they are right as I've written them.
Surface normal is a perpendicular normalized (unit) vector from a surface. In your case surface normal is the normalized vector from the contact point to the centre of the circle.
As a side note to remove the component of gravity into a surface as a ball is rolling do this:
vec gravity;
gravity = gravity - surfaceNormal*dot(surfaceNormal, gravity);
you can then apply the resultant gravity as a ball is rolling down a surface.

CraftyJS how to calculate vector between 2 sprites?

I am a noob in game programming and not so good at Maths, I am trying to write a 1945 style shooting game, all been good so far but I am in a bottle neck that I cannot figure out how to make enemy aim at the player.
Lets say I have enemy sprite and player sprite, how do I find out the angle and the path? This sounds like calculating vector between 2 points, I have been reading the documentation and particularly this link http://craftyjs.com/api/Crafty-math-Vector2D.html
I just cannot figure out how to do it, I have tried the following
var enemyV = Crafty.math.Vector2D(enemy.x, enemy.y);
var playerV = Crafty.math.Vector2D(player.x, player.y);
var angle = enemyV.angleTo(playerV);
The value of angle is always between -3 to 3, which doesn't seem the right angles at all.
I hope someone who has CraftyJS experience can help me out here.
angleTo function returns radian value, so running this will give the actual angle degreex Crafty.math.radToDeg(radianValue)
To aim the player and make the bullet travel at that direction you just get the difference between 2 points
bullet.x - player.x'bullet.y - player.y' then apply a incremental rate such as below (
bullet.x_diff = (target.x - bullet.x)*0.02;
bullet.y_diff = (target.y - bullet.y)*0.02;
then inside enterframe loop:
this.x += this.x_diff;
this.y += this.y_diff;
Once you get the idea, you should normalize your diff by dividing by the distance between the points.

Categories