Okay here is my problem, I have been working on a small little project for a while now and I would to love to add some violence to my little isometric experiment. I wasn't sure if I should have posted this into Web Development or here, but I think for my specific problem here was the better choice.
So far I only got W,A,S,D movement so you can go ahead and try that out here.
But I would like that red box to fire a missile every time the user clicks the left mouse button. Does anyone here have any advice, resources or just some tips? I have been doing web development for a while and this is my first attempt at a game so I am just trying to wrap my head around how games are developed.
Missile Vector Calculation
Author
Okay after a little research I started using Math.atan2() in javascript to calculate the angle between my box and my mouse. I added a visual aid in order to see the angle my calculation was producing. It seems really close at 3 different points in the rotation, but it's not perfect. Can anyone tell me if this is the way I should go about this. My plan is to animate a missile away from the box towards the direction from the mouse.
Here is a snapshot of my work here
My code that matters is pretty much this.
var mousePos = {x:0,y:0},
boxPos = {x:0,y:0}
//this is where I calculate the angle based on the box's position and my mouse position;
radians = Math.atan2((mousePos.y) - boxPos.y,mousePos.x - boxPos.x);
//this gives the marker it's position around my box to visually show the angle
myMarker.css({ top:Math.sin(radians)*50+boxPos.y , left:Math.cos(radians)*100+boxPos.x });
Here is a snapshot of my work here
My code that matters is pretty much this.
var mousePos = {x:0,y:0},
boxPos = {x:0,y:0}
//this is where I calculate the angle based on the box's position and my mouse position;
radians = Math.atan2((mousePos.y) - boxPos.y,mousePos.x - boxPos.x);
//this gives the marker it's position around my box to visually show the angle
myMarker.css({ top:Math.sin(radians)*50+boxPos.y , left:Math.cos(radians)*100+boxPos.x });
One thing you need to be aware of is if you plan on having a Z axis, this method will fail. This is because there exists an infinity of points in 3D world space that corresponds to a point in screen space. For example, if your box jumps, it will appear higher on the screen, but retain the same position on the ground. At various points when it's off the ground, it will have the same screen coordinates than an object on the ground. This can lead to false positives when you will do your collision detection. If this won't be an issue, then using screen coordinates to position your objects will work.
A common way is to program the game like a 3D game and transform these coordinates into screen coordinates when rendering objects. You could set the missile at the same height than the box, which would allow you to transform mouse position to a single 3D point and send it in that direction.
A common way is to program the game like a 3D game and transform these coordinates into screen coordinates when rendering objects. You could set the missile at the same height than the box, which would allow you to transform mouse position to a single 3D point and send it in that direction.
Author
Tiblanc thank you so much for pointing me in the right direction. I have since changed my code to store / manipulate 3D coordinantes. I use a simple algorithm that I found on this forum in order to translate or "project" this data into 2D coordinates that will then render on the screen. Using this algorithm I have reduced all the math in my code to nothing, and the accuracy of my positioning is perfect!
Algorithm that I use is:
x' = (x - z);
y' = (1/2)*(x + z) + y;
My updated project is here.
This has produced another problem for me. I would like to get the angle of the users sprite based on the mouse's position in the theoretical 3D space. Is there a way to get 3D position based on the 2D position (with a fixed z) of the mouse? I am using javascript for my logic, but if you have an example in another language or just an idea of how that problem is solved that would be greatly appreciated.
Algorithm that I use is:
x' = (x - z);
y' = (1/2)*(x + z) + y;
My updated project is here.
This has produced another problem for me. I would like to get the angle of the users sprite based on the mouse's position in the theoretical 3D space. Is there a way to get 3D position based on the 2D position (with a fixed z) of the mouse? I am using javascript for my logic, but if you have an example in another language or just an idea of how that problem is solved that would be greatly appreciated.
You will need to set the y value(the height from what I deduce by your formulas) to some fixed value, probably dependent on your character or the ground plane. Assuming you want to use the character height :
y' = (1/2)*(x + z) + charY
So subtract charY to y' and you get the y' value as if y was 0. You can then find the world X and Z with :
x = y' + x' / 2
z = y' - x' / 2
I'm going from memory so this may not be exact, but I think it's correct.
y' = (1/2)*(x + z) + charY
So subtract charY to y' and you get the y' value as if y was 0. You can then find the world X and Z with :
x = y' + x' / 2
z = y' - x' / 2
I'm going from memory so this may not be exact, but I think it's correct.
Author
Tiblanc I came up with that exact algorithm, but there is a problem with it (maybe I'm not understanding it completely). When I use that to process the x,y mouse position to 3D, then that 3d position is rendered back to a 2D position in order for it to be visually represented. The Y value is always half of what the position should be, other than that it would be perfect.
Example:
mousePos = {'x':10,'y':20};
new3D = get3D(mousePos.X,mousePos.Y);
new2D = get2D(new3D.X,new3D.Y,new3D.Z);
//This will be my new result
new2D = {'x':10,'y':10};
I am guessing this is because of the multiplication from the first algorithm y' = (1/2)*(x + z) + y.
If you would like to see it visually you can check out an example here.
The red box represents where the mouse is in 3D space (so I think).
Example:
mousePos = {'x':10,'y':20};
new3D = get3D(mousePos.X,mousePos.Y);
new2D = get2D(new3D.X,new3D.Y,new3D.Z);
//This will be my new result
new2D = {'x':10,'y':10};
I am guessing this is because of the multiplication from the first algorithm y' = (1/2)*(x + z) + y.
If you would like to see it visually you can check out an example here.
The red box represents where the mouse is in 3D space (so I think).
[font=monospace]projector.prototype.get3D = function(twDc){[/font] var x = twDc.x ,y = twDc.y ,z = 0 ,threeDee = {x:0,y:0,z:0} threeDee.x = (y+x)/2; threeDee.z = (y-x)/2; threeDee.y = 0; return threeDee; }Only x needs to be divided by 2
projector.prototype.get3D = function(twDc){ var x = twDc.x ,y = twDc.y ,z = 0 ,threeDee = {x:0,y:0,z:0} threeDee.x = y+(x/2); threeDee.z = y-(x/2); threeDee.y = 0; return threeDee; }
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
