# How can i calculate projectile like arrow on isometric?

## Recommended Posts

hi...

my game is 2d base by pixi.js

i wanna calculate projectile on isometric

how can i calculate it?

##### Share on other sites

What does isometric have to do with anything? That's just a projection. Do the normal projectile calculation (link), and then project it.

##### Share on other sites

@Milton hi milton.. thx

i need function or calulating method  like under image

red lines are projectile path on isometric view.

i wanna draw porjectile on isometric

thx..

##### Share on other sites

Let's say the radius of the circle is 4.

Let's assume that's 40 meters, and you throw at a 45 degree angle (and gravity is 10):

= (2 * (Vi * Vi) * sin 45 * cos 45) / 10 = 40, which simplified is: Vi = sqrt(400), so your initial velocity would be 20 m/s.

= 20 * cos 45 * t , so x travels 14.14 m/s. So you can tell it will land after 40 / 14.14 = 2.83 seconds.

= (20 * sin 45 * t) - (5 * t * t). So after 1 second it is at 9.14 meters, after 2 seconds at 8.28 meters, and after 2.83 seconds it has landed.

Now just get these x and y values for every frame and project them to Iso:

``````public static function twoDToIso(x:Float, y:Float, z:Float):Point {
var tempPt:Point = new Point(0,0);
tempPt.x = x - y;
tempPt.y = ((x + y) / 2) - z;
return(tempPt);
}
``````

This (haxe) function assumes Z is the vertical (up) axis, so you need to pass y into z. And scale it right, because we used the '4 radius = 40 meters' assumption.
And of course you're only traveling along the X axis at the moment, but that's another matter.

##### Share on other sites

On 2016. 6. 22. at 7:38 PM, Milton said:

@Milton thx milton..

if sinO or cosO is 0, how is it?

it will be always 0

##### Share on other sites

5 hours ago, GBear said:

if sinO or cosO is 0, how is it?
it will be always 0

Please explain where your problem is exactly? My example should be enough.
If you 'throw' at a '0' angle, of course you land immediately... (and it is sin(theta) not sin0, if that's what you were thinking  )

##### Share on other sites

On 2016. 6. 22. at 7:38 PM, Milton said:

i tested  twoDToIso  function

but this looks not good..maybe i have miss to use your function

i wanna make under video
Archer shot arrow on the castle.
i wanna make like it on  isometric view

##### Share on other sites

2 hours ago, GBear said:

i tested  twoDToIso  function
but this looks not good..maybe i have miss to use your function

i wanna make under video
Archer shot arrow on the castle.
i wanna make like it on  isometric view

You'll have to be more clear why it doesn't look good. The 'twoDToIso' function is the basic way to create Isometric (dimetric) games.
isometric-starling-part-i
creating-isometric-worlds-a-primer-for-game-developers
isometric-depth-sorting

If you don't like the perspective, you could try the Phaser plugin, which lets you set the viewing angle.

If you could post your code, helping would be easier

##### Share on other sites

@Milton thx..

my game have no isometric,   it looks like isometric

it is calculating like top view like left of following image

but viewing image like iosmetric view...(i don't use  isometric tile system)

so I'm thinking  how can i convert normal axis to transform to look like isometric view(or like isometric view?)

and i will update test code soon..

and i'm using with pixi.js.

thx a lot milton..

##### Share on other sites

@Milton hi Milton

http://jsfiddle.net/gbear/d055c36f/4/

this is example..

example is normal arrow  that go straight, on 2d grid

but i wanna shoot like upper movie to target(position of target);

can you help me?

thx..

##### Share on other sites

Ah, I understand now

It's called a 3/4 perspective. (Your drawing was Isometric, which means you rotate by 45 degrees around the vertical axis, which is not what you want).
I never used 3/4, but I guess it's like Isometric, just don't mess with the x position (i.e. remove any mention of x from twoDToIso).

Maybe look at this link. And I would suggest asking this question on gamedev.net. You'll get help from all those Zelda lovers. You don't have to restrict yourself to a HTML5 forum.

##### Share on other sites

@Milton hi Milton

i need 3d projectile to 2d....^^/

T-T not easy..

##### Share on other sites

38 minutes ago, GBear said:

i need 3d projectile to 2d....^^/
T-T not easy..

It's very easy. You just need to figure out your projection. 3/4 is an especially strange one, but no more difficult than straight top view. I could do this in an hour or so, but I'll let you try first. If you really can't figure it out, I'll just give you the code in a couple of days. But make an effort first.

##### Share on other sites

@Milton hi milton..

i'm resolving like following

1.Calculate 3d projectile
2.Transform Projection by matrix or something
3.Transform 3d to 2d

1. ok..
2. hmm not yet
3. maybe yes but i don't know because 2 is not  resolved yet

is it right? or not?
could you give me a tips?

##### Share on other sites

Hi GBear

2 and 3 are the same?
Think of your world in 3D. If you would use a 3D engine you wouldn't have any projection issues.
You have the correct coordinates, but how do you display them on 2D?
This just depends on the perspective.
Isometric (dimetric) rotates 45 degrees around the vertical and 30 degrees around the X-axis.
I'm guessing (since I've never used 3/4 perspective) that 'Kingdom Rush, Zelda, etc' only rotate 30 degrees (or maybe 45) around the X-axis.
So just rotate your coordinates around the X-axis and you should be fine.

Google is your friend. And again, just ask this question on gamedev.net and you'll get anything you want (they'll program the game for you  ).
I'll have a try myself (when I have the time). I'll let you know if I come up with a decent example, shouldn't take too long.

