How to Create Autotiles - Video Series

Here's my 3-part series on creating autotiles! Each video has chapter links in the youtube description so you can skip around.
 
Part 1 covers how autotiles work (see diagram below), the differences between A1-A5, borderlines, counters, etc.
Part 2 shows how to create a standard seamless tile -- skip this if you already know how.
Part 3 shows how to make an autotile! Follow my order and it's dead simple, and you really don't have to worry about whether things will line up! I show some advanced Photoshop tricks to speed up the process, but you can also use simple tools like the eraser.
 










 

 

I have only just started watching this, Tommy, but thanks for some great graphics and a careful explanation of autotiles. (I hope to get through much more of it at lunch!) =]


It was a good idea to break up the concepts, and the choices you made for your graphic - the circle in the middle and the semi-arrow on the sides - really contribute to the clarity of the explanation.


That autotile guide is gonna get in a lot of Google hits, lol.

 

Thank you! If you or anyone else has tips or tricks you use, please post them!  

 

Good basic tutorial. Watched it because I was hoping to learn something new, but I guess it's good that I didn't since I've been making tilesets for a while now. I wish it was as easy to create seamless tiles for anti-aliased styles as it is for pixels but the closest thing I've found is using programs that support wrap around canvas edges like Krita and Painter.


FYI, in Photoshop the subdivision lines are different than the grid lines so you can get that look without using the guidelines. Subdivisions are dotted, grid lines are solid. I have mine set up with a grid line every 32 pixels with 4 subdivisions. That gives me dotted lines for the 16 pixels but solid for the 32. It makes it easier for new images that way.


Lets see, tips and tricks. Hmm. Well, if you're making pixel tiles I cannot recommend Pyxel Edit enough. It is a fantastic program, well worth buying, really cheap for what you get. There's a early version that's available for free if you can't buy things on the internet for some reason. It's buggy and can't do nearly as much as the full version but it is still incredibly useful and highly recommended. I'll post here again later if I can think of any more.

 

Oh, I know, I guess I didn't really explain it in this video because I've talked about it before (in my sprite formatting video I think). I use GuideGuide because it *saves* the guides in the PSD file, and can be any spacing (i.e., not square) -- grids have to be set each time, so it's very annoying if you're working with different spacings. So basically I just leave my grid set to 16px, and enable it if I'm working on autotiles. For everything else, I just hit the GuideGuide presets I have, which will set the guides perfectly for a single 3x4 character, a whole character sheet, etc. (But you're right, I could have skipped the guides and just used a grid with subdivisions for autotiles.)

You're glad you didn't learn anything new, and I'm glad you don't have any major suggestions that would immediately make my video obsolete, haha. So I guess we're both happy.

 

Very interesting tutorials, thanks!

I especially liked the trick in tut3 with the "cross" taken from RPGMaker and imported in Photoshop so you could edit the elbow joints easily.

 

This is a very useful tutorial series.  Thanks.

 

Great tutorial, the resources will come in handy. Just a suggestion for others looking for a free alternative to photoshop.


Try Krita, it's a open-source cross-platform painting tool, it has wrap mode "seamless" painting and canvas rotations, also normal map painting features.