Snap to ISOMETRIC grid

programming flash
1

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…

2

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.

3

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

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;
};
4

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

5

well done, sen, well done.

6

did we post at the same time? :stuck_out_tongue:

7

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

8

its the same thing :wink: just in different places.
… more or less

9

yup… i like the OOP-ness of sen’s code though :slight_smile:

10

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

thanks

John Tubert

11

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?

12

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

thanks