The Pixel-Zone

sign in :: site map :: help :: rpgdx

HomeStorageNewsMembersForumsIRCRatingsCompetitionsPixel-ArenaAvatar WarsDownloadsTutorialsWeb LinksJobsAdmin SectionPixel-Zone
tutorials
Isometric
tutorials
tutorial links

Tutorials: Isometric

Main Tutorials

Constructing a grid

As previously explained, Type B is the best method for grid based or tiled isometric graphics. Now its fairly straightforwards to draw some diagonal criss-crossed lines at the right angles, but less obvious how this then tiles.

An Isometric GridAn Isometric Grid

In order to get a tile to tessalate properly, the black lines would only be used on two sides of each square (or diamond shape). The animation above hopefully shows how the actual tile shapes are produced for that grid. The animation below shows how this shape comes together when tiled. It is important to note that the left and right sides of the tile are two pixels high.

Isometric TilesIsometric Tiles

This highly zoomed image should show the actual points of contact and the double height section on the left and right edges of the tiles that I mentioned.

Tiles fitting together

Below are a couple of images that you might find useful. One is a basic isometric grid, the other is a rectangular pattern which can be used as a pattern fill to create an isometric grid.

An isometric grid

An isometric grid pattern

Previous page : : Next page

Back to top

Support Pixel-Zone :: About Pixel-Zone :: Site Map :: Help

Our Privacy Policy, Conditions of Web site use, copyright and disclaimer
© 2001-2002 Pixel-Zone