dcsimg
A Flash Developer Resource Site

Results 1 to 13 of 13

Thread: Tricky Isometric Rotation

  1. #1
    Junior Member
    Join Date
    Jul 2009
    Posts
    8

    Tricky Isometric Rotation

    Hey All,

    I am creating a isometric tile based game and want to rotate a MC which is on my grid say 90 degress. I have tried different formulas adapting them etc but with no luck. Any help would be great.

    Assume the grid is 10 x 10 isometric. I calculate my x and y for each MC on the grid as follows:

    Code:
        for (i = 0; i < this.rows; i++)
        {
            for (j = 0; j < this.cols; j++)
            {
                  this._x =  (j - i)  * tileW / 2;
                  this._y =  (i + j ) * tileH / 2;
            }
        }

  2. #2
    Please, Call Me Bob trogdor458's Avatar
    Join Date
    Aug 2006
    Location
    Pensacola, FL
    Posts
    915
    I'm not sure what you mean by rotating something in your isometric world, so...
    I'm going to assume you mean rotating the entire board?

    And you want to keep track of where your stuffs would be after rotation?

    If that's the case, you're first going to need a point of origin or
    something - it's the part on the board that won't move even when rotating
    (probably the very center of your board)



    The code I would use to find the new position would be as follows

    Code:
    //I assume these are the coordinates for your center, and your ratio
    centx=0;
    centy=4.5*tileH;
    ratio=tileH/tileW;
    //this shows you're rotating 90 degrees
    rotate=Math.PI/2;
    dis=Math.sqrt(Math.pow((oldx-centx)*ratio,2)+Math.pow(oldy-centy,2));
    ang=Math.atan2(oldy-centy,(oldx-centx)*ratio);
    //calculates new coordinates
    newx=dis*Math.cos(ang+rotate)/ratio+centx;
    newy=dis*Math.sin(ang+rotate)+centy;
    Is that what you needed?

  3. #3
    Junior Member
    Join Date
    Jul 2009
    Posts
    8
    trogdor458,

    Thanks for the reply......I will give your code a go in a few minutes. Just to explain myself better is I need the board to remain as it is (in its isometric form) but change the rotation of a MC on the grid tiles.

    So if you imagine a cube with all black sides and 1 red side I would need to rotate the cube on the tile say 90 degrees so the red side has rotated but the cube has remained on the same tile.

    Hope that makes it more clear, thanks again.

  4. #4
    Junior Member
    Join Date
    Jul 2009
    Posts
    8
    trogdor458,

    Just for a quick update, im firing the code on a button press. So i used your code and upon each press the object is moved clockwise around the tile it was on. Im sure im missing something very easy.

    Thanks again
    Last edited by justme86; 07-20-2009 at 06:56 AM.

  5. #5
    Please, Call Me Bob trogdor458's Avatar
    Join Date
    Aug 2006
    Location
    Pensacola, FL
    Posts
    915
    So... you have a flat tile that needs to be rotated in place?
    I guess you could use this:
    Code:
    this._rotation+=90;
    this._xscale=100;
    this._yscale=100;
    if(this._rotation%180){
    	this._xscale=100*tileH/tileW;
    	this._yscale=100*tileW/tileH;
    }
    It works fine when I test it out, but your tile needs to be centered in your mc
    (otherwise it will move a bit)

    Is this what you needed?
    If not I'm sorry, need to be more clear

  6. #6
    Junior Member
    Join Date
    Jul 2009
    Posts
    8
    Tried and failed with the latest code

    I think i should try to explain better. I have an isometric grid and isometric MC's. If you imagine a game such as Rollercoaster Tycoon the original isometric ones. When you place an object you can rotate it around so you can see the any side of the object.

    Does that make sense ?

  7. #7
    Please, Call Me Bob trogdor458's Avatar
    Join Date
    Aug 2006
    Location
    Pensacola, FL
    Posts
    915
    So you have a 3d box you want to rotate isometrically?
    If I'm imagining it right, I think it'll just be easier to have 4 seperately drawn images of the same mc, one in each direction

    Chances are that's what they did in rollercoaster tycoon

  8. #8
    Junior Member
    Join Date
    Jul 2009
    Posts
    8
    yes that is correct ! does it seem to difficult ? i would prefer to use actionscript transformation rather than pointing to different frames as it would cause a big headache in my code.
    Last edited by justme86; 07-20-2009 at 01:20 PM.

  9. #9
    Please, Call Me Bob trogdor458's Avatar
    Join Date
    Aug 2006
    Location
    Pensacola, FL
    Posts
    915
    Well I'd have to see the graphic(s) you're transforming
    I already posted the code for transforming a flat tile, but 3-dimensional objects can be trickier

    4 graphics for each tile won't put a huge headache in your code
    If you want to use 4 images instead, show me your code for placing tile graphics and it can be modified accordingly

    I'd go with the individual images, overall easier and less headache me thinks

  10. #10
    Junior Member
    Join Date
    Jul 2009
    Posts
    8
    Looking at my code I have not wrote it in a way which would make it easy to change re the images. I have settled on two rotations by flipping the mc horizontally ( a mirror effect). What I am trying to do atthe minute and its not quite working is when I press a button it will flip the mc one way, then when the button is pressed again it flips it back and so on and so forth.

    The code used is:
    Code:
                   //To go left
    		if(thisObject.front_direction == 'right'){
    			thisObject._rotation =- 180;
    			thisObject._xscale *= -1;
    			thisObject._x = thisObject._x - (tileW * 2);
    			thisObject._y = thisObject._y + (tileH / 2) - 10;
    			//object_menu.removeMovieClip();
    			thisObject.front_direction = 'left';
    		}
    		//To go right
    		else if(thisObject.front_direction == 'left'){
    			thisObject._rotation =- 180;
    			thisObject._yscale *= -1;
    			thisObject._x = thisObject._x + (tileW * 2);
    			thisObject._y = thisObject._y + (tileH / 2) - 10;
    			//object_menu.removeMovieClip();
    			thisObject.front_direction = 'right';
    		}
    The problem is it will flip right, then flip back left but when i try to flip it right again the MC moves of the tile it should be placed on.

    Any ideas ?

  11. #11
    Please, Call Me Bob trogdor458's Avatar
    Join Date
    Aug 2006
    Location
    Pensacola, FL
    Posts
    915
    First of all I notice one of your lines
    Code:
    thisObject._y = thisObject._y + (tileH / 2) - 10;
    Ought to be
    Code:
    thisObject._y = thisObject._y - (tileH / 2) + 10;
    I believe that is the source of your problem, the flipleft and flipright things should be inverses of each other

    That way when you use them both, you know they'll wind up in the same place you started

    I don't understand the need to rotate or modify the _yscale if you're just flipping it though
    Shouldn't _xscale*=-1 suffice?

  12. #12
    Junior Member
    Join Date
    Jul 2009
    Posts
    8
    To be honest I have been playing with this for so long i have gone crazy trying all sorts!!!!!!! The -10 is just an offset in placing x and y. Well I have managed to flip the object left and right upon clicking the same button. Here is the code for any of those reading.

    Code:
                    //To go left
    		if(thisObject.front_direction == 'right'){
    			thisObject._rotation =- 180;
    			thisObject._xscale *= -1;
    			thisObject._yscale *= 1;
    			thisObject._x = thisObject._x - (tileW * 2);
    			thisObject._y = thisObject._y + (tileH / 2) - 10;
    			//object_menu.removeMovieClip();
    			thisObject.front_direction = 'left';
    		}
    		//To go right
    		else if(thisObject.front_direction == 'left'){
    			thisObject._rotation =- 180;
    			if(thisObject._yscale < 0){
    				thisObject._xscale *= -1;
    				thisObject._yscale *= -1;
    			}
    			thisObject._xscale *= 1;
    			thisObject._yscale *= -1;
    			thisObject._x = thisObject._x + (tileW * 2);
    			thisObject._y = thisObject._y + (tileH / 2) - 10;
    			//object_menu.removeMovieClip();
    			thisObject.front_direction = 'right';
    		}
    Thanks to trogdor458 for your time and patience

  13. #13
    Please, Call Me Bob trogdor458's Avatar
    Join Date
    Aug 2006
    Location
    Pensacola, FL
    Posts
    915
    Here... just try this and tell me what happens:
    Code:
                   //To go left
    		if(thisObject.front_direction == 'right'){
    			thisObject._xscale = -100;
    			thisObject._x = thisObject._x - (tileW * 2);
    			thisObject._y = thisObject._y + (tileH / 2) - 10;
    			//object_menu.removeMovieClip();
    			thisObject.front_direction = 'left';
    		}
    		//To go right
    		else if(thisObject.front_direction == 'left'){
    			thisObject._xscale = 100;
    			thisObject._x = thisObject._x + (tileW * 2);
    			thisObject._y = thisObject._y - (tileH / 2) + 10;
    			//object_menu.removeMovieClip();
    			thisObject.front_direction = 'right';
    		}

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