[2D Art] grass tile request
Hello OpenGameArt community :-)
After stalking the forums and page for years, I have finally created an account here. The reason being that I have consistently and decisively failed to create a detailed, tileable grass texture. I am usually modelling spaceships and lasers and stuff, terrain is not my area of expertise.
There are tons of public domain grass textures on the net, many tileable. The issue is, I need a set of highly detailed, small and tileable grass graphics. One usually finds very large and detailed tile graphics (here, Nobiax is doing such textures for example) or sets of small SNES style tiles. The later does not look very good but it is not the style I am going for, the former looks of course brilliant BUT falls apart when I create something like a 500x500 tilemap due to the visible repetition.
I absolutely love athile's work on his grass set (http://opengameart.org/content/seamless-grass-textures-20-pack) and I have been trying to create something like his grass20. I love the detail and the watercolor-like feel, the stylized reality aspect. My results of emulating it have been unsatisfactory.
Next, I experiemented with downsizing high-detailed textures but quickly gave up since (as I expected) it creates way to much artifacts when going from 1024x1024 to something like 32x32 or 64x64). You loose the detail that I need.
My most recent attempt has been to create a grass tileable texture set out of parts from high resolution textures, most notably grass20 of course. Despite my best efforts with blending and masks, I have failed thus far, always creating visible artifacts and thus patterns on the transitions from tile to tile.
I do not want to drop the tile-architecture since it comes with a lot of benefits but I am out of ideas by now. What I am looking for are small patches of high-detail grass terrain with each variant being tilable with any other, that I can use under CC0.
Any tips or ideas? Even better, someone willing to help or lend his or her assistance?
(uploaded grass20.png for reference. Image by athile under CC0).
Resizing a 1024 texture down to 64 or 32 is going to give you relatively little detail left. When your tileset is down to 64 or 32 pixels, you're entering pixel art territory.
Now if you want to resize your existing texture but are getting artifacts I have a couple tips.
First, make sure you are keeping the file as a PNG. PNG are lossless image format, which means you don't loss quality. JPG is a lossy image format, which means it will sacrifice image quality for a smaller file size.
Second, change the way you downsize the image. I use photoshop and the default settings for resizing your image is "Bicubic Automatic" which is great for downsizing photographs, but for game art can create a blurry mess. So you might want to consider changing this setting to "Nearest Neighbor (preserve hard edges)". This will give you a sharper look and is best for pixel graphics. You still might have some pixels that need editing so it looks good when being tiled, but it gives a better starting point.
settings.png 33.1 Kb [57 download(s)]
examples.png 29.4 Kb [158 download(s)]
Both ideas, helpful as they may be, are known to me and have been applied already. It is simply not feasible, as you restate yourself. It is pixel-art territory.
I think taking small parts of a high-detail texture to create tiles is still the most promising approach (since I failed to produce a good grass of my own) but I have issues making them tileable with all variants without creating strongly visible patterns.
So have like 4+ versions of the grass texture and no matter what combination you tile them, they will look good without obvious patterns? Easiest way would be to pick and sample and keep the edge pixel the same on all sides and then replace out the middle section for the new tiles. I probably could put that together for you. 64x64 okay?
Since I am stuck I am grateful for every help I get. Note what I wrote above however, "despite my best efforts with blending and masks, I have failed thus far, always creating visible artifacts and thus patterns on the transitions from tile to tile."
If you think you can do that without creating visible patterns, go ahead. I am eager to learn new tricks.
These are the approaches I tried so far (all based on the grass20.png):
1.) Using a bland green 1-pixel-wide border. Makes it tileable but obviously leads to a visible 2-pixel wide grid and another artifact at the border's transition to the detail texture in middle.
2.) Picking one complete 64x64 detailed patch and making it tileable using mirroring, then placing other 62x62 patches into the middle. Leads to very noticeable artifcats on the transition between border and center.
3.) Approach from (2) but with multiple layers, blending the tileable high detail 64x64 with the new non-tileable patch. Sounds most promising to me but I seem to lack the proper hand for the blending. Still have artifacts.
If you manage to rig up something that looks good, I would be grateful for your permission to use it as well as an explanation/some template.
EDIT: Late here :-) Getting some sleep.
Okay, don't know if this will help, but this is how I make a tile for something that isn't pixels. You'll need a program that supports layers to do this
Step 1: Make the body of the texture. I only do a center, taking care not to hit the edges of the document.
Step 2: Make a copy of the texture and move it halfway up, then move the original texture halfway down. If it's not exactly halfway, it won't work. You now have a new center to make a texture in. Fill in the hole. Remember not to touch the edges.
Step 3: Do the same thing again, only horizontally.
Step 5: If necessary repeat step 2. Try out the texture, fix problems. (This part will depend entirely on how you made
ttut1.png 54.4 Kb [14 download(s)]
ttut2.png 56.6 Kb [10 download(s)]
ttut3.png 66.5 Kb [11 download(s)]
ttut4.png 67.1 Kb [21 download(s)]
ttut5.png 81.7 Kb [19 download(s)]
A nice technique that I used before too, in my case of hull patterns. Does not solve the problem unless I draw my own grass texture which I seem to be incapable off. It always looks like green vomit or like a SNES rpg :-)
Guess the lack of a response from gnomishcreations means that his or her tries did not produce anything better from the given texture than my attempts did. Damn it. Still, thanks for the try.
Sorry for the delay, making more than one texture tile that would seamlessly tile with the others would require some designing and therefore more of a time commitment than I had available this week.
But I was able to make some standalone tileable textures out of that original grass texture. So maybe one of these will work for you.
I just cropped a 64x64 section of the texture, user filter>other>offeset by 32 pixels, then blended the edges.
grass01.png 3.7 Kb [62 download(s)]
grass02.png 3.8 Kb [25 download(s)]
grass03.png 3.8 Kb [15 download(s)]
grass04.png 3.7 Kb [17 download(s)]
grass05.png 3.7 Kb [16 download(s)]
grass06.png 3.7 Kb [18 download(s)]
grass07.png 3.7 Kb [38 download(s)]
Hey no worries about delays and stuff, we are all sacrificing free time on projects like this. Any effort is commendable, no matter the outcome.
Your shot at a tile-set does look better than my tries from (1), (2) and (3) but there are still some seams that are too noticeable, see attached pictures.
How did you blend the edges together? Each picture's border making 1/7th of the final shared border.
tiled.PNG 191.9 Kb [16 download(s)]
tiled_annotation.PNG 313.9 Kb [166 download(s)]
I did not have the time this week to make those textures tile with the others, they only tile with themselves. So you would fill it was all grass02.png, etc.
Here's the overall process I would recommend:
1) select a 64x64 area of the original texture that feels very uniform, nothing stands out
2) copy/crop this area to a new file
3) filter>other>offset, 32 and 32 (or whatever half your texture size is)
4) blend the edges that now appear as a cross in the middle. I used a smudges brush with 100% strength and mostly drag the lights and darks over the line.
5) test to make sure you like it (I go to edit>define pattern, then open a larger document and go to edit>fill using the pattern I created) repeat step 4 until you're happy with it
6) to make more in your tile set, copy your layer and delete out the center of your texture, i deleted a 58x58 square from the middle
7) fill it the hole with a new area selection from the original texture
8) blend edges again, this time it's a square shape you must blend, try not to touch the pixels on the very edge
9) test tiled alone
10) test tiled with other textures
I included the two textures created from this tutorial
step_1.png 250.1 Kb [66 download(s)]
step_2.png 34.1 Kb [17 download(s)]
step_3.png 39.6 Kb [18 download(s)]
step_4.png 33.6 Kb [19 download(s)]
step_5.png 57.7 Kb [19 download(s)]
step_6.png 28.8 Kb [19 download(s)]
step_7.png 35.3 Kb [36 download(s)]
step_8.png 34.9 Kb [23 download(s)]
step_9.png 57.4 Kb [20 download(s)]
step_10.png 86.1 Kb [24 download(s)]
tutorial_grass1.png 9.3 Kb [28 download(s)]
tutorial_grass2.png 9.3 Kb [24 download(s)]
Maybe I'm too late for this post, but here are some possible 64x64 tiles for you, they are somewhat randomly generated by changing the seed of a partical system in Blender (originally by Clint Bellanger, though I've altered it quite a bit by this point). I've tested most of them and they seem to tile together fine, but maybe thats my eyesight! You (and anyone else) can use these freely under CC0 license.
Good luck with your project,
Scribe
Overview when all are tiled randomly:
Scribe
1.png 10.2 Kb [93 download(s)]
2.png 10.2 Kb [98 download(s)]
3.png 10.1 Kb [65 download(s)]
4.png 10.1 Kb [66 download(s)]
5.png 10.2 Kb [54 download(s)]
You are neither too late nor is your post unwelcome. Thanks for trying and it definitly looks really good, I would say the best grass tile set I have seen so far.
There are some visible seams but they are far weaker than anything I have been able to conjur. I have used blender's particle simulator for stuff like hair before but it never occured to me to try to make some grass.
What steps did you take during post-editing these tiles? Or is this the direct output?
I am eager to try out this technique myself.
Again, thanks for answering.
EDIT: Looking at the downloads counter, I am probably not the only person that should thank you :-) Seems like mighty fine work attracts others as well.
seams.png 303.6 Kb [74 download(s)]
I'm glad you like them. Looking more closely now I can definitely see some seams which is a shame but possibly if you render enough you will be able to find a set which are seamless with eachother!
This has no post processing and is output directly from blender, very originally the tiles and partical grass system come from Clint's submission here: http://opengameart.org/content/grass-and-water-tiles so take a look at what he did.
I can't remeber exactly what I have changed from there other than obviously the camera angle! I also have some code which changes the partical seed automatically each render but you can at least get started with his work there.
I am amazed myself at the download count, 180 in a day for some green squares, that must be some sort of record! :D
Anyone, I hope you have luck altering Clint's work if you choose to use that, if you want to PM me I can probably email you my own blender file that I used for these.
Scribe
Scribe