AuthorTopic: True orthographic . . . isometric? uhhmmmm. Hello.  (Read 8031 times)

Offline Mathias

  • 0100
  • ***
  • Posts: 1797
  • Karma: +2/-0
  • Goodbye.
    • http://pixeljoint.com/p/9542.htm
    • View Profile
Come on in! Mi thread es su thread.


Ok . . . Pix'ers, lend me your knowledge. More perspective confusion.

Is there really a right way to do this?

the rundown
Working on a big . . . "project".

Said project calls for endless tons of perspective illustration.

'What type of perspective projection shall I use' was my first thought.

I've decided upon slanted, non perspective-diminishing stuff.
When viewing a square room, you'll be able to the see the left (and maybe right?) side wall. The ground will be flat - 0°, and the visible wall's base will run at: 35°.
Like dis:  (notice all the 35° angles?)



These are just quick sketcherones, scanned in and a precise 35° line plopped on top all over the place.
Oh, and that hideous floor plate tile. This brings me to my real point -



the problem
How does one draw something flat and non-rotated but then WARP it to comply with my isometric 35° standard.
I want to do this to various flat graphics so I can use them to draw on top of as a guide.
It's really hard to draw so that my lines stay a consistent 35°. Having a sketch warped to the correct shape/angle would be sweet.

Like this here:



In illustrator, I've drawn that hideous floor plate tile (originally a perfect square) and attempted a non-perspective warp on it. But it seems too elongated.

Is there a formula?



It's EXTREMELY important I get these types of standard things right so I don't jack everything up later down the road.



What are your thoughts? Comments open season. Any advice appreciated.

Offline rikfuzz

  • 0010
  • *
  • Posts: 427
  • Karma: +1/-0
    • View Profile
    • twitter @hot_pengu

Re: True orthographic . . . isometric? uhhmmmm. Hello.

Reply #1 on: May 18, 2014, 02:02:46 am
Just skew by -55 degrees and scale the height to 50%?

Offline lachrymose

  • 0010
  • *
  • Posts: 345
  • Karma: +0/-0
    • View Profile

Re: True orthographic . . . isometric? uhhmmmm. Hello.

Reply #2 on: May 18, 2014, 02:45:30 am
Is this for a game?
If so it would be easier to take the square picture, and apply it as a texture to a 3D plane. Any perspective skewing would be done by the camera.

This is simple the floor tile set as a texture on a 3D plane. The camera isn't set at the 35 degree angle, but you get my drift.

« Last Edit: May 18, 2014, 03:02:59 am by lachrymose »

Offline Mathias

  • 0100
  • ***
  • Posts: 1797
  • Karma: +2/-0
  • Goodbye.
    • http://pixeljoint.com/p/9542.htm
    • View Profile

Re: True orthographic . . . isometric? uhhmmmm. Hello.

Reply #3 on: May 18, 2014, 03:01:54 am
Just skew by -55 degrees and scale the height to 50%?
Thanks for the suggestion. That gets decent results.
Talked to ptoing real quick, too. Like you, he basically says to just come up with a transform and stay consistent; whatever I decide to do, do it consistently. And that of course, is the primary concern and reason for this little bit of R&D.



Is this for a game?
If so it would be easier to take the square picture, and apply it as a texture to a 3D plane. Any perspective skewing would be done by the camera.
That's a fair idea.
I think it best, in this case, that I maintain full control of what angle/slant things appear at so I can easily change it with an art change, instead of rotating boxes or altering code. It's all in how you set things up, though . . .

*EDIT     Haha wow a Unity mockup. Nicely done. Thanks for the visual.

Offline rikfuzz

  • 0010
  • *
  • Posts: 427
  • Karma: +1/-0
    • View Profile
    • twitter @hot_pengu

Re: True orthographic . . . isometric? uhhmmmm. Hello.

Reply #4 on: May 18, 2014, 03:27:04 am
I think using 3d is possibly best.  Or going with an easier to math grid.  (22.5 degree angles!) 

Otherwise you get arbitrary things like working out your tile height by rotating 45 degrees and squishing vertically till you get the right angle (works out as 70.05%).  Then using half that total height for the heights of your regular tiles before skewing them. 



