Resizing tiles for MV

Introduction

Hi. This is my first tutorial.

This is a simple guide, and my favorite method to resize tiles and tilesets from 32x32 to 48x48.

This guide can be useless, because I don't know if we will can use 32x32 tilesets in MV with a plugin, but in anycase, this may help if you plan to use only 48x48 tiles.

This may be not the best method, but I think the results are not so bad. And obviously, crafting the tile in 48x48 from scratch (or manually editing) will be always better. ^.^

If you are like me, lazy to re-craft all of your tiles, this guide can help. Check if you like the results of the conversion below:

(please note that these tiles are property of Ayene-chan @ DeviantArt, I'm only showing them here for the purpose of teaching the guide, if you want to use them in your project, make sure you read her terms of use)

Preview

Preview with dark background: https://veuwer.com/i/38e4,38e5,38e6,38e7

To do this, I will teach you with Photoshop. Any version of Photoshop will probably work with this guide, if you don't have Photoshop you can either download a trial version or use another program, however, the automation part of the guide maybe is not easy to reproduce in other programs.

Procedure

Let's start the procedure. The procedure to resize is very simple, it involves logic, math and experience.

The Logic tells me that any image can resize better with perfect numbers like 2x, 4x, 0.5x etc. If you use "Nearest Neighbor (preserve hard edges)" you can have a good result with 3x as well, but not if you want to raise to 1.5x.

The Math tells me the MMC (minimum multiple common) of 32 and 48 is 96, therefore a good approach would be to raise a tile from 32 to 96 then reducing it to 48, but we need to use the correct filters, otherwise the result will look ugly.

The Experience with image manipulation tells me that to raise this type of pixel art from 32 to 96, we should go with a 300% Nearest Neighbor, and after that reducing the result to 50% Bilinear, which is the best filter to shrink images to half their size. Never use Bicubic for this type of art, it won't work.

The process is simply this... set the image to 300% with Nearest Neighbor, then again to 50% with Bilinear filter.

Automating / Batching

Now, I imagine you are lazy like me and don't want to make even that. I understand you, and I have the solution. We will apply a simple automation here with Photoshop. Open up the Actions window in Photoshop (you can find this in the Window menu or through ALT+F9). Now you should create a new action and record the steps of resizing a single file.

Start recording, open any image, go through the steps, save as PNG "as a copy" in a desired folder and close the file (without saving), then stop the recording and it's done. Your action should be something like this:


Alternatively, you can use just one resize (to 300% Nearest Neighbor) then jump to Save for Web, PNG/24 with Bilinear 50%, but for the purposes of simplicity and automation, I recommend the steps above.

To run a batch running through a folder or subfolders, go to File > Automate > Batch, then select the Action you saved, and choose the folder with the image files you want to convert. Below is a screenshot with my own preferences for the batch:


The "Log Errors to File" may be a useful choice if you are like me and want to debug any possible errors later, instead of having your batch interrupted by annoying dialog popups.

Extension - Applying Filters

Other cool trick you may like, is to add a filter before you save your file. This can be also applied to your Action, so you can have two or more Actions with your desired filters/choices.

I recommend two useful filters for you. The Smart Sharpen:

And the Unsharp Mask (highly recommended):

The values in the screenshots above are just my personal preference, feel free to adjust as you prefer.

If you prefer using a filter like these ones, I highly recommend you insert the filter between the two resizes, after the size up to 300% and before the size down to 50%, because the Bilinear filter will reduce it more beautifully for you, and the result can look more natural, without an aggressive sharpening or filter. I recommend you use only one filter, but you may want to use more depending on your needs.

Feel free to ask me anything or to add suggestions ^.^

Thanks for this guide. It really helps a bunch and the results are looking pretty good. 

So many suggestions all over for resizing! Given that I really want some XP graphics in MV (relatively realistic and also giant-sized trees? Yes please!), I keep an eye out for a good way to resize. This qualifies! I also tweaked it a bit and got some good results:

• Resize to 300% using none (GIMP)/nearest neighbor (Photoshop)
• Use the Median filter (Photoshop, settings unsure - lowest that offer a difference?)/Despeckle (GIMP - No checkboxes checked, 1 radius, -1 black level, 256 white level)
• Resize by 50% using Lanczos (GIMP), unknown in Photoshop...

The result was actually rather sharp and clear! I look forward to experimenting further. Thank you for posting this!

Oh, so fast! Thanks a lot for this tutorial, it will surely help a lot of people :)

I have a question, would it do the job for converting ace characters to mv size?

This process is aimed for tiles/tilesets. When you mean character, if you are saying about the pixel art 32x32 sprites then yes, this method can help. If you are talking about faces of the characters, then no, waifu2x would be better for faces.

Thanks for posting this. I am not sure how much of this process I can reproduce in GIMP, but it looks great. Here are Ayene's Tiles mixed in with MV. I think it came out great.

I have a problem with my resized tiles, I did as you said and everything is going out quite smoothly except this :

if you look at the bunch of trees on the right it makes some kind of horrible squares. How can I fix that?

if you look at the bunch of trees on the right it makes some kind of horrible squares. How can I fix that?

That was expected because of the size of the trees. If you look at my guide it uses a multiple minimum common (MMC) formula to reach a better resize, and that tree is totally different size from 32x32. In the case of that tree in particular, you would need to treat it differently, either trying another method (for ex. Waifu2x) or another formula to resize. For bigger sprites than 32p, it will be more complicated to hidden the visual defects of the resize.Edit: if you don't find a better method for the tree, try to use bicubic (for enlargement) for the size up step, and check if it looks better.

Thanks for the tip! I'll try that tomorrow (getting late there) and I'll tell you how it goes :)

This seems to be the method Yanfly used for resizing his VX Ace icons. :) So I guess icon-wise all of our problems are solved. Just take Avery's icons and do the same to them.

I tried this method with icons, but my icons got blurry..

What is the size of the icons? 32x32? If yes = This method maintains a good sharpness if you use the nearest neighbor + bilinear methods like I wrote. If you want even more sharpness you can apply one of those two filters mentioned between the two resizes steps.

Also, if you can provide an icon example or screenshot, I can better assist you.

Well I think the main problem is that icons went from 24x24 (ACE) to 32x32 (Right? MV). I think the MMC is 96, so I did resize 24x24 by 400%, but then when I downsize it, you can't get it to 32 pixels properly because 33.3% is as close as you can get.. so it's not nicely divided by 50%. It looks off, anyway.

Ah then the formula would need to be other, I believe... this guide is only for tiles/tilesets from 32p to 48p...

From 24p to 32p would need another method to better resize. Scaling down to 33.3% will never produce good results because it's not a perfect number.

Edit: If you can provide me one icon or two you want to resize, I can try some tests here on my end.

These icons are from Avery, just so you know. :)


Tried to resize for example, this shirt.

Bilinear reduction step:

Bicubic sharper (for reduction) reduction step:

In this case, if you want a sharper result, I recommend the Bicubic sharper for the reduction step (still using the nearest neighbor for the size up).

You can achieve a similar effect as well if you use a filter like in the first post, either between steps, or after the reduction step.

But to how much did you upscale it, and by how much did you downscale it?

I don't think it make any real difference since the reduction step will be always a non-perfect number, but in my test I made 10x up, then back to 32p (fixed pixel number / not %), using those two methods. You probably can achieve the same thing using 300% or 400% for the step up. Also, don't forget to use the filters from the first post if you want to further adjust the sharpness.

Just try the whole iconset from Avery, Yurixy. :p If it works, we're all very happy!