Need advice on lighting effect on pixel background.

[Lipless]

Hi fellas, this is my first post but I've been trolling the site for years now, and after getting my new pen tablet I finally started getting down to making my first game.  I wanted to do it pixel-style the first time around, I figured it would be easier in the long run and help me learn the basics.  I just started off with a room that would be useful as an entryway in a home, it's unfurnished at the moment because I'd like to do a bit of lighting study on the walls, figure out how the ceiling light would play on the bare walls and floor before I start throwing things into the room for it to play off even more.  I made a shag carpet which I think I got the shadows on ok (or maybe it stinks, you tell me) and just made a grey wall.  It won't stay grey, I just picked a base color to do the lighting practice on.  My trouble is just picking the color combinations that will make it seem bright and glowing, or dim and yellow even, and how I'd work the effect down the multiple walls.  Ok, that seemed kinda rambling but if anyone has some advice I'd really appreciate it!



And a little larger:

[Babar]

Since the texture on the carpet at the front and at the back is exactly the same, it causes an issue with depth perception. Since at both ends they're at a pixel level, you can't go smaller than that, you could either merge the colours of the dots further back, or go into greater detail (show a couple of individual "hairs"?) at the front.

If the ceiling light is the only lightsource in the room, surely the inside of the doorway would be partially lit?

[Lipless]

I get what you mean about the carpet, but I was going to forgive it, I mean shag carpet's just a jumbled technicolor mess reminiscent of old dreadlocks anyway, but I'll play with it more and see if I can't make it work and pop better.  As for the lighting, that wasn't a finished example, I imagine it would get into the doorway, I just hadn't worked it out that far yet.  That's actually part of my questioning, I imagine this light as a bright but grungy light in an old home, but I'm not sure how far to work the dithering effect down the walls, and what about the walls on the sides of the room? And I'm kinda just having general trouble figuring out how to make it look like light.  I just couldn't seem to find a tutorial anywhere that helped explain the concept better to me with relevant images.  I'd seen one ages ago but can't find it now.  The main thing I need help with is the physics of the light, where it would play in the room and maybe some possible pixel technique help representing it properly.

[Lipless]

I did a little meditating (staring at the picture) for a while and colored out a gray scale on the wall, and I think I might have gotten it pretty good, but could I get a second opinion or even a third on it before I choose my final color and start blending it all in?



And larger:

[Cassiebsg]

I think that the lack of ceiling here isn't in your best interest. The lamp looks like a ceiling lamp, but seem to be placed on the wall above the door, but that would be weird since it's sticking into the doorway.

I suggest you add a ceiling, even if you don't use it in the end BG, but would help you out figure exactly where the lamp is, what shape it has and where it casts light to.
Also remember that it also needs to cast light into the floor.

[Monsieur OUXX]

I don't think you should keep those concentric circles of light around the lamp. You used a simple shading (with dithering) for the carpet, so you should do the same for the wall. Just two colors (light gray + dark gray) with a bit of dithering inbetween would be more consistent.
For the rest, yes, maybe adding a bit of perspective to the carpet's texture would be good. But not absolutely necessary; the drawing style is a bit naive, as in Maniac Mansion. So try to make the best of it without cluttering it too much. Consistency wil be thekey here.

[Monsieur OUXX]

Also some general advice on shading depending on the position of the lamp. If the lamp is close to the back, then yes, keep that almost-white halo around it. Otherwise, drop it. And in both cases, the wood inside the right-hand-side door should be much darker..

[imgzoom]https://31.media.tumblr.com/c7f0ce653bd0744f25d32288fc3008ba/tumblr_ng7wfw5zAz1tsfksfo1_1280.png[/imgzoom]

[Lipless]

Thanks everyone, and especially thank you Monsieur OUXX, that was exactly the help I needed, your above-view diagrams really helped to see the reasoning behind the difference between my example and yours, and that'll help me a lot from now on.  Thanks for the words on consistency too, I'll make sure to keep that in mind also.  And Maniac Mansion was my main drawing point so I'm glad you mentioned it.  I liked the style for my first attempt at a game because it's naive like you said, it allows for some straying from correct perspective sometimes, it's simple yet detailed, I can take more liberties (or be a bit lazier, whatever phrase works better for you) and still get quality out of it.  That way I can give more focus to the other parts of the process of making a game as well, and not just drawing backgrounds.

[Snarky]

There used to be an article somewhere by Yahtzee about how he would draw and shade rooms in a style pretty similar to this, if anyone can track it down.

[Lipless]

That would be a great read, Yahtzee's earlier stuff was the definition of 'professional amateur,'  it'd be interesting to see him break down his technique.

Ok, did some reworking, the advice really helped, it's coming together well I think.  Added a few things in the room in the back, think I'll start putting some furnishings in the main part now too.



And larger:

[Monsieur OUXX]

Nice. It would be better if the limit between dark green and light green was curved instead of a straight line, but, oh well, that's much better anyway.

Drawing tip: don't use black for the outline of a luminous object. The lamp's outline would probably look better in white.

