- Joined
- Jul 8, 2013
- Messages
- 298
- Reaction score
- 346
- First Language
- English
- Primarily Uses
A few weeks ago there was an Indie Game Dev Humble Bundle Sale where they sold a few awesome development tools for $1. I ended up buying the bundle, which included programs like Pyxel Edit and Spriter Pro. I really loved Pyxel Edit's tileset feature, and while I'm making my own game in RPG Maker, I wanted to know how to use Pyxel Edit for autotiles. There were no tutorials out there so I went and figured it out myself!
After much trial and error, this is what I came up with. It might not be perfect but it works for me! This is a very picture heavy tutorial. Hopefully loading these images don't break your computer. I wanted to make a YouTube video for my channel instead, but my husband is watching DragonBall Super in the background, and I wouldn't have been able to record
If you'd rather me make a video for it, I'll try to find time!
So let's get started!
You will need...
- but I will be focusing on MV. I don't believe the format for autotiles is the same for earlier versions of RPG Maker?
We will make...
This dirt tileset! Feel free to use!
You'll be able to use this technique for almost all of the autotiles, however, such as water and walls!
How does this work?
Autotiles are kinda tricky in RPG Maker. It uses a combination of 48x48 with 24x24 to get them to work. I read the documentation on it, and it was still kinda confusing. I only understood it by actually scrutizing the default RTP. Basically, it's like this: (to my understanding)
It's split up into 24x24 tiles instead of 48x48. The top tiles are made up of four 24x24 corner tiles. The 48x48 tile highlighted in blue is the "main" repeating tile. The pink 24x48 and 48x24 tiles are also repeating. And they are all seamless with one another! Crazy!
Looking online, there are lots of ways to get the seamless tiles to look nice. This tutorial is going to use Pyxel Edit specifically.
Before we begin:
I want everyone to know that I am not an artist! I mean, look at that grass up there! So bad! Hahaha. I'm just good at figuring out how programs work. I'm hoping a true artist will be able to view this post, learn something, and then make some awesome tiles!
Another important note - this is only for pixel art! Pyxel Edit won't give you the "painted look" RPG Maker uses without some immense effort on your part. If you make these autotiles, you should devote yourself to making matching pixel tiles. It might look really odd with the default resources otherwise.
Alright let's start!
Open Pyxel Edit and make a new document. Make it 4x4 tiles wide, with 24x24 tiles.
As I mentioned, autotiles use 24x24. The only "real" 48x48 we'll be using is the middle main one (highlighted in blue above)
So now we have our document:
Press TAB! You'll see some dots appear in the corners of your grid.
Then take a look at the "Tiles" window on the right. This is important, we'll be using this window a lot. Click on the first square. This is going to be "Tile 0." Then click on the top left-most square in the document.
Now add a bunch more tiles by clicking the plus sign + in the Tiles window.
Select the 2nd one. This is "Tile 1." Put Tile 1 in the top middle two squares, like this:
Now put the tiles in the rest of the document to look like this:
0 1 1 2
7 8 8 3
7 8 8 3
6 5 5 4
Great! Now let's art. Fill the window with a brown color!
Now find a lighter brown color. I love Pyxel Art for this. Just click your color and then one "shade" lighter in the dialogue box. (You might need to click the arrow to expand the window). Upping the shade this way also warms the hue a bit, which is awesome. No more guesswork!
Now we're going to start adding texture/rocks to our dirt. It's important that at this stage we only add circles to the grid edges.
Notice that your art is being duplicated in the same tiles! I love this program. While you're putting in circles, fill in the edges you see in Tile 8. Then fill it in Tile 3. And so on.
Again, only the edges. This will ensure seamless transitions before we add stuff to the middle tile.
The problem here is that we're using 24x24 pixels, which kinda sucks. We want to take advantage of all the space 48x48 gives us! So when you're done with the edges, make a new layer:
This layer does not use the tiles. This way, we can edit the middle part (blue from above) without it repeating. RPG Maker MV uses 48x48 afterall, not 24x24. So we want to take advantage of that. In this new layer, start adding some new rocks. Make sure these new rocks do not touch the edges which are already seamless. Keep them in the middle 4 squares.
Now let's go back to Layer 0 and finish up the rest.
At one point, go back to Layer 1 and start making the other tiles a little different. For example, here I added some darker brown to a tile so it doesn't look the same as the tile above it. (Again to take advantage of 48x48, not 24x24). Just remember not to touch the edges in this upper layer!
Great! Let's add some shading now! Grab a lighter color from the rock, and start coloring in the edges where the light is hitting.
Beautiful! (Haha they look like potatoes - hopefully yours looks better!) Now we're going to add grass.
When you add grass, make sure it matches whatever grass tiles you're already using! For this tutorial, I just picked a random green.
You could also use the eraser tool to make this area transparent, instead of grass. Really, it's up to you how you want to do this!
Then pick a lighter and a dark color to make it a little more interesting.
We're almost done! Now let's increase our canvas size.
Follow the settings above. We're adding 2 more to the height (to make 6), and making sure to click the bottom pivot point.
When it's been resized, go back over to your Tiles window. Click One of the corners and then put it in the top right corner. Do this for all of them until you've got a square of corners.
Check out your tile. Does it look funny in any way? Fix it! When you edit the tile here, it edits it for all matching tiles. Pretty cool! But make sure it still looks okay for the rest of the image. Here, I fixed part of the rock and some grass, but it was otherwise fine. Pixel art is easy that way.
Alright now let's make our canvas big again. Here I picked some random numbers. Feel free to copy, or go bigger. It doesn't matter too much. Keep the pivot point in the top left.
Now we're going to use the tiles to make a big cross shape in our new space, like this:
Begin to fill in the middle. You'll need to use the selection tool to copy the middle 4 squares of our original dirt on the left. Copy merged (because remember: we're using 2 layers here) and then paste. Drag it over to fit in our new cross. Keep dragging and dropping til it's all filled in.
At one point, you may need to only copy 2 squares to make sure everything matches up. Follow it by ear!
As you can see from the image above, leave the corners! We have to fill those in ourselves.
First make those 4 corners into their own tile.
Then begin drawing them in. I filled mine with the dark brown, then added in the rocks. After that, add the grass corners, and you're done! Make sure you don't edit the other tiles. We're only working with the corners here!
We're done! Hooray! Now let's put it into the main tileset. Simply select the right tile from the Tiles window, then put them into the right 4 squares, like this:
You can also check to see if they're aligned correctly here as well.
After that, export the image, and then add it to a 768x576 document. This is the typical size for an A2 tilesheet. I used Photoshop for this, but you can use any program. Even Pyxel Edit if you want.
Then save it as a PNG and bring it into RPG Maker! Put it as an A2 tile or it might mess up This is what it looks like!
Yay we did it! Good job team
After much trial and error, this is what I came up with. It might not be perfect but it works for me! This is a very picture heavy tutorial. Hopefully loading these images don't break your computer. I wanted to make a YouTube video for my channel instead, but my husband is watching DragonBall Super in the background, and I wouldn't have been able to record
If you'd rather me make a video for it, I'll try to find time!So let's get started!
You will need...
- Pyxel Edit
- RPG Maker VX/Ace/MV
- but I will be focusing on MV. I don't believe the format for autotiles is the same for earlier versions of RPG Maker?
We will make...
This dirt tileset! Feel free to use!
You'll be able to use this technique for almost all of the autotiles, however, such as water and walls!
How does this work?
Autotiles are kinda tricky in RPG Maker. It uses a combination of 48x48 with 24x24 to get them to work. I read the documentation on it, and it was still kinda confusing. I only understood it by actually scrutizing the default RTP. Basically, it's like this: (to my understanding)
It's split up into 24x24 tiles instead of 48x48. The top tiles are made up of four 24x24 corner tiles. The 48x48 tile highlighted in blue is the "main" repeating tile. The pink 24x48 and 48x24 tiles are also repeating. And they are all seamless with one another! Crazy!
Looking online, there are lots of ways to get the seamless tiles to look nice. This tutorial is going to use Pyxel Edit specifically.
Before we begin:
I want everyone to know that I am not an artist! I mean, look at that grass up there! So bad! Hahaha. I'm just good at figuring out how programs work. I'm hoping a true artist will be able to view this post, learn something, and then make some awesome tiles!
Another important note - this is only for pixel art! Pyxel Edit won't give you the "painted look" RPG Maker uses without some immense effort on your part. If you make these autotiles, you should devote yourself to making matching pixel tiles. It might look really odd with the default resources otherwise.
Alright let's start!
Open Pyxel Edit and make a new document. Make it 4x4 tiles wide, with 24x24 tiles.
As I mentioned, autotiles use 24x24. The only "real" 48x48 we'll be using is the middle main one (highlighted in blue above)
So now we have our document:
Press TAB! You'll see some dots appear in the corners of your grid.
Then take a look at the "Tiles" window on the right. This is important, we'll be using this window a lot. Click on the first square. This is going to be "Tile 0." Then click on the top left-most square in the document.
Now add a bunch more tiles by clicking the plus sign + in the Tiles window.
Select the 2nd one. This is "Tile 1." Put Tile 1 in the top middle two squares, like this:
Now put the tiles in the rest of the document to look like this:
0 1 1 2
7 8 8 3
7 8 8 3
6 5 5 4
Great! Now let's art. Fill the window with a brown color!
Now find a lighter brown color. I love Pyxel Art for this. Just click your color and then one "shade" lighter in the dialogue box. (You might need to click the arrow to expand the window). Upping the shade this way also warms the hue a bit, which is awesome. No more guesswork!
Now we're going to start adding texture/rocks to our dirt. It's important that at this stage we only add circles to the grid edges.
Notice that your art is being duplicated in the same tiles! I love this program. While you're putting in circles, fill in the edges you see in Tile 8. Then fill it in Tile 3. And so on.
Again, only the edges. This will ensure seamless transitions before we add stuff to the middle tile.
The problem here is that we're using 24x24 pixels, which kinda sucks. We want to take advantage of all the space 48x48 gives us! So when you're done with the edges, make a new layer:
This layer does not use the tiles. This way, we can edit the middle part (blue from above) without it repeating. RPG Maker MV uses 48x48 afterall, not 24x24. So we want to take advantage of that. In this new layer, start adding some new rocks. Make sure these new rocks do not touch the edges which are already seamless. Keep them in the middle 4 squares.
Now let's go back to Layer 0 and finish up the rest.
At one point, go back to Layer 1 and start making the other tiles a little different. For example, here I added some darker brown to a tile so it doesn't look the same as the tile above it. (Again to take advantage of 48x48, not 24x24). Just remember not to touch the edges in this upper layer!
Great! Let's add some shading now! Grab a lighter color from the rock, and start coloring in the edges where the light is hitting.
Beautiful! (Haha they look like potatoes - hopefully yours looks better!) Now we're going to add grass.
When you add grass, make sure it matches whatever grass tiles you're already using! For this tutorial, I just picked a random green.
You could also use the eraser tool to make this area transparent, instead of grass. Really, it's up to you how you want to do this!
Then pick a lighter and a dark color to make it a little more interesting.
We're almost done! Now let's increase our canvas size.
Follow the settings above. We're adding 2 more to the height (to make 6), and making sure to click the bottom pivot point.
When it's been resized, go back over to your Tiles window. Click One of the corners and then put it in the top right corner. Do this for all of them until you've got a square of corners.
Check out your tile. Does it look funny in any way? Fix it! When you edit the tile here, it edits it for all matching tiles. Pretty cool! But make sure it still looks okay for the rest of the image. Here, I fixed part of the rock and some grass, but it was otherwise fine. Pixel art is easy that way.
Alright now let's make our canvas big again. Here I picked some random numbers. Feel free to copy, or go bigger. It doesn't matter too much. Keep the pivot point in the top left.
Now we're going to use the tiles to make a big cross shape in our new space, like this:
Begin to fill in the middle. You'll need to use the selection tool to copy the middle 4 squares of our original dirt on the left. Copy merged (because remember: we're using 2 layers here) and then paste. Drag it over to fit in our new cross. Keep dragging and dropping til it's all filled in.
At one point, you may need to only copy 2 squares to make sure everything matches up. Follow it by ear!
As you can see from the image above, leave the corners! We have to fill those in ourselves.
First make those 4 corners into their own tile.
Then begin drawing them in. I filled mine with the dark brown, then added in the rocks. After that, add the grass corners, and you're done! Make sure you don't edit the other tiles. We're only working with the corners here!
We're done! Hooray! Now let's put it into the main tileset. Simply select the right tile from the Tiles window, then put them into the right 4 squares, like this:
You can also check to see if they're aligned correctly here as well.
After that, export the image, and then add it to a 768x576 document. This is the typical size for an A2 tilesheet. I used Photoshop for this, but you can use any program. Even Pyxel Edit if you want.
Then save it as a PNG and bring it into RPG Maker! Put it as an A2 tile or it might mess up
This is what it looks like!Yay we did it! Good job team
Last edited by a moderator:
