Bit of a backstory, me and a friend were always gamers and Ultima Online fans, played for ages.

We always talked about if someday we did a game like it how we'd do it and well, now it's our little (lol) project.

I know i've heard and read all the dontwasteyourtimewithmmorpgs and i agree with pretty much all of it, the reason we're doing it is basically for fun and something to do with our free time.

So if you don't know Ultima Online it was one of the most played mmorpgs ever, and imo the best one ever. It is a isometric 2d view rpg with heavy PVP action.

So after we discussed a lot about the game and such we started going around tackling each small thing (we actualy have nothing yet, just a bunch of ideas) at a time and read a bunch of tutorials and stuff on how to do most things.

I began thinking about textures and stuff, how we'd like the game to look etc, so i decided to try doing some terrain textures and see how that looks, so i began looking for all kinds of tutorials.

This is a picture of one of the terrain (grass) textures UO uses the most:

(sorry for using paint to edit these, its just faster)

After trying to follow a bunch of tutorials on terrain texturing,and failing miserably (most of them were showing artifacts, a lot of patterns, etc), my buddy made a program to test the texture and told me i needed to do them 64x64 (i was basically doing them huge as most tutorials did, also we realized that we might even need to do them 32x32), and even tried a few free textures and they looked nice (seamless and no artifacts):

I'll try and attach these and all the other texture files in the end.

This one is seamless but the problem with it was that you can actualy distinguish a tile from another, you have those patterns that are easy to see. It's very important that the terrain textures (not city/house floors etc, actual terrain) are not noticeable, as you can see in the first UO pic. After looking more and more for tutoriais and stuff about this problem (i couldn't possibly be the only one ever to experience this), i found some guy with a similar (not the same) problem and someone posted a texture in his topic. Aparently the texture was made in blender but the thread was old and had no more responses after that. I ended up trying it and i had very good results:

Now this one, although still a bit noticeable, was good. This is sort of what we're looking for. The thing is, its not ours, and i don't know how to make something like it (the file, which will be attached, is like a pixel art because of the small size). The color is exactly what we had in mind and it really looks like grass, but you can still see some connecting lines between tiles (it looks like a puzzle if you pay close attention).

