How can i calculate projectile like arrow on isometric?

[GBear]

hi...

my game is 2d base by pixi.js

i wanna calculate projectile on isometric 

how can i calculate it?

[Milton]

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

[GBear]

@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 

give me a tips please...

thx..






 

[Milton]

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.

 

 

[GBear]

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



 

[Milton]

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  )

[GBear]

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

@Milton hi. thx your answer..

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

 

[Milton]

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

[GBear]

@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..


 

[GBear]

@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..

[Milton]

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.

[GBear]

@Milton hi Milton

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

T-T not easy..

[Milton]

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.

[GBear]

@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?

[Milton]

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.
 

[GBear]

@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..
 

[Milton]

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.

[GBear]

@Milton hi milton.. thx a lots..

I test now.. 

[GBear]

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...
 

[GBear]

@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

 

[Milton]

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).

[Tobiasz]

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.