#tilesheets

[emeraldcatears]

Making a Grass Autotile (part 3)

It's time to see how the tiles look in the game.

The first thing to determine is where to put them. I made a grass tile and a dirt path that are intended to be ground autotiles so those should be put in the game as part of the A2 block - the second group of the A tab.

The full image for this needs to be 768x576 pixels in size. I'll go ahead and open a new picture for this step.

The RPG Maker assets standards page shows how this is meant to be laid out.

These can be further adjusted in the database to be designated field or area type. If I'm reading this correctly this can determine how they interact with other tiles in the A2 portion of the tileset.

If Block A is "Field" then the transparent parts of the second and fourth tiles will autofill with the first and third tiles respectively. Otherwise, these designations seem to refer to how the tiles stack on the layers when mapping with auto-layering.

I believe "Field" is outdated and changed to "World" type in the most current MZ version I have.

Since World Type seems to be used for, well, overworld maps I'll go ahead and just make this Area Type and lay the tiles out without worrying about how the transparencies fill in like I would if I used World.

In short all that is to say I'll just paste my two tiles in next to eachother in the first two slots.

They look so lonely!

The beauty of things here is that I don't need a full set of tiles to start testing how they look in-game. I just have to have the ones I've made so far and can always save over this with a larger set later.

I'll go ahead and save this as Custom A2 and put it into the project.

Simply go to wherever you've got the project you're adding a your tiles to saved and open the img folder and find the tilesets to add your own. Make sure it's a PNG file.

Then open RPG Maker and open the project you saved the new tiles into and open the Database.

From here go to the tilesets button and the available sets appear. In this case I'll create a new set rather than just adding mine into an existing one.

At the bottom of the screen I can make room for a new set by changing the maximum and increasing it as needed.

Then find where you want to put the tilesheet. In this case I want it in A2 (Ground) so I select the image from the dropdown. Instead of appearing as the full image I made it displays the two tiles as just their representative pieces (the 48x48 section in the top left of the six-tile pattern that makes an autotile).

I honestly don't need to do much else at this point since this is just about putting them into the game to see how they look, but this is also the part where things like passability and terrain tags are set. They don't matter at this stage of the learnalong, though. I could also put other tilesheets in teh A1-E slots but I'm not worried about that at the moment.

Next I go to a map (in this case MAP001) and select my custom set for the tileset.

From there I can just draw the tiles I made into patterns the way I would the default assets!

Now, that took a while. While I know part of the time came from pausing to explain each step for the sake of the learnalong and that I'll get faster with drawing tiles with practice, it is important to take time to consider how long an original tileset takes to put together.

In other words, it takes hours upon hours to make a workable set of original tiles. If that's something you find doable then this post is also an appreciation of the time and effort that goes into it! It's "simple" in theory but it takes time and making them look good is a skill honed by practice. To everyone who puts the effort in: seriously, you all rock.

If you're not the type to put your own set together there are loads of other options for both free-to-use and paid tilesets made by others. Please appreciate the work put into each and every one of them and credit them as you use them.

[mioudew]

HOW TO EDIT SPOUSE ROOMS

Modding the spouse rooms

This isn't a tutorial explaining the basic xnb graphics editing, Read this really great Tutorial by @strawberrymark HERE. {you just need basic xnb grahics editing knowlege}

i'm using the following mods for an example: • お茶Mi's Classy Victorian set inspired by eemie (Me) • Hojichas' Wallpaper and Floor • Classy new interior by eemie

DISCLAIMERS: • editing the “townInterior” tilesheet affect some of the other textures in the game. • if your using textures that isn't your, DO NOT post it!! keep it for your personal use ONLY...or share privately."

BACKUP YOUR FILES

1. alright let get started~!!! Unpack the following requirement files • townInterior • Optional Tilesheets of your choice (ex: furniture, walls and floors, craftables, etc.) First take a screenshot of your spouses room (or look one up on the internet) i'll be using Harvey's room as an example, this also work with modded spouse rooms like HERE & HERE

2. Okay now here's the very time consuming part...

