# Snap to ISOMETRIC grid

**URL:** <https://forum.kirupa.com/t/snap-to-isometric-grid/23559>\
**Category:** flash\
**Created:** [June 19, 2003, 3:15pm UTC](https://forum.kirupa.com/t/snap-to-isometric-grid/23559 "2003-06-19T15:15:20Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![jtubert](https://avatars.discourse-cdn.com/v4/letter/j/82dd89/32.png) [@jtubert](https://forum.kirupa.com/u/jtubert)\
**Post date:** [June 19, 2003, 3:15pm UTC](https://forum.kirupa.com/t/snap-to-isometric-grid/23559/1 "2003-06-19T15:15:20Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 19, 2003, 3:46pm UTC](https://forum.kirupa.com/t/snap-to-isometric-grid/23559/2 "2003-06-19T15:46:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 19, 2003, 3:52pm UTC](https://forum.kirupa.com/t/snap-to-isometric-grid/23559/3 "2003-06-19T15:52:17Z")

</div>

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:

```auto

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

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 19, 2003, 3:53pm UTC](https://forum.kirupa.com/t/snap-to-isometric-grid/23559/4 "2003-06-19T15:53:37Z")

</div>

it’s possible :)… try this:

```auto
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](http://www.kirupaforum.com/forums/showthread.php?s=&threadid=15767&highlight=isometry)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 19, 2003, 3:55pm UTC](https://forum.kirupa.com/t/snap-to-isometric-grid/23559/5 "2003-06-19T15:55:36Z")

</div>

well done, sen, well done.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 19, 2003, 3:56pm UTC](https://forum.kirupa.com/t/snap-to-isometric-grid/23559/6 "2003-06-19T15:56:40Z")

</div>

did we post at the same time? 😛

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 19, 2003, 3:59pm UTC](https://forum.kirupa.com/t/snap-to-isometric-grid/23559/7 "2003-06-19T15:59:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 19, 2003, 4:00pm UTC](https://forum.kirupa.com/t/snap-to-isometric-grid/23559/8 "2003-06-19T16:00:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 19, 2003, 4:04pm UTC](https://forum.kirupa.com/t/snap-to-isometric-grid/23559/9 "2003-06-19T16:04:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 19, 2003, 4:37pm UTC](https://forum.kirupa.com/t/snap-to-isometric-grid/23559/10 "2003-06-19T16:37:58Z")

</div>

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

thanks

John Tubert

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 19, 2003, 4:53pm UTC](https://forum.kirupa.com/t/snap-to-isometric-grid/23559/11 "2003-06-19T16:53:54Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 19, 2003, 4:56pm UTC](https://forum.kirupa.com/t/snap-to-isometric-grid/23559/12 "2003-06-19T16:56:47Z")

</div>

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

thanks