Explore related tutorials & articles
16
Replies
DJ,
Does anyone know how to easily create an isometric grid in Illustrator?
While I quite agree that all modern 2D vector drawing programs should provide at least some basic support for axonometric drawing, drawing a grid is fairly trivial. But you still have not stated the specifics of the grid you need.
of course it's actually dimetric
That is not a matter "of course." One certainly can construct dimetric drawings in either Flash or Illustrator, but assuming you are referring to the old 1:2 pixel rise:run oblique method commonly employed in old games to accommodate aliased bitmaps, that can properly be called neither isometric nor dimetric. (I realize many commonly do, but doing so is both erroneous and confusing to others interested in axonometric drawing--especially those discussing axonometric in the context of mechanically correct technical drawing).
I'd like to have a layer with a grid, and be able to adjust...the row and column count, and the pixel width.... I can of course make the grid in flash using code...
Well, if you did choose to code it in Flash, you could easily export that to Illustrator (even by copying via the clipboard), place it on its own layer, and proceed. Changing its width would be a simple matter of scaling it.
Again, assuming you are talking about the old 1:2 aspect oblique grid, it can be created in Illustrator in any of several ways. One is to use a simple Pattern Swatch. The Swatch can be scaled interactively, with or without scaling the path that is filled with the Pattern. (Pressing the Shift and Tilde keys lets you scale a Pattern Fill:
To make it snap-sensitive, expand the Fill after creating it. Put it on its own layer(s) so you can lock/unlock and show/hide it as needed.
Another method is to draw the grid with the Line tool, with verticals spaced at whatever you want for the unit cube width, and diagonals at 26.565° off horizontal duplicated vertically at 50% of that.
Really, though, for the sake of the 1:2 oblique, you can forget drawing diagonal grid lines altogether. Just set the Ruler Grid to major increments equal to the desired width of your unit cube, with 2 subdivisions, turn on Snap To Grid, and start drawing. (For convenience, also set SmartGudes custom angles to 26.565, 153.435, and 90.) The increments of that simple grid will effectively provide your diagonal snap points.
Draw a subdivided unit cube by using the Rectangular Grid tool to draw a square grid half the desired width of your unit cube width and subdivded as desired. Rotate it 45°, scale it vertically by 50%. Lock its proportion, and set its new width to the cube width. Scale a copy of the same original grid to 50% vertically, and skew it vertically 26.565°. Reflect that for the opposite side. Record those same transformations as a set of three Actions to then be able to "project" an object of any shape to the three unit cube sides with a single click.
Adobe needs to make their apps more game development friendly and useful. Otherwise why use Flash at all
Adobe needs to do alot of things to flesh out Illustrator's archaic functionality. But if the kind of grid described above is what you are using, I'm inclined to ask why. The entire benefit of Flash is scaleable vector graphics, rasterized and antialiased on-the-fly. Why limit yourself to an antequated, out-of-proportion drawing method? Are you using a bunch of aliased bitmaps for your sprites?
You could be just as easily using proper isometric, assuming vector graphics and/or antialiased raster images.
JET
DJ,
I am well aware (as I stated) that game developers often refer to the 1:2 aspect ratio method as dimetric, just as they also inaccuately refer to it as isometric. It is neither.
Example: Your wiki link states that it is "...described as a variation of dimetric projection, since only two of the three angles between the axes are equal.." The use of "projection" emphasizes my point: that is a direct reference to orthographic projection. The link provided is even to another wiki page describing orthographic projection. As I pointed out, the mere use of two equal angles between the three axes does NOT alone make a dimetric orthographic projection. And popular frequency of error does not negate the fact that it is error.
And I have 30 years experience with this.
If a cube is tilted such that the edges of its top surface orthographically project to the picture plane at an the arctangent of 1/2, the cube is necessarily tilted 30 degrees. That means that on the same orthographic projection, its front edge necessrily projects to the picture plane with a length of cos(30°).
JET
And describe dimetric as having two equal angles and one that is not.
That is but one characteristic of dimetric projection. But another of all flavors of axonometric projection (isometric, dimetric, and trimetric) is that the relationship between the angles and the lengths of the axes is not arbitrary. It's is either correct or it isn't. It is dictated by geometry.
It's not important.
It's important for the reasons I explained:
- Failure to correctly build dimetric projection results in obvious disproportion. Game designers have simply disregarded that, and so consider it "unimportant."
- Tech illustrators cannot disregard it, and it is anything but unimportant; it is essential.
- Game designers have misappropriated the terminology from a discipline developed for technical illustration. That perpetuates the misconceptions and errors.
I just wanted an easy way to build a dimetric grid, and apparently illustrator is not capable of that...
DJ asked how to draw an isometric grid in Illustrator. Simple and straightforward questions revealed that he actually wanted to draw upon a mere 1:2 aspect ratio grid. It was clearly demonstrated that one can quite easily set up a grid to facilitate that in Illusrator and most any other program with ordinary XY ruler grids, because the whole purpose of that method having been adopted by early game designers was to enable them to work with a simple 1-to-2 pixel rise-to-run aliasing of square pixels.
The grid DJ thinks so necessary for this is functionally the same thing as simply using half-measure for the verticals, as proved yet another way by this overlay of an Inkscape grid (blue) with Illustrator's (orange):
The fact that major increments are displayed as heavier than minor increments (divisions) also helps to make this simple use clear.
It is of course not as nice as having diagonal lines displayed (if you use them; remember, most grid features, including Illustrator's, let you choose dots instead of lines). But DJ asked for help with this in AI, and received explanation of how he can do it, at no cost.
I doubt that anyone familiar here would call me a defender of Illustrator's shortcomings. Indeed, I agreed at least twice in this thread that AI should provide proper axonometric support. But simply using half-measure in the vertical direction is quite trivial on any square grid. And that's really all this archaic convention is all about.
JET
AdChoices