• Announcements

    • khawk

      Download the Game Design and Indie Game Marketing Freebook   07/19/17

      GameDev.net and CRC Press have teamed up to bring a free ebook of content curated from top titles published by CRC Press. The freebook, Practices of Game Design & Indie Game Marketing, includes chapters from The Art of Game Design: A Book of Lenses, A Practical Guide to Indie Game Marketing, and An Architectural Approach to Level Design. The GameDev.net FreeBook is relevant to game designers, developers, and those interested in learning more about the challenges in game development. We know game development can be a tough discipline and business, so we picked several chapters from CRC Press titles that we thought would be of interest to you, the GameDev.net audience, in your journey to design, develop, and market your next game. The free ebook is available through CRC Press by clicking here. The Curated Books The Art of Game Design: A Book of Lenses, Second Edition, by Jesse Schell Presents 100+ sets of questions, or different lenses, for viewing a game’s design, encompassing diverse fields such as psychology, architecture, music, film, software engineering, theme park design, mathematics, anthropology, and more. Written by one of the world's top game designers, this book describes the deepest and most fundamental principles of game design, demonstrating how tactics used in board, card, and athletic games also work in video games. It provides practical instruction on creating world-class games that will be played again and again. View it here. A Practical Guide to Indie Game Marketing, by Joel Dreskin Marketing is an essential but too frequently overlooked or minimized component of the release plan for indie games. A Practical Guide to Indie Game Marketing provides you with the tools needed to build visibility and sell your indie games. With special focus on those developers with small budgets and limited staff and resources, this book is packed with tangible recommendations and techniques that you can put to use immediately. As a seasoned professional of the indie game arena, author Joel Dreskin gives you insight into practical, real-world experiences of marketing numerous successful games and also provides stories of the failures. View it here. An Architectural Approach to Level Design This is one of the first books to integrate architectural and spatial design theory with the field of level design. The book presents architectural techniques and theories for level designers to use in their own work. It connects architecture and level design in different ways that address the practical elements of how designers construct space and the experiential elements of how and why humans interact with this space. Throughout the text, readers learn skills for spatial layout, evoking emotion through gamespaces, and creating better levels through architectural theory. View it here. Learn more and download the ebook by clicking here. Did you know? GameDev.net and CRC Press also recently teamed up to bring GDNet+ Members up to a 20% discount on all CRC Press books. Learn more about this and other benefits here.

Archived

This topic is now archived and is closed to further replies.

Guest Anonymous Poster

How do you make Isometric tiles join seamlessly?

8 posts in this topic


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

0

Share this post


Link to post
Share on other sites
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.

0

Share this post


Link to post
Share on other sites
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

0

Share this post


Link to post
Share on other sites
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

0

Share this post


Link to post
Share on other sites
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

0

Share this post


Link to post
Share on other sites
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

0

Share this post


Link to post
Share on other sites
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

0

Share this post


Link to post
Share on other sites

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?
0

Share this post


Link to post
Share on other sites
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

0

Share this post


Link to post
Share on other sites