ToEE Isometric Transformation

Discussion in 'Tech Guides and Help Threads' started by anatoliy, Nov 10, 2017.

Remove all ads!
Tags:
  1. anatoliy

    anatoliy Established Member

    Joined:
    Feb 18, 2017
    Messages:
    635
    Likes Received:
    201
    Hi

    I've been researching ToEE's isometric transformation for one week now. This is what I got.

    From ViewPort (screen) to Isometric (Ground Map) steps:
    0. Starting from default top left origin, X to right, Y to bottom.
    [​IMG]

    1. Apply "Flip X" transformation.
    [​IMG]

    2. Apply "Rotate 45 grad anticlockwise" transformation.
    [​IMG]

    3. Apply "Scale Y 1->0.7055" transformation.
    [​IMG]
     
    Last edited: Nov 10, 2017
    anatoliy, Nov 10, 2017
    #1
  2. anatoliy

    anatoliy Established Member

    Joined:
    Feb 18, 2017
    Messages:
    635
    Likes Received:
    201
    Math

    Code:
    "Apply" means "matrix multiplication".

0. Starting from default top left origin, X to right, Y to bottom.
( (1, 0)
, ( 0, 1) )

1. Apply "Flip X" transformation.
( (-1, 0)
, ( 0, 1) )

2. Apply "Rotate (Z-Axis) 45 grad anticlockwise" transformation.
( ( cos(45), sin(45))
, (-sin(45), cos(45)) )

which is
( ( 0.7071, 0.7071)
, (-0.7071, 0.7071) )

3. Apply "Scale Y 1->0.7055" transformation. (math matrix multiplication)
( (1, 0)
, ( 0, 0.7055) )

Result MatrixT is
( (A: -0.7071, B: 0.7071)
, (P: 0.4989, Q: 0.4989) )

P2.X = P1.X * MatrixT.A + P1.Y * MatrixT.B
P2.Y = P1.X * MatrixT.P + P1.Y * MatrixT.Q

==>
P2.X = P1.X * -0.7071 + P1.Y * 0.7071
P2.Y = P1.X * 0.4989 + P1.Y * 0.4989
    Edit:
    Fixed float to double transformation.
     
    Last edited: Nov 10, 2017
    anatoliy, Nov 10, 2017
    #2
  3. Shiningted

    Shiningted I changed this damn title, finally! Administrator

    Joined:
    Oct 23, 2004
    Messages:
    12,745
    Likes Received:
    375
    Ok, I didn't understand this, I got it now :)
     
    Shiningted, Sep 18, 2020
    #3
    anatoliy likes this.
  4. Shiningted

    Shiningted I changed this damn title, finally! Administrator

    Joined:
    Oct 23, 2004
    Messages:
    12,745
    Likes Received:
    375
    Ok, I am going to re-explain this for Photoshop users so you can turn your module maps into modules :)

    First, take a flat (top-down) map, here is ours:
    Tut 0.png

    Now turn it 45 degrees thusly, by using Image / Image Rotation / Arbitrary and type in 45 degrees.

    Tut 1.jpg

    Next, we are going to resize the Y axis as mentioned by Anatoliy, so bring up the Image / Image Size dialogue, make sure height and width are unlinked (so you can change the height but not the width) and reduce the height to 0.7055 of its current value (use a calculator!)

    Tut 2.jpg

    When done, you will have very easily created a nice 'isometric' version that NPCs, doors, chests etc can be put on and PCs can run around :) Here is our new map alongside the others in Anatoliy's mod.

    Tut 3.jpg

    Most importantly, these maps don't just look right - by following these ridiculously easy instructions, your maps will conform to the expectations of the engine. Walls will be at right angles, doors will be correct etc. No rejigging, rotating, or awkward angles. Here is one of Anatoliy's sectored in WorldEd:

    Tut 4.png

    So, everything aligns perfectly, those doors are at 45 and 135 degree angles, too easy. (I could post an example of how 'off' many of the KotB maps are, and how we had to constantly make adjustments to make things look right - but I won't :p )

    So there you go. Get modding!
     
    Shiningted, Sep 20, 2020
    #4
    Allyx, _doug_, FDR4PREZ and 1 other person like this.
  5. Shiningted

    Shiningted I changed this damn title, finally! Administrator

    Joined:
    Oct 23, 2004
    Messages:
    12,745
    Likes Received:
    375
    Anatoliy - any suggestions on how to get the maps to be identical in size to the engine expectations? That is, how to make 5' / 10' squares on your map conform to 5' / 10' squares in the game, without trial-&-error resizing?
     
    Shiningted, Sep 25, 2020
    #5
  6. anatoliy

    anatoliy Established Member

    Joined:
    Feb 18, 2017
    Messages:
    635
    Likes Received:
    201
    Simply go to 60 pixels height of one 5' square in end transformation.
     
    anatoliy, Sep 25, 2020
    #6
  7. Endarire

    Endarire Ronald Rynnwrathi

    Joined:
    Jan 7, 2004
    Messages:
    987
    Likes Received:
    121
    It's over 16 years after ToEE was released, but now we have a guide on how to easily make maps for the engine! Thankee and alleluia!
     
    Endarire, Sep 27, 2020
    #7
    anatoliy likes this.
  8. Azmodeous

    Azmodeous Member

    Joined:
    Jan 29, 2017
    Messages:
    4
    Likes Received:
    4
    I haven't checked the site in a while, but previously I searched the forums for a consolidated answer like this. So thanks for putting it together. Just to restate everything in one sentence to make sure I'm interpreting it correctly: the original TOEE artwork uses 96 DPI and the dimensions of a 5'x5' isometric tile in TOEE is 85.04607 pixels wide and 60 pixels high. Correct?
     
    Azmodeous, Dec 3, 2020
    #8
  9. Sitra Achara

    Sitra Achara Senior Member

    Joined:
    Sep 1, 2003
    Messages:
    3,627
    Likes Received:
    538
    Last edited: Dec 4, 2020
    Sitra Achara, Dec 4, 2020
    #9
    anatoliy likes this.
  10. anatoliy

    anatoliy Established Member

    Joined:
    Feb 18, 2017
    Messages:
    635
    Likes Received:
    201
    Sitra, that was manual research))

    It was long before I even started to dig into T+ project. So yeah, it should be 0.7
     
    anatoliy, Dec 4, 2020
    #10
Our Host!