• 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.
Sign in to follow this  
Followers 0
viniciusxis

Help with terrain textures on a 2d isometric view

9 posts in this topic

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!

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

Edited by viniciusxis
1

Share this post


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

Share this post


Link to post
Share on other sites

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
1

Share this post


Link to post
Share on other sites

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.

0

Share this post


Link to post
Share on other sites

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
0

Share this post


Link to post
Share on other sites

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

1

Share this post


Link to post
Share on other sites

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

http://www.youtube.com/watch?v=hvacGEWE6bM http://www.youtube.com/watch?v=00HWY28YJsM

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
1

Share this post


Link to post
Share on other sites

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.

0

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0