How Autotiles Work?

Discussion in 'Social Media Announcements' started by Touchfuzzy, May 22, 2018.

  1. Touchfuzzy

    Touchfuzzy Rantagonist Staff Member Lead Eagle

    Messages:
    6,289
    Likes Received:
    5,258
    Location:
    Athens, GA, USA
    First Language:
    English
    Primarily Uses:
    RMMV
    I haven't used this section in a while, but it is time to go back to using it. Whenever we have a new blog post, I'll post the link in this subforum for you to talk about it!

    This time, we have "How Autotiles Work?" a tutorial that explains how the editor creates the finished tile from component parts when using autotiles!

    A lot of people have trouble with making autotiles correctly, and I had written an old post about this, but it was really time to update it to MV. What problems do you still have with autotiles!

    (Also, apologies for the late posting of the discussion thread, but I was in the middle of a flight when the blog post went live yesterday).
     
    #1
  2. Nightblade50

    Nightblade50 Developer of "Delta Origins" Veteran

    Messages:
    1,959
    Likes Received:
    4,062
    Location:
    USA
    First Language:
    English, French
    Primarily Uses:
    RMVXA
    Awesome Touch! When making tilesets, I could imagine that autotiles would be the biggest snag. Thanks for making this! :kaojoy:
     
    #2
  3. Mrs_Allykat

    Mrs_Allykat Failsauce Veteran

    Messages:
    406
    Likes Received:
    1,879
    Location:
    Dixie Land
    First Language:
    English
    Primarily Uses:
    RMMV
    Thanks, I was looking for information so I could cobble together different tile sets for specific projects. No matter how great a tile-sheet is, it's not perfect for every project. Thanks for posting this, I now have a blog to read!
     
    #3
    Nightblade50 and Touchfuzzy like this.
  4. evmaster

    evmaster Think Outside the Box Veteran

    Messages:
    428
    Likes Received:
    704
    First Language:
    English
    Primarily Uses:
    RMMV
    I'm lost at the mini tiles. I can't pinpoint the correlation. I understand that the colored squares are in their respective tile corners.

    What I do not understand is how to draw your own tiles to where "This means for each top red piece, the right edge has to match to every top green piece left edge with matching features. for instance, this 24×24 tile piece"
     
    #4
    starlight dream likes this.
  5. Sharm

    Sharm Pixel Tile Artist Veteran

    Messages:
    12,619
    Likes Received:
    10,300
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    N/A
    It's saying that the red colors have to match up with the green ones along the edge, like how the picture on a puzzle piece matches. It's just that there are multiple pieces that the edges have to match up with. That's the part that makes autotiles hard.
     
    #5
    evmaster and starlight dream like this.
  6. Andar

    Andar Veteran Veteran

    Messages:
    28,007
    Likes Received:
    6,330
    Location:
    Germany
    First Language:
    German
    Primarily Uses:
    RMMV
    @evmaster
    Here's an example if that helps you understand it better:

    Imagine you want to draw a line over the tile, at a height of pixel 10.
    In the final tile several other quartertiles can be used to continue that line, so they all have to be able to connect to the dots at pixelcoordinate 10.
    One of those quarters might turn the line up, another down, but no matter what they all need to continue the line begun on that quartertile.
     
    #6
    evmaster and starlight dream like this.
  7. evmaster

    evmaster Think Outside the Box Veteran

    Messages:
    428
    Likes Received:
    704
    First Language:
    English
    Primarily Uses:
    RMMV
    Thanks Andar for trying. Though I'm still having trouble understanding. Is there a way to mirror or flip horizontally to create these 24px auto tiles? I think I may try to work with an auto tile today just to see if the light bulb will go in I play with it.

    Edit: I think I need a visual.

    Edit2: Edited my above sentence to add 24px
     
    Last edited: May 24, 2018
    #7
  8. RPGMakerWeb

    RPGMakerWeb Admin Staff Member Veteran

    Messages:
    66
    Likes Received:
    385
    First Language:
    RPG Maker
    Primarily Uses:
    RMMV
    The article on this next Sunday will probably help you!
     
    #8
  9. Andar

    Andar Veteran Veteran

    Messages:
    28,007
    Likes Received:
    6,330
    Location:
    Germany
    First Language:
    German
    Primarily Uses:
    RMMV
    @evmaster
    Go to the third picture in the blogpost and check the red quarter top left of the big block. There is one such line as I described, the border between the two parts.
    When using that part, the engine automatically uses an other quarter to the right of it that continues that border - but because maps are different, the engine can't know in advance if this border will then continue to the right, or turn down, or turn up.
    However, all tiles that can possibly be placed there have the green marker. So all quarter tiles with a green quarter need to fit that border from the red quarter.
    Because if any of the green quarters does not fit that border of all red quarters, then the autotile combinations will partially break.

    Unfortunately, some of that confusion is not yours but due to a mistake.
    @Touchfuzzy at least one of the quarters in the blog picture has the wrong color. In the top area the quarters with the inner edges have red and green wrong (and possible others, I haven't checked every Position)
     
    #9
    evmaster likes this.
  10. Sharm

    Sharm Pixel Tile Artist Veteran

    Messages:
    12,619
    Likes Received:
    10,300
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    N/A
    Yeah, there is a way to do it with flipping, but it's not necessary and tends to look bad. Hmm, maybe I can walk you through one way to make an autotile that's easy. First start off with a tile that repeats seamlessly with itself. 32x32 for Ace, 48x48 for MV. Place that tile in a 4 tile square but keep the original one around somewhere outside of this for use later. If you have a program that can do a grid turn it on (at the size 16x16 for Ace, 24x24 for MV). If you don't, you can just count and keep it in mind, but it is harder (GIMP is free!). Draw an edge around your tiles, staying within the smaller squares for all the edges, and erasing what's outside. Now take the first tile that you kept for later and place it somewhere off to the side so it lines up with the grid. Copy a full tile of the top left of your autotile (the one with the edges). It'll be 32x32 or 48x48 depending. Paste it at the top of the tile and the left side so it's lined up. Draw your edge and cut out the top left corner so that it matches up, making sure to only change the top left and not stray over. Delete the pasted tiles on the top and left. Now copy the top right of your autotile and put it onto the top and right of that same tile, and do the same thing with the top left corner. As you can see, we're making that inner corner tile. Repeat the process to get all four corners then cut and paste the completed tile on the top of your autotile, aligned with the left edge. Now you need to draw in something to fill in that top left tile position, the one that isn't actually used when drawing the tiles in the engine. You can put pretty much anything in there, but traditionally it's got a small spot of the autotile. Take the tips of each corner of your 4 tile square, just the smaller 16x16 or 24x24 sections, and place them in their own smaller square at the top. Done!
     
    #10
    evmaster likes this.
  11. evmaster

    evmaster Think Outside the Box Veteran

    Messages:
    428
    Likes Received:
    704
    First Language:
    English
    Primarily Uses:
    RMMV
    I got a test example that maybe you could help explain? I really appreciate all the help you guys are giving me, I have a hard time understanding things sometimes until it finally clicks. ^^;

    So with this tile set I made would the black lines be copy from the 4 corners into the top right tile corner? Right now it is just a green box and I have not added the black corners.

    Does the top right piece need to be edited to make the pattern continuous, correct?

    Edit: @ Sharm, I'll get back to you and try that out.

    Edit2: I tried what you said Sharm but I don't think I get it still.

    Edit 3: I tried following you tutorial and here is what I did. I use Photoshop btw.

    I made a purple square that is 48px

    I made 4 copies of the 48px square to make a 96px square. I turned on a 24px grid.

    I began to get lost here. What smaller squares? The 24px ones?? I drew an edge inside the 96px square as show in my attachment.

    I assume this is the tile found above of the 96px tileset sitting on the top right and I thought I read that the top left is for show??? I move the first tile I made, the purple square that is 48p and place it on the top right of the 96px.

    I was completely lost here. I sincerely apologize.

    I know you just tried real hard and I am reading it over. I tried to make a tile set way back for VX ace and gave up. Now I am using MV and I still don't understand.

    I'm trying to make a connection where what you draw lines up in the auto tile. How does one draw in the 96px box and ensure that it will auto tile correctly? I think it has something to do with how you line it up or maybe it has to do with that top right corner. I just don't know.

    Edit: I keep adding edits and more to my sentences. I really want to understand this and make my own tile sets. I really appreciate everyone's help.

    Edit: I guess I need to know the importance of the 96px and the tile above it that is 48. Not the display tile but the 48 tile and the 96 tile. Like is the 48 tile the one I need to worry about the most when designing the 96px tile?
     

    Attached Files:

    Last edited: May 25, 2018
    #11
  12. Touchfuzzy

    Touchfuzzy Rantagonist Staff Member Lead Eagle

    Messages:
    6,289
    Likes Received:
    5,258
    Location:
    Athens, GA, USA
    First Language:
    English
    Primarily Uses:
    RMMV
    I am absolutely sure I have the color correct in every corner. Ones marked red are always upper left portions of the combined tile. Ones marked green are always upper right, ones marked yellow are always lower left, ones marked blue are always lower right.

    If there is confusion it is in that it is hard to communicate what I'm trying to explain, and therefore there is confusion over my words, not in the marking on the images.

    Also, seriously, this was more of a technical look. For practical purposes, the tutorial that I'm releasing on this Sunday should show people how to make an autotile that works 100% of the time by walking them through making one step by step rather than just trying to explain how it works. It even has animated gifs and everything.
     
    #12
  13. Sharm

    Sharm Pixel Tile Artist Veteran

    Messages:
    12,619
    Likes Received:
    10,300
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    N/A
    Sorry, I guess that explanation didn't help. I should really make a video.
     
    #13
  14. evmaster

    evmaster Think Outside the Box Veteran

    Messages:
    428
    Likes Received:
    704
    First Language:
    English
    Primarily Uses:
    RMMV
    Don't be sorry! I am really happy you are trying to help me. I will continue to read over and wait Sunday for the next part before I ask more questions. Thanks!
     
    #14
    hatchetgirl likes this.
  15. Touchfuzzy

    Touchfuzzy Rantagonist Staff Member Lead Eagle

    Messages:
    6,289
    Likes Received:
    5,258
    Location:
    Athens, GA, USA
    First Language:
    English
    Primarily Uses:
    RMMV
    Full.gif

    Here is a preview of tutorial I'm putting up tomorrow. This gif explains the steps I use to make perfect autotiles every time. The tutorial will break it down into individual steps and explain it.

    @evmaster
     
    #15
  16. evmaster

    evmaster Think Outside the Box Veteran

    Messages:
    428
    Likes Received:
    704
    First Language:
    English
    Primarily Uses:
    RMMV
    Is there a tutorial on how to make a base tile by any chance? I'm not sure where to look. I'm trying to make one with flipping sides horizontally and vertically but I would really appreciate some tips. I understand that it needs to auto tile but I'm not quite sure how to make one.
     
    #16
  17. Sharm

    Sharm Pixel Tile Artist Veteran

    Messages:
    12,619
    Likes Received:
    10,300
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    N/A
    The absolute easiest way is to use a graphics program that has some method of canvas wrapping or whatever it's called in the program (it's different for each one). That way you're just drawing a tile and you can see as you draw how it tiles and the brush strokes go across the edge and show on the other side. With pixel art there are lots of options, my favorite is Pyxel Edit (plus I have some templates for it in the Useful Development Tools section that makes autotiles extremely easy). It's not free, but it's cheap and I consider it a must have if you're making a pixel art tileset. For non-pixel I recommend Krita, it's free and it's got canvas wrapping. I haven't found a better option for non-pixel for some reason, I have no clue why this sort of thing isn't more common. People have been making seamless tiles for ages, you'd think there'd be tools for it. There are other methods people have used for ages because they got used to not using canvas wrap I guess. I don't know why it's taking so long to let go, it's a super awkward and extra work. I can teach you those if you want but really, it's not worth it.
     
    #17
    evmaster likes this.
  18. evmaster

    evmaster Think Outside the Box Veteran

    Messages:
    428
    Likes Received:
    704
    First Language:
    English
    Primarily Uses:
    RMMV
    @Sharm If you had any tips on how to do it with Photoshop I would be most grateful! Thank you for sharing!
     
    #18
  19. Sharm

    Sharm Pixel Tile Artist Veteran

    Messages:
    12,619
    Likes Received:
    10,300
    Location:
    USA
    First Language:
    English
    Primarily Uses:
    N/A
    If you search "creating a seamless pattern in photoshop" or something like it you'll find loads of tutorials, but basically you draw a tile, avoiding drawing anything on the edges, run the offset filter to move the edges into the middle, draw them in, offset again just in case you missed something and do the whole thing again if you need to add or tweak something. It's not a great method, you have to double check how well it's tiling a lot, especially if you're new at it, since it's very easy to accidentally make implied lines or have odd clumps or something that you won't see unless it's tiled.
     
    #19
    evmaster likes this.
  20. evmaster

    evmaster Think Outside the Box Veteran

    Messages:
    428
    Likes Received:
    704
    First Language:
    English
    Primarily Uses:
    RMMV
    Thank you Sharm!
     
    #20

Share This Page