How to make your own stone floor

● ARCHIVED · READ-ONLY
Started by Avery 4 posts View original ↗
  1. Basic terrain is available everywhere and in a huge variation, but on the other hand, you might have many areas in your game that need them or you just want to have something unique. Or maybe you just want to generally start learning to draw some tiles. Whatever it is, be sure to check out the grass tutorial as well.

    Before we start, some basics:
    I am doing everything you will see in Gimp, but since I am not going to use any special features you could do that in any graphic program that has layers.
    Also I personally like to draw larger than I need it to be and then scale it down in the end, for everything you will see here, I drew on a 480x480 picture, so 10 times the size it will be. This allows me to have more control over how the details turn out. Because that is really large, the example images are scaled down of course.
    Third, I am utilizing a graphic tablet here and I know not everyone has one. You can actually do this with a mouse or - here Gimp comes in handy - use the path tool, if you are not confident in your hand-mouse-coordination.
    1685792272011.png
    With the path tool you can create the shape you want by placing anchor points and the length and angle of their handles. This way you can get a smooth shape even if you struggle to actually draw it. Once done, you use “stroke path” to turn this shape into a line.
    1685792272060.png
    That is just to empathize that you really can start creating your own art even if you don’t have expensive programs or a graphic tablet.

    So we start with our blank canvas:
    1685792272101.png
    And then we go in with the paintbrush (as as above, the curve tool) and draw some random stones:
    1685792272142.png
    We make sure to keep them various yet not too different in size, and also close up gaps or too sharp angles with that dark color.
    Now we want a repeating pattern, and so we set up a custom grid that is ½ the size of the canvas, so here 240x240 pixels:
    1685792272187.png
    We can switch it on and off, but it will be our guides to reassemble our stones. Because in the middle we have an even pattern, and if we now just cut and swap the sides…
    1685792272230.png
    we can just draw in new stones in the middle and already have a horizontally perfectly looping pattern.
    Some people like to fill the whole tile with stones first and then adjust the rims so it tiles, but I found that this way I can get to a more even result quicker!
    Because now that we filled in those stones in the middle…
    1685792272271.png
    … it just loops:
    1685792272312.png
    Now we repeat the same thing vertically. We cut and swap:
    1685792272351.png
    … fill the gap:
    1685792272389.png
    and are already pretty close to a nice loop:
    1685792272430.png
    I colored in the only odd one piece that this method left us here:
    1685792272473.png
    But with another cut and swap, this time horizontally again, it becomes the center of the tile we work on and we can fix its shape.
    Before:
    1685792272513.png
    After:
    1685792272551.png
    And as repeating pattern:
    1685792272592.png
    With just those few steps, you can get a nice seamless base for all different types of rocks. You can go with more edges and less curves or a generally smaller or larger stone size… this has so much room to become just the tile you want!

    What I like to do now is to keep working on a 2x2 square of that outline, because that way all the stones I have in my tile are whole and I can shade them as one piece without having to cut and reassemble in the process. One final reassembling in the end will do!
    By shading for example this area
    1685792272641.png
    every stone was shaded and everything loops perfectly!

    Now onto the coloring. There are various ways what to do first, but I like to start by drawing in a highlight to the left side and bottom of each stone:
    1685792272679.png
    Since my tutorial ground layer was already very light, I made it a little darker, you are also free to shift your colors when you realize things don’t work what well for you.

    Now we go in with a dark and very soft brush with a LOW opacity (I had a 15here) and start drawing in shadows on the other side and some dents on the top:
    1685792272726.png
    Slowly work brush over brush to get to something you like!

    1685792272779.png
    Now we can do the same with a light color and add some additional highlights to the highlights to have them pop a little more!
    Talking about colors and pop, the cracks seem to be too dark as of now.
    We adjust the color to our liking and add a gaussian blur to them, not that much, just a little:
    1685792272837.png
    What I like to do before I proceed with setting up the tile is adding some color variation to the stones, just a little:
    1685792272899.png
    Those little variations will in the end have the tile look more interesting and natural, just make sure to not overdo it!
    And now it is time to assemble. Copy and paste you pattern so you have at least one tiling tile:
    1685792272943.png
    We might do some color corrections to our liking:
    1685792272987.png
    Now we set the mode to indexed, as MZ uses a limited color palette, which leads to a crips look like this:
    1685792273025.png
    And then we finally scale it down to the original size, which might look a bit odd:
    1685792273064.png
    But after playing around with the various recolor options, we will very likely end up with something balanced, all we have to do is to just cut out that one complete tile that we made:
    1685792273097.png
    And there we go, this is how we can make a custom rock ground or cobblestone tile for RMMZ!
  2. I never realised that tiles were made like this, I always thought that they were done at 100% scale to the final product. I know you said this is your personal preference but is this common with people that do custom tilesets?

    Got me curious about trying this with battlebackgrounds now.
  3. This really, really makes me wanna try. Unlike drawing…painting is something I’m actually kinda decent at. I just legit never knew how tiles were made.
  4. Avery said:
    you might have many areas in your game that need them
    literally me, six months ago.
    I was needing a stone floor for the main plaza, and couldn't find a decent texture, so I took a stock vector image, ran it through several shaders and got a large decent tilable texture.
    the hardest part to make is the mosaic pattern.... there simply isn't a procedural map that'd fit the bill.
    for the coloring, though, you can use a noise filter and layered combinations of the mosaic for highlights and bump effects, that way you don't have to paint every stone by hand.
    works in both 2D and 3D softwares.

    nuevo-1.jpg

    nuevo-4.jpg

    nuevo-2.JPG