optional: You could add a very simple foreground (just some black plus one color for the outline) to make the floor look less big and empty.

[Lipless]

I actually tried a curved dither but I kinda sucked at it, so I figured I'd be better off with straighter lines than a crappy curved one.  I figure after I get some more rooms done maybe I can come back and take a fresh try at it.  'll also change out the light's outline color, thanks.  I'm actually going to put some objects into the room later on when I get things fleshed out more with the rest of the rooms, so hopefully it won't look quite so empty, and I've already added an area rug to remedy that openness a bit, but I might try that foreground effect anyway, I might be able to do something neat with it.  Here's what it looks like now with the rug, and I've started on the room through the archway (and the secret room beside it:

[Darth Mandarb]

The lighting still doesn't feel natural to me... it's more of a spotlight than an omni light (and that's not usually the type of light you'd put in an area like this).

I did a quick paintover to offer some suggestions.  I didn't bother with all the details, just wanted to give an over-all sense of the lighting.  I also, obviously, used a lot more colors than you did but you could still dither with the lighting I have shown.


- added a ceiling
- fixed a few perspective issues; (left in the VP to show) the door (on the right) was off a bit and the archway in the middle was showing too much of the left jam
- updated the texture on the floor (that bright orange hurts!)
- created the depth (carpet texture fading off).  Seriously, it would take only a few extra minutes to give the impression the plush is in perspective and really helps the over all image
- the shadows as you have them (through the archway) are just wrong... the darkened areas would not be visible from the angle of this scene given the light's position

This isn't perfect of course!  I just wanted to show how a ceiling light like that would/should affect the walls/floors around it!


Hope it helps!

[Lipless]

Thanks for the effort Darth.  I'm trying to keep to the 8-bit low color style, but the much more detailed mockup you made makes it a lot easier to see where the details should be.  I thought it would be easier to work simpler, but it almost seems like it's harder sometimes working with the constraints of less pixels/colors.  I saved your example as a study, and honestly I was going for that hurt-your-eyes carpet (I want it to look very 1988), but I like how you did it, it looks just like shag.  Mind telling me how you do texture like that?  I'm a pretty good artist but I'm new to doing it on a computer, especially pixel art, and though I have some other programs I'm just using MSPaint for this stuff, so I've been doing it pixel by pixel for the most part, aside from copy/pasting.  I imagine you're using a bit of automation right?

[...]

You're really doing a great job so far. Don't give up on 8-bit, Lipless.
I can show you how to use MSpaint and point you easily in the right direction. All you need is to be a bit self-confidently about what you really want. Do you wanna have it looking more like VGA times or a bit modern? And what should your color limit be?

1. You have to correct your perspectives, they are distorted. You are using different angles where they should match. Because of that it's much harder for you to put the room together.
2. You have to know your color palette pretty well, especially if it comes to darkening and light. If you do not know how a color will develop in process, it makes it for you a hundred times harder to choose matches.
3. Train more on basic shapes, squares, triangles and circles.
4. Try out different pixel patterns.

It is basically a geometric issue and a matter of isometric pixel art. You have talent, you can do it, I'm sure.



- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Let me show you something in case you do not know yet.
I love to work with low colors, for you a 6 x 6 x 6 RGB color cube is a good start even if you are not using all of them. VGA is a bit different. What this does mean:

In RGB you got [6] or 16 layered elements like that -

• [/b], 17, 34, [51], 68, 85, [102], 119, 136, [153], 170, 187, [204],  221, 238, [255].
  Converted into Hex they are [00], 11, 22, [33], 44, 55, [66] , 77, 88, [99], AA, BB, [CC], DD, EE, [FF].
  I think you know that the value of red, green, blue determines the color result at the end. Todays MSpaint is working in RGB.
  
  Have a look on my color card, it's out of a sixer. See how the same 216 colors are developing in different light values.
  
  Spoiler

  

  [close]
  I've spend a lot of time with this little tool. I do not even have to write the notations under the colors any more, I can read it blind.   
  
  If you do need me, I have in a few days plenty of time.
  
  

[Monsieur OUXX]

1. You have to correct your perspectives, they are distorted.

That really strikes the eye in the room with the TV. The left-hand-side room uses a vanishing point. That's good. But the right-hand-side room (the one with the trapdoor) doesn't use that vanishing point. Instead, the vanishing line is parallel to the right-hand vanishing line of the other room. That makes no sense.

[Darth Mandarb]

I'm trying to keep to the 8-bit low color style, but the much more detailed mockup you made makes it a lot easier to see where the details should be.  I thought it would be easier to work simpler, but it almost seems like it's harder sometimes working with the constraints of less pixels/colors.

I usually do a (non-limited shades of) grey-scale "mockup" for the lighting/shadows before I start throwing colors into the image.  Just to get the "feel" for the scene's lighting. 

This is extremely helpful if you want to stick with a limited palette as you can see where the light/shadows are before applying your color.

Mind telling me how you do texture like that?

That was just a simple noise filter (in Photoshop).  I then used a solid-to-transparent gradient (from the top down) to 'hide' the details (towards the top of the image) to create the illusion of depth.