Auto-Tiles in Tiled : Parallax Mapping made easier

Discussion in 'Non-Maker Specific Tutorials' started by Deldel, Jul 15, 2018.

  1. Deldel

    Deldel Veteran Veteran

    Messages:
    56
    Likes Received:
    80
    First Language:
    French
    Primarily Uses:
    N/A
    Hi!
    This is a short tutorial to show you how to work with RPG Maker's autotiles in Tiled to make pre-rendering mapping easier. If you do not know what Tiled is, it's a program that allows you to create maps with Tilesets (like RPG Maker) but with the added bonus of an unlimited number of layers, unlimited tilesets per map and the possibility to extract multiple PNGs from your map so that you can edit its lighting in photoshop (if you want to) among other things.

    Pre-requesits:
    1. Softwares: a graphic editor (Photoshop, gimp or whatever); Tiled, RPG Maker XP/VX/Ace/MV.
    2. A basic understanding of Tiled mapping: There's an excellent guide right here in these forums! Click here to read it then come back to know more about using auto-tiles with it! :D
    3. A basic understanding of a graphic editor (Photoshop or gimp) : All you need to know is how to create a grid and copy/paste. If you already have the autotiles in Tiled format, there's no need to edit the images.
    4. And that's all!
    Part 1 :Making the autotiles compatibles with Tiled:
    If you have already made -compatile auto tiles, skip to part 2

    This is really easy, and once you know how to do it it will only take a few minutes to transform a VX/XP/MV autotiles to a Tiled one. The hardest part is figuring out where to put each part but I already figured out that for you :p
    I will be working with this set of autotiles from VX Ace:
    [​IMG]
    Outside A2- RPG Maker VX Ace​

    Note the Guides, I advise you to make a grid of 32px with 2 subdivisions. If you are using RMMV, that will be 48px :D
    For this tutorial, we will be transforming the second autotile : The grass -> dirt one.
    Here's the template I made:
    [​IMG] [​IMG]
    Note that the main part of the autotile works perfectly as is! As for the corners, it uses a 2x2 grid. It might sound complicated but simply watch the images and the color coded template. There's nothing complicated here, just moving around parts of the default autotile to make a new one.
    If it's still not clear, don't hesitate to ask questions. I might make a quick video to explain this even more visually.
    End result:
    [​IMG]
    Part 2 : Import to tiled and setup
    First of all, import your Tileset into Tiled. Import it as a 16x16 tileset (or 24x24px for RMMV). This is explained in the basic tutorial so you should know how to do it.
    To make the autotile act like one, click on the 'terrains' icon and click on 'new terrain':
    [​IMG] : Terrain icon
    [​IMG]
    You are now in terrain mode. You should see small blue corners when you hover over your tileset. To set up the tilesets, simply click in this way (it's easier to demonstrate than to explain lol):
    [​IMG] [​IMG]
    Note that I did NOT click on the middle of the corner tiles. Truth be told, the grass tiles in the middle is not necessary at all, but I thought the Tileset looked prettier with it ahah.
    And now ... You're done! It was that easy :D

    Here's how it works in real time:
    [​IMG]
    You might notice that the path on the left is slightly larger. That is because by default, Tiled uses the whole autotile to draw (yes, the whole 64x64px). To draw a smaller path (RM's default 32px) simply hold CTRL while drawing the paths :D

    Also, to avoid weird terrains collisions, follow this simple advices:
    • Create a new layer when you want to use an autotile.
    • Put all your autotiles in the same tileset (Like Rpg maker does), this advice is from Tiled's documentation. I did work with multiple autotiles tilesets and never had any problem, but I'm saying this anyway in case it causes a problem for you :D
    And here are some of my own Tileset for RMMV transformed for Tiled, so you have a better idea:
    [​IMG]
    Voilà! I hope you find this useful ♥
    DelDel
     
    Last edited: Jul 15, 2018
    #1
  2. Quanee

    Quanee Veteran Veteran

    Messages:
    63
    Likes Received:
    7
    First Language:
    Polish
    Primarily Uses:
    RMMV
    Hey man, thanks for the tutorial, this is exactly what I've been looking for. The thing is, I'm having an issue doing this in RPGMV. I import my tileset as a 24x24 and pick up one frame as a terrain, draw the edges with blue circles as yourself (identically to the video), yet when I try drawing anything on the map with the tileset, I get something like the pic attachment below, care to help? Thanks in advance. 1.jpg 2.jpg
     
    #2
    Deldel likes this.
  3. Deldel

    Deldel Veteran Veteran

    Messages:
    56
    Likes Received:
    80
    First Language:
    French
    Primarily Uses:
    N/A
    Hi! Glad you liked it ^-^
    For your problem, the map should use a 24x24grid too ;)
     
    #3
    Quanee likes this.
  4. Quanee

    Quanee Veteran Veteran

    Messages:
    63
    Likes Received:
    7
    First Language:
    Polish
    Primarily Uses:
    RMMV
    Oh yeah, that helped in one case, although, I'm still struggling to get the desired effect. I've made some examples on square shapes to show what I'm achieving + the current settings, any ideas? 1.jpg 2.jpg
     
    #4
  5. Deldel

    Deldel Veteran Veteran

    Messages:
    56
    Likes Received:
    80
    First Language:
    French
    Primarily Uses:
    N/A
    Well, in your autotiles, you don't seem to have the good corner tiles. They are all just dirt, which they shouldn't (it should be a square of grass in the inside and the dirt in the outside like this:)
    [​IMG]
    In other words, your autotile isn't Tiled-compatible yet.
    This tutorial is, you can say, about making this particular corner tiles from the default RMMV Autotile, please read the first part carefully and follow along :D
    This diagram sum's it up:
    [​IMG]
     
    Last edited: Aug 7, 2018
    #5
  6. Quanee

    Quanee Veteran Veteran

    Messages:
    63
    Likes Received:
    7
    First Language:
    Polish
    Primarily Uses:
    RMMV
    Ah yeah, I get it now. I'd have to customize them a bit to make it work then. Thanks a lot ^^
     
    #6
  7. HintonR

    HintonR Veteran Veteran

    Messages:
    169
    Likes Received:
    17
    First Language:
    English
    Thank you for this. :)
     
    #7
  8. Finnuval

    Finnuval World (his)story builder and barrel of ideas Veteran

    Messages:
    1,160
    Likes Received:
    3,221
    First Language:
    Dutch
    Primarily Uses:
    RMMV
    This will be helpfull :)
     
    #8
  9. Tea's Jams

    Tea's Jams I'm human Veteran

    Messages:
    703
    Likes Received:
    1,830
    First Language:
    English
    Primarily Uses:
    RMMV
    Thank you for this, it was very helpful : )
     
    #9

Share This Page