tiling texture image

How to Create Tiling Textures

Knowing how to create tiling textures is a must-have skill for video game environment artists. I’ve created a video that reveals texture techniques I learned when working in the game industry.

Environment artists build worlds.

Most of the art on-screen in a game is environment art. Characters get all the attention, but with out compelling environments, games would be empty shells. The setting can make or break the success of a game.

But there is a cost.

Environment artists are focused on a single menacing foe during the entire project. Character artists might start working earlier at the beginning of a title, but the level artists are the last artists to leave a project at the end of crunch-time, and they are working extremely hard to get things ready to ship.

What causes this problem? Who is the artist constantly fighting?

Framerate.

Environments take up most of the gameplay screen. And that means environments have a lot of stuff that needs to be rendered – all the time. This means that the artist has to constantly monitor performance, in the form of polygons, textures, and atomics (different objects) on screen at once.

Why tile?

Tiling is one answer to the problem of performance. and framerate. Many environments have surface textures that can be easily repeated – roads, sidewalks, hallways, floors. By repeating these textures, the artist can cover more of the scene with less texture resources.

That means that texture tiling is extremely important to making level art – any prospective environment artist must know how to do this!

The process:

There all call-outs, but here are some things to watch for in the video:

  1. Photoshop’s Filter>Other>Offset, to test and adjust the tiling of the image.
  2. Copy/pasting chunks of rock to fix seams, instead of just clone-brushing big areas.
  3. Adjusting the overall values and hues of the final image so that nothing ‘stands out’ when tiled.
  4. Using High Pass and Levels to create a black and white height map,
  5. Then using that map to displace geometry in Mudbox for normal map creation.

How to create tiling textures – the video!

This is the final texture:

And here’s the high-resolution texture I ended up with: (click it to download!)
How to Create Tiling Textures 1

And here are progress shots:

Below is the original texture (which is available on a bunch of wallpaper and free stock photo sites, search for ‘cracked mud’):
How to Create Tiling Textures 2.jpg

And here it is repeated, we see it doesn’t tile seamlessly.
How to Create Tiling Textures 3.jpg

This my texture tiling; it works ok… But look how the contrast between light and dark areas catches the eye – the tile is seamless, but we can still detect that the texture is repeating.
How to Create Tiling Textures 4.jpg

By using multiply and soft light layers, I can even out the dark/light contrast and create a more even tile.
How to Create Tiling Textures 5.jpg

Use the texture on whatever you like, but send me an email if you make something cool with it!

Leave a Reply