[CC] Mountain Tiles & Backgrounds

[Sersch]

I've been working recently on a hill/mountain Platformer tileset + parallax background and wanted to get some Critique/Feedback if i can improve something there

[eishiya]

The walkable grass blends into the background in many areas, and the rock-grass boundary has too much contrast, so it looks like the rocks are the walkable surface, rather than the grass. In addition, the grass has a lot of contrast and no clear "surface".

I think a fix for both problems is to reduce the contrast within the grass, so it reads more like a lightly textured surface, in contrast to the heavily-textured non-walkable areas and to reduce the contrast within the foreground rocks so they don't distract from the grass. You could also hue-shift the grass more towards yellow and the background slightly more towards blue to get more contrast between them that way. Darkening some of the lighter background colours would also help.

Edit: Put together an edit for you to give you some ideas:

I darkened the nearest background layer, and recoloured the bright background grass with some greens from the trees, so the overall contrast in the background is lower.
I made the grass lighter and yellower, and lightened up the mid green in it so that it doesn't contrast as much with the highlights. I also got rid of the dark shadows in the upper blades of the grass, which reduces the contrast within the grass even further.
I reduced the contrast and colour count in the rocks, and lightened up the area where the rocks meet the grass, so that there's no super-dark separation between the grass and rocks, which I feel helps the ground read more as a connected whole instead of looking like the grass floats above the ground.

Edit 2: I think if you're going to have a light foreground and darkish background, the character sprite could stand to be lightened up too.

[Quake]

I definitely agree with Eishiya's critique. I'd also potentially lower the contrast of the closest layer of trees, as they could be construed as barriers.

I did an edit using Eishiya's as a base (hope you don't mind). Made the first layer even less bright, and changed the colours of the rocks. Changed the colour of the trees in the background, as well as changed the position of the middle hill because it aligned too 'well' with the layer behind, and so looked weird to me.

[Tycho Magnetic Anomaly]

really good suggestions by the others, and I would agree the foreground/background contrast needs perhaps a bit more strength. But I think the others have lost a bit of the lushness of your original in particular with the trees, the edits although better in contrast are flatter and less visually striking then the original.  With regard the grass/foreground contrast well its a bit hard to get a measure of that based on static picture, but I am sure when the foreground is moving over the background + the other layers of parallax the contrast isn't quite as lost as the original image.

[hexcode]

Really nice clean stuff! I would say play around with your foreground Pine Tree colors a little more. Try to get the darkest green to blend a more in with the rest of the greens in that tree. I would also make the tree darker in general to give the image more depth.

[Sersch]

wow thanks for the detailed feedback, that helps a lot!

I agree the contrast between background and foreground wasn't enough, so here is my edit on it (maybe not as extreme as your overpaints)



also recorded a short gif how it looks with parallaxing:

[Quake]

Much better!

The game is looking awesome. Keep up the good work.

[eishiya]

Looks good!
I think the rocks are still too prominent for what they are, though. You could keep the highlights as bright as they are if you keep the area around them a little lighter, the main problem is that you have the highlights right below one of the darkest colours, so there's a lot of contrast in an area that doesn't require it.

Nitpick: The key icon touches the 0, so the whole thing looks like some strange glyph. Space them out a bit so they read better.

This is off-topic, but is there a tutorial or something for programming that style of minimap? I need to code maps like that soon and I'm worried I'll be reinventing the wheel and making it inefficient.

[Sersch]

Yeah i think you are right, i gonna make the area above them a bit lighter.
And good catch with the key, i'll ad a pixel space there!

