GrassTileset: Issue with single width tiles

[Aniki]

I have a grass tileset I'm content with for the most part. However it works only as a double width (or more) tiles. I want to add single width rows/columns but I'm having trouble making them look okay.

Here is the scene I'm working with:



If I just mash the top and bottom edge tiles together I get this rather ugly looking diamond pattern. On the right are some alternative idea I've had, but they just arent doing it for me.
Any ideas of how I can make these single width rows work with this tileset?

[Chonky Pixel]

This looks like an interesting challenge.

My first instinct would be to decrease the thickness of the light green part on all the tiles, so they work together better in single width without changing between tiles.

Also, I think things would look nicer if the diagonals weren't a solid light green. I feel like I want to see that pattern carrying on diagonally down the slope.

On another point, I'm intrigued by your overall style here. I'm quite drawn by the idea of these simple geometric shapes and block colours, but the main character seems quite high detail in comparison. Are you planning to mix these two styles in the final product?

[Aniki]

Thanks for the reply. I am trying to keep the graphics simple-ish for myself. I had the idea to make backgrounds very geometric while actors are more complex. I don't know if it's going to work out but I thought maybe it will help to make actors stand out while still allowing me to keep the backgrounds vibrant.
 
Anyway, here's what I've come up with so far.



I reduced the thickness of the light green on the edges, even though I like how it looks when it's thicker. It does definitely help with the single width tiles.

The ramps were their own challenge, the shapes do not fit in them nicely, but mixing in the middle shade and adding some spacing got them looking.. okay.
I don't like having the middle shade but I think it looks better than without

[Chonky Pixel]

It'll probably be a lot easier to handle tiling in the game engine if the edge tiles look the same in all configurations. I know from the Unity engine's tile system, for example, that the tiling rules only "look" 1 tile in any direction in order to pick the appropriate piece for the location.

If it had to look two tiles away in order to work out which piece to use (as you would have to in your attempts from the original post) then you'd have to build a more complex tileset with 2x2 tiles per piece, and manually create every combination of edges, outside corners and inside corners, then enter rules for all of these into the engine. Or enter all the tile pieces into your game manually, which is very tedious.

