Jump to content

  • Log In with Google      Sign In   
  • Create Account

Help with terrain textures on a 2d isometric view


Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
9 replies to this topic

#1 viniciusxis   Members   -  Reputation: 113

Like
1Likes
Like

Posted 17 July 2014 - 07:40 PM

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:

topic1.jpg

(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):

 

topic2.jpg

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:

 

topic3.jpg

 

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:

 

topic4.jpg

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).

 

topic5.jpg

More from the second grass texture.

 

topic6.jpg

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).

 

pet_stag_action.png

 

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!

uotext1.jpg uotext2.jpg uotext3.jpg tile.png asdz.jpg 1.png


Edited by viniciusxis, 17 July 2014 - 07:47 PM.


Sponsor:

#2 Servant of the Lord   Crossbones+   -  Reputation: 21004

Like
4Likes
Like

Posted 17 July 2014 - 07:57 PM

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.


It's perfectly fine to abbreviate my username to 'Servant' rather than copy+pasting it all the time.
All glory be to the Man at the right hand... On David's throne the King will reign, and the Government will rest upon His shoulders. All the earth will see the salvation of God.
Of Stranger Flames - [indie turn-based rpg set in a para-historical French colony] | Indie RPG development journal

[Fly with me on Twitter] [Google+] [My broken website]

[Need web hosting? I personally like A Small Orange]


#3 slicer4ever   Crossbones+   -  Reputation: 3982

Like
1Likes
Like

Posted 17 July 2014 - 07:58 PM

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.

Edited by slicer4ever, 17 July 2014 - 08:17 PM.

Check out https://www.facebook.com/LiquidGames for some great games made by me on the Playstation Mobile market.

#4 Servant of the Lord   Crossbones+   -  Reputation: 21004

Like
1Likes
Like

Posted 17 July 2014 - 08:05 PM

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.

 

Illustration.png

 

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. rolleyes.gif

 

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

 

Illustration_2.png

 

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:

Frame_1.png

 

To this:

Frame_3.png

 

...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:

 

Frame_7.png

 

[Watch it animated, just 'cause]


Edited by Servant of the Lord, 17 July 2014 - 10:26 PM.

It's perfectly fine to abbreviate my username to 'Servant' rather than copy+pasting it all the time.
All glory be to the Man at the right hand... On David's throne the King will reign, and the Government will rest upon His shoulders. All the earth will see the salvation of God.
Of Stranger Flames - [indie turn-based rpg set in a para-historical French colony] | Indie RPG development journal

[Fly with me on Twitter] [Google+] [My broken website]

[Need web hosting? I personally like A Small Orange]


#5 jefferytitan   Crossbones+   -  Reputation: 2242

Like
0Likes
Like

Posted 17 July 2014 - 09:20 PM

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.



#6 viniciusxis   Members   -  Reputation: 113

Like
0Likes
Like

Posted 17 July 2014 - 10:19 PM

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.

 
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 smile.png
 

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

 

Frame_7.png

 

[Watch it animated, just 'cause]

 

Yea, everything you said makes a lot of sense!

And wow, 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?
All of this has been VERY helpful, but i also still need a few directions towards doing my own terrain textures.
These are great pointers and i really mean it, but if i'm gonna start from "scratch" (or at least modifying a few of the good textures i have so far), i'm gonna need help and tutorials.
 
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) ?
Or do you mean like those ss i posted before on UO, where they transition between one grass type to another?
If it's the first option, how would i do that?
 

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!


Edited by viniciusxis, 17 July 2014 - 10:19 PM.


#7 Servant of the Lord   Crossbones+   -  Reputation: 21004

Like
1Likes
Like

Posted 18 July 2014 - 11:52 AM

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 smile.png

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:

Painterly_art_style.png

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.

 

Frame_1.png

 

Frame_2.png

 

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:

 

Frame_3.png

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:

 

Painterly_art_style.png


It's perfectly fine to abbreviate my username to 'Servant' rather than copy+pasting it all the time.
All glory be to the Man at the right hand... On David's throne the King will reign, and the Government will rest upon His shoulders. All the earth will see the salvation of God.
Of Stranger Flames - [indie turn-based rpg set in a para-historical French colony] | Indie RPG development journal

[Fly with me on Twitter] [Google+] [My broken website]

[Need web hosting? I personally like A Small Orange]


#8 riidom   Members   -  Reputation: 327

Like
1Likes
Like

Posted 18 July 2014 - 02:00 PM

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 smile.png , done after 2 or 3 tryouts with the stuff mentioned in the above linked vids)


Edited by riidom, 18 July 2014 - 02:20 PM.


#9 viniciusxis   Members   -  Reputation: 113

Like
0Likes
Like

Posted 18 July 2014 - 08:05 PM

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.



#10 Servant of the Lord   Crossbones+   -  Reputation: 21004

Like
0Likes
Like

Posted 18 July 2014 - 09:19 PM

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:

 

Frame_7.png

 

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. smile.png

 
You keep asking for tutorials, but you look them up just as easily as I can (you have access to the internet and google). The key is not finding the perfect tutorial that'll make you skilled, the key is practicing and spending time actually doing it. When you're actually in the midst of doing it, then you'll run into problems and have specific questions that you can google and get specific answers back, expanding your knowledge as you invest more time in actually doing the work.
 
You can google, "How do I draw sprites", "How do I draw pixel art", "How do I draw tile art", and get a cursory overview, but sooner or later you need to just jump in and make crappy artwork for a few months, gradually getting better and better, and asking specific questions as they arise and as you get feedback ("How do I properly shade my character?", "How do I draw hair?", "How do I draw cloth?"). smile.png
 
You don't need to start with Photoshop - it'd actually be better for you to start with MS Paint, and learn the basics. Just pretend the first 100 pieces of art you make will be throw-aways. wink.png Use them in your game as placeholders, and you'll gradually replace them or gradually improve them.

It's perfectly fine to abbreviate my username to 'Servant' rather than copy+pasting it all the time.
All glory be to the Man at the right hand... On David's throne the King will reign, and the Government will rest upon His shoulders. All the earth will see the salvation of God.
Of Stranger Flames - [indie turn-based rpg set in a para-historical French colony] | Indie RPG development journal

[Fly with me on Twitter] [Google+] [My broken website]

[Need web hosting? I personally like A Small Orange]





Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.



PARTNERS