i didn't follow a tutorial for the minimap but i can imagine that there should be something out there. I can share you my code if you're interested (it's C# for Unity)
For every room/area the player visits i basically scan the size and calculate it down to the cell size of the quads cells. I also have to define for every room the rooms position on the minimap.

[eishiya]

Do you mark the entire room as explored when the player enters? I recall Castlevania games mark rooms as explored in square-ish sections, I thought maybe you did it that way. Or is that what you described and I just didn't understand? ¦D

This all is really pushing my brain into coding mode. Thanks! It's been a while since I did any bit-pushing, I've only been pushing pixels recently.

[Bearbear65]

You're probably my favorite artist 
Love you work!

[Sersch]

thanks!

@eishiya:
ah i forgot to mention the explore part, i do mark single cells as explored. For that i calculate down the player position to the cell coordinates, basically dividing his position by (30 * 16) on the x axis and (20 * 16) on the y axis (because 1 cell on the minimap is considered a 30 * 20 tiles room and every tile is 16 pixel width/height)

[eishiya]

Do you do that for every step the player takes, or only at certain times or...? That's the main part that's been puzzling me. Seems like a waste to calculate it repeatedly but I can't think of any other way other than invisible trigger walls in each room.

[Sersch]

No it is calculated every frame, but this kind of calculation is peanuts for any PC. I think a common mistake in programming is trying to optimize preemptively in places that don't actually need optimization. I wouldn't care too much about wasted performance beforehand, getting code done bug free and more simple/readable/understandable (even for yourself, you want to understand what you coded in some places a year or so ago) are far more important. Once you start running into performance issues you can still optimize your code. There are different profiling technique/tools that help you analyze which part of the code takes the most performance and that is the place you want to optimize. Usually those are code parts that are getting called hundred or thousand of times per frame. So anything that gets called just once per frame is usually not an issue

[eishiya]

I'm used to working with JavaScript, where a few extra divisions every frame are a problem xP But the project where I need the maps isn't JS so you're right, I should stop worrying about it.

[Sersch]

Worked on some deco objects for the mountain area:





Will probably add some more variations for plants and flowers

[eishiya]

The outlines on the big rocks look good against the trees, but make the rocks look blurry against the dark dirt. Outlines should generally be darker than any of the abutting colours, or they create that blurry look. The solutions to this problem are to use your darkest background colour as the outline, or to not use an outline at all. I think the latter is the best option, since the other objects in the environment don't have outlines.

The dark, cool green on the prop plants looks a bit out of place with the rest of the foreground being warm. Consider using some of the warm colours from your grass instead - that way the plants won't pop too much, but won't look as misplaced:


Your floating rocks at the top and rocks on the side of the cliff and in the background rocks have some single-pixel noise you might want to fix. Also one of those flowers is totally floating off the top of the ground xP

I think it looks a bit odd that the background rock structure has warmer colours than the foreground rocks, whereas the rest of the background gets cooler the further it goes. Shouldn't the rock structure also be cooler if it's in the background?

[Sersch]

thanks once again for the extensive feedback!
I was in a rush to post it here before going to work, so some obvious things slipped through

I do struggle a bit to find the right middle ground for background objects in regards to saturation, i think i might have tried to hard for the plants (reused colors from the far away background objects) and to little for the rocks?

here is a small experiment of swapping the colors of the both rock layers, but i think that doesn't look any good:



also tried to reduce the saturation of the red rocks and increase it for the brown rocks a little bit:



i think it does look better.

[eishiya]

I actually think the red looks pretty good in the foreground, but the brown doesn't work for the background because the contrast is too high, and the brown is still too warm.

How about something like this?

I used your original rock colours and made the background rocks more purple (cooler) and less saturated. I also made the prop rocks use the foreground colours, since they're in the foreground.
Lastly, I made the highlights on the foreground rocks less prominent, as I think they're too distracting.

Edit: Or maybe this? This uses the foreground rocks as the starting colour, but makes them greener/bluer and less saturated, so that they still look like the same type of rock as the foreground rocks:

[Sersch]

I do think approach in your second screen looks kinda cool as well, but i will probably stick to red.

I think using the brown tones for the decoration rocks is a good idea. Although while they are in the foreground, they are still a bit behind the player (he can't collide with them) - so not sure if it makes it a bit harder for the player to see the actual terrain he can walk on?

Also the background rock layer is supposed to "hold" the floating foreground rocks, if i try to make it appear more in the background (by reducing saturation or use more colors) they also look more disconnected, not sure how of important that factor is?

[eishiya]

I think the rocks look fine and non-interactive since the actual walkable surface is the bright grass.

I think gameplay clarity is more important than in-world logic (your rock tendrils aren't very logical in the first place ), so I think it's fine to have some separation, it still reads like the platforms are connected to it. You could tweak the decorative rock colours to be a little warmer so that they're not so far back in the background. As long as you keep the contrast there lower than the foreground rocks, it should be fine.
If you're worried about the rocks not feeling connected, are you sure it's a good idea to have some be red and some be brown?


Somewhat related:
It doesn't make much sense to me that the underside of the big blocky rock mass in the upper center of the image is as brightly lit as the top, especially if they're meant to be attached to the background rocks. You might get a more cohesive look if the bottoms fade off into the darkness of the background (or even have just the foreground dark colour on the bottom) instead of being so brightly lit.

[Sersch]

Thats what i'm settled on for now:



Added some more variations:

[eishiya]

I think that's a good level of saturation, not too bright, not dull.

Posting this again since you never responded to it, just in case:

The outlines on the big rocks look good against the trees, but make the rocks look blurry against the dark dirt. Outlines should generally be darker than any of the abutting colours, or they create that blurry look. The solutions to this problem are to use your darkest background colour as the outline, or to not use an outline at all. I think the latter is the best option, since the other objects in the environment don't have outlines.

Are the light shapes near the bottoms of some of the plants forward-pointing leaves? They don't read very well to me.

[yrizoud]

Sorry to point it out, but I feel this lacks originality at the moment. It looks like you specifically chose all the elements of a generic plaformer tileset: angled rocks used as borders of "cave", grass, pine trees background, summer light, white daisies...
The asymmetric lighting on the forested mountain is a breath of air however, and at least the main character does not look like a RPG archetype. But here's something you should consider when fleshing out a landscape : What makes your scenery / world different from every other nicely-pixeled platform game ? Can you give your own touch, your signature ? Are there details that you want players to notice, in order to make the player see this place as real, instead of a generic gaming background ? For example, carvings in stones and trees hint at a human occupation and culture. Animal tracks, burrows, nests, all hint at a population of wild animals.
The downside of giving more character to scenery elements is that the player may notice more the individual assets that you re-use in many places, but in my opinion, it's worth it, and you have the technique to pull it off.

[Curly]

The plants don't have as much contrast as the rocks. It looks a bit weird to me when they are next to each other.

[questseeker]

Have you tried filling the platform interior with rocks, like the ones on the edges, rather than a void? You'd only need to draw some low-key rock variations, say 16 all-rock tiles with 2 horizontal edge types and 2 vertical edge types to be assembled randomly, to get pleasant walls.
Different rock shapes and different colors near the platform edges suffice to show platform shapes very clearly; you don't need to mask out and suppress a substantial part of your scene with the potential to look very good.

Examples of whole game series with massive solid platforms: Metal Slug, Wonder Boy, Super Mario bros., Sonic.

[Sersch]

Thanks for the feedback!

@Curly: True, they could use a bit more contrast
@Eishiya: Forgot about that, removed those outlines at the top, looks definitely better!
update with both changes:


About the plants, yeah those should be kinda some more leaves or something i tried to make them more readable


@yrizoud: valid point, i'll keep that in mind when i'll be working on something new. I think i can balance it out with more originality in the gameplay

@questseeker:
Hm that's mostly a style choice, i kinda like the strong contrast you get from having certain areas of your screen covered by black. I really liked the those kind of cave areas in Metroid or Castlevania games (the newer ones).

[eishiya]

I'm also a fan of having low/no detail in the ground. It makes it much easier for the player to focus on the important parts. Having detail all throughout the ground makes sense in games where the player interacts with the ground, e.g. in games involving digging, but in a game where it's dead area, it's best to use it as negative space in my opinion.

Those leaves look a lot better now! They look a little undersized and symmetrical, though. Here's an example of how you can pixel them larger:

I also made the middle lines lighter, which I feel looks less harsh and more realistic.

[Sersch]

that looks really good, will try to paint it in a similar way

[Sersch]

Worked on a house for that area. Not so sure about the current result, it looks a bit flat to me

[eishiya]

I think it could do with having a bit of a side wall visible.

As for the flatness, just adding some cast shadows should help a lot! Don't forget that the building's front isn't just a flat surface, some parts stick out more than others.
In addition, I think you should ease up on some of the highlights and details, as they further flatten the image. If everything is fully highlighted and detailed, then nothing looks closer or further than anything else.
Don't forget to keep the lighting on your foreground objects consistent with the lighting in the background!

Here's an edit focusing on adding some cast shadows:

I got rid of the highlights on the bricks and the door*, and reduced the intensity of the highlights on the wood and thatch. I'm not sure the thatch highlights are useful at all, it might look better without them.
I made the wooden structure and thatch cast a shadow on the plaster, and removed the plaster shadows above the wood (what would be casting them?).
I did a very lazy job trying to flip the shadows, I'm sure you can do better than I did.
*I flattened the door a lot because it's made out of flat boards. There's no reason for it to have lots of shadows on each board. If you want to give it some wood texture, consider doing it with the edges of shadows cast onto the door (if there are any), or using some low-contrast colour that's neither shadow nor highlight, but a second midtone.

Something else I did was reduce some of your texturing on the wood, I made the shadows and highlights more solid by filling in some of the gaps you made for the sake of texture. This gives the logs more volume. Texture is nice, but you shouldn't let it get in the way of volume.

Edit: Didn't I critique the key icon and number being too close before?

[Sersch]

Wow, thanks for the great overpaint! Yes, casting shadows was definitely the biggest miss from my side. Also a bit embarrassed i forgot about the lighting direction in the background was different
I guess i also might overdid it a bit trying to get more contrast and details in this time.

Funnily i remember that i had fixed the position of the key icon and being unsure myself now i had to scroll back to the previous screenshot i posted here and indeed, it is fixed there. But i changed the minimap size recently and guess doing that i misplaced the key icon once again

[Sersch]

Updated version:



(i made it myself easier by flipping the whole house to begin with for the lighting direction )
I also added another shade to have some textures in the door planks. Now wondering if i should add this tone to the other wooden parts.

[eishiya]

I don't think there's really room in the other wooden parts for the extra shade. Maybe just to soften up the shadow in a few spots? It feels a bit harsh.

Is the roof thatch? If so, the front edge would probably be flat, not rounded. That means it would be largely flat-coloured, texture aside. Photo example. Your shadows and highlights suggest a round shape.

I think it would look better if there wasn't grass right in front of the door, but rather something like a dirt path. Some extra props like barrels might also look good. Things like that will make the house look like it's been there a while. A lone house in an unbroken field of grass looks like it got plopped there by a tornado five minutes ago

[Sersch]

Yes i've tried to add some planks in front of the door, also i've been working on a blob farm today but i think you are right, some more decoration would not hurt.



and an animated version:


The part of the roof that is visible was intended to be logs, i had them in the same colors as the remaining wood at the beginning but it looked weird to me so i made gave them different colors. But it does look like thatch somewhat, maybe i should try to rework it to look more more like it?

[eishiya]

The shorter grass looks nice! And it's probably a simpler solution than trying to make a dirt path work without the luxury of perspective.

I think thatch would be better. Bending such thick logs like that would be very difficult, and roofing with log segments sounds like a recipe for wasted wood and a lot of leaking.

The house lacks the contrast of the trees that are in the same plane, so you may want to raise that, especially on the rocks.

The blob farm looks neat! I think it could use some indication of a fence behind the blobs, perhaps just a solid dark colour so it's not too noisy. You might need to space the posts apart more to make that read well, though. That would also make the blobs more visible.
The green blobs are a bit hard to see against the green background, especially with the fence further blocking the view. I think a more contrasting colour would help a lot.

[Sersch]

yeah i think having a background fence is a good idea, i included that. Also made the dark colors of the house a bit darker:



I also tried to do some thatch but failed miserably so i gave up on that for now :p