On the other hand, there are assets and tools you can get which help with the creation of these kinds of tilesets, and it is possible to set things up at a 2x2 tile scale. (I've done it myself for tilesets with more complex shading. Getting the rules right took a fair few hours, the first time, and I now have templates to help speed the process up.) Other game engines may vary as well, I only use Unity.

But the bottom line is that making the edges, corners etc. consistent will make life easier later. As you're working with such simple shapes it seems a shame not to. Also, working with these kinds of clean geometric shapes will make small inconsistencies stand out more.

I like the new thickness, but if you really preferred the look of the old thickness you could make all the tiles larger I suppose. Depending on how far you are into getting the game engine working, you may need to change your jump metrics.

The light green on the diagonals looks a bit thin to me.

[Chonky Pixel]

I've been playing with this, and it's quite the puzzle. Finding a triangle size that works for both horizontal and diagonal segments AND lines up nicely at the corners is difficult. I've recently been working with more natural shapes in tiles, so this kind of thing isn't as much of an issue.

I use a tool called "Pyxel Edit" for tasks like these. It's cheap as chips and it lets you assemble complex scenes using your tiles, then changes you make to one tile affect all copies. Aseprite has a much less advanced feature, although last time I checked advanced tile editing was on the roadmap.

[Chonky Pixel]

I couldn't make triangles look good on the diagonal. The flat sides look odd compared to the pixel edges of the triangles on the straight edge pieces, and the transitions to straight pieces looked awkward.

Here's an idea for an alternative pattern for the diagonals. I quite like it and the corner transitions aren't awful. The jagged edges of the triangle sections, to my mind, fit in a little better with the jagged edges of the triangles of the straights. It's a matter of taste though, you may hate it.

If you look top and top-right of the image I had a go at tidying up your stars as well. It felt like you weren't giving your lower points enough love.

Regarding the two styles of pixel art you have going on, I wish you the best luck. (I have a similar situation with the project I'm working on, and I'm trying to find a style I can use to marry the assets I have together.)

I have played games with very simple art styles throughout. For some extremes, have a look at

Thomas Was Alone: https://www.youtube.com/watch?v=5K4zjNtQ3y8
or Hue: https://www.youtube.com/watch?v=RCFYr1ytS9I&t=10881s
or Vvvvv: https://www.youtube.com/watch?v=0ssQh-CdL1Q
or Environmental Station Alpha: https://www.youtube.com/watch?v=oUbQqgslq5M

all successful in their own ways.

They all have a consistent look throughout. Off the top of my head, I can't think of a game where the detail of the main character differs so wildly from the detail of the environment. This could mean that you're forging new ground and you'll come out with a game with a ground-breaking graphical style. Or it could be that a consistent style is one of the keys to success. Or I might have a really bad memory. I suspect it's the second option, although admittedly my memory is pretty bad.

My concern is that a high detail main character will "show up" the simplicity of the tiles, in a way that wouldn't happen if everything looked the same.

I'm reminded of the Star Wars remastered versions, where they added random CGI characters. They stuck out a mile and took me out of the experience. It was jarring enough to kill my suspension of disbelief.

Good luck though, however you wish to proceed!

[Chonky Pixel]

Hopefully, this 5-minute edit will show you what I mean. Here I've tried to simplify the main character to make it fit more into this world of chunky, flat shapes. There's minimal shading and much less detail, but I tried to keep the overall shape similar to the original. You could go lower-detail still by getting rid of the shadows on the hair, hat, face etc. I tried it and it still looks good.

I think this kind of low-detail character fits better with the tiles, but you may think differently. Good luck!

[Aniki]

Oh wow, I really like what you've done with the ramp. I spent some time trying to make non-triangular shapes in there but didn't figure it out. The intermediate shade helps blend everything together and look more consistent throughout.
I'm also happier with the single-width tiles. They' might not be great if there are too many of them strung together, but in this scene they look great.

Right now I am using rule tiles in Unity and I have it set up where all of the rectangular tiles connect properly, but I need to add ramps manually- which I will always have to do anyway. But I see now that the inner corner connecting to ramp pieces is different than inner corners for rectangular pieces which is unfortunate. I think I'll just handle it manually for now and see if I don't lose my mind.

I also do see what you mean about the contrast between the character and the background, but I think I like how it looks so far. I'm cautiously going to proceed like this because I definitely do know what you mean with the comparison to CGI characters in starwars- actually what worries me is that they didn't bother me, but everyone else *hates* them, haha. Hopefully that doesn't happen here.

I can't think of a game that does what I'm doing, but Nightmare in DreamLand does the opposite- highly detailed backgrounds with simple and clean actors on the screen.



But yeah you do have me thinking, I did a couple of quick mock-ups of how else she could look and I like them a little too.



I may switch over there once I've fleshed everything out a bit more but I'm feeling good so far. Thanks so much for your help, I'm feeling energized again

[Chonky Pixel]

If you're using the rule tiles in Unity, there's an asset which gives you a drop-in replacement for the rule tile. It allows you to set up rules across multiple tilesets, so you can join different tilesets without borders and, yes, you can probably add slopes while also using the rules to apply the appropriate things like inside corners. It's pretty awesome and really cheap.

https://assetstore.unity.com/packages/tools/sprite-management/advanced-rule-tiles-118786

The developer is also helpful and responsive.

There are indeed quite a few games which use complex, detailed backgrounds and simple foreground characters. Unless I'm mistaken, this is a trend that's been going since early Disney cartoons and probably longer than that. Look at the state of Snow White!



The leaves and tree have shading, shadows, texture, detail. Snow white doesn't even have shading (except her blushing) or shadows, using mainly block colours.

From what I can see, high detail seems to make things lower contrast and bit less clear, when the overall view is taken. This means it's good for backgrounds, while big, clear and high-contrast shapes pop out of the screen and focus the attention.

Of course, the difference in contrast is also caused by palette choices, colour values, lighting, etc. But it all helps. And of course, you might find a good balance your way around as you continue to work with it.

I really like some of the simpler ones you've drawn. As an exercise, you could try this though. Strip it back to as few block colours as you can, with absolutely no shading or detail at all. Now just progressively add in any shadows and detail you think it needs. Keep copies at each stage. Start with larger shapes, like shadows. Try to keep your cluster shapes clean and large.

I just did this to my main character (thanks for inspiring me btw) and the result was illuminating. I ended up with a character that had a lot more focus. The original (which I loved) looked blurry in comparison.

Anyway, I couldn't be happier that you've got your energy back! Best of luck!

[Vinik]

I think the trick here is about keeping the angle of the triangular leaves consistent with rotation. If the leaves are 45 deg when hanging horizontally, unless you plan to apply some gravity on them, then the leaves would remain 45 deg when rotated to make ramps. This mean the edges of the leaves would be straight vertical and horizontal on the ramp tiles, so they would be little squares cut in half, how about giving that a try? Check this out, this is how Surt solved that problem on his Nes-like set which uses similar leaves: https://opengameart.org/content/simple-nes-like-village-tiles

Edit: I took so long to finish this reply that I missed chonky's edit before posting, its a great solution 

On the single tile terrain problem, organizing your tiles is hard when you don't look at the whole set together, and when you don't know which type of tile set is the better fit for your task. I prefer to draw tiles as being part of a full autotile set.  Even if you are not using autotiling on a game engine and are placing everything by hand, knowing the full sets and all the necessary parts helps to ensure you can always close shapes made with those tiles. You were missing at least one piece of the 4bit autotile set in the first image you posted:



As you probably know, there are two types of practical autotiling most used in gamedev: 16 piece(4bit), and 47 piece (8bit), each one with its advantages and shortcomings. There are also numerous wang sets and other methods, but these two are the most popular.

The 16 piece one is the most used, and as chonky mentioned regarding unity, this one only checks the sides/edges to decide which tile will fit where. As a result, if it is used to fill solid areas, it can only render a minimal shape of a 2x2 square of tiles, and cannot render 1-tile thin platforms and pillars, which is exactly the problem you discovered.

This is a 16 piece set template, notice there is no bordered single tile:


Conversely, there is an alternative arrangement of the 16-piece set which can render 1-tile thin shapes like side-view pipes or topdown viewed fences or narrow walls (sometimes called a fence-type tileset), but then this arrangement becomes unable to render solid filled shapes such as terrain, because all tiles need to have borders to ensure closing all possible shapes.

This is a a fence-type 16 piece template, it is made of corridors, L turns, T sections, and closed caps. As you can see it has no solid fill tiles:


In the other hand, the 47 piece or 8bit autotile checks for connections at the edges AND the corners, having all the pieces needed to render solid filled shapes AND allow for a minimal thickness of 1 tile, so this is probably what you want to use for your set, ensuring you will never miss a tile to close a shape. The downside to 47 piece sets is the heavier work load of making many more tiles, and the fact that you often have to style your borders in a more compact way so that they can wrap around inside a single tile, and bend into tighter connections.

This is a 47 piece template:


In all the cases above, if ramps are used, they usually fit in the place of an outer corner piece (think of it as cutting off the corners of blocky shape), and are complemented by an inner-corner piece which is styled in way that connects with both flat terrain and with the slopes. If you use a complete autotiling template while drawing your ramp tiles, you can somewhat preview how they will connect with the other tiles, making it easier to design them in a seamless way. Here are templates for inserting ramps replacing outer corners, in both the 16 piece and the 47 piece arrangements:

[Chonky Pixel]

Wow, Vinik, that's some awesome info there! And those templates are amazing! I had to painstakingly create mine from scratch after working out what all the combinations were. Having it all laid out like that is really useful.

As I understand it, if your tiles have reflective symmetry (like they seem to do here) then (if you ignore slopes) you should be able to use the 16 piece tileset. Each tile is just half the length and width of the full tile size you want to use. The 16 piece set contains everything you need - inside corners, edges, outside corners, inside pieces. This means you're using less memory, and far fewer rules in your rule tile.

This doesn't tend to work as well for more complex or organic tile patterns (rocks, leaves etc.) as things like shading and variation can stop things looking good when made out of such small tiles.

The tile download is interesting too. It uses a less geometrically perfect triangle pattern with a random element added to the triangle widths and heights. That means that it's always possible to join up corners and edges - you can carry on the diagonal, or swap its direction and the pattern still works.

I tend to work with more organic textures, so when I need to match up to the next edge or corner I'll just work whatever I get into the design. Create new leaves, make a wide rock, that kind of thing. To a certain extent, by making the patterns so regular you're making life really difficult for yourself. Adding slopes into the mix was, in retrospect, a very brave thing to do.

[Vinik]

As I understand it, if your tiles have reflective symmetry (like they seem to do here) then (if you ignore slopes) you should be able to use the 16 piece tileset. Each tile is just half the length and width of the full tile size you want to use. The 16 piece set contains everything you need - inside corners, edges, outside corners, inside pieces.

Yes, if your tiles have a significantly repeated pattern or are mostly unshaded/untextured, you really can use a half sized 16 piece tileset to fill in for all the 47 pieces of the larger 8bit set.

This method of breaking a larger tile into smaller tiles is generally called meta-tiling, and in this case, four smaller metatiles would make up a larger visual tile.

However, and Chonky bullseyed it here, the smaller the metatiles, the harder it is to apply pretty organic patterns in the filling, and you might end up with a tiny pattern being very visibly repeated.

I think your styling is simple enough that you can start with the 16 piece, make the ramps as alternatives to the outer corners, and if you fill the need for the thin shapes, extrapolating the design to fill the other 31 pieces wouldn't amount to much more a lot of mirroring, splitting and rotating the basic ones.

Do take some time to browse Surt's examples on the open game art site, they are as informative as they are beautiful, and I learned a lot from them.

Edit: if you guys ever feel like going down the rabbit whole on the technical and mathy aspects of the full list of autotiling methods this is the place:

http://www.cr31.co.uk/stagecast/wang/2edge.html

For a more practical explanation on implementation, nothing beats this tutorial:

https://gamedevelopment.tutsplus.com/tutorials/how-to-use-tile-bitmasking-to-auto-tile-your-level-layouts--cms-25673