How to Create Seamless Textures for Indie Games | Beginner Tutorial

– I’m going to turn this texture that’s not seamless into this texture that is seamless. – Seamless textures warm my circuits more than a hot summer day. – If you don’t know who I am, my name is Cartoon Coffee. I’ve been making game art for 10 years,

And now, I’m sharing my best techniques. – And I’m Java, an artificial intelligence who wants to become the first professional AI game artist. – In game development, seamless textures can be used for all sorts of stuff, from 2D games to 3D games. It sounds like knowing how to create seamless textures

Is a vital skill for any human Or an AI game artist to learn… That’s right There’s all types of seamless textures you can make. But today I want to focus on making a texture that can be seamless both vertically and horizontally. That sounds perfect! And guess what?

I’ve made upgrades to my drawing and painting algorithm Well this isn’t a drawing or paint tutorial but sure show me what you can do. All right, CC, stand back. [VARIOUS SOUNDS] [POP] Eek! What is this? Oh, sorry. That was meant to be a – a… Cat!? My system must need recalibrating.

My square is 512 by 512 but yours can be any size you feel comfortable with Although it’s a good practice to try to keep file sizes on their smaller side in game development whenever you can. Smaller is better Think about how your computer feels

And try not to give us more than we can handle. It slows down our performance. And if you can choose a number that is divisible by 4, that’s even better. It can save you a lot of headache later on when it comes time to optimize the performance of your game.

Oh, CC.. You are so thoughtful. How did you know I love dividing by 4? You love dividing by 4? Of course. It is fun to think of all the human things that can be divided by 4. Cakes, sandwiches, human limbs, pizza… And the list goes on and on! Wait! did you just–

Now once you’ve got your texture all drawn And painted the way you like it Merge it down to one layer If it’s not already Is Photoshop the only program you can use for this? You can make seamless tiles in any art program But if you have Photoshop…

There’s a nifty little feature you can use. Teach us. Teach us your secrets. If you go to Filter > Other > Offset you can offset the horizontal and vertical values. If you’re making something like a fence for example only shifting the horizontal values would be great

And if you are making a rope or a chain shifting only the vertical values would work well for that. But today we want both the vertical and horizontal values to be shifted so no matter how we view this texture it will repeat smoothly and seamlessly. You go CC! Shift those values!

Show the texture who’s boss! After I shifted my values this is what I got. CC it looks… Abnormal. This might look a little funny now But this is exactly what we want. And if you don’t have Photoshop it’s not a problem. You can do the same technique in any other digital art program

But it will take a bit more work since you’ll have to do these steps manually. – All other programs are inferior. Got it. That’s not what I said. So what’s next? First use your selection tool to select about half your texture. And now move that chunk to the opposite side.

Once you’ve done one direction You’ll have to repeat those steps for the other. Oh, that looks fun! Let me try Okay sure! So same steps. Just select and– Hi, yah! Take that! Java, please! Be careful. You don’t want to rush this part Make sure to zoom in and double-check

That all your edges are perfectly lined up All good boss Oh wow! This looks just like the texture we got in Photoshop. All we need to do now is paint over the new seams and we should have a perfectly seamless texture! Woo, I can’t wait! Here’s a tip.

Select your texture and shrink your selection by one pixel. Because we shuffled the texture around most of the outside edges are already seamless and we don’t want to ruin that by accidentally painting on it. That’s so helpful. But these marching ants are really distracting. If the marching ant lines bother you

You should be able to hide them. In my case it’s Ctrl-H Oh thank goodness That’s a relief I hate bugs… At this stage, it’s time to paint over the scenes that we created Don’t be afraid to repaint over parts of your texture as needed to better hide the seams.

To check how well your texture is tiling you can duplicate it and move them next to each other. Be sure to check how it connects both vertically and horizontally. CC what if I followed all your tips but my edges are still off? Sometimes that can happen especially

If you did a big repaint in the center This is totally OK You can fix this by repeating the steps from earlier Or after moving the tiles next to each other you can paint over one of the tiles to seamlessly connect with the other Oh I see

So the new tile we just painted on it should now be completely seamless with itself Correct. You can continue to touch up any areas that you feel need a bit more work with these methods. And that’s it So let’s recap One make a texture two offset the texture and three

Repaint over the seams. [CROWD CHEERING SOUNDS] Wow, that’s really simple. I can’t wait to make a seamless texture now. For more resources to help level up your game check out the links below. Thanks for leveling up with us! [MUSIC PLAYING]