after unpacking the "townInterior" tilesheet + optionals, you will need a software that has a transparent background (ex: photoshop, gimp, paint tool sai, paint.net, etc.). i'll be using paint tool sai for this tutorial. i circle the textures in red so you can see me locating each sprite in the tilesheet. and then you can recolor the texture until your heart content~!

{Photoshop has a grid which can be very useful with tilesheet editing, {16 x 16 grid} but if you don't have photoshop just eyeball it}

3. if your having trouble locating the textures in the tilesheet you can use tIDE (i'm not so experience tIDE, so you will have to play around with the software for a bit) Download tIDE HERE & Thread after downloading and installing tIDE, unpack the "spouseRooms.xnb" & "townInterior.xnb" and place the .pngs in a folder on your desktop for fast access (name it whatever you want) then open "spouseRooms.tbin" with tIDE.

okay let's say i can't find the stool in the tilesheet, hover over the stool in tIDE and you will see a number underneath (but you have to be on the right layer to see it) a. the stool is located in the "Buildings" layer b. hover your mouse over the texture c. the stool Idx number: 1179 d. look for the Idx 1179 in the Tile Picker "indoor" tilesheet

4. Once your done editing the tilesheet, it's time to test it. Pack the "townInterior" and place it into your Content & Maps folder, now open your game. 

Sorry this tutorial was so long, I Hope this helps~!!

[emeraldcatears]

Making a Grass Autotile (part two)

There's a reason that I stacked the grass from last time into a rectangle, and that is to make it an autotile. Instead of just a single tile, this tile will go into the "A2" tilesheet (for ground tiles) and basically work like a brush instead of like a stamp the way a regular tile does. This is because the program reads this 96x144 rectangle not as six 48x48 pieces but as a group of 24x24 mini-tiles that interact with each other in specific ways when placed next to each other or next to a different group of tiles.

The RPG Maker website has links to their own tutorials that explain this way better than I can, but this is a learnalong so I'm going to paraphrase as I make another tile to go with this one that better demonstrates the principle. I just think it helps me to learn if I can also explain it back to the void.

The way RPG Maker MZ reads the whole autotile causes it to think of the tile in pieces. The top two 48x48 blocks are a "representative" piece and the inner corners. The representative tile that in the upper left displays in the program so the user can see what tile they're working with. It's basically the four corners of the base tile if you think of the base as made of four mini-tiles.

Below that are the four other tiles that the program knows to read as the middle, edges, and corners. You may notice that the middle "tile" is actually the original tile but with the four mini-tiles inverted (that is to say the top right of the original tile is the bottom left of the center of the lower set and so on). The program will know how to loop them as per the link explaining autotiles I included a two paragraphs back.

To better demonstrate how the edges and corners work I'll make a dirt path through the grass.

I begin by making a repeating dirt tile using the same cutting half off and moving it to the opposite side method I used for the grass.

Then I made a grid of four of them and created a border around the edges and erased everything outside that border. I copied the remaining group onto a copy of a grid of four grass tiles so the amount of space between the dirt border and the ends of the tiles were even on all four sides.

As long as the border parts stay within 24 pixels of the outside edges the edits I make to them will only effect the mini-tiles that make up the edges without interfering with the repeating pattern made by the middle 48x48 square.

The straight lined border looks unnatural, but it's just a guideline. I'll edit it with more grass clumps to make the real border. Again, something better than Paint will have grid functions but I'm just going to separate out the mini-tiles from the center to show how this works.

Now I'll just edit the borders so the grass overlaps the dirt. As I do this I want to copy and paste the edges to make sure they still loop nicely - here I've got an example with a 48 pixel tall section pasted next to itself but I also check that the top and bottom of that section work when swapped for each other as mini-tiles (not shown in the above sample).

Once I've worked my way around the outside I have 16 mini-tiles of dirt path altogether. MZ will draw the edges with the outside blocks and continuous dirt with the middle four.

Remember how I said the "representative" tile was just the four corner mini-tiles when you thought about it? Yep All I have to do to put that tile together is put the four mini-corners together. All that's left to make is the inner corners.

At this point the inner corners are easy. I'll rearrange the edge tiles I've already made next to the plain dirt tile so I can be sure the corners loop well.

The inner corners are where the tile attaches to the sides, so when I put my dirt in the middle I want to make sure the sides are attached the way MZ would connect them.

Remember we want the initial dirt tile in the middle - not the center of the path we made - to make sure it patterns well.

Then just draw in the borders to match up with the exit paths!

Once all the inner corners are bordered with grass it's just a matter of copying that and pasting it into the remaining corner of the autotile.

Join us next time to see how we get this from a bunch of pixels in MS Paint to actual tiles in an RPG Maker game!

[emeraldcatears]

Making a Grass Autotile (part 1)

While RPG Maker gives you some tiles to play with, I find that really understanding how they work works best if you also know how to make your own. That and, well, I actually like making custom tiles. It takes a while - especially to make a whole set - but I just lose track of time while doing it and it helps me de-stress.

I won't claim to be good at it, mind you, but this is a learnalong so I'll go ahead and explore my process.

I'm using MS Paint. Yep. The basic art program that comes with Windows. There are a lot of tools in more sophisticated art programs that make this faster or easier, but for the sake of this example I want to show that you don't have to know anything more complicated than Paint to make an autotile that works in RPG Maker.

First I pick some greens since I'm making some grass.

This way I have a consistent set of colors to work with to make the tile. I'm no color expert and I'm sure someone experienced in that area would be better at explaining how to pick a good pallet. I just picked some that I thought looked nice together without being overly saturated.

Since RPG Maker MZ uses 48x48 tiles the next step is to make a square.

And I'm done!

Okay, not really. I could actually make a tile that's just a single color and save the details that make it look like jagged, growing grass for the parts where it borders other tiles if I wanted, though. For a simpler style that might be ideal - this is just the stuff your player walks on after all. It shouldn't look so busy as to be distracting. Variation could be done via decorative tiles like flowers added on top the base grass.

But I'm not leaving it here. I might experiment with a simpler style later but this is a learnalong so I'll make it more interesting.

I like to make an asterisk shape of grass. Here I used the middle green for the shape and highlighted the tips with the lighter greens. I added some dark green under the lower edges as shadows.

I also only made a few in the center of the tile. None of these touch the edges. That's because to make sure it loops nicely...

... I cut the tile in half and move the right side to become the left and vice-versa. If I were to copy this tile and paste it next to itself on either the right or left side, the edges would line up perfectly to recreate the first clumps.

Since I know it repeats horizontally I can fill the middle in with more clumps of grass.

And from there it's a matter of repeating the cut-and-paste process with the top and bottom halves to make a tile that loops vertically.

Huh. That bare patch actually kind of looks like part of the grass has been worn down from foot travel. I'll keep this in mind if I want to make a path like this sometime later.

For now...

More filling up the middle.

I want to do one more switcharoo of the left and right sides to make sure those last bare bits repeat correctly.

And once that last part is nice and clumpy...

I know it loops with itself, but I'll go ahead and place copies of this 48*48 tile next to each other so I have three tiles vertically and two horizontally. If I just wanted this patch on it's own I'd be done, but to make it an autotile I need the arrangement of six.

One last thing...

After letting it sit for a bit I decided the initial greens I picked blended together almost too much. I recolored the tile with a bit more contrast between the light and dark shades.

Again, that can be done in Paint if you'd prefer not using a fancier art program. While the tools available in a more sophisticated program can get the job done in a number of more efficient ways I do want to show that Paint can recolor things too. And I don't mean using the fill bucket on each of the different pixels.

Normally, Color 1 is the color of your brush and Color 2 is the color you erase with. But if you hold down the right mouse button while moving the eraser tool it’ll replace any Color 1 pixels with the second color. In the example above I’ve started replacing the lightest green with my new set’s lightest green.

While I do actually have a complete autotile with just this one tile in a group of six of itself, to really show why this is an autotile and not just, ya know, a tile, I'll have to make something with clear corners.

Join me later for a path.

[blabberf]

Hey everyone, happy new year! admung and I are working hard on the game, sorry for not posting anything in forever! Here's a bit of what I'm currently working on. I'm redoing the tiles to be a little more atmospheric and interesting. Meanwhile, admung works on cool things like path prediction, slow motion, and music!