A Flash Developer Resource Site

Results 1 to 15 of 15

Thread: Fun with skew and transfrom matrix

  1. #1
    Senior Member tonypa's Avatar
    Join Date
    Jul 2001
    Location
    Estonia
    Posts
    8,223

    Fun with skew and transfrom matrix

    Here is something I made in about an hour while trying to understand Flash 8 transformation matrix:
    http://www.hot.ee/tonypa/skew.html
    Flash8 only! Update the player if still using old one.

    Click for focus then use arrow keys to move.
    It has currently 16 movie clips and is set to 42 fps.

    Its much easier then it looks, if someone finds it interesting, I will post the code (its pure AS).

  2. #2
    Patron Saint of Beatings WilloughbyJackson's Avatar
    Join Date
    Nov 2000
    Location
    Ro-cha-cha-cha, New York
    Posts
    1,988
    I like it! Post the AS.

  3. #3
    Senior Member Ray Beez's Avatar
    Join Date
    Jun 2000
    Posts
    2,793
    I had an experiment like that in the back of my mind... You beat me to it. I bow to you.

  4. #4
    Senior Member tonypa's Avatar
    Join Date
    Jul 2001
    Location
    Estonia
    Posts
    8,223
    I am still playing with it

    This is verson with bitmaps applied:
    http://www.hot.ee/tonypa/skew2.html

    It also features selectable heights and builds the blocks from base coordinates up unlike first version which builds them down.

  5. #5
    Senior Member TeroLebe's Avatar
    Join Date
    Mar 2003
    Location
    Lahti, Finland
    Posts
    302
    Nice, too bad it really cannot be used to make 3d look cause lack of perspective.

    edit:
    Sorry, have to take it back.
    Actually if you precalculate the perspective for the walls, you could manage to get "real" perspectice, at least moving camera only x- ja y-axis.

    You're genious!

    So, not making walls rectangle but making them have top wider than the bottom
    Code:
    _______
    \     /
     \___/
    Last edited by TeroLebe; 03-14-2006 at 05:53 PM. Reason: TonyPa, You're genious

  6. #6
    n00b LeechmasterB's Avatar
    Join Date
    May 2004
    Location
    Switzerland
    Posts
    1,067
    Its beautiful! How do you sort the depths outward from the center? Do you calculate the distance and sort on that? Nice job... i d be interested to know if you find a way to do the perspective transformation on the texture by script .

    greets
    I do stuff that does stuff...

    J-Force

  7. #7
    Senior Member ozmic66's Avatar
    Join Date
    Oct 2005
    Posts
    472
    gta anyone?

    is it just me or are the first and second examples identical?

    anyway, really nice tonypa, wouldn't expect less from you

  8. #8
    Iron Chef In-Training OpethRockr55's Avatar
    Join Date
    Sep 2005
    Location
    Kitchen Stadium
    Posts
    313
    GTA, indeed.

    That is really cool there are probably some nifty things people would come with for that.... I'm not one of them.... *shuns his own creativity*

    P.S. and off-topic: Ozmic, check your PM, I've finally figured it out.

  9. #9
    Custom User Title Incrue's Avatar
    Join Date
    Feb 2004
    Posts
    973
    Quote Originally Posted by TeroLebe
    Nice, too bad it really cannot be used to make 3d look cause lack of perspective.
    Isometric also has lack of perspective and some people still call it 3d and still can make interesting effects with it

  10. #10
    Senior Member tonypa's Avatar
    Join Date
    Jul 2001
    Location
    Estonia
    Posts
    8,223
    Quote Originally Posted by ozmic66
    is it just me or are the first and second examples identical?
    The example one uses have some wall graphics (bitmaps) while first example is only colored rectangles.

    Quote Originally Posted by LeechmasterB
    How do you sort the depths outward from the center? Do you calculate the distance and sort on that?
    Yes, for each block distance from its center to the center of stage is found and then some unique number added to avoid same depth problem.


    I have attached the code file. Include code or copy/paste it into your fla to see it. The basics: every block has 3 child mcs with rectangles in each of them. In skew function the top (roof) is moved, 2 walls are skewed and moved based on the distance from center of stage and height of block.
    Attached Files Attached Files
    Last edited by tonypa; 03-15-2006 at 04:22 AM.

  11. #11
    n00b LeechmasterB's Avatar
    Join Date
    May 2004
    Location
    Switzerland
    Posts
    1,067
    Quote Originally Posted by tonypa
    The example one uses have some wall graphics (bitmaps) while first example is only colored rectangles.



    Yes, for each block distance from its center to the center of stage is found and then some unique number added to avoid same depth problem.
    The code looks really nice and clean! You wrote it just so damn clean nice compared to my stuff.... also you pass the matrix values directly which i calculated through multiplying the matrixes, gotta clean up my stuff .
    I knew that i should have sticked to using the distance from the center for z sorting... i did not dare to because of the "distance calculation" but if you think about it you have to calculate it once anyhow (hm or may be not i gotta look at my code hehe). Again... great job and thank you for the source, just for being able to have a look at nice written code, you make me feel like a fresh as noob again.

    greets
    I do stuff that does stuff...

    J-Force

  12. #12
    Patron Saint of Beatings WilloughbyJackson's Avatar
    Join Date
    Nov 2000
    Location
    Ro-cha-cha-cha, New York
    Posts
    1,988
    Thanks, T.

    I'll play around with this and post anything I manage to create (or mangle).

    -pXw

  13. #13
    Senior Member TeroLebe's Avatar
    Join Date
    Mar 2003
    Location
    Lahti, Finland
    Posts
    302
    Quote Originally Posted by Incrue
    Isometric also has lack of perspective and some people still call it 3d and still can make interesting effects with it
    Yep, but as you see, with same sized roof than the "floor" causes wierd effect, like buildings were pyramid-likes ( the pointy top chopped off ).

    But if walls were pre-rendered/calculated to look like drawing i already "posted", and if the roof were bigger, it looked like "real 3d" with perspective and could use un-modified TonyPa's code. So i think it could be done with only changing gfx to get "real 3d" feeling.

  14. #14
    Senior Member tonypa's Avatar
    Join Date
    Jul 2001
    Location
    Estonia
    Posts
    8,223
    Its not that easy, Tero, you still need to modify the move/skew code because walls in perspective do not line up at the edge. Of course it would be nice if you could create such example

  15. #15
    n00b LeechmasterB's Avatar
    Join Date
    May 2004
    Location
    Switzerland
    Posts
    1,067
    I have examples already but they are messy written. Also some things are done differently.

    The flash bitmap data max size is 2000x2000 pixels. So i used a 2000x1000 pix png for all textures. And thereby the max size ended up being 20 (with the use of 100x100 tiles). So since there are only 20 different heights i already have holders for each layer. I put the roofs into those holders and this way i can move all together and dont have to recalculate their position or the length to the center point. That way i can also just access the roofs x and y properties to scew the walls and dont need to calculate the distance again. Only for creating a new house / roof that is necessary. So this already makes it a lot messier... another thing is that i have premade wallclips so that i only use the matrix for scewing and dont have to rotate the walls all the time. But there are up to 4 walls instead of only 2 and a roof but it allowes 4 different textures with that method. So it all would look really really messy for an example. But the angle of the perspective scew on the walls is easy to do with photoshop's perspective scew tool. Just this method also lead me to the depth sorting problem.. so probably the distance needs to be calculated again just for that purpose.

    greets
    I do stuff that does stuff...

    J-Force

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center