How to make a ceramic tile floor material

Wow! I didn’t know the engine had an official material function to handle this! I did go through the trouble of making a very intricate shader to solving this problem, though. The difference is my solution uses textures and nearest neighbor filtering while Epic’s solution uses procedural methods. Procedural methods can expand near-infinitely with precise detail and do not require hardly any memory, but they can become very expensive. My solution would be to use a noise texture to shift the UVs of the ceramic texture along perfect squares and mask the seams with a grout mask.

Make a noise map in Photoshop. Each pixel should be a different color. Ideally, the red and green channels should be different. Import into the engine either as an uncompressed map (vector displacement compression settings), and under the filtering options, choose Nearest. Next, make a mask, normal map, and displacement map for a single tile, or a set of tiles. The mask should cover the grout. Make all the textures you want to use seamless. In your material, what you want to do is lerp between the tile color and grout color. Then, add the noise map (masked RG) to a standard texture coordinate and plug that into the UVs of your ceramic texture. The ceramic texture will distort along the pixels of the noise map. Resize it so the grout can mask the seams. You can make the grout whatever color or texture you want. If you wanted to take this to the extreme, constant bias scale the noise map to -1:1 as if it was a normal map, then multiply it by a random “seed” value to get the most bang for your buck.

I did make a material solution to handling this problem on the Marketplace. It supports everything from tessellation and parallax occlusion to mobile-ready materials. Check it out!