In this tutorial you will learn…|
How to combine tilesets
How to use Paint Shop Pro for this
How to use Photoshop for this
Hello there, and welcome to my graphic resources tutorial on extending tilesets! I know that (at the time of writing, anyway) this tutorial is part of a set
that hasn't been finished yet, but I have had a request for a tutorial along these lines, and I think that it will be helpful to lots of people - it's something
that is people frequently want to know how to do. So, without more from me, let's get going!
Note: To demonstrate this tutorial, I will be using Paint Shop Pro 8, but for those of you who like to use Photoshop or the Gimp or any other graphic
editing program, the instructions should be the same (I'll try and convert important menu selections for you) - you'll just have to put up with the PSP
screenshots! The only thing I would not advise using is MSPaint. It can just about be done, but it's a bit fiddly!
Right! Start your graphic editing program of choice, and open the file of the tileset that you want to extend. If this is a tileset that is directly from the RTP
(run-time package: RPG Maker's preset pack of graphic resources), then they will be in the following folder: C:/Common Files/Enterbrain/RGSS/Standard/Graphics/Tilesets
folder (if you installed the RTP in the default position). If you want to use a downloaded tileset, then open that instead. I am going to use the RTP's
01-Grassland tileset as an example for this tutorial (just to be original!), and I am going to add another tileset and an autotile to this tileset.
Once you've opened that tileset, and
before you do anything else, go to the file menu, and choose Save As… like so:
Now, if you're using an RTP tileset, save it somewhere you'll remember, so you can import it later. I have a complete folder called Resources in My Documents
that I keep all my custom RPG Maker graphics in. This is a good idea; it keeps all your graphics organised - and you don't forget where they are!
We're doing this so that we preserve the original files; original RTP files are needed for the default tilesets
in the game and it's a pain if you have to continually replace them.
Once we've done that, we need to do one more thing to the graphic before we start extending it. Firstly, the graphic-savvy among you might notice that this
.png graphic has been saved in 256 colours, which is why the palette is all blocky (it looks like this in PSP…)
The even more graphic-savvy amongst you will also realise that this will cause us problems later on, especially if we are adding tilesets that don't share a similar
palette. So, the solution to our problem? We need to convert the image to 16 million colours. To do this in PSP, go to
Image > Increase Color Depth > 16 Million Colors, or press Ctrl + Shift + 0. (In Photoshop, go to Image > Mode > RGB Color). You won't see any immediate change
in the image, but the palette will become smoother, and now we won't have any problems with introducing new colours. Here's the process on PSP…
Okay, now we have a tileset that is ready to extend. So, open up your second tileset and, if this is an RTP tileset too, convert this to 16 million colours as
above. It's not necessary, but it helps with continuity. Here is a picture of the second tileset that I'm using (it's the RTP's 15-ForestTown01)…
Oh no, I hear you cry; what's going wrong with the background colour? Well, this is only for demonstration purposes - but some of you might find that you have
an image with a different transparent colour than the default RTP turquoise-grey. Because of this, I thought I'd add in some instructions on how to
make it work.
However, don't despair about that yet; we've got to do a couple of things before we worry about the background colour. Firstly, on your second image, we need
to find out its height. You can do this however you want - PSP and Photoshop both display it in various nooks and crannies of the screen - but the easiest way
to find it out (in PSP) is to go Image > Image Information (in older versions, View > Image Information, and in Photoshop: Image > Image Size… -
read the bottom box where it says height). You'll get something like this box…
You'll be able to see where the dimensions are. The width of a tileset is always 256, but it's the height that we need to look at. This will always be a multiple
of 32, because the tiles in a tileset are all 32 pixels high. This tileset is 1056 pixels high.
Now we know the height, we can add it to the bottom of the first tileset. To do this, we need to make the canvas of the first image bigger. In PSP, you can
do this by going to Image > Canvas Size… (Photoshop: Image > Canvas Size…) In either program, you'll get a box with the original dimensions
written at the top and boxes where you can insert the new dimensions. bviously we're going to leave the width as 256, but we're going to change the height to
the original height added to the height of the second image. My first image is 576 pixels high, so the new height will be 1056 + 576, which is 1632 pixels.
My Canvas Size box looks like this before I confirm the changes…
You can see here that the number of pixels being added to the bottom is 1056, which is the size of our second image. Okay? Now, before we press OK, there's one
thing to check. You see the square of arrow buttons at the bottom of the box? We need to make sure that our picture is kept to the top of the canvas - so we're
going to press on the top-middle arrow. This will ensure that the extra space is added below the existing image. Got it? (Photoshop has these arrows too, handily -
so make sure you click on the top-middle one). Our new image looks something like this…
You can see where the new tileset will go. Now the important bit - we're going to merge the second tileset into the first one. Go to your second tileset, and
select the whole image. In PSP, this is Selections > Select All (Photoshop: Select > All), or you can just press Ctrl + A in either program. Then, go to Edit >
Copy, or press Ctrl + C to copy the tileset to your clipboard.
Now, this is where the programs have a little difference in the way that they work. I'll go through PSP first, and then Photoshop.
Paint Shop Pro Users
PSP users, there are a couple of ways to make this easier. The first thing to
do is to make sure that the background colour of your palette is a colour not in the tileset - E.g. really bright green, like so…
This will make sure that when you paste your selection onto the first image, it doesn't have any transparent pixels that will leave holes in your tileset. Now,
if you like, you can complete a couple more steps that will make this easier, but you don't have to. If you would like to, I'll quickly go through them now, but
you can skip ahead if you like.
Note: I'm doing this in PSP 8, so sorry for anyone who has an earlier version that doesn't have this feature - don't worry; it's not too important!
Okay. In PSP, make sure that your to-be-extended tileset is the active window, and go to View > Change Grid, Guide and Snap Properties… Now, where it
says Grid: Current Image Settings (at the bottom), change both the
numbers in the boxes to 32. If you want to have the grid always at 32 × 32 pixel spacing, then you can change the numbers in the top box too. Your box will
look something like this…
Press OK, and then go to View > Grid. This will bring up the grid, hopefully in the spacing that we set it as, on all your images. It might be different on your
to-be-extended tileset than the others, but that's okay. Now, one final thing - click on View > Snap to Grid. This will make any selections snap to the grid that
Right - back to the extending! Select your to-be-extended tileset, and go to Edit > Paste > Paste as Transparent Selection (or Ctrl + Shift + E). Your second
tileset should now be
floating on your tileset image, and, if you move it around, should be snapping nicely to your grid. You might like to zoom in a bit to make sure that the corner
lines up properly.
If you didn't use the grid method, then you'll want to make sure that you zoom in and align the image edges properly. I don't usually bother with the grid; I
just line the images up freehand like the following…
You can see how the image will fit. Make sure you align the edges properly! Then right-click to deselect and save your work so far.
This is way easier for you guys. On your second image, the one you want to add to the first tileset, select all and copy it to the clipboard (Ctrl + A, then Ctrl
+ C). Go back to your to-be-extended tileset, and go to Edit > Paste, or Ctrl + V. You can use the Move Tool (first on the toolbar - or just press V on your
keyboard) to move the selection around - and, being the fancy software that it is, Photoshop automatically snaps to pixel boundaries. How easy is that? The top
of your image should now look something like this…
Okay, now for the last bit - the colour change. In PSP, select the Color Replacer tool (you might have to click on the little arrow next to the Color Dropper
Tool to find it). Now, hold down Ctrl and right-click on the colour that you want to replace. The background colour will change to that colour. Hold down
Ctrl again, and left-click on the RTP's default turquoise colour from the original tileset. The foreground colour should now change to that, like so…
Okay, now double-left-click on the area with the background you want to replace. The whole of the background area should change colour, leaving the rest of the
image in tact, like this…
Good, huh? I'm not quite sure how to do this in Photoshop; it always seems to add to the colour rather than completely replace it - sorry about that! Anyway,
when you're done, you can save your image, and you're ready to import it! Open RPG Maker XP and import your new tileset using the materialbase. For more information
on this, see my tutorial on Simple Importing. Bear in mind that your tileset will have to have all its priorities
and passabilities set again, which takes a bit of time. For more information on that, see my Tilesets Advanced
tutorial, which goes through the process of making a tileset ready for use.
And I think that's it for the first part of my extending tilesets tutorial! My next tutorial will be on something similar that I would have put into this tutorial,
but it was too long: putting autotiles on tilesets for plain use. See you there!
:: << Previous Tutorial ::
:: Home ::
:: Next Tutorial >> ::