Graphics Need help with depth and tileset

Cpaz

Member
I'm trying to have a cliffside set of tiles. Giving a sort of illusion of a canyon.
However, i'm struggling with having it look right.



Here's the dirt canyon. with the grass being the top of the cliff (supposedly).


Here's an attempt with different colored grass on top of the cliff.

I guess I just need pointers on how to do depth with top down tiles properly :p
 
Last edited:
B

Blazing

Guest
You have no light source. Pillow shading will always muddle the form of the subject. If you add a really simple directional light source, where things have simple light/dark sides, it will give an illusion of depth. (For example, making North and East sides shaded while the South sides have a highlight)

Also, following that lighting direction, give cast shadows to buildings and cliffs to imply height and sharp angles as opposed to a rolling hills.

Edit: I found an example. Photo of a crater on Mars. You can see how the directional lighting makes it look less like a circle and more crater-y

MOD EDIT: Image removed as it was being flagged as coming from a potentially malicious source.
 
Last edited by a moderator:

Cpaz

Member
Ok. This is interesting.

I have a "Light source" per say, only it's a bunch of shadow tiles that I place by hand. (There's quite a bit more to this place than i've shown) It looks good there, but I have tried to use shadows on cliffs before, and it looks a bit odd.

Here's me using just what I have to make temporary shadows, even then, it just looks wrong.



It looks like it just doesn't fit. The primary reason I think this is, is the rough edges, I don't have any shadows for that sort of thing.

(I guess I should also point out, that I'm not explicitly an artist, so I'm sort of stumbling through this)

But here's a good example of my makeshift lighting.



Any other pointers would be very much appreciated.
 
B

Blazing

Guest
There's only so much you can do when you use that kind of perspective in a 2D game. If you go into Google maps and look at Mt. Everest from that same perspective, The majestic peak looks like a hill. The cast shadows definitely help tremendously, but still really don't work well when it comes to implying height/depth (as you have found).

Have you looked into using fake 3D, isometric projection, or a jrpg-style perspective? Those seem to be the best compromise between top-down and trying to imply some kind of shape for the landscape. Fake 3D probably would be the best compromise if you absolutely need to see everything hiding behind the buildings, but even it suffers from similar problems.
 

Cpaz

Member
OK. I think I've officially figured this out.

I decided to incorporate shadows into the cliff themselves, rather than have special shadow tiles for the cliffs.

Here's what the cliff looks like without "lighting":



Here's the same cliff with handmade shadow lighting:


(NOTE: shading might be imperfect, this was just whipped up to give an example. A finished product could look nicer.)

Needless to say, It's made quite the difference.

Thanks for the suggestions!
 

RangerX

Member
Still looks wierd I think. I really don't "get" the depth.
What you don't have and probably need are actual walls. Your perspective is the same as old Zelda games here. (or mistakenly the same maybe). You NEED cliff sides like Zelda, sorry.

 

Cpaz

Member
Still looks wierd I think. I really don't "get" the depth.
What you don't have and probably need are actual walls. Your perspective is the same as old Zelda games here. (or mistakenly the same maybe). You NEED cliff sides like Zelda, sorry.

I was using zelda as reference. It does pretty much what I wanted it to do. So I *personally* think that what I have is serviceable.

I don't know what else I could do anyway. Especially since this game is so far along, adding something like fake 3d would be a nightmare... Not to mention unlikely since I'm using GMS2 room layers for most everything.
 
Last edited:

JackTurbo

Member
If you dont want to put any perspective on it but want to imply depth, then you'll need to use shadows.

here's a super crude mock up

 

Khao

Member
One of the best solutions I've seen for this issue comes from The Legend of Zelda: The Minish Cap.



The most important thing you need to do with your cliffs, is finding a way to imply a direction. Your cliff's walls are slightly confusing because the only thing they have on their surface are straight walls. They could easily work both ways. Minish Cap fills its walls with shapes curving in the direction the wall is facing, darkening as you get farther down the wall, and also using smaller details closer to the bottom, implying that they are... well, closer to the bottom. It sometimes adds objects (rocks, or small pieces of grass) sticking out of the wall, and it's important to make it clear which side the object is sticking from, usually by emphasizing where the top of the object is.The walls on the sides also add an extra layer of depth by acting as if the perspective is slightly from the side, making the details visibly go down in the Y axis. This, of course, is a complete freaking lie, as this perspective only works in a top-down setting. But it enhances the feeling on the walls direction and makes them far easier to figure out.
 
  • Like
Reactions: Yal

Cpaz