##### Share on other sites

@Milton hi milton.

2 & 3 are Not same.

i will do each process

but i don't know --? it will be good...

i'm trying many way. to looks good...

i don't need correct way to resolve that..

if it looks good.. it is ok...

i have two purpose.
- fast
- looks good..

1.'fast' is because js(html5) is slow..( i don't have remaning cpu's usage)

2.looks good. is.. only good..

thx..

##### Share on other sites

Hi GBear.

I created quick and dirty Isometric and 3/4 versions (very basic, not optimized).
Source Iso / 3/4.

Of course I used a ball  so I didn't have to animate an Arrow sprite. But that's a matter of checking the inclination, and using the corresponding sprite/rotation.

Interesting thing is that the only difference between the two is not using X in the 3/4 projection:

Iso:

``````public static function isoTo2D(pt:Point):Point{
var tempPt:Point = new Point(0, 0);
tempPt.x = (2 * pt.y + pt.x) / 2;
tempPt.y = (2 * pt.y - pt.x) / 2;
return(tempPt);
}

public static function twoDToIso(x:Float, y:Float, z:Float):Point{
var tempPt:Point = new Point(0,0);
tempPt.x = x - y;
tempPt.y = ((x + y) / 2) - z;
return(tempPt);
}
``````

3/4:

``````public static function isoTo2D(pt:Point):Point{
var tempPt:Point = new Point(0, 0);
tempPt.x = pt.x;
tempPt.y = 2 * pt.y;
return(tempPt);
}

public static function twoDToIso(x:Float, y:Float, z:Float):Point{
var tempPt:Point = new Point(0,0);
tempPt.x = x;
tempPt.y = (y / 2) - z;
return(tempPt);
}
``````

Hope this helps.

##### Share on other sites

@Milton hi milton.. thx a lots..

I test now..

##### Share on other sites

Quote

@Milton hi milton.. thx a lots..

I tested it and

i can do that..

i used 3/4 function( twoDToIso )

isometric function looks  weird  but i don't know correct reason..

i do like following way

1.set target position (position of top view)
2.calculate target position to 3/4 position(this reason is i wanna go until target position that seems like  3/4 view
3.calculate velocity to shot projectile
4.calculating by velocity and time and gravity
5.parse by twoDToIso

and it looks good..

thx...

##### Share on other sites

@Milton hi milton

example
http://jsfiddle.net/gbear/d055c36f/5/

and do you have other tips or ideas to implement other effects like lightning?

it looks good and it will be optimized..

because i wanna play on mobile

##### Share on other sites

Create a game first

Then open another topic, on how to add lighting.
2D lighting is pretty advanced stuff. You would need a Normal map and a Shader.
Most 2D games (like Kingdom Rush) don't bother, and just add a fake shadow (in your case, the arrow in black (alpha) with z = 0, with some scaling depending on object height).

##### Share on other sites

I have made arrows like this and I have simply faked the look of it's path in the air by just making the angle of the arrow changing at the right time.

The archer fires his arrow up and to the right, for let's say 10px and then goes down to the X,Y position you like.

## Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.