Snap to ISOMETRIC grid

[jtubert]

Hi does anyone know how to snap a shape to an isometric grid?
The grey piece is draggable and when you release it it should snap to the grid. I know how to snap it to a regular grid but to a isometric grid is imposible I think.
Please help..............
http://www.jtubert.com/projects/gallery/isometric.jpg

[thoriphes]

naw, it's not impossible. sometimes it's better to walk away from 3D and think in 2D. think of the plane as a diamond with multiple points on it as opposed to a 3D plane. when you drag the little block just snap it to those points as if it were on a regular grid, which you said you knew how to do. if you can provide an fla then maybe i can help you figure it out further.

[senocular]

yeah I need to get back to that thread sometime... Ill see what I can do this weekend :)

for anyone weary of downloading the zip:


Point = function(x,y){
this._x = x;
this._y = y;
};
Point.prototype.round = function(){
return new Point(Math.round(this._x), Math.round(this._y));
};
Point.prototype.screenToIso = function(spacing){
if (spacing == undefined) spacing = 1;
var xs = this._x/spacing;
var ys = this._y/spacing;
var x = (xs + 2*ys)/2;
var y = (xs - 2*ys)/2;
return new Point(x,y);
};
Point.prototype.isoToScreen = function(spacing){
if (spacing == undefined) spacing = 1;
var x = spacing * (this._x + this._y);
var y = spacing/2 * (this._x - this._y);
return new Point(x,y);
};

Box.onPress = function(){
this.onMouseMove = function(){
var mousePos = new Point(this._parent._xmouse, this._parent._ymouse);
var myPosition = mousePos.screenToIso(40).round().isoToScreen(40);
this._x = myPosition._x;
this._y = myPosition._y;
};
};
Box.onRelease = Box.onReleaseOutside = function(){
delete this.onMouseMove;
};

[ahmed]

it's possible :).. try this:

MovieClip.prototype.snapToIso = function(spacing) {
x = this._x/spacing;
y = this._y/spacing;
x = Math.round((x + 2*y)/2)
y = Math.round((x - 2*y)/2)
this._x = spacing * (x + y);
this._y = spacing/2 * (x - y);
}

/* -- usage -- */

blockSize = 30

myMC.onPress = startDrag

myMC.onRelease = function() {
stopDrag()
this. snapToIso(blockSize)
} i used some of sen's code here:
http://www.kirupaforum.com/forums/showthread.php?s=&threadid=15767&highlight=isometry

[thoriphes]

well done, sen, well done.

[ahmed]

did we post at the same time? :P

[thoriphes]

almost. good just as well, i think your code is a (much) simpler version of what sen had. :thumb:

[senocular]

its the same thing ;) just in different places.
... more or less

[ahmed]

yup.. i like the OOP-ness of sen's code though :)

[jtubert]

Senocular, thanks a lot the file is great. Do u mind explaining to me the screenToIso and the IsoToScreen

thanks


John Tubert

[senocular]

screenToIso takes points on an isometric grid on the screen (like your mouse moving over a grid) and converts them to iso (grid) points. IsoToScreen takes those positions in an isometric grid and puts them on the screen at an _x and _y dictating where they are visually.

I get into it more in that thread I was talking about :
Isometric - Too ambitious? (http://www.kirupaforum.com/forums/showthread.php?s=&threadid=15767)

[jtubert]

I'll post the game I'm making once is finished.

thanks