Indrah

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

60 posts in this topic

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!

Edited by Indrah
servantb7, Zack, Alkorri and 31 others like this

Share this post


Link to post
Share on other sites

Excellent guide that really does help to bring the tileset editing concepts together. Good organisation and explanations, great work Indrah! :3

Share this post


Link to post
Share on other sites

It's amazing what a layer function in an art program allows you to do. Nice tutorial Indrah!

Share this post


Link to post
Share on other sites

Thanks for sharing, Indrah! I'm sure this will help a lot of developers who want to make their tiles a little more unique. :)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Thanks for sharing this.

It gonna help me a lot.

 

Does this work for Icon/Iconset too?

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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!

Edited by Titanhex
mbncd likes this

Share this post


Link to post
Share on other sites

Amazing,

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

 

post-3552-0-83619100-1361639136_thumb.pn

 

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.

Edited by Frosty Zack
mbncd, servantb7 and whitesphere like this

Share this post


Link to post
Share on other sites

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!

Edited by Dark_Metamorphosis
mbncd likes this

Share this post


Link to post
Share on other sites

Quick query- how does one save in the .png format instead of exporting?

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

I need some tips on clumping, especially on making trees/other objects to tile. How do I make sure the objects line up so they tile properly? Thanks

Share this post


Link to post
Share on other sites

What do you mean by lining up? Staying intside the tile grid? -.-? Just set the grid to visible within the image editor...?

Well generally always remember the player is on tile high, so if you have large bunches of tiles clumbed up thinkg how the player will interact with them: totally impassable, all below him, all above him, part of it impassable, etc.

 

Hoenstly I don't quite get what you mean, you may want to explain further.

Share this post


Link to post
Share on other sites

The trees. The block of trees that can tile into a huge forest? How do I make sure I put them right so when I line them up they don't get screwed up? Is it just a matter of choping them in half and place them on opposite ends of the grid?

Share this post


Link to post
Share on other sites

I...do you mean the B tile trees? I don't understand. They already come with the tiles for mixing them up, you just have to make sure you repeat the tile properly. Can you show a screenshot of what you mean?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.