We all love FSM. But sometimes we just don't have enough pieces in that style. And they don't quite match up with the RTP. But what if you could make them match yourself? Let's learn how.
I chose FSM as an example on how to make varying tilesets work together, as it is comparingly easy to “befriend” it with RTP tiles and because they have free stuff available on their blog, so this is not just a “buyer friendly” tutorial.
All FSM resources were taking from their blog.
The tips you learn here can be used with other styles as well, of course you will need a to have a common base. You cannot match (at least 99%) 16*16 pixelated tiles with 48*48 drawn tiles.
To see where our trouble begins, I’ll make a quick example map:
We will now first analyse the issues with this map and then proceed to fix it - in both directions.
To find out whether or not you have to fix the contrast of anything, just take your map and throw it into any graphic program. Now, set the saturation to 0.
Now you can spot if there are major contrast differences. In this case, as you can see, there is none. This is important to know, as this is now a value we don’t have to touch.
If I was extremely nitpicky I’d say the FSM bags in the store room and the stone wall in the top room are a little less contrasted, but I don't think it is a critical issue.
If we compare similar items, we can easily spot the main problem. The FSM tiles are generally much less saturated and therefore these two items, no matter how similar they might be, look like they don’t belong next to each other in the same map.
We can see this all around the map, flashy RTP vs the less saturated FSM.
So let's add that to our list:
Color: Saturation difference
There is another parameter that some of you might not think about:
If we zoom in, we can see how the RTP looks kinda pixelated while FSM obviously has more colors. To prove my theory, I am going to use Graphicsgale (a free pixel art program I use) to count the colors of each full B sheet:
Oh wow, what a difference.
So, we look at our checklist:
Color: Saturation difference
Color count: MZ 256 colors, FSM countless colors
We are now going to move the map in both directions and see how it turns out
My first step is to open all the sheets that contain the FSM tiles with Gimp. Then I work through my list.
The contrast is okay and stays untouched.
The saturation needs to go up. That is what i do:
Open the Sheet and add the RTP counterpart in a separate layer. It will help you to bring the two closer together. In my case, I also removed the shadows on the RTP layer so I can better compare the layers on top of each other.
Up the saturation on the FSM Layer until both layers look pretty similar in their saturation.
If you have two items you really want to match, give them a special treatment. The MZ couch on the upper layer is my guide on how to recolor that royal chair so it really matches my reference.
In this case, even after the color matching I felt like while the contrast had not been an overall issue, I wanted to have it fixed to have these items really close.
So I used a color curve to fix the contrast of the chair so that the item really closely matches the couch.
Left: before, right: after
Now there is only one thing left, the color count. There is also a near function in Gimp, that helps us with that:
Here we can enter the color count we need (highest is 256, so for a full set we stick to that) and get the result:
Several issues: There are just not enough colors for the whole set. While some items turned out very nice, some like the table tops just don’t work.
And on top of that, all shadows are full black.
So, we do it step by step:
We duplicate the layer to have one with unaltered shadows.
We don’t need 256 colors in total, just LESS than we had.
So we take one of the layers and divide it into two parts, by making sure, similar colors are on the same layer.
Then I copy that layer with about half the content into an empty image and index that:
The result looks much better.
Repeat with the other half of the layer:
If you still don’t like certain parts of the Images you can use even smaller sections for this process, but usually a dividing in two sets is enough!
So, we bring them back onto the layer they came from by simple copy and paste.
But now we have the problem with transparency.
Take the layer we had, the not indexed one, and colorize it to all white:
Then, create an all black layer and put it behind that layer. Now merge those two.
This is our result. And it is the perfect color mast for our indexed image. What is white in a layer mask will be shown as it is. What is black in a color mask will be shown as fully transparent. And what is grey will be shown as semi-transparent.
What we do now is to copy that layer and paste it into our indexed layer’s layer mask.
And like magic, all shadows work like they did in the original image.
I will now quickly perform the same procedure on the walls and floor on A2 and A4 that were from FSM, but now I don’t need to worry about shadows.
I used the same saturation value, 66 that I had for the B sheet, but as the colors here are very similar anyways and it is a smaller snippet, I reduced the maximum colors. For the floor, as it was just grey, I only indexed the tile.
And now, the difference.
Of course this whole process works the other way around as well!
For the colors, this time, we do the exact opposite:
By lowering the saturation with the FSM tiles as reference we close that gap between the styles. Again I paid special attention to the couch as I wanted that to match the royal chair.
But now we have another problem: The FSM does not have the indexed colors and our tiles look a bit crispy.
To fix that, we create a layer mask the same way we did for the last set. And we copy the layer with the recolored tiles into a new file so we don’t mess with that layer mask in the next step.
And now we do this:
Scale the layer to 1000%, which makes it all blurry
Scale the layer to 10%, which makes it the original size again
The good thing: Our tiles look now more painted
The bad thing: They got blurry edges like here:
To fix that, duplicate the layer and merge it, until you have all semi-transparent parts fully opaque.
Your set looks now about like this. Copy it now back into your original file and apply the layer mask:
And you have a fairly well matched look.
This is the quick and dirty method, for a cleaner result you seperate the tiles and remove the shadows before scaling and re add them later. If you use this method make sure to check the process has not messed up anything on the set, things that are next to each other might have blurred into each other.
Now let me quickly recolor the other tiles as well.
And the result:
So, if you ever need to get fairly similar but not quite the same tiles to match, try to use the checklist and adjust the tiles and you are good to go!
Cliffs are something that can make a huge difference on your maps. I don’t know where you live, but if I look out of my window the landscape is far from being flat and so there are probably parts of your game’s world that could benefit from some height differences for the ground - being it some hills or high mountains.