RTP Roof Editing for Dummies (with Photoshop CS)

Discussion in 'RPG Maker MV Tutorials' started by arcthemonkey, Nov 22, 2015.

  1. arcthemonkey

    arcthemonkey Veteran Veteran

    Messages:
    83
    Likes Received:
    143
    Location:
    Oregon
    First Language:
    Dank Memes
    Hey everyone, Arcthemonkey here!

    I wanted to share the most important part of my method for creating my roof tiles with everyone. I know that for some of you RPG Maker master out of there, this may seem silly and basic, but there are plenty among us to whom this is all wizardry. Not to say I'm not actually a wizard, of course.

    This is RPG Maker MV specific, but the general concepts apply to any tile-based game maker, really.

    To make this tutorial, I used Adobe Photoshop CC. I have no idea how some of these steps will translate into other pieces of software, but the general concepts remain true. People following this tutorial are expected to have at least a general knowledge of Photoshop, including handling things like selections and layers.

    Feel free to link to this page site if you want to make fun of me or whatever, but don't rehost this tutorial without my permission.

    Let's get started:

    Because we want to make sure our roof tiles actually tile correctly, we will have trouble just pulling the autotiles out to work with. RMMV like to chop autotiles up in a really depressing way, and the autotiles are only 2x2. We need an eve, a middle, and a ridge for our gables, so we need at least 3x3. How do we do this? I just drew 3x3 roof tile squares on a blank map and dumped the map as a png using the Orange Mapshots plugin, you can find here: http://forums.rpgmakerweb.com/index.php?/topic/49711-orange-mapshot/

    Fortunately, I've already done this step, and you can download it here: http://imgur.com/K0Yi7kd

    It is, of course, possible to put these together on your own in photoshop, but this is faster, easier, and gives a perfect representation of how these autotiles actually fit together in real use. These are also useful for using in TileD or wherever when doing parallax mapping. From the image you just downloaded, select one of the roofs (in this example we are using the red roof) and paste it in to a new image. It doesn't really matter how big your new image is as long as we have some space to work with - we are just using it as a workspace. I just use the "default photoshop" size, which is more than large enough for our purposes.

    Before we do anything else, though, let's set up our grid. Having an appropriately sized grid is crucial for making sure our tiles line up correctly to be broken apart for MV and tile correctly. Go to Edit -> Preferences -> Grids, Guides & Slices... to set this up.

    Here are the settings I use:

    [​IMG]

    RPG Maker MV uses 48x48 tiles by default, so I am setting the grid size to 48 pixels. I have it set to 4 subdivisions (which chops each major grid square into 4 rows and 4 columns of minor grid squares) because that it going to help later on if we only want to take a small piece of a tile.

    Next we want to turn our grid on, and turn on snapping. Go to View -> Show and make sure there is a check-mark next to grid. If not, click it. Next, under the View menu, make sure there is a check mark next to Snap, and a check next to Grid in View -> Snap to... This makes it so when you do things like make a selection or move something around, Photoshop really wants it to correspond to our 48x48 grid. This will make things much easier.

    Now, on to the dirty work!

    Select the roof tile square we pasted in earlier, and drag it so that it snaps to the grid:

    [​IMG]

    Photoshop is kind of weird about how it displays the grid, so sometimes it can look like things aren't aligned when they really are. In this screenshot, you can see a tiny gap between the top row and the grid line. If you zoom in, though, it goes away.

    (Note that I hid the background layer pretty much the second I pasted the tiles in.)

    With the square still selected, we are going to rotate it by going to Edit -> Transform -> Rotate 90o Clockwise. If we did it right, the product should still be aligned to the grid:

    [​IMG]

    Okay, now we are going to do something weird. We're going to select the top three tiles... and move them so they are over the middle three. Like this:

    [​IMG]

    "What is this madness?!" you may be crying out, at this point, but remember - the only reason we started with a 3x3 roof instead of the 2x2 autotile is because MV did the work of stitching the tiles together in a way that tiles well for us. However, we can cut out the middle tiles it made us because we are about to make our own. Just trust me on this. If we don't do this, then our roof won't tile well - and we don't actually lose anything.

    Now that we have a 2x3 roof, we are going to select each column of 2 one at a time, and skew them. Select the two left-most 48x48 tiles, and then go to Edit -> Transform -> Skew. Once in Skew mode, we want to grab the little draggy bar on the left side of our selection:

    [​IMG]

    We are going to drag this bar downwards until the bottom left-most pixel touches the first major grid-line below it, and the slopes are even. When you hit the right spot, Photoshop will helpfully point out that your skew will create a -45o angle. This is exactly what we want.

    [​IMG]

    Again, if that number hits -45 then you should be golden, but if it's not showing up - our goal is for that bottom left pixel to touch the major grid-line, and for the angle it creates to have a perfect 1-1 step pattern.

    Now, this next step is very important! Before we apply the skew we just set up, we need to jump up to our Skew settings toolbar and make sure our Interpolation is set to "Nearest Neighbor":

    [​IMG]

    The other options will all give us a smoothed, messed-around-with result. We absolutely don't want this! This will keep our tiles from ever lining up with the untouched RTP tiles, and will make our tiles look blurry and out of place. We want this to be pixel freakin' perfect here, and picking Nearest Neighbor gets us there.

    Once we have Nearest Neighbor selected, click that check-mark up there. If we did everything right, the block of pixels we had selected won't even change from the preview. Sweet. Next, Lather/Rinse/Repeat that process on the other two columns, until you get this hot mess:

    [​IMG]

    Next we need to line these up so they form one great big super parallelogram. Before we do this, note that there is a 1-pixel gap between the top right pixels and the edge of the grid-line, but the bottom left pixels are flush. It is my personal preference that these tiles be flush with the top, so I like to scootch them up by one pixel before I move on.

    [​IMG]

    [​IMG]

    It is not possible to get tile-able, 45o skewed versions of these tiles that are flush on the top and bottom. I tried. The gap needs to be there, one way or another, in order for them to fit together. Being flush with the bottom instead of the top also works just fine.You just need to make sure you are consistent throughout. Again, personal preference. Anyway, here's what we get:

    [​IMG]

    Let's stop and think about what we have now - we have three tiles each for the eave, middle, and ridge - a top, a tile-able middle, and a bottom. To make the other side, copy our new tiles and paste them right back in. Then go to Edit -> Transform -> Flip Horizontal, and align the new piece to the old. to make a chevron:

    [​IMG]

    Make sure they are perfectly aligned, and sweet! From a super simple, quick and dirty perspective, we are done! We've 18 slanted roof tiles, and we're ready to go!

    Right?

    No way. The RPG Maker MV RTP is rendered such that the position of the sun is overhead and slightly to the left (and a towards the screen). Like it's 1:30 PM or something. We need to honor that with our roof tiles, otherwise they look flat instead of looking like they are sloping towards the ground. We do that by adjusting the brightness on either side, and by adding shadows!

    Before we start mucking around with our tiles, though, let's merge the layers we have so far (we don't need anything in separate layers just yet - also, don't merge the background layer. In fact, delete it!), and copy/paste another copy of our roof chevron somewhere in our workspace. It might come in handy to have a fresh copy later when you are making more edits.

    To adjust the lighting, first select the left half of our tiles, and go to Image -> Adjustments -> Brightness/Contrast... I use a brightness value of 75 for the left. 75 brightnesses. Repeat this step on the right half, but this time, use -75.

    [​IMG]

    Presto!

    [​IMG]

    It's beautiful!

    [​IMG]

    Finally, we are going to create a shadow effect under the eave, to give it even more dept. Strictly speaking, this is one step more than you'd normally expect out of RTP tiles, but we are all perfectionists and we like things to look awesome.

    To do this, first we need to make a new layer. Then we are going to select a row of only the top subdivision of our grid, to a width of half of our roof:

    [​IMG]

    Our grid layout and snap settings should make this easy!

    Now go to Select -> Transform Selection. We want to do a -45o vertical skew up on the transform toolbar:

    [​IMG]

    Now click the check-mark icon on the tool bar. You should end up with a funky skewed rectangle like this:

    [​IMG]

    Next, grab your Paint Bucket tool, and fill this selection with pure black set to 50% opacity:

    [​IMG]

    [​IMG]

    Finally, drag this shadow up and line it up with the bottom of the left side of your roof. It should line up perfectly on both sides:

    [​IMG]

    Next, we want add a shadow across the transparent gap at the top. I just use the pencil tool with the size set to 1 for this (and the same color/opacity as before), because I'm a wild card. #CharlieWork

    [​IMG]

    (Note that this step may actually be easier if you temporarily turn off the the snap setting.)

    [​IMG]

    Perfect!

    That is actually the last step as far as this tutorial is concerned. All you need to do now is plop it in a tileset and map away!

    [​IMG]

    That doesn't mean that should be the end for you, though, if you aren't satisfied! Take a look at the roof tileset I've been working on, and you'll see that there is so, so much more you can do:

    [​IMG]

    So go out there and go crazy with it so I don't have to anymore! This is your chance to let your creativity flow and make it your own. It doesn't take much to make a big difference:

    [​IMG]

    So if you can use what I've taught you to make something even better!
     
    #1
    Guiguimu, Blue Symphony, TNID and 7 others like this.
  2. Parallax Panda

    Parallax Panda Got into VxAce ~2014 and never stopped... Veteran

    Messages:
    634
    Likes Received:
    1,001
    Location:
    Fukuoka, Japan
    First Language:
    Swedish
    Primarily Uses:
    VNM
    A little wordy but a great tutorial. Interesting to see your way of doing it! :D
     
    #2
    Guiguimu likes this.

Share This Page