🎉 Celebrating 25 Years of GameDev.net! 🎉

Not many can claim 25 years on the Internet! Join us in celebrating this milestone. Learn more about our history, and thank you for being a part of our community!

How do you make Isometric tiles join seamlessly?

Started by
7 comments, last by GameDev.net 24 years, 6 months ago

I think people who make isometric tiles start out using a square tile,
make it seamless, and then rotate it to the angle they want. The
"seamlessness" of the tile should still stay intact after the rotation.
But I don't create isometric tiles myself, so I'm not completely sure.

If that doesn't work, then here's another idea. Start with a square tile
again, make it seamless, and then skew it horizontally once and then skew it
vertically once. This should make a nice diamond shape tile.

Open up MS Paint and look at Image->Stretch/Skew... for more info.

And making seamless square tiles is a snap with PSP.

Open your texture bitmap, should be larger than than tile you want,
use the selection tool to select the area you want, e.g. 32x32 pixels,
then do:

Image->Special Effects->Create Seamless Pattern

The image should crop down to a perfect seamless square tile that you
can save.

Reaver

Advertisement
Ideas for seamlessness where the work is done
by the engine and not the artist...

1. Add a blurring function that runs down the
length of seams and blends the two sides
together. If done during the level
loading phase, the in-game delay is nil.

2. Overlay borders with an object layer, this
object layer consists of dirt/snow, trash,
vegatation, etc. that covers the seams.
While blurring is neat, sometimes you want
sharp borders. (ie. a chess board)

3. All the tiles are blank and they get
overlayed with a larger texture that flows
right over everything at floor level.

This is assuming that you are using a
3D polygon engine* and the world is just
viewed at an 'isometrical' angle. If the
graphics engine that you are using has
texture positioning, you can achieve some
very cool special effects like flowing
water, or walls that ooze blood.

Half Life made excellent use of decals.
These tranparent textures allowed them
to add persistant bullet holes and other
damage to the walls.
--
TAZ

* In theory, you can build a true isometrical
engine that will get the same results. For
me, it was easier to use one of the free 3D
engines and convert it to my needs.

It doesn't require any trickery or anything. You tile them just like you would tile a normal texture, by making the ends flow together perfectly (with liberal use of the Offset filter in Photoshop).

The only difference is you have to work with diamond shapes, instead of square ones. Civilization 2 Gold installs all the art in a semi-accesible format on your harddrive. See if you can find it, or borrow it from a friend if you're really curious.

- Devin

If you're trying to create the artwok in 3D, zoom all of the way out in the 3D program, which basically eliminate perspective shift in the scene. Then just position the camera about the object at a 45 degree angle. This is how I've accomplished this in the past.

-Nick Robalik http://www.digital-soapbox.com

-Nick "digisoap" RobalikWeb & Print Design, 2D & 3D Illustration and Animation, Game Designhttp://www.digital-soapbox.com[email=nick@digital-soapbox.com]nick@digital-soabox.com[/email]
Let me present my view of this... I suppose you're interested in 2d games like Diablo, not 3d isometric like Neverwinter Nights.

Actually Diablo and Fallout probably don't use diamond shaped tiles. Diamond shaped tiles are bad for program performance, and are a pain to create.

What they probably use is two parallel systems of graphics tiles drawn in one system and other processing in another. The trick is to have the graphics in rectangular format, and fit an isometric grid on top of this, and then let the level editor application or the map generation algorithm do the math to connect parallel pieces, where some diamonds overlap. The hard part is to keep both sides of the overlapping diamond consistent.

So, first create simple 2d rectangular art that fits seamlessly, then fit the grid on top of that.

Some hints for the creation of these pictures:
- Most Photoshop filters make seamless results if the image size is a multiple of 64. Try it with a 128x128 image, render clouds and offset by 64. (for quick grass, select green as foreground color, brown as background, render clouds, add noise)
- If you want to make a tile that is meant to be tiled next to another like it (grass, pavement), first draw a portion of it, then offset it half and half like above, and smooth out the transition errors that are now visible as a cross in the middle

This is an art in itself, and I won't go any deeper into it here

I guess you hard-core Photoshop people haven't tried PSP yet.
No offseting, no smoothing out borders. With PSP you are done
in 2 seconds creating a perfect seamless square tile.

Reaver

I've uses PSP, and I find it very capable program for 2D graphics. With the newest release(beta still I think, could be wrong) we can even import layered Photoshop docs with layers intact, and create leayers right in the program. If you don't have the cash to shell out for Photoshop, I'd get either PSP or Corel's PhotoPaint, which in my opinion is a step above Photoshop in terms of usability, and has a much more intuitive interface, though it tends to take up a lot of real estate with all of the menus available.

-Nick http://www.digital-soapbox.com

-Nick "digisoap" RobalikWeb & Print Design, 2D & 3D Illustration and Animation, Game Designhttp://www.digital-soapbox.com[email=nick@digital-soapbox.com]nick@digital-soabox.com[/email]

I've searched all over the net for this subject but I've had no luck. Games
like Diablo and Fallout do it to perfection.
I was wondering if you guys know how to do this?
Isometric tiles: this one took me about 10 months of figuring out to do well, but now no seams, no gaps and a hell of a lot better looking tiles than one can do in a 2d package. Here's what you do. Make a model, for simplicity's sake make it a flat square, you can always get more complex later. Load this model into your rendering package and texture it the way you want. (I know this is a dead giveaway that I use Lightwave, as Max doesn't have separate modelers and renderers.)

Our tiles are a 45/30 view (Diablo perspective) and are 64 wide by 32 tall.

So what you're going to have to do is set your camera's heading at 45 and its pitch at 30 degrees. Then move it away from the model. WAY away from the model, I use about 100 feet for a a 2 inch by 2 inch ground tile. So set your x at 100 feet and your Z at -100 feet. Then set you Y at (2^.5)*tan(30)*100, whcih works out to 81.6497 feet.
This will give you the correct angle. Now switch to camera view. See that little tiny speck that was your tile? Zoom in til it just barely overlaps the frame. I use a zoom of a couple hundred to accomplish this, but individual results may vary. At this point SAVE YOUR SCENE. take the tile you just rendered and try it in your game. If that works, you're done and will just have to import surfaces onto this model to make all the rest of your tiles. It probably didnt, though, so you'll have to play around with the zoom until the tiling is perfect. Then all you have to do is make/rip/composite square tiles and set them to tile exactly on your tile. For my 2x0x2 tiles i use a cubic image map centered on the tile of 2" by 2" by 2", though a planar image map works just as well. Anyway hope that helps.

p.s. there isnt any reason you can't actually build three dimentional ground tiles and transition tiles and whatnot, but I'll leave that for you to figure out, it isnt terribly hard

This topic is closed to new replies.

Advertisement