Member
One of the best solutions I've seen for this issue comes from The Legend of Zelda: The Minish Cap.



The most important thing you need to do with your cliffs, is finding a way to imply a direction. Your cliff's walls are slightly confusing because the only thing they have on their surface are straight walls. They could easily work both ways. Minish Cap fills its walls with shapes curving in the direction the wall is facing, darkening as you get farther down the wall, and also using smaller details closer to the bottom, implying that they are... well, closer to the bottom. It sometimes adds objects (rocks, or small pieces of grass) sticking out of the wall, and it's important to make it clear which side the object is sticking from, usually by emphasizing where the top of the object is.The walls on the sides also add an extra layer of depth by acting as if the perspective is slightly from the side, making the details visibly go down in the Y axis. This, of course, is a complete freaking lie, as this perspective only works in a top-down setting. But it enhances the feeling on the walls direction and makes them far easier to figure out.
The only real problem with this is that I'm using a direct overhead perspective, as opposed to zelda's top-down "angle."

So, I *think* the only real way of doing this properly is through shading.
If you dont want to put any perspective on it but want to imply depth, then you'll need to use shadows.

here's a super crude mock up

Maybe? But I don't see how this works. Especially with the way I do shadows (see the second photo) I might try some variant of this though.

As it is, it seems like the darker grass is below the dirt around it. The darker grass is supposed to imply being higher up.
Well, that's a leftover from earlier tinkering so that might go back to normal grass color.
 

Cpaz

Member
Tweaked it a bit more, any more suggestions would be appreciated.

(recolored grass, tweaked shading, sides are more "wall like" just to see if they look better)


Quick note about the zelda comparisons:
While useful, even getting me where I am with this now, there is a point where the difference in perspective really screw with the art design in terms of overlap.
Primarily that zelda has always used a slightly angled top down perspective, I'm using a directly top down perspective (ala the original gta, but without any 3d elements)

I realize that I may have dug myself in a hole in that regard, I'm willing to at least try new things.
 

JackTurbo

Member
Really selling this type of perspective is pretty hard. A few suggestions from me would be:

The grass on the top needs to be lighter than the regular grass. Its higher and so more exposed to the sun.

Are the shaded brown "edges"meant to be at the bottom or the top of the cliff face? Because they're darker on the inside rather than the outside they look like they go downwards rather than upwards.

The south and east edges of the raised area could benefit from a highlight.
 

Khao

Member
The only real problem with this is that I'm using a direct overhead perspective, as opposed to zelda's top-down "angle."

So, I *think* the only real way of doing this properly is through shading.
Overhead or top-down, there's a lot of things you can can take from Zelda's hills. The most important thing is not the perspective, but making it absolutely clear which direction the walls are facing, and emphasizing height by making the deeper parts of the walls darker, and with smaller details. A lot of the things Zelda does would work exactly the same in an direct overhead perspective. Heck, sometimes it does use an overhead perspective with its backgrounds when it's more convenient.
 

Cpaz

Member
Really selling this type of perspective is pretty hard. A few suggestions from me would be:

The grass on the top needs to be lighter than the regular grass. Its higher and so more exposed to the sun.

Are the shaded brown "edges"meant to be at the bottom or the top of the cliff face? Because they're darker on the inside rather than the outside they look like they go downwards rather than upwards.

The south and east edges of the raised area could benefit from a highlight.
Oh- duh! That seems obvious now :p
Might change the grass color later. Not sure how much it should be changed.

Overhead or top-down, there's a lot of things you can can take from Zelda's hills. The most important thing is not the perspective, but making it absolutely clear which direction the walls are facing, and emphasizing height by making the deeper parts of the walls darker, and with smaller details. A lot of the things Zelda does would work exactly the same in an direct overhead perspective. Heck, sometimes it does use an overhead perspective with its backgrounds when it's more convenient.
Again, in hindsight this seems obvious, and i'm very confused as to how this didn't click earlier.

Thanks to both of you! Something that simple just flew over my head. Why? I dunno.

OK! So i've adjusted the colors of the cliff faces themselves. I also added more hanging grass. I think it looks better. Something does still seem off.
 

RangerX

Member
Other stuff you could adjust would be to always start the shadow at the corner. (look at bottom left and top right of your screenshot, the shadow is wrong)
Also, instead of the shadow being straight, make it all fringed just like the grass.
The shadow near bottom left is also wrong and should be just like the corner top left.
 

Cpaz

