Guide to simple tileset edits [Rearranging, clumping and recoloring]

Discussion in 'RMVX Ace Tutorials' started by Indrah, Jul 21, 2012.

  1. Indrah

    Indrah Megane Berserker Veteran

    Messages:
    2,069
    Likes Received:
    2,004
    Location:
    Spain
    First Language:
    Spanish
    Primarily Uses:
    RMMV
    This is my second tutorial and a bit more technical than the one I did before, so please bear with me if I have a harder time explaining myself.

    Guide to simple tileset edits

    Once upon a time I submitted a mapping tutorial, and towards the end mentioned:

    “Simple edits and recolors: Everyone can do this, and it helps a lot to create ambience. You may find that repeating, for example, the same weeds and flowers in fields over and over across the world gets old. It’s simple enough to recolor the flowers or make a simple cut/paste job to come up with new items. Small objects like flowers and single tile decorations are usually simple to cut and combine.

    There’s also recoloring. The same grassy tiles can become a different map just by changing the colors (making the coloring greyer, more vibrant, a different tone, whatever) same goes for walls and floors.

    So if you ever feel like those trees, caves and stones are looking boring, crack open a graphics editor and mess with the tiles a bit.”

    That said, I rarely see people posting screenshots of edited tilesets that are NOT parallaxes (those usually go hand in hand with editing so no need to mention them here), and there seems to be the fact that some people claim they could not “do that sort of thing”.

    Simple edits can go a long way, and give the dreaded “RTP style” a fresh look if used well.

    Now, what I will describe here is extremely basic. I will not talk about complex editing because frankly, I can’t do it myself so well, nor will I explain how image editors work in detail: there are many tutorials out there and help files to help you out, I will only give basic instructions.

    There are roughly 3 very simple techniques: rearranging, clumping and recoloring.

    -Rearranging is by far the easiest, it simply means moving the tile around in the grid so it has a different position (for example, moving furniture so they line up better with the walls).

    -Clumping is to combine one or more tiles in a pattern so they create a cohesive and visually nice tiles. It’s usually done with plants (for wilderness natural effects) and small items.

    -Recoloring means changing the color of a tile. This can mean changing the color of only one part of the tile or the entire thing (such as the bloom of a flower or the whole plant, leaves and all).

    A few things before we start:

    Basic Knowledge about tilesets:

    -Each tile is 32x32 pixels.

    -One tileset can hold the A1-5 tiles (the base tiles) and the B-E tiles (items, furniture, etc). They can be configured from the Database.

    -The A tiles have their own rules, which I won’t cover here. If you’re unsure of how they work, try to simply replace the default tileset with what you want (water for water, walls for walls, grass for grass, etc).

    -The B, C, D and E tile sheet are 512x512 pixels each, while the A tiles vary in size.

    -The very first tile (upper left corner) in the B tile sheet is the “nothing” tile and must be empty and with a *star* passability.

    Quick A tiles reminder:

    -A1 are animated autoriles (usually water).

    -A2 are the “ground+ground decoration” autotiles. There is a specific setup to this sheet so be careful with it.

    -A3 are “outside view buildings” tiles.

    -A4 are “wall+ceiling” tiles. The ceilings here can be used in any shape, unlike the A3 roofs.

    -A5 are the “ground” tiles. These are NOT autotiles. Unlike the rest of the A tiles, these can be configured with 4 directional passability.

    Now, for this you will need an image editing program.

    I will be using gimp because it’s the one I have and am used to, but any program that has a grid feature will do.

    Preparing the program:

    -Open the image editing program (I’ll be using Gimp).

    -Either edit an existing tilese sheet or create a new image of 512*512 pixels (for the B-E tiles, remember A tiles have different sizes).

    -Configure the image to show a 32*32 pixel grid with a snap to grid function.

    [​IMG]



    [​IMG]

    With this configuration, anything we try to do in the editor will try to snap our selections to the grid, meaning accidentally getting out of the grid. For detail work like clumping you may want to turn the Snap to Grid off.

    Now, if you’re an absolute novice, take it easy. The toolbox and commands may seem intimidating, but for now we’ll only be using these:

    [​IMG]
    I won’t be fiddling with the A tiles except for recoloring the basic grass, since autotiles require some knowledge and I’m not here to explain that. What we will do is simple: create an edited tileset for a new area.

    I’ll be making a sample map of a shop in a forest so we can illustrate the change from the default to the new edited tileset.

    The very first thing you should think about:

    What are you doing?

    Even if for the purpose of this tutorial I’ll be editing almost all the pieces for the tileset, that doesn’t have to be what you do. Maybe you simply need a few extras or adjustments to an existing tileset, in which case you may want to simply edit a tile sheet directly.

    But let’s say you want to make a thematic tileset. For this tutorial, as I said, we’ll be making a forest area with a small shop, but we will make it all slightly different so you can see all the steps.

    Gather your materials.

    Get all the materials you think you will need beforehand. The default tileset, the custom materials, stuff you found on the forum (don’t forget to credit the creators when you’re done!), anything you feel you will need.

    If you’re doing an entire tileset, copy one of the default sets (Interior/Outside/Dungeon) from A (1 to 5) to B (B to E are all the same, so one will suffice. Rename them to whatever you want. Especially for the A tiles, it’s important to have some reference to work with so you don’t accidentally mess up the autotiles.

    Those will be the final images you will import into the game. I strongly recommend you use another, larger image file to do the editing so you have the space to comfortably manipulate the tiles.

    Ok, now off we go!

    Rearranging

    Extremely easy to do.

    Simply move the tiles around on the grid, always keeping in mind how RM handles passability (that is to say, keep in mind how the player can walk ingame).

    Here’s an extremely easy example that I personally use a lot: boxes, barrels, urns and similar are regular items that can be “stacked” easily and neatly. Arranging them on the grid so you can have columns and positions of them later ingame without tricky mapping using eventing is a definite plus.

    [​IMG]


    Another common usage of rearranging is making furniture match walls and floors better. A common case are the beds: you may have noticed they look pretty bad against the walls no matter what you do.

    If you need reference, take a screenshot of a wall and floor and paste it in another layer aligned to the grid. Move the item you want to rearrange until you’re happy with how it looks. Keep in mind how the character will interact with the object when it comes to passability.

    [​IMG]

    This also goes for small, individual items that are placed a bit awkwardly on the grid and may mismatch if placed with other objects, or you may simply want to have more variety.

    That’s it for rearranging. As you can see, it’s extremely simple as long as you keep in mind the grid and passability.
    Clumping

    This is one of my favourite ways of dealing with wilderness, which is otherwise a royal pain to map for me.

    Clumping is taking one or more types of tile and arranging them in a mix, much like rearranging. You can easily break the ugly grid effect by combining tiles in almost parallax style, so long as you keep in mind how you will configure them later.

    Here are some simple clumps:

    [​IMG]

    While the example shows plants, it works for everything, but keep in mind what you need for your map. It’s easy to go overboard and make 10+ types of clumps for every single item, and you probably won’t be using so many.

    Remember you can make very simple edits by clumping different items.

    [​IMG]

    A nice trick to clumping is to make variants of certain combinations to align to certain positions: for example, making clumps to fill corners or specific shapes that are otherwise awkward to map normally.
    Recoloring

    This one is a bit harder, but still relatively easy with some practice.

    Recoloring items can immediately give old tiles a new look if you do it right, and adds ambience to maps if you follow some kind of pattern or theme.

    Select the tiles you want to recolor and go to:

    [​IMG]



    Hue-Saturation will change the color from the CURRENT SETTING.

    Colorize will will change the entire tile to ONE color with different shades.




    [​IMG]

    Experiment with both options. You will notice that some tiles, having different colors, do not look so good if recolored like this. In these cases you have to isolate the parts of the tiles you want to recolor (I recommend cut-pasting the tile somewhere and cutting/erasing the parts you don’t want), recolor them on their own, and then place them over the old tile.

    [​IMG]

    This may take some time to get used to, but it’s not hard. Items with less colors (wooden furniture, plants, single color tiles) are easier to do.

    Do not go overboard with Lightness and Saturation. Ligthness is especially dangerous, since too dark or too light will probably ruin the tile. Same goes for saturation. Keep in mind you want the tiles to match the rest, not look weird and tacked on.

    [​IMG]

    While recoloring is the trickier of the three methods described here, it is also the best at creating ambience. As you can see, simply changing the tone of the normal, classic grass already makes it look different, not to mention recoloring single items like flowers, books, boxes, etc can create a big variety of items to break the rtp monotony.
    So now that we know the three ways of simple edits we can mix them all to create our tileset. Here we have all we need for our little forest shop. To make things easier on ourselves, we will do the recoloring first, then the rearrangement and clumping.

    [​IMG]

    Now what’s left? Arranging them on your tileset sheets. Keep in mind the sheet size (512*512) and make sure you align the tiles to the grid well.

    Here we added the recolored A2 tiles to an existing Ouside_A2 tile, and created a new B tile:

    [​IMG]



    [​IMG]

    Import the tile sheets and configure the tileset.

    Remember that if the tileset setup is similar to a default one you can save time configuring passabilities by copypasting a tileset and substituting and fixing the new tiles.

    And we’re done! Now to map the lovable!

    Here, have a before and after (if we had tried using the normal exterior and interior tilesets).

    Before: [with default RTP tiles]




    [​IMG]



    After: [with new edited tiles]




    [​IMG]

    Not bad for a quick editing job, is it?

    This was done in a very shallow way, so putting even a little time into the process makes a difference. Above all, it breaks the “I’ve seen the rtp tiles seven thousand times already” feeling.

    There are many more ways to edit tiles out there, but I’m not going to get into that.

    Cut-pasting, changing size and angle; I recommend you experiment a bit to see what works and what doesn’t. Learning to use the image editors is a big factor to editing, so be patient and start small.

    I hope this helped and encouraged people to try their hand at simple edits!
     
    Last edited by a moderator: Jul 21, 2012
    #1
  2. SolarGale

    SolarGale Learning Veteran

    Messages:
    479
    Likes Received:
    37
    Location:
    United Kingdom
    First Language:
    English
    Excellent guide that really does help to bring the tileset editing concepts together. Good organisation and explanations, great work Indrah! :3
     
    #2
  3. T.Bit

    T.Bit Labyrinth Explorer Veteran

    Messages:
    722
    Likes Received:
    115
    Location:
    Texas
    First Language:
    English
    Primarily Uses:
    RMMV
    It's amazing what a layer function in an art program allows you to do. Nice tutorial Indrah!
     
    #3
  4. Lunarea

    Lunarea Artist Global Mod

    Messages:
    8,908
    Likes Received:
    7,820
    Thanks for sharing, Indrah! I'm sure this will help a lot of developers who want to make their tiles a little more unique. :)
     
    #4
  5. TempestSilver

    TempestSilver Wiscapalian you figure it out heehee Member

    Messages:
    12
    Likes Received:
    0
    Location:
    No where
    First Language:
    English
    You saved my hide! My close friend is making me tiles and you had the sheet size, the way to do it and EVERYTHING. :D I am having her make the tiles and then I will arrange them as needed on the a tile template. :3
     
    #5
  6. Paladin-Cleric of Awesome

    Paladin-Cleric of Awesome Writer Veteran

    Messages:
    1,558
    Likes Received:
    1,018
    Location:
    Ireland
    First Language:
    English
    Primarily Uses:
    N/A
    Yup really helped me. Finally found something I can do well. Lol.
     
    #6
  7. TreeTopOcelot

    TreeTopOcelot Member+ Member

    Messages:
    185
    Likes Received:
    19
    Location:
    Saint Louis, Missouri
    First Language:
    English
    Outstanding guide! Thanks! :D
     
    #7
  8. Slayer

    Slayer Villager Member

    Messages:
    25
    Likes Received:
    0
    First Language:
    Portugues (BR)
    Thanks for sharing this.

    It gonna help me a lot.

    Does this work for Icon/Iconset too?
     
    #8
  9. Indrah

    Indrah Megane Berserker Veteran

    Messages:
    2,069
    Likes Received:
    2,004
    Location:
    Spain
    First Language:
    Spanish
    Primarily Uses:
    RMMV
    Yes and no. Icons have a different grid size (24*24 I think?) and they're harder to do "rough" edits for because they're pixel art. You can still try though. (Recolors and small manual edits are possible, yes).
     
    #9
  10. Indrah

    Indrah Megane Berserker Veteran

    Messages:
    2,069
    Likes Received:
    2,004
    Location:
    Spain
    First Language:
    Spanish
    Primarily Uses:
    RMMV
    Yes and no. Icons have a different grid size (24*24 I think?) and they're harder to do "rough" edits for because they're pixel art. You can still try though. (Recolors and small manual edits are possible, yes).
     
    #10
  11. Titanhex

    Titanhex Do-It-All Veteran

    Messages:
    577
    Likes Received:
    212
    Location:
    In my office.
    First Language:
    English
    Primarily Uses:
    N/A
    Amazing tutorial. Glad someone revived it. I couldn't have made it better myself. I believe this is something all game makers should read after grabbing GIMP and I'll be sure to direct graphic drawing questions here.

    I wanted to suggest, and I hope I'm not overstepping my bounds, adding the Contrast/Brightness tool to the tutorial.

    Brightness in particular has been useful for me. It's the difference between the pictures below:

    [​IMG]

    As you can see under L/D (Light & Dark) there's no discrimination on what receives a whiter or blacker tint. Whereas B/C (Brightness Contrast) works together alongside color and saturation to lighten and darken smartly.

    This is a feature in GIMP too I believe, and I think it works the same. This feature has saved my ass more than once by cutting work!
     
    Last edited by a moderator: Jan 25, 2013
    #11
    mbncd likes this.
  12. baka

    baka Villager Member

    Messages:
    22
    Likes Received:
    1
    First Language:
    English
    Amazing,

    The clumping and Recolouring is going to help me a lot :D !
     
    #12
  13. Zack

    Zack Perverted King of Demons Veteran

    Messages:
    296
    Likes Received:
    56
    Location:
    Right behind you; breathing down your neck.
    First Language:
    English
    I've spent a long time creating a really nice tileset for the main antagonist's castle, but I can't figure out how to make the background invisible without those little white spots by everything in the tileset.
     
    #13
  14. Indrah

    Indrah Megane Berserker Veteran

    Messages:
    2,069
    Likes Received:
    2,004
    Location:
    Spain
    First Language:
    Spanish
    Primarily Uses:
    RMMV
    ....? I'm sorry, I have absolutely no idea of what you mean. What little white spots?
     
    #14
  15. Zack

    Zack Perverted King of Demons Veteran

    Messages:
    296
    Likes Received:
    56
    Location:
    Right behind you; breathing down your neck.
    First Language:
    English
    When I export it and turn it into a png file, I'm left with a white background. I then import the file into my editor and set the white background to transparent. I'm left with little white spots by every item in the tileset and it looks really unsightly. My guess is that I need to avoid the white background, but I don't know how.
     
    #15
  16. Indrah

    Indrah Megane Berserker Veteran

    Messages:
    2,069
    Likes Received:
    2,004
    Location:
    Spain
    First Language:
    Spanish
    Primarily Uses:
    RMMV
    Are you using a semi decent program? I honestly dunno why that is. If you're using a normal graphic edor like gimp or similar, set an alpha layer (transparent background isntead of a color) and save it like that (so it doesn't have a background at all) and import that.

    If you're already saving it in png format, I don't know what else it could be.
     
    #16
  17. Zack

    Zack Perverted King of Demons Veteran

    Messages:
    296
    Likes Received:
    56
    Location:
    Right behind you; breathing down your neck.
    First Language:
    English
    I've been using gimp; although I don't think that I've set an alpha layer. I'll go try that right now.

    EDIT I've worked for a long time, and I've came out with something I love. What do you guys think of it?

    Evil Hand Castle 2.PNG

    I threw the map together in a few minutes; it doesn't contain all my edits either. I edited everything in the map by myself.

    This tutorial is really great. It was easy to follow and It helped me learn how to use gimp effectively in fifteen minutes. I'm

    never going to have to scour the internet for graphics again. I'm so liking and following. If more people read this tutorial,

    we probably wouldn't have to endure the hideous evils of the RTP as much.
     
    Last edited by a moderator: Feb 24, 2013
    #17
  18. Dark_Metamorphosis

    Dark_Metamorphosis What a horrible night to have a curse. Veteran

    Messages:
    2,194
    Likes Received:
    382
    Location:
    Sweden
    First Language:
    Swedish
    When you create a new project, make sure to set the background as transparent instead of background. After that just insert the tileset like you normally would.

    If the tileset isn't transparent to start with I can see some trouble with small color parts remaining after using the magic tool. Just make sure that you add a alpha layer and then zoom in and erase the small parts with the magic tool. That usually works like a charm.

    Also, I love this tutorial! I'm gonna make some recolored tilesets now to break the repetitive tiles of my game. I find it hard to keep everything consistent while still not making it repetitive.. Also gonna try the clumping, and rework some of my maps :)

    This tutorial has also helped me in the process of making my own charsets! The grid works really well for that, and I've had times where I have placed the actors outside of the grid by accident before. This tutorial will prevent that aswell, so now I use it for that too, thanks alot!
     
    Last edited by a moderator: Feb 23, 2013
    #18
    mbncd likes this.
  19. Tigersong

    Tigersong Furry Fellow Veteran

    Messages:
    451
    Likes Received:
    44
    First Language:
    English
    Quick query- how does one save in the .png format instead of exporting?
     
    #19
  20. Indrah

    Indrah Megane Berserker Veteran

    Messages:
    2,069
    Likes Received:
    2,004
    Location:
    Spain
    First Language:
    Spanish
    Primarily Uses:
    RMMV
    They are unrelated. Png is a format, exporting is a function.

    If you are referring to when Gimp pops up with the exporting when saving a file option:

    Png format does not use separate layers, so when you select png format it will need to combine all layers for the result picture. When it asks you if you want to export as a png, just say yes.

    (Basically it's warning you that it's going to save the picture and lose the separate layers).
     
    #20

Share This Page