Help! 2.5D Angle Problems!

Questions & Answers
1

Hi guys,

I’m working on a retro “pseudo 3D” game that is similar in style to Doom, or the old SNES “Mode 7” games. The issue I have, is during split screen play, I need the players to appear properly on the other player’s screen, depending on which way they are facing etc… this would be simple in 3D but with 2D, we need to swap textures at the correct time and I am lost… any ideas?

2

In cases like these you usually create directional silhouettes, traditionally 8.

Basically, you create your model (preferably 3d), and capture it from 8 cardinal angles (front, front left, right, back right, etc.) then you create a script that translates a direction into a cardinal silhouette, and you use that in a serialized networkview that you attach to your multiplayer characters.

Of course if you prefer more “resolution” you can simply increase the cardinality of the subdivision.

3

Okay, this is what we ended up doing. We have eight different sprites (one for each angle, you could do more for smoother animation). The we just compare angles between the objects. In our case, they are race cars. Something like this:

// BACK VIEW 
 if (View02.eulerAngles.y > (View01.eulerAngles.y - fZone01)
 && View02.eulerAngles.y < (View01.eulerAngles.y + fZone01))
 {
 //renderer.material.mainTexture = Angle00Back;
 iAngle = 0;
 }
 // BACK/LEFT VIEW
 else if (View02.eulerAngles.y > (View01.eulerAngles.y + fZone01)
 && View02.eulerAngles.y < (View01.eulerAngles.y + fZone02))
 {
 //renderer.material.mainTexture = Angle07BackLeft;
 iAngle = 7;
 }
 
 // LEFT VIEW
 else if (View02.eulerAngles.y > (View01.eulerAngles.y + fZone02)
 && View02.eulerAngles.y < (View01.eulerAngles.y + fZone03))
 {
 //renderer.material.mainTexture = Angle06Left;
 iAngle = 6;
 }
 
 // FRONT/LEFT VIEW
 else if (View02.eulerAngles.y > (View01.eulerAngles.y + fZone03)
 && View02.eulerAngles.y < (View01.eulerAngles.y + fZone04))
 {
 //renderer.material.mainTexture = Angle05FrontLeft;
 iAngle = 5;
 }
 
 // FRONT VIEW
 else if (View02.eulerAngles.y > (View01.eulerAngles.y + fZone04)
 && View02.eulerAngles.y < (View01.eulerAngles.y + fZone05))
 {
 //renderer.material.mainTexture = Angle04Front;
 iAngle = 4;
 }
 
 // FRONT/RIGHT VIEW
 else if (View02.eulerAngles.y > (View01.eulerAngles.y + fZone05)
 && View02.eulerAngles.y < (View01.eulerAngles.y + fZone06))
 {
 //renderer.material.mainTexture = Angle03FrontRight;
 iAngle = 3;
 }
 
 // RIGHT VIEW
 else if (View02.eulerAngles.y > (View01.eulerAngles.y + fZone06)
 && View02.eulerAngles.y < (View01.eulerAngles.y + fZone07))
 {
 //renderer.material.mainTexture = Angle02Right;
 iAngle = 2;
 }
 
 // BACK/RIGHT VIEW
 else if (View02.eulerAngles.y > (View01.eulerAngles.y + fZone07)
 && View02.eulerAngles.y < (View01.eulerAngles.y + fZone08))
 {
 //renderer.material.mainTexture = Angle01BackRight;
 iAngle = 1;
 }
 
 // BACK VIEW
 else if (View02.eulerAngles.y > (View01.eulerAngles.y + fZone08))
 {
 //renderer.material.mainTexture = Angle00Back;
 iAngle = 0;
 }
 
 // Second cycle
 
 // BACK/RIGHT VIEW
 else if (View02.eulerAngles.y < (View01.eulerAngles.y - fZone01)
 && View02.eulerAngles.y > (View01.eulerAngles.y - fZone02))
 {
 //renderer.material.mainTexture = Angle01BackRight;
 iAngle = 1;
 }
 
 // RIGHT VIEW
 else if (View02.eulerAngles.y < (View01.eulerAngles.y - fZone02)
 && View02.eulerAngles.y > (View01.eulerAngles.y - fZone03))
 {
 //renderer.material.mainTexture = Angle02Right;
 iAngle = 2;
 }
 
 // FRONT/RIGHT VIEW
 else if (View02.eulerAngles.y < (View01.eulerAngles.y - fZone03)
 && View02.eulerAngles.y > (View01.eulerAngles.y - fZone04))
 {
 //renderer.material.mainTexture = Angle03FrontRight;
 iAngle = 3;
 }
 
 // FRONT VIEW
 else if (View02.eulerAngles.y < (View01.eulerAngles.y - fZone04)
 && View02.eulerAngles.y > (View01.eulerAngles.y - fZone05))
 {
 //renderer.material.mainTexture = Angle04Front;
 iAngle = 4;
 }
 
 // FRONT/LEFT VIEW
 else if (View02.eulerAngles.y < (View01.eulerAngles.y - fZone05)
 && View02.eulerAngles.y > (View01.eulerAngles.y - fZone06))
 {
 //renderer.material.mainTexture = Angle05FrontLeft;
 iAngle = 5;
 }
 
 // LEFT VIEW
 else if (View02.eulerAngles.y < (View01.eulerAngles.y - fZone06)
 && View02.eulerAngles.y > (View01.eulerAngles.y - fZone07))
 {
 //renderer.material.mainTexture = Angle06Left;
 iAngle = 6;
 }
 
 // BACK/LEFT VIEW
 else if (View02.eulerAngles.y < (View01.eulerAngles.y - fZone07)
 && View02.eulerAngles.y > (View01.eulerAngles.y - fZone08))
 {
 //renderer.material.mainTexture = Angle07BackLeft;
 iAngle = 7;
 }
 
 // BACK VIEW
 else if (View02.eulerAngles.y < (View01.eulerAngles.y - fZone08))
 {
 //renderer.material.mainTexture = Angle00Back;
 iAngle = 0;
 }

So that’s how we compare the angles (the Zone variables are simple floats that we assign a certain amount to… in this case we had them set as follows to add up to the total 360 degree movement.

private var fZone01 : float = 22.5f;
private var fZone02 : float = 67.5f;
private var fZone03 : float = 112.5f;
private var fZone04 : float = 157.5f;
private var fZone05 : float = 202.5f;
private var fZone06 : float = 247.5f;
private var fZone07 : float = 292.5f;
private var fZone08 : float = 337.5f;

Then, depending on what angle is set, simply change the object’s texture. Simple!

You’ll notice I commented out the sprite changing… this is because I also needed to do wheel spinning animation, so I did it all in a separate function and only required the angle var from this one.

There’s probably a much nicer way of doing all of this but it works :wink:

Hope this helps!!!

4

Excellent, thank you so much we’ve not started our game yet but it will be an outrun style racing game so the graphics are quite important :slight_smile: