[WIP] House interior, door problem

[startselect]

Hi, I'm trying to make a tileset for a fantasy house interior. I'm having problems with the openings in the north-south interior walls. I opted for having openings instead of doors (like the east-west interior walls) to make them more readable and also added rugs that are places where the floor of the opening is. But I still don't think it signals the player enough about where to walk to enter the opening or even that there is an opening.

All ideas on how to improve the readability is very much appreciated! Ty!

[eishiya]

Many games cheat and make the openings artificially wide so that you can see the floor in the doorway instead of bothering with getting the size of the door correct. Some don't even bother with the concept of side-wall height and just have the doors be a simple break in the top of the wall, no indication of wall height. Many other games just don't bother with east/west doors at all, and instead just have north/south doors linked up by wide east/west hallways (e.g. Sword of Mana's Vinquette Hall), and it's a convention most players don't mind by now.

If you don't want to do "cheat" like that, consider having lighter wood in the doorway, lighter at the bottom (where the floor reflects light most strongly at it) and darker towards the top, and perhaps some special tiles to draw attention to that area by giving it a more interesting shape (door frame, hinges, decoration, etc).

In general, you should rely mainly on things like silhouette, floor patterns*, open doors, other decoration, and light shining through the doorway to show the door is here. You might even benefit from not having the top of the door indicated with the break in the wall, since it's a distracting visual element that doesn't correspond to the walkable part of the door.
* By having floor patterns that cross the doorway (lengthy carpets joining rooms, continuous floor texture instead of borders like at other walls, etc), you can subconsciously hint that the rooms are linked in that area, so the player doens't even "see" the wall between them.

An unrelated thing: Your walls feel very flat because the wood is perfectly aligned with the stone and plaster/daub, looking more like a wallpaper with those things drawn on rather than actual structure. Letting them stick out would help with that. You don't have to break tile boundaries, you could have a couple of pixels of wood/dirt/dark-dust at the bottom of the stone or something like that.

Here's a fairly minor edit:

I gave the walls a bit more volume by raising the stones a couple of pixels, and added sticky-outy bits at the bottoms of each pillar. Those same sticky-outy bits are visible around doors. I made the rugs less brown (so they don't blend visually with the walls; they don't have to be lighter, I just used the available non-brown colours)  and extended them so that they look more like rugs laid between rooms, rather than just something attached to walls. In the back room, I also "opened" the door. I got rid of the tops of the doors, since they weren't conveying useful information imho, and were just "lying" about where the door is.
This is still not as clear as the north/south doors, but I think it reads better than before, at least to me.

Something missing from my edit is a distinctive visual element for the doors. For example, what if all the doors had little awnings, or some sort of supports, or other bits that stick out and look similar in both front and side view? Those would help a lot.

[0xDB]

Instead of leaving the cutoff empty, a simplified dark top view of the beams around the door could be drawn and a few pixels fading out on the sides to hint at the direction of the adjacent beams:

[startselect]

Wow thanks for the great replies! The wall volume edit is great!
Both of you saw the top of the left-right doors but what I was trying to do was the show the edge of the wall visible through the opening, there isn't supposed to be left-right doors at all, just openings. And nobody seeing that just hammers home the point about my terrible readability
The stick-out bits next to the openings are still viable though, and the rug edit is great! When I decide on a floor I can change the rugs to blend more with the floor so it feels more continuous like your rug edit eishiya.
I wouldn't mind cheating with the width of the opening but sometimes (like in this example) there isn't really room below the door for that before the end of the wall. But maybe the light bottom and dark top transition will help with that.

Will update when I have time to do an edit, most likely monday. Just wanted to say thank you for the great reply right away!

[eishiya]

If they're just meant to be openings and not doors, then going wider is definitely a possibility in at least some areas. In this example, the top opening could simply not have the front bit of wall:


Here's a question: Since you're so concerned with the heights of the walls being represented accurately, what are you doing regarding characters walking behind walls and being hidden? Can characters actually do that, or are the lower few tiles of each wall non-walkable? If the latter is the case, then you'll have to rethink how you do the east/west openings, since where the opening is won't actually be walkable, and wider openings with a bit of floor visible are likely to be your only viable option.

[startselect]

I was thinking about making the inner walls below the player either very transparent or removed entirely. Now that you mention it maybe that should extend along the vertical walls up to each opening too. That way the opening will be very apparent at least when the player is in the same room.

[startselect]

Finally had an hour to try to incorporate some of the edits and test out the inner wall fades. Also started on a wood floor tile but it's quite strong still, I will try to make it softer without looking washed out.
First the new edit with the player standing below the inner horizontal wall.

Then here are two possible versions of the player standing above the inner horizontal wall, one with 25% alpha and one where it is completely removed.

What do you guys think? Any more pointers? The last ones where super helpful!

[eishiya]

I'm not a fan of fading/disappearing walls myself, but if you have to have them, then I say go with the fading walls, perhaps at a slightly higher opacity than you currently have. Lower contrast in the floor should help the faded wall look better, too. Right now it's clashing too much with the floor texture, a subtler texture would avoid that clash.

[startselect]

I lowered the contrast of the floor and now I'm quite pleased with it. I also furnished the house to see how that would look and now I hate both the invisible/transparent version. Should I just shift the top rooms up 48px to avoid hiding stuff behind the horizontal inner walls?

[eishiya]

Do you plan to actually use the ability to "hide" stuff behind walls? If not, then sure, just make that area unwalkable.
Also, you might not need to make the full 48 pixels unwalkable, you only need to make enough unwalkable that the player can see enough their character when they're behind the wall to clearly know where they are. That may only need to be 32 pixels or less depending on the height/scale of the character.

You should make the top of the walls more distinctive as well, maybe give them some little stubs?

Here's an edit with some stubs, and also a gradient up the side of the opening just to make it stand out even better from the top of the wall. The gradient isn't necessary when the floor is visible (like in the bottom room), but I think it helps with the openings where the floor isn't visible, like at the top.


On a semi-related note, the environment sprites look good, but they're very noisy! I think reducing the contrast a tad, especially on the shelf contents, would help a lot. Adding some shadows below the tables and chairs would also look nice. Some games achieve such shadows by having translucent shadows on the sprites, others use dark floor tiles to approximate shadows.

[HarveyDentMustDie]

Hi, I agree with @eishiya about noise and how shadows will contribute to overall look.

Main problems are noise, colors and in my opinion consistency of light source.

Noise can be reduced by better rendering of specific textures (like wood in this case) and possible reduction of used colors, or attempt of reusing them (which you already did at some places ). I see that you have patience and wish to make it work, you just need to simplify lines some time and group them when ever you can into one shape. It's like you are overthinking it, especially in smaller elements you draw them like they are stand alone pieces and not part of something bigger.

Colors can be adjusted, and it's all based on personal preference, some people like more saturated and strong colors, some people prefer softer approach but there's definitely room for improvement here. You've tried to achieve contrast trough low saturated almost gray floor and more colorful elements like table and chairs. I would suggest experimenting with level of darkness as well next to hue.

Consistency of light source is disturbed in some elements and areas because you have impression that you will render them better that way. That may be true but then you need to adjust the rest of the scene to match it. In your case most dominant is top down light but then on some elements it's diagonal.

I've made small edit, I don't have the time to work trough whole scene and polish it, it's more to show possible alternative solution for your troubles. I hope it helps.

 

PS Think about how some elements are far from the wall, for example to me it appears like there's room behind a bed that person can get behind it. Main reason for this confusion is that eye use other elements to determine size and position when something is off eye may read it wrong.

[startselect]

Oh my god thank you both so much! The new colors and shadows and wood textures and studs and fades are all amazing! I tried having the light source from the top left but maybe forgot/failed on some props. I will rework the house to incorporate the changes you showed me but it will take some time, did a bit today during lunch but didn't even get the walls and floors done. I will post my progress as soon as I can. I just have 2 questions in the meantime.

1. where can I learn how to draw wood texture like you guys? All tutorials I find are for much higher resolution than what I'm going for. I could copy your texture pixel for pixel but that probably won't last me very long when I try to do other shapes etc.

2. How did you select those exact colors? I try doing hue-shifting, being mindful of my saturations etc but your colors just feel right. When I see them side by side mine look like a screeching mess, and this is like the third major revision of my standard wood colors, which I was really pleased with until I saw the new (soon to be fourth major revision) colors in your update. Is it just time and practice or am I missing something that's obvious to you when I try to do color ramps? I've been doing pixel art consistently for 3 years now, several hours a week but I can't seem to get colors right at all.
Sorry for the rant I'm just blown away and confused at the same time.

Thx again!

[eishiya]

1. There's no simple answer to learning how to do something, everyone learns differently. For me, analysing the real thing is the main way to learn. Look at real wood. Look at real wood up close, look at real wood from a distance. What makes it look like what it is, even from a distance where the details aren't visible? What things are visible at different distances? Sometimes, it's just the interplay of colours, sometimes it's texture, sometimes it's many things. The curvy wood patterns are often not visible from a distance and are usually quite faint, so adding them tends to look exaggerated and might feel too cartoony for more realistic styles.
For distant wood like this, I instead suggest low-relief texture with some long lines of pixels like in my edit. It's pretty generic and can look like many kinds of textures depending on the context. The lines follow the direction of the texture - lengthwise following the generally lengthwise grain in wooden beams, but they could be horizontal, diagonal, etc depending on the texture and the orientation of the object.

2. I can't speak for HarveyDentMustDie and I didn't do anything with your colours, but in case you want another opinion on colour-picking:
Hue-shift more, and hue-shift consistently, that is, hue-shift your shadows all towards the same hue, and hue-shift all your highlights towards a second hue. This helps make the colours unified. HarveyDentMustDie's edit makes the shadows consistently more purple, and the lit areas consistently more orange/warm-brown.
Don't be afraid to exaggerate the coolness and warmth of colours, especially for interiors. Think more about how a location or object feels or look at a first glance instead of worrying about the actual real colours of things. Wooden houses often feel very warm compared to the cooler colours outside, and accentuating the warmth of the browns helps convey that, even if in reality the colours would likely be quite dull.
HarveyDentMustDie's edit makes some subtle but important changes that aren't just palette-related: they make the tops of objects lighter, and the sides darker, which looks more natural because we're used to things being lit from above, and helps the tops (which are things we see best at this angle) stand out better. They also reduced or even removed many of your textures, because they weren't necessary and were harming the readability of some things.

I think HarveyDentMustDie's edit has some contrast and readability issues as well, so you still have plenty of opportunity to practice your colour-picking and colour placement

Edit: Not quite a colour tutorial, but this tutorial on light is worth reading (it's multiple pages, don't miss the links to the next page at the bottom). Colour is the result of light, and understanding how light interacts with things and how it "carries" colour should help you choose colours more effectively.

[HarveyDentMustDie]

@eishiya I've just tried to offer possible solution regarding overall impression of the whole scene. It's not properly detailed edit and I agree that there's room for further improvement, I just didn't had more time for it. Feel free to edit it further.

@startselect

1. I would say practice with proper references is best approach. It's enough to draw one plank or beam of wood properly would bring you better understanding of wood structure for your second drawing. You don't even have to draw it with purpose of directly using it for a game, just draw it on it's own as a form of preparation and then try to apply that to the scene. As @eishiya said different details or characteristics may be disregarded in different situations to make it work for specific perspective, size, distance from watcher etc. so you should mostly have idea how texture should look and then find a way to make it work.

My wood edit is mostly on the door and even that is not very carefully done, everything else is just removing the noise and smaller details.

Pixel art is form of compressing visual information while still keep it recognizable. Learning from other pixel drawings may give you some hints of how some things can be handled but I think you will learn much more by trying to replicate actual photo reference. Even if you "fail" don't worry, just try again it will be better.

2. Honestly I didn't do any special, just played with colors a bit to make it work. @eishiya explained hue-shifting so I would just additionally recommend testing it out in different occasions and after some time you will get used to experiment with bigger color shifts. I've learned it over time and I can't say that I know ton of things about color, it's a very broad topic and for me true masters are traditional painters cause there's no color adjustment option there, with digital you can always change and adjust until it looks right without any harm to the piece.

If you are not sure how to start, even if everything sounds quite simple, you can sample colors from drawings you like and look at color wheel or color "square" to see where those colors are approximately and analyze it, after some time you will see some pattern in all greatness. Also there's never a right way, you will find your own approach.

[startselect]

Thanks for the great advice!
I got some extra time before work today to continue my edit. I'm really pleased with the result so far!

Tweaked some of the colors just a tiny amount.
Widened the tops of the vertical beams inside the walls.
Changed the wood texture to look more like the door frame beams @eishiya did.
Tried the change the door wood texture to look like @HarveyDentMustDie's edit.
Added a dropshadow right of the vertical beams.

edit: I see now that I missed changing the row of pixels below the stone part of the internal wall to the new midtone of the floor. It's supposed to look like the top wall.

[eishiya]

I think the dark lines on your floor are too high-contrast. This will both hurt readability once objects are added, and makes the boards look like they have gaps between them.
I also think the floor's a bit dark and this could hurt readability, depending on the colours of the foreground objects.

The dark lines on the floor line up with the tile edges, it seems, which makes them tangent with other things that line up with the tiles, like the tops of the pillars, bottoms of the walls, table lets, etc. Tangents are distracting and look weird. I'd shift boards down a bit, so that their edges don't line up with the tiles.

Do the pillars need the dull, slightly-lighter brown on top of them? 0xDB's edit used them to help highlight doors, but since you have openings rather than doors, it seems unnecessary to me.

[startselect]

I lowered the contrast of the lines in the floor and shifted the planks 4px up/down to hide the grid some. But I kept the overall color, and will come back to it when the furniture is more settled. I also tried a new wood texture, the same as I tried on the door for the floor. Something is def off with it but I can't put my finger on it.

[eishiya]

The texture probably feels off because it runs across the boards, but real boards are cut with the grain so that they can have the length that they do. In addition, the lengthwise texture would be getting horizontally squished by "perspective" in this case. So, a vertical-ish texture like this feels doubly wrong.

[startselect]

I tried a new more horizontal floor texture.

I find it very hard since it's just 4 tiles, 1 main and 3 variations. And now that I've shifted the boards down 4px the vertical board breaks can only be on the middle board without causing a tile dependency.
Here are the 4 tiles.

Do you think I should do more tile variations?
Also, now that I've worked on the wood textures and colors the stone and white wattle and daub parts look kinda flat. Will work on that tomorrow!

[eishiya]

I think these tiles work fine. You don't need more variants - remember, you're going to have furniture and other clutter covering up the plain bits, so the repetition won't be a problem.

[startselect]

Did a quick update of the stone parts, and I think they look less stiff now. I tried a few color variations as they seem quite gray now compared to the wooden parts of the walls but they all looked horribe so I skipped it. Most of the stone parts of the walls will be covered by furniture anyway

[startselect]

Started updating the wooden furniture. I think it looks much better but any C&C is welcome!

[eishiya]

I recommend showing it in context, even if just by sticking the whole spritesheet on top of your mock-up. It's hard to tell whether the colours and textures work out of context.

Are the cabinets going to be arranged out of tiles, or are they sprites? If they're sprites, then you might as well give them unique textures instead of copy+pasting.

I think the lightest colours on the cabinet contents and handles could be made darker, so that they don't stand out as important/interactive items like they currently do.

The books(?) and apple-basket in the shelves on the left don't follow the same perspective as everything else, we should be seeing the tops of them (and those tops should be partially blocked by the shelf above).

Are the white glasses in the 2nd cabinet from the right meant to be bright white? For contrast's sake, I think a colour more like the plates or even darker would be better. If they're meant to be glass, don't forget that glass is transparent, so they should be mostly made up of the surrounding wood colours, but with some highlights showing their shape.

Good idea to make the table boards vertical, so that they stand out better against the horizontally oriented boards on the floor!

The light in the scene seems to be coming from above, so you probably don't need highlights on the table legs, since they'd be in shadow.

Are the drop shadows going to be on these sprites, or added separately?

[startselect]

As always thank you so much!
I tried adressing all points, couldn't make the apple basket work so it had to go though.
- Gave everything a unique texture, I have 79 pieces of furniture so I was cutting some corners when I really shouldn't.
- Lowered the highest colors on content and handles.
- New books with correct perspective, hade to make them 3px wide though.
- Tried my hand at transparent glass for the first time. Looks more like glass than before but could probably be improved more.
- Removed the highlight on the table legs.
- Added a 50% alpha purple shadow under the tables (in the sprites). I work in Pyxeledit since I do a lot of tilesets and it's not great at alpha so I usually leave it until the end.

[eishiya]

You could get away with 2px books if they're all next to each other, since the covers would all stack up and form a pattern of dark-light-dark-light-dark :]

I still think the shelf contents grab too much attention and should have lower contrast if they're meant to just be unimportant background elements.

The purple shadows for the tables have a few problems:
1. The table legs look like they should be set in, but they're so much brighter than the shadow that they're apparently unaffected by it, even though they should be. In addition, because they're set in, the bottoms of the legs should also be in shadow if the shadow is cast directly downwards.
2. The shadows on the vertical tables line up with the board edges. This would be easily fixed by the same fix as #1 - extending the shadows downward a few pixels.
3. The most important one: the purple colour feels out of place because everything else in the scene has much weaker hue-shifting towards purple, and many objects don't hue-shift that way at all. Either the shadow should be browner/greyer (boring!), or you should adjust the baked shadows to have a similar degree of hue-shifting.

[startselect]

Took a while to update all furniture.
I darkened all furniture legs set in shadow and lowered all shadows 2px.
I went with the boring gray shadows, I can't imagine myself succeeding with changing all colors so the ramps all go toward purple shade. This is already the nicest tile/sprite-set I have and at some point I have to move on to the next thing so this is my final update on this unless someone points out something obvious/simple to change.
I just again want to say thank you @eishiya, your help has been invaluable!
So here it is, probably the final mockup. I'm going to start writing a generator using this tileset and these sprites now!

[eishiya]

It's looking good! I'm going to reiterate my critique about some of the shelf contents: they still feel too high-contrast, mostly because of the golden bits on the books.

Here's an edit where I changed the gold lines on the books to be the next lightest brown rather than the bright wood highlight colour, and I made some very simple colour tweaks towards purple:


I say "simple" despite the extensive change because I used Photoshop trickery to achieve it, and only hand-edited 4-ish of the colours.
1. Select all the shadows so that darkest colours are most selected and the lighter colours are less selected (i.e. not a binary selection). In PS, I used Select -> Select Range -> Shadows, but there are several ways to achieve this, and it can be done in other programs too.
2. Fill that selection with your desired shadow-shift colour on a new layer. In this case, that was purple. Set the layer to Hue or Color mode (whichever you prefer; I used Hue in this case). This makes all your shadows progressively purpler.
3. Set the opacity to taste, probably pretty low.
4. Repeat steps 1-3 for the highlights, using the opposing colour (I used yellow). The opacity might need to be different; I used a higher opacity for this one than for the purple.
After that, I manually tweaked the greys on the fireplace and the wastebasket/boiler (the latter two use the same colours), mostly since greys aren't affected much by Hue blending, which doesn't change saturation. I replaced the darkest greys with various purple-browns from the wood. I also tweaked one of the mid-browns on the wood because there was too sharp of a jump between warm brown and purple-brown, so I tweaked its hue to be a little more purple.