Member
Other stuff you could adjust would be to always start the shadow at the corner. (look at bottom left and top right of your screenshot, the shadow is wrong)
Also, instead of the shadow being straight, make it all fringed just like the grass.
The shadow near bottom left is also wrong and should be just like the corner top left.
I'll try adjusting the corners. Layers have been a godsend in terms of editing these things on the fly.

Not sure about the shadows themselves. I would prefer to have a universal set of shadow tiles that I can use for most situations. I'll look into that as well, but may not stick with it.
 

DesArts

Member
I'd use a rough texture (squished along the cliff face) rather than lines as that makes it easy to hide perspective issues. Making sure also that the dirt tiles at the edges of the 'cliff' look either much brigher or much darker than the surrounding tiles of the same material to highlight edges and their direction. Shadows would be important here too. The fact you're using lines and edge tiles that aren't too much brighter or darker than their surroundings is one issue that wont be helping. Also try rounding the corners.
 

Cpaz

Member
Tried having brighter grass on the edges where the light is coming from.
It looks... interesting? Not too sure about it tbh.
Shadows also were adjusted (more consistent with the rest of the level)



Might try roughter shadows later. This is coming along nicely! Thanks for all the help so far!

I'd use a rough texture (squished along the cliff face) rather than lines as that makes it easy to hide perspective issues. Making sure also that the dirt tiles at the edges of the 'cliff' look either much brigher or much darker than the surrounding tiles of the same material to highlight edges and their direction. Shadows would be important here too. The fact you're using lines and edge tiles that aren't too much brighter or darker than their surroundings is one issue that wont be helping. Also try rounding the corners.
I thought about the lines, might try something else later. But at this point, most of the terratin will probably be rectangular. The best I can do is make it look as natural as possible. Maybe I would try round corners at some point, but that would mess with the shadows I already have. So if I do it, it would probably be done at a later date if I still find it an issue.
 
  • Like
Reactions: Yal

Khao

Member
Okay, that's a massive improvement over your previous attempts, good job!

One thing that bugs me about your shadows though, is that while the hills cast shadows on the floor, the shadows just suddenly stop when they reach another portion of the hill, when ideally, some of the shadows should reach the wall too.

You could make something kinda like this:

Except... You know, making it look good. =P This is probably not the best example, but you might get the idea. You'd just need to make some extra tiles to make the corners interact with shadows better. If you don't think it's worth it though, that's okay. It works well as it is already.

Also agreed about the edges of the shadows. Giving them a shape you'd expect from a cliff would make them look a lot more natural. Even just a few random smooth dents would do the job, as long as it doesn't look like a perfect square it'll work.
 
B

Blazing

Guest
Those highlights on the south and east edges really improved the illusion of the mesa being higher than the rest of the ground. I think you should keep them.
 

DesArts

Member

You need to make the light sides lighter and dark sides darker because currently they aren't even lighter than the flat soil. The lines should really just go even if they aren't replaced by anything as they don't add anything, they just make it look off really.
 

Cpaz

Member
Okay, that's a massive improvement over your previous attempts, good job!

One thing that bugs me about your shadows though, is that while the hills cast shadows on the floor, the shadows just suddenly stop when they reach another portion of the hill, when ideally, some of the shadows should reach the wall too.

You could make something kinda like this:

Except... You know, making it look good. =P This is probably not the best example, but you might get the idea. You'd just need to make some extra tiles to make the corners interact with shadows better. If you don't think it's worth it though, that's okay. It works well as it is already.

Also agreed about the edges of the shadows. Giving them a shape you'd expect from a cliff would make them look a lot more natural. Even just a few random smooth dents would do the job, as long as it doesn't look like a perfect square it'll work.

You need to make the light sides lighter and dark sides darker because currently they aren't even lighter than the flat soil. The lines should really just go even if they aren't replaced by anything as they don't add anything, they just make it look off really.
I love both of these tiny details and will work on them once I have the chance.
Thanks!
 

Cpaz

Member
ALRIGHT!!!!
So, both details as mentioned above were added. Thinking about changing the lines. Not sure though. I'll tinker with it.


(EDIT: I forgot the re enable the shadows on the tile layer :p replaced the photo)

The side it's more subtle than what was originally suggested. This could change though.

Except... You know, making it look good. =P This is probably not the best example, but you might get the idea. You'd just need to make some extra tiles to make the corners interact with shadows better. If you don't think it's worth it though, that's okay. It works well as it is already.
That's no issue at all. GMS2 handles tiles differently. Including having layers for tiles being faster and much easier to manage.
So all shadows are on a layer above the terrain and below structures at all times.
 
Last edited:
  • Like
Reactions: Yal
Top