What i need is someone to help me figure out how to do that in the above imagem, but also improve it and make it my own. Every one i try to make in photoshop ends up having patterns wherever the detail is (i can't simply use a green background), and mostly doesn't even look seamless and gets a lot of artifacts.

Here are a few screenshots from UO to showcase a bit more what i need:

This is the same grass texture with another type of grass texture inbetween and a dirt texture (there are transiction textures to all of these, i'll attach one).

More from the second grass texture.

Snow texture.

As you can see, in all these pictures you can't really notice the tile (which is the goal). You may see the pattern but the important thing here is to not notice when a tile begins and another one ends.

We also really like the Torhclight2 graphics, specially the terrain (we really want something that seems more drawn/hand painted than what we have in UO, but ultimately we just need unoticeable tiles).

So, can i get some help? Any help is apreciated (links to tutorials, actual direct help on doing them, etc).
I'm new to the community and definitely looking forward to be an active member!

edit: Sorry in advance if my formatting is bad or out of line, please let me know. Like i said, i'm new! Thanks!

edit2: The Files!

[attachment=22692:uotext1.jpg][attachment=22693:uotext2.jpg][attachment=22694:uotext3.jpg][attachment=22695:tile.png][attachment=22696:asdz.jpg][attachment=22697:1.png]

There are several tricks to make repeating tiles look less noticeable.

One of them is multitexturing and tile splatting. This is where you use two (or more!) textures, and you blend them together dynamically in your game's code. For example, you have grass background, and you dynamically blend dirt over it in places you manually choose in your editor, to make a dirt path. This is what people do nowadays instead of transition textures. You can use transition masks - greyscale images that show what parts are supposed to show the overlay texture (the dirt) and what parts are supposed to show the underneath texture (the grass).

In addition to that, instead of one grass tile repeated over and over, what about seven or eight similar but not identical grass tiles, all of them fairly neutral without rocks or noticeable objects that stand out, that are placed at random?

And over the multitexturing of multiple variations of multiple tiles, you manually place rocks, grass shrubs, bushes, and trees.

Finally, over the grass but under tall objects like trees and walls, you add shading and lighting. By placing areas of "light" and areas of "shadow" over your terrain, it greatly helps hide noticable tiling.

A: welcome to the forums.
B: you piled in a lot of info, but also alot of unessential information, in the future the smaller and more to the point your posts, the more likely you are to get responses.

C: a simple trick to make tiles look seamless is to flip them along both the x and y axis, basically every other tile gets flipped along it's corresponding axis. this basically allows you to create a nice seamless pattern, however this can unfortuantly give you diffrent interesting patterns in it's place. Really it'll come down to having a decent texture artist that can make some nice repeatable patterrns. You might also try having multiple textures of the same grass type.

Basically, the problem is that if we consider just a horizontal texture, in order for the pattern to look natural the right edge of the texture must transition to the left edge in a similar manner as to how the rest of the texture seamlessly changes colors as you move from left to right. let's imagine we have a checkerboard texture(for simplicity's sake i'll do it in ascii:

[X][ ][X]
[ ][X][ ]
[X][ ][X[

if you lay this out next to each other we get the following:

[X][ ][X][X][ ][X][X][ ][X]
[ ][X][ ][ ][X][ ][ ][X][ ]
[X][ ][X[[X][ ][X][X][ ][X]

as you can see, the left edge doesn't extend the existing pattern into the next tile, and creates a noticable artifact. in order to correct this, we have to make it so that when the left edge is placed next to the right edge of the texture, the two create a seamless appearance as if the pattern naturally proceeds indefiantly in that direction:
if we change the example into:

[X][ ]
[ ][X]
[X][ ]

now our pattern becomes:

[X][ ][X][ ][X][ ]
[ ][X][ ][X][ ][X]
[X][ ][X][ ][X][ ]

and appears much more natural.

3D games also use similar tricks to what I mentioned above.

While it isn't a tile-based game, I took one of the screenshots you were commenting about, and annotated it to illustrate some of the tricks they might have used.

Oh, another tip is to not rotate your textures - the pixels will get somewhat distorted and blurred. Instead, draw the texture pre-already rotated. (Look up "isometric game art" tutorials).

To give things a more painterly look, you need to draw them in that style. It takes time to get good at making art, but even if you feel your art skills currently suck, you can get better over time.

I'm no artist, and my starting-off art really was terrible - but my skill has improved significantly enough, that I'm very pleased with the style and quality of my current artwork. In some areas, anyway. Drawing and animating creatures and humans is tough for me.

Here's the two grass textures you were talking about earlier:

The one on the left is the one you didn't like, and the reason is that it's contrast (the extreme ranges of brightness and darkness in close proximity) is so high that it "grabs" your attention and draws your eyes towards it - but background art shouldn't do that. Background art should fade more into the background so your eyes roll over it almost without noticing it. The background art shouldn't stand out too much - attention should be focused on the primary gameplay elements (enemies, the player, items, things you can't walk through, and so on).

The piece of grass on the right does a much better job of having less contrast. Contrast is not about how bright something is - it's the measurement of intense brightness next to intense darkness. Background objects should be low contrast, and primary gameplay objects should be slightly higher contrast.

Background objects can be bright, or they can be dark, or they can be in between, but they shouldn't have bright and dark right next to each other in the same texture if the texture is intending to fade mentally into the background.

By reducing the contrast, and eliminating a few of the noticeable stand-out-ish features, we can go from this:

To this:

...and probably improve it further still if we spent some more time on it.

But once you start adding objects and shading, it helps immensely:

[Watch it animated, just 'cause]

I agree with SOTL about the general tricks. I believe an artist mentioned not having too many low frequency features in a texture or it will tile badly. For example, many grass blades per tile aren't memorable, one rock per tile is. Texture splatting is a good idea, or if you don't want to do it manually you could have a few variations on each texture and use a noise function such as Perlin or Simplex to provide weights for blending them.

Damn, so many amazing answers!
Thank you all for the fast returns, i really feel welcomed like this haha.

A: welcome to the forums.
B: you piled in a lot of info, but also alot of unessential information, in the future the smaller and more to the point your posts, the more likely you are to get responses.

C: a simple trick to make tiles look seamless is to flip them along both the x and y axis, basically every other tile gets flipped along it's corresponding axis. this basically allows you to create a nice seamless pattern, however this can unfortuantly give you diffrent interesting patterns in it's place. Really it'll come down to having a decent texture artist that can make some nice repeatable patterrns. You might also try having multiple textures of the same grass type.

Thank you!
Yea i know i piled a lot of stuff, i just wanted to be as thorough as possible. From experience i've had in the past people usually don't get what you want and ask more questions instead of giving answers, but thanks for the advice, i'll try to be more direct from now on!
As far as a decent texture artist goes, i'm afraid i'm all we've got (that being said, i'm also afraid i'm very much new to all of this, which is why i'm seeking help and tutorials hehe. We don't have any money to invest in an artist right now so i'm picking up that share to do whatever I can.

To give things a more painterly look, you need to draw them in that style. It takes time to get good at making art, but even if you feel your art skills currently suck, you can get better over time.

Also thank you Jefferytan! Do you know any good tutorials on using those functions(Perlin/Simplex)?

Again, thanks a LOT for all the response, specially them being this quick!

I've tried searching for "hand painted" tutorials or stuff like that but what i came up with so far hasn't helped me at all in terms of terrain textures.
If you know any good tutorials or people who are good with this, please let me know

Either you actually paint it and then use a scanner to scan it, and then digitally modify it to make it tile properly...

Or you digitally 'paint' it from the beginning.

What visual differences are most noticeable in painting and the 'painterly' style? The key things I notice, not being a real artist, is that because the paint is being layered over more paint with each brush stroke, there is alot of transparent blending between the upper layers and the lower layers.

This can be replicated digitally by using layers of details with alot of transparency in the upper layers:



This could be done in your game engine itself! Instead of constraining yourself to "tiles", you could have the background not be tile-based, and instead let the map makers layer on details over the background with many different transparent swaths of coloration.

See also: [ The Art Of Braid: Creating A Visual Identity For An Unusual Game ]


You can still use tile-based maps as well, but you can selectively mix tile-based and non-tile-based code to get the benefits of both.

Even in your tile-based code, don't artificially limit "tiles" to a specific size. Even if your normal tile size is 64x64, if someone wants to place down a smaller or larger image as a tile, make it work without resizing the image.

i can't believe how much better you made a texture i didn't even like in the first place!
Could you maybe walk me trough what and how you did?

I just opened my art program of choice, and slid the 'contrast' bar down about sixty points.

Then I attacked the parts of the tiling that was most noticeable by copy+pasting (with transparency around the edges) some of the less-noticeably standing-out parts of the tile:

I use an outdated version of Corel Paint Shop Pro 11, other people use the more expensive Adobe Photoshop, and still others use the very good and very free Gimp or Paint.NET programs.

It matters less what tool you use when you are starting out (so don't bother running out and buying the expensive ones) - only that you learn to use it and keep working at your art for the long-haul.

Also, when you mentioned before (and i think others mentioned too) that instead of one grass tile repeated i have a good ammount, do you mean that they are gonna be used inbetween each other (therefore me having to make it seamless on the 'borders' but change stuff in the middle of the tile/terrain texture) ?

Yes. Make the first tile, save it as Grass Tile 1. Copy+paste it, erase the middle but leave the edges, re-make the middle slightly differently. Save it as Grass Tile 2, and so on. Then, when placing "Grass Tile" in your editor, have the editor randomly select which to place down.

This is difficult to do right, because none of the tiles (and especially not the edge of the tiles) should stand out too distinctively or noticeably, or you'll start to notice visual tiling problems.

And easier thing to do is to just make an image of grass that is larger than your tiles. Say, 4 tiles wide and 3 tiles tall, and make that large tile repeat itself properly.

But it's even easier and visually better to just layer transparent details over your background, as I mentioned a few paragraphs up.

Pretend this is your entire background, and the blending is happening in the editor itself:

A drawing tool that allows you to watch live-tiling while you draw is very helpful to avoid nasty patterns. Krita does that, or Blender too. In Krita it is pretty straightforward, how to setup in blender, you can see from these two vids (under 3min playtime together):

Blenders drawing functions are in comparison to Gimp, Krita or PS very limited, but if you want a painterly style, you dont necessarily need the full feature set.

Experienced 2D artists probably dont need this live tiling, but I, someone with close to zero drawing skills, found it very helpful.

http://opengameart.org/content/ground-bush-and-stone-tiles (little example to cheer you up , done after 2 or 3 tryouts with the stuff mentioned in the above linked vids)

I have photoshop in my brothers pc actualy so i can use that, if there's any tutorial on doing those things in that particular program would be great.

These tricks are neat and i'll probably use most of them to achieve the look i want, but as far as drawing the texture (not coloring), would that be some sort of pixel art? The good textures when you zoom in are basically pixel art, but when you test them zoomed out on the 2d view they look great.

Every image is either raster images (also called 'bitmaps') or vector images. Anytime someone says 'image', they usually mean raster image, because raster images are far more common (so common, that hardly anyone uses the word 'raster' except when intentionally drawing a comparison to vector images).

Raster images are made out of pixels. However, "pixel art" is a special term that refers to a certain type of style of artwork. Just because it contains pixels, that doesn't make it 'pixel art'. Just as 'painterly' is a visual style sometimes used, 'pixel art' is another style.

In my own game project, I use a different style that I would not call 'pixel art'. For example, the trees here:

These trees would not typically be called pixel art (they don't have any specific 'art style' that they fall into, that I know about. Just the all encompassing 'game art' and '2D art'

categories).

It's not very well defined what exactly is pixel art, but usually it refers to low-resolution images that use a limited palette of colors - usually inspired from the art of the 3rd and 4th generations of videogames (i.e. the NES and SNES eras). Game art before and after the 3rd and 4th gen of consoles aren't usually referred to as pixel art.