In theory, “tileable textures” can be repeated over and over without any visible seams in them. Which does work well for very uniform textures like bathroom tiles, but once you get a bit of variation in color from just the roughness of a concrete wall and especially natural rock or grave, regular repeating patterns start to stand out very noticeably once you get beyond even just four or five repetitions. And on a castle or bunker wall, or the side of a grass covered hill or sand dune, it just looks really bad.
There are some fancy ways to break up the repeating patterns of tiling textures with shaders in Blender, but as it turns out those shaders aren’t easily imported over into Godot like meshes, UV maps, and textures. Of course, all the shader magic can be done inside Godot as well, but I really like to keep things as simple and straightforward as I can to help me keep some kind of grasp of what I’ve actually done and let me repeat it in a consistent way if I need it again in the future.
So instead of shaders that might break or cause some kinds of other problems I can’t even anticipate it, I decided to solve this repeating pattern directly in a single plain .png texture file with Gimp.
Step 1: Pick a Base Texture
50% dimensions of the original file.
Since I’m crunching down everything into jagged pixels anyway, I get all my texture files in 1024×1024. Anything bigger would be a waste of download time and storage space.
Step 2: Scale and Tile the Layer
I scale the layer down to 128×128 pixels with Interpolation set to none! to get the nice retro pixel look and then duplicate the layer to fill out the whole canvas, and then merge all the layers down into a single layer. This makes the repeating pattern very noticeable already, but the rest of the process is all about getting rid of that.
Step 3: Duplicate and Rotate the Layer
Duplicate the layer and rotate it by 45 degrees. This doesn’t cover the corners of the canvas, but those areas will be sufficiently covered up later anyway.
Step 4: Add a Layer Mask
Right click on the rotated layer and click “Add Layer Masks…” and select “Full White”. In the layers tab, there is now a white box next to the regular layer preview box. This is like a second layer that determines whether a pixel on the main layer is visible or transparent. Pixels in the white areas will be visible, pixels in black areas will be transparent.
Step 5: Add Noise to the Mask
With the layer mask selected in the layers tab, go “Filters > Render > Noise > Solid Noise”. (Or whichever noise of your choice.) For my 1024×1024 pixels texture, I like setting the scale to 16. Checking the “Tilable” box might help reducing visible seams on the edges of the texture, but with how pixelated it will be I’m not sure if it really matters.
Step 6: Adjust Levels
The default noise will have very few areas that are fully white or fully black, resulting in everything on the layer being at some level of semi-transparent.
With the Layer Mask still selected, go “Colors > Levels”. I never fully learned how everything in this dialog window works, but moving the black triangle and the white triangle sliders under the curve towards the center lets you turn dark grey areas fully black and light grey areas fully white. The values can also be typed into Low Input and High Input fields right below the sliders. I like setting black to 63 and white to 159.
This turns the layer into a pattern of colored splotches and empty spaces, with smooth gradients between them.
Overlaid over the original texture, it’s now still clearly the same texture, but the repeating patterns are gone. This texture will still repeat. But it will repeat every 1024 pixels instead of every 128 pixels and basically unnoticeable.
Step 7 (optional): Add another texture layer and repeat the process
For a forest floor, it looks nice to have some patches of grass or moss among the leaves and branches. So I added a grass texture on top of the other layers and did all the steps above again.
Step 8: Set image to Indexed Colors
This isn’t directly about breaking up repeating patterns, but I have found that a very important final step to getting the classic 90s pixelation look is to change the image from RGB colors to indexed colors by going “Image > Mode > Indexed…”. For textures with relatively uniform colors like all wood furniture or concrete walls, I like going with 16 colors, but for more complex things like this forest floor this might not be enough and 32 colors work much better.
And here we see the result in action. There is still that triangle shape that’s in the original texture file, but now it’s no longer repeating in a regular pattern.
The downside of making ground and wall textures like this instead of using shaders is that the file size for the texture increased by 64 times! And probably would have been a problem for the PlayStation’s memory to handle 30 years ago. But when the default texture size is only 128×128 pixels to begin with, 64 times bigger is still only 1024×1024 pixels, which by today’s standards is still quite small. Even when you’re making a game to run on a 20 year old potato, using three or four of such mega textures really won’t make any difference.
It’s barely half of a megabyte. I think we can afford it.
With the procedures I am using, I can now very easily make buildings in this style of whatever dimensions I want, with multiple floors, and doors and windows I can move around as I wish in a few minutes. All that’s left after dragging and dropping the Blender editor file into Godot is to assign the materials I want to the material slots. And that’s it. All the textures will go where they are supposed to go, all the collision will work.