Bit messy? 

Offline Indigo

  • Administrator
  • 0011
  • *
  • Posts: 946
  • Karma: +0/-0
  • Artist, Indie Game Dev
    • DanFessler
    • DanFessler
    • http://pixeljoint.com/p/849.htm
    • DanFessler
    • DanFessler
    • View Profile
    • Portfolio

Re: True [Oblique Projection]? uhhmmmm. Hello.

Reply #5 on: May 18, 2014, 04:01:02 am
there is no such thing as an orthographic projection where you see 3 sides of an object while maintaining 2 perpendicular axis (in this case, pure vertical y and pure horizontal x).  Like with the unity mockup, there would always be some degree of rotation.  The term for what you're looking for is called an oblique projection (a type of parallel projection in which the projection rays come from an arbitrary angle rather than from the camera) and can't be achieved by standard 3D cameras without applying a transform to either the scene or the camera itself.  Seeing how the angle is arbitrary, there is no set correct formula for it.  They are all faked perception.  like Ptoing said, just pick something and stick with it, but I'd suggest using pixel friendly angles; angles like 2:1 or 1:1.  You'll avoid visible seams that way.

this image illustrates the oblique projection by applying an angled (to show both the top and the side) skew transform to an orthographic camera - I play around with the amount and direction of the skew so you can see how it feels.  Note that at a 45 degree direction, you see equal amounts of top and side and a clean 1:1 angle.


as an interesting side note; Isometric (or all forms of Axonometric projections for that matter), Orthographic, and Oblique projections are all subsets of parallel projections
« Last Edit: May 18, 2014, 05:55:55 am by Indigo »

Offline Ellian

  • 0010
  • *
  • Posts: 245
  • Karma: +1/-0
    • View Profile
    • This is Ellian

Re: True orthographic . . . isometric? uhhmmmm. Hello.

Reply #6 on: May 18, 2014, 09:18:27 am
It's a 2D game? Or 3D?

It's a 45° angle, but it really reminds me of what Earthbound did; and they did not really bother with being 101% consistent...
Sure sometimes it looks weird, but it's part of the charm, right?
« Last Edit: May 18, 2014, 10:52:59 am by PixelPiledriver »

Offline lachrymose

  • 0010
  • *
  • Posts: 345
  • Karma: +0/-0
    • View Profile

Re: True orthographic . . . isometric? uhhmmmm. Hello.

Reply #7 on: May 18, 2014, 05:12:53 pm
Don't forget you can also apply the billboard affect to objects within the scene to always face towards the camera. You can even changed what sprite is shown based on the angle of that object relevant to the position of the camera. Most 2.5D games do this to some degree or another.

Offline Mathias

  • 0100
  • ***
  • Posts: 1797
  • Karma: +2/-0
  • Goodbye.
    • http://pixeljoint.com/p/9542.htm
    • View Profile

Re: True orthographic . . . isometric? uhhmmmm. Hello.

Reply #8 on: May 19, 2014, 03:19:36 pm
Nice stuff, guys! Thanks for the help.

I plan to work entirely with 2D assets. 2D stuff rendered orthographically to good ol' flat quads. No 3D meshes.


So, Indigo, I'm simply using a random oblique projection angle. Ok. Thanks for that explanation.
When I mentioned seeing the left and right sides of a space or object, I was more thinking about pulling some Zelda LTTP stuff. Like this:




And here's an example of a platform in Rayman Legends where the end-caps are arbitrarily drawn so that the player can see the faces of both sides:



___

Everyone's feedback has led to me realizing I'm over-analyzing the situation. What I do, I'll simply do it consistently. It'll work.
« Last Edit: May 19, 2014, 09:04:59 pm by Mathias »

Offline lachrymose

  • 0010
  • *
  • Posts: 345
  • Karma: +0/-0
    • View Profile

Re: True orthographic . . . isometric? uhhmmmm. Hello.

Reply #9 on: May 19, 2014, 07:02:00 pm
Let us no how it looks later on down the road!