Artwork Help for Making Night Levels

Discussion in 'Public Game Developers Forum' started by bossman696, Apr 24, 2010.

  1. bossman696

    bossman696 Well-Known Member

    Sep 11, 2009
    76
    0
    0
    Graphic Designer, Commercial Printer
    Alabama
    I wanted to pick the brains of the fellow graphic artists out there and see if they knew of any tutorials on making "Night Level" graphics for games. I have severals things in the works and would like to say.... convert an existing daytime photo or game graphic to nighttime complete with lighting effects etc.

    I'm pretty confident I have the lighting and lens glare effect down, but would appreciate any help on that as well. But the main thing I was wondering if maybe someone knew of a technique I could use to maybe make a overlay layer to "darken" the current elements.

    Any help would be greatly appreciated!
     
  2. micah

    micah Well-Known Member

    Aug 24, 2009
    362
    0
    0
    game developer
    San Francisco
    Lighting effect is a good idea. It completely depends on your graphics style for the game, but a lot of times night-time graphics are only slightly darker, but very much more blue and purple and grey. This way your sprites can still be fairly bright but they look like they're in low-light.
     
  3. Flickitty

    Flickitty Well-Known Member

    Oct 14, 2009
    761
    1
    0
    iPhone Dev
    As micah said, colors tend to shift to blue in darkness. However, changing a daylight photo or image to night is not an easy task. Light sources are completely different, shadows are cast differently.

    A skilled artist would simply stylize the entire set of graphics, so that the effects would appear to be on purpose, rather than a gimped up half-assed attempt.

    If you post an image, it would be easier to tell you what needs to be done.
     
  4. bossman696

    bossman696 Well-Known Member

    Sep 11, 2009
    76
    0
    0
    Graphic Designer, Commercial Printer
    Alabama
    Desert Level Sample Pics..

    Here is a quick sample of what I'm trying to do. I tried this overlay on the original graphics a couple of weeks ago and wasn't quite sure this is the look I was going for. I read a few tutorials and looked at a few night pics and noticed the colors were muted and in a blueish purple tint.

    I have included a quick before and after shot.

    [​IMG]
    Day Time Original..

    [​IMG]
    Night Time with Overlay...

    The backgrounds are the main things I'm working on. I wanted to get the base work correct before I started adding things like runway lights, building lighting etc....

    Any point in the right direction would be greatly appreciated!
     
  5. Flickitty

    Flickitty Well-Known Member

    Oct 14, 2009
    761
    1
    0
    iPhone Dev
    #5 Flickitty, Apr 24, 2010
    Last edited: Apr 24, 2010
    It looks like you have everything under control. This isn't a photograph and you are working with a topographical viewpoint, so this makes the task much easier.

    I think your color is suitable for night- I had no trouble seeing it as a night view. It doesn't look out of place and it doesn't look wrong (this is what I meant by stylized).

    In some cases you can turn down the contrast and drop the saturation, then shift to blue using an overlay. But I don't think that is necessary for your art. The details look nice in the night view.
     
  6. EssentialParadox

    EssentialParadox Well-Known Member

    Sep 21, 2009
    602
    0
    0
    UK / Toronto
    #6 EssentialParadox, Apr 25, 2010
    Last edited: Apr 25, 2010
    I like the initial dark effect you've done in the image above, but it's likely to be difficult to see on the iPhone screen at certain angles.

    I've studied lighting for film and cinematographers can't actually shoot it in darkness or else nothing would show up on the camera. As mentioned by micah and Flickitty, they'll use blue light. If you find the correct bluish hue you might be surprised how bright you can make the scene while keeping it looking dark.

    Taken from Halo Wars, I think this is a good example of night vs day:

    [​IMG]
    [​IMG]

    Another thing you can do is use a few highly accentuated, high contrast light sources:

    [​IMG]

    In your example image, I notice the runway lights. What you should do is make a lit area around each of those dots of light and casting strong shadows on the surrounding rocks.
     
  7. bossman696

    bossman696 Well-Known Member

    Sep 11, 2009
    76
    0
    0
    Graphic Designer, Commercial Printer
    Alabama
    Thanks for all the great suggestions.... I think I have a good direction to go in now and will try and put together a few more samples soon.
     
  8. Ler

    Ler Well-Known Member

    Aug 26, 2009
    564
    1
    0
    Europe
    try to make glow light something like this (it is quick variant)

    [​IMG]

    may be try to make lights blinking
     
  9. EssentialParadox

    EssentialParadox Well-Known Member

    Sep 21, 2009
    602
    0
    0
    UK / Toronto
    Blinking lights would be a cool effect. Especially if you can make them blink in a row, like a real runway in a flight sim. You even have the potential to go a bit further and add blinking lights to the planes too!

    But when I said have the lights glow, I kinda meant like this:

    [​IMG]
     
  10. egarayblas

    egarayblas Well-Known Member

    My suggestion is to divide your background sprite into layers--try separating the mountain range from the ground so you can adjust the brightness and contrast for each sprite separately. At night, try putting some more "white" or "highlight" on the mountain tips and more shadows below each mountain. Also, a transparent top-view moving fog (or smoke) across the screen would be great for a night scene.
     
  11. bossman696

    bossman696 Well-Known Member

    Sep 11, 2009
    76
    0
    0
    Graphic Designer, Commercial Printer
    Alabama
    I really like what you did with sample image! I already had plans of doing just that on the runways with the blinking lights and fog which we had on a couple of our day levels. But I REALLY like how you did the high contrast on the mountains and even though the color is much lighter, I can still picture it as a night level.
     
  12. Maybe you can add some lights to the buildings so that they light up the planes on the ground. They can cast long shadows like in the Halo night pic above.
     
  13. The glow on these looks good, but I think it would look better if you could see the point source more strongly in the center.

    We will definitely have the lights blinking/strobing in a pattern to show the landing direction.
     
  14. bossman696

    bossman696 Well-Known Member

    Sep 11, 2009
    76
    0
    0
    Graphic Designer, Commercial Printer
    Alabama
    White Hot Lights....

    I was actually thinking of using a white "Hot" center for the lights and let the color of the light fade out very similar to what was presented in the sample.

    The buildings would have lights casting shadows where necessary, but I forgot about "street" lights etc which looks pretty cool in the sample!

    The guys here have been very helpful and it is greatly appreciated.....

    Now if only I could find another coder for Loading Dock as good as MindJuice, but not quite as busy... :D
     
  15. micah

    micah Well-Known Member

    Aug 24, 2009
    362
    0
    0
    game developer
    San Francisco
    This would go in a completely different direction than what you're doing now, but since your game is sorta military-themed, you can give everything a green tint and completely replace the heads up display to make things appear like you're looking at them through night-vision goggles, maybe adding a cross-hair in the center or something. If you do it well it could look pretty cool. But the direction you're going in now is looking great too.
     
  16. bossman696

    bossman696 Well-Known Member

    Sep 11, 2009
    76
    0
    0
    Graphic Designer, Commercial Printer
    Alabama
    That's Funny....

    We were actually planning on using that effect for the in-game menus?

    Glad to know we are on the right track here... :D
     

Share This Page