Topic: Isometric projection in Flash. Pages that link to <a href="https://ozoneasylum.com/backlink?for=29525" title="Pages that link to Topic: Isometric projection in Flash." rel="nofollow" >Topic: Isometric projection in Flash.\

 
Author Thread
zavaboy
Paranoid (IV) Inmate

From: f(x)
Insane since: Jun 2004

IP logged posted posted 09-12-2007 13:43 Edit Quote

Ok, I found a tutorial on isometric projection in Flash but now there's a part I just can't figure out. The tutorial mentions that 2D environments cannot be transformed to 3D environments. True, but that's only because the value of the third dimension is unknown in a 2D world. If we give this third dimension a value, for example, zero, we can then transform the 2D environment into a 3D environment.

So, if you didn't notice, I'm trying to transform coordinates of a point to the same point in the 3D environment. Basically, I'd like to reverse the following functions (which are found in the tutorial):

code:
// transforms x,y,z coordinates into Flash x coordinate
xFla = function (x, y, z) {
  // cartesian coordinates
  xCart = (x-z)*Math.cos(0.46365);
  // flash coordinates
  xI = xCart+xOrigin;
  return (xI);
};
 
// transforms x,y,z coordinates into Flash y coordinate
yFla = function (x, y, z) {
  // cartesian coordinates
  yCart = y+(x+z)*Math.sin(0.46365);
  // flash coordinates
  yI = -yCart+yOrigin;
  return (yI);
};


Why? I'd like to transform a mouse click position to the position on the isometric environment.

I have looked at many isometric tutorials, this one looks like the best method when it comes to topographic detail. I noticed others use isometric tiles for the landscape, but it is much harder to allow for topographic detail using this method. Correct me if I'm wrong.

Tyberius Prime
Maniac (V) Mad Scientist with Finglongers

From: Germany
Insane since: Sep 2001

IP logged posted posted 09-12-2007 16:20 Edit Quote

My brain says you're looking for a perspective transformation (possibly with fixed parameters).

Edit: see http://alumni.media.mit.edu/~cwren/interpolator/

(Edited by Tyberius Prime on 09-12-2007 16:24)

zavaboy
Paranoid (IV) Inmate

From: f(x)
Insane since: Jun 2004

IP logged posted posted 09-13-2007 22:02 Edit Quote

Sorry, that's not what I'm looking for. Perhaps this may clarify:

We have the function that does exactly what I want as blah(), and let's use this simple example:

code:
// Slightly altered versions of the previous functions:
// transforms x,y,z coordinates into Flash x coordinate
xFla = function (x, y, z) {
	// cartesian coordinates
	xCart = (x-z)*Math.cos(0.46365);
	// flash coordinates
	xI = xCart;
	return (xI);
};
// transforms x,y,z coordinates into Flash y coordinate
yFla = function (x, y, z) {
	// cartesian coordinates
	yCart = y+(x+z)*Math.sin(0.46365);
	// flash coordinates
	yI = -yCart;
	return (yI);
};
// Let's say function blah() is here...
// Usage: blah ( point_X , point_Y , altitude )

ix = 12;
iy = 5;
iz = 23;

fx = xFla(ix,iy,iz);
fy = yFla(ix,iy,iz);
trace("fx = "+fx+" | fy = "+fy);
// output: fx = -9.83868733881014 | fy = -20.652550692568

n = blah(fx,fy,iy);
trace("x = "+n[0]+" | y = "+n[1]+" | z = "+n[2]);
// output: x = 12 | y = 5 | z = 23



Hope that helps. Due to the lack of accuracy the returned values of blah() would be rounded before returned.

Tyberius Prime
Maniac (V) Mad Scientist with Finglongers

From: Germany
Insane since: Sep 2001

IP logged posted posted 09-13-2007 22:11 Edit Quote
code:
z = 23; //constant...
xBlah = function (x, y) {

	x = (xCart + z * Math.cos(0.46365) ) / Math.cos(0.46365)
	return (x);
};
// transforms x,y,z coordinates into Flash y coordinate
yBlah = function (xCart, yCart) {
	// cartesian coordinates
	y = yCart-(xCart+z)*Math.sin(0.46365);
	return (-y);
};



would be the straight 'solving the equations for x/y instead of xCart/yCart' transformation.
Seems to me to be pretty much all you need ( and a fixed z of course).

Tyberius Prime
Maniac (V) Mad Scientist with Finglongers

From: Germany
Insane since: Sep 2001

IP logged posted posted 09-13-2007 22:12 Edit Quote

just to clarify:
that's still a (reverse) perspective transformation, but you're basically fixing one axis to be identical.

zavaboy
Paranoid (IV) Inmate

From: f(x)
Insane since: Jun 2004

IP logged posted posted 09-13-2007 22:18 Edit Quote

Ok, thanks.

zavaboy
Paranoid (IV) Inmate

From: f(x)
Insane since: Jun 2004

IP logged posted posted 09-14-2007 11:48 Edit Quote

Since the function didn't work out as expected and I'm not the best at mathematics, I reached the author of the tutorial via Skype. I told him what I wanted to do and he came up with the right functions. So, apparently he's very good with the math. So, I have it figured out now. Thanks for your effort anyway.

Tyberius Prime
Maniac (V) Mad Scientist with Finglongers

From: Germany
Insane since: Sep 2001

IP logged posted posted 09-15-2007 10:07 Edit Quote

mind to post the improvements for further reference?

zavaboy
Paranoid (IV) Inmate

From: f(x)
Insane since: Jun 2004

IP logged posted posted 09-15-2007 16:08 Edit Quote

Sure.

code:
// --- Functions ---
// Convert isometric coordinates to Flash X coordinate
xFla = function (x, y, z) {
	return ((x-z)*isoCos);
};
// Convert isometric coordinates to Flash Y coordinate
yFla = function (x, y, z) {
	return (-(y+(x+z)*isoSin));
};
// Convert Flash X and Y and altitude coordinates to isometric X coordinate
xIso = function (xF, yF, y) {
	return ((xF)/isoCos-(yF+y)/isoSin)/2;
};
// Convert Flash X and Y and altitude coordinates to isometric Y coordinate (actually Z, but I don't give a hoot)
yIso = function (xF, yF, y) {
	return (-((xF)/isoCos+(yF+y)/isoSin))/2;
};

// --- Variables ---
// isoCos and isoSin are defined in variables so they don't have to be calculated every time the functions are executed
isoCos = Math.cos(0.46365);
isoSin = Math.sin(0.46365);

// --- Example Use ---
// This example shows mostly why I wanted the new functions

isoWorld_mc.onMouseUp = function() {

	// Let's put _xmouse and _ymouse into isometric coordinates
	isoMouseX = xIso(_xmouse, _ymouse, 0);
	isoMouseY = yIso(_xmouse, _ymouse, 0);

	// Let's round it to the nearest 100
	isoMouseSnapX = Math.round(isoMouseX/100)*100;
	isoMouseSnapY = Math.round(isoMousey/100)*100;

	// Let's convert them back to Flash coordinates
	flaMouseX = xFla(isoMouseSnapX, 0, isoMouseSnapY);
	flaMouseY = yFla(isoMouseSnapX, 0, isoMouseSnapY);

	// Now, let's change the position of this sucker
	this._x -= flaMouseX;
	this._y -= flaMouseY;

};


Hope someone may find this helpful!



(Edited by zavaboy on 09-15-2007 16:22)



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu