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

Indrah

Megane Berserker
Regular
Joined
Mar 5, 2012
Messages
2,080
Reaction score
2,088
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.

xrXYy.png



8CcsK.png

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:

djUkU.png
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.

OTrR5.png



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.

DC9me.png

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:

3oYQZ.png

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.

tcVqr.png

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:

E9VWd.png



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

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




Cfvxh.png

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.

0ljrc.png

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.

NyBG0.png

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.

QuxSo.png

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:

9ywlq.png



kByGF.png

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 bastard!

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

Before: [with default RTP tiles]




LCtxZ.png



After: [with new edited tiles]




U1EQz.png

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:

SolarGale

Learning
Regular
Joined
Jun 8, 2012
Messages
479
Reaction score
37
First Language
English
Primarily Uses
Excellent guide that really does help to bring the tileset editing concepts together. Good organisation and explanations, great work Indrah! :3
 

T.Bit

Labyrinth Explorer
Regular
Joined
Jun 1, 2012
Messages
721
Reaction score
115
First Language
English
Primarily Uses
RMMV
It's amazing what a layer function in an art program allows you to do. Nice tutorial Indrah!
 

TempestSilver

Wiscapalian you figure it out heehee
Member
Joined
Oct 6, 2012
Messages
12
Reaction score
0
First Language
English
Primarily Uses
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
 

Slayer

Villager
Member
Joined
Jan 21, 2013
Messages
25
Reaction score
0
First Language
Portugues (BR)
Primarily Uses
Thanks for sharing this.

It gonna help me a lot.

Does this work for Icon/Iconset too?
 

Indrah

Megane Berserker
Regular
Joined
Mar 5, 2012
Messages
2,080
Reaction score
2,088
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).
 

Indrah

Megane Berserker
Regular
Joined
Mar 5, 2012
Messages
2,080
Reaction score
2,088
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).
 

Titanhex

Do-It-All
Regular
Joined
Jan 3, 2013
Messages
577
Reaction score
224
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:

24913029.png


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:

baka

Villager
Member
Joined
Jan 22, 2013
Messages
22
Reaction score
1
First Language
English
Primarily Uses
Amazing,

The clumping and Recolouring is going to help me a lot :D !
 

Zack

Perverted King of Demons
Regular
Joined
Aug 17, 2012
Messages
296
Reaction score
56
First Language
English
Primarily Uses
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.
 

Indrah

Megane Berserker
Regular
Joined
Mar 5, 2012
Messages
2,080
Reaction score
2,088
First Language
Spanish
Primarily Uses
RMMV
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.
....? I'm sorry, I have absolutely no idea of what you mean. What little white spots?
 

Zack

Perverted King of Demons
Regular
Joined
Aug 17, 2012
Messages
296
Reaction score
56
First Language
English
Primarily Uses
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.
 

Indrah

Megane Berserker
Regular
Joined
Mar 5, 2012
Messages
2,080
Reaction score
2,088
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.
 

Zack

Perverted King of Demons
Regular
Joined
Aug 17, 2012
Messages
296
Reaction score
56
First Language
English
Primarily Uses
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:

Dark_Metamorphosis

What a horrible night to have a curse.
Regular
Joined
Nov 23, 2012
Messages
2,192
Reaction score
382
First Language
Swedish
Primarily Uses
I've been using gimp; although I don't think that I've set an alpha layer. I'll go try that right now.
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:

Tigersong

Furry Fellow
Regular
Joined
Oct 22, 2012
Messages
457
Reaction score
46
First Language
English
Primarily Uses
Quick query- how does one save in the .png format instead of exporting?
 

Indrah

Megane Berserker
Regular
Joined
Mar 5, 2012
Messages
2,080
Reaction score
2,088
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).
 

Latest Threads

Latest Profile Posts

Gears Of Phantasm Act I & II, on Steam!
store.steampowered.com/app/1810220
Followhttps://twitter.com/ShellPhantom
Contact Me:phantasygears@gmail.com
finally got this scripted right lol... I was running into a few issues like getting the event to play when all enemies were ko'd, actors going in and out of their victory poses, etc... still need to tweak a bit tho.
Which version should I get? 2000, 2003, XP, VX, VX Ace, or MV. I'm a beginner and have no coding knowledge and also I wanna be able to add voices.
I'm just gonna remove the Dark Spells from my game. They wouldn't be fighting Gods or Angels. So why have it?

Forum statistics

Threads
134,919
Messages
1,251,925
Members
177,759
Latest member
StarboundRose
Top