Search Unity

Help! Beginner trying to recreate mirror's edge dlc look

Discussion in 'General Graphics' started by HKSpadez, Mar 18, 2015.

  1. HKSpadez

    HKSpadez

    Joined:
    Apr 24, 2013
    Posts:
    87
    Hey all,

    I'm 100% a programmer and total beginner. Know nothing about shaders/renderers and lightmaps. I thought it might be simple to recreate a scene like the image below but I cant get it quite right and honestly dont even know where to start. As mentioned in the title, the scene is from the mirror's edge DLC. I just love the look and thought I could make a simple game out of an environment like this. could someone please point me in the right direction?



    I thought it would be simple cause its just basic colors and blocks but I cant get the color of the red right. I tried to simply make a "material" and used the eye dropper on the red. but that didnt work out. i also tried changing the ambient color a bit but that didnt help too much. also not sure where to get a simple blue skybox like that.

    Also do I need a "white" material for the white blocks or just default will work?

    Please help :( not sure where else to ask.

    Thanks a bunch for anyone willing to help out.
     
  2. the_motionblur

    the_motionblur

    Joined:
    Mar 4, 2008
    Posts:
    1,736
    I asume you use Unity5?
    In that case your materials can be created entirely without texture maps, if you want to. A rougher plastic should do fine.
    Most of Mirror's Edge's looks derives from a really good lighting, though and if you'd be aiming for the look of the main game it would actually be a little more difficult to achieve. Minimalism can get tricky and sometimes be even more complicated - especially to keep consistent. But keep on practising and you'll be fine. :)

    For the lighting: Try a procedural skymaterial and a directional light. The blue-ish look Mirror's Edge has doesn't come from the materials themselves. It's the atmosphere. And that natural look is light bouncing off of the materials and into the scene (Global Illumination "GI").

    http://unity3d.com/learn/tutorials/modules/beginner/5-pre-order-beta/standard-shader
    http://unity3d.com/learn/tutorials/modules/beginner/unity-5/unity5-lighting-overview

    http://docs.unity3d.com/Manual/GlobalIllumination.html

    If you feel you are stuck post your progress and ask for further help.
    But most of all - don't get discouraged and keep on trying undtil you've reached a point you like. :)
     
  3. HKSpadez

    HKSpadez

    Joined:
    Apr 24, 2013
    Posts:
    87
    thanks for the reply! i'll definitely check all those things out.

    im definitely not so ambitious to go for the look of the real game. just anything close to whats in the DLC or in that picture would make me beyond happy.
     
  4. theANMATOR2b

    theANMATOR2b

    Joined:
    Jul 12, 2014
    Posts:
    7,779
    Not to pump up expectations but I'd expect you can remake the exact look - and maybe even better. The Unity 5 lighting engine you are using should be just as, if not more, advanced than the engine used for Mirror's Edge.
    Good Luck!
     
  5. HKSpadez

    HKSpadez

    Joined:
    Apr 24, 2013
    Posts:
    87
    Hey guys. So after spending a good day learning about basic shaders and stuff. My goal was to at least replicate the colors. and basic feel, but I cant seem to get my reds... red enough? I made a material with eye dropping the red in mirror's edge screenshots but the red just looks totally off in my scene.

    any ideas if its a problem with my lighting? or should i be using a different material of some sort? Just not really sure what to check/change.

    Just somehow feels completely off and the colors dont seem to pop quite right. Sorry if this is really silly but just hoping for some tips to make this look better.

    Any help is greatly appreciated as always. thanks!
     
  6. Botanika

    Botanika

    Joined:
    Nov 2, 2013
    Posts:
    59
    Take this image, along with Neutral3D16 Lut (in the imageEffects/textures folder) to Photoshop or Gimp, color grade it, and import the Lut back to unity to use it with "the color correction lookup" image effect.

    When you get the image inside your photo editor, you'll start noticing what's wrong with your materials and lighting setup, in this case : me.jpg

    the sun light contribution can be cranked up a little, the skybox could be darkened, and the ambient intensity could be toned down a little bit.

    it's an iterative process, you'll have to go back and froth between Unity and your Image editor till you get the desired look.

    To get more information about this technique, check out Unity's documentation, and this UDK tutorial (the workflow is identical)
     
    theANMATOR2b and NomadKing like this.
  7. the_motionblur

    the_motionblur

    Joined:
    Mar 4, 2008
    Posts:
    1,736
    To start off - I think you are on a good way. :)

    Eye dropping the red won't get you far, though. That's because in the screenshots from Mirror's Edge there is already the blue from the sky factored into the scene (and thus into the reds and whites). The White probably should be around a 80% grey and from the red take away blue (from the rgb sliders). Keep your screenshot open besides the scene view and adjust to get close. Use the screenshot as a reference only and try to match it by adjusting, lights, environment and materials.

    The red material could maybe be a little more shiny.
    But more importantly - look at the reference screenshot again: the shadows are also giving more definition to the scene and there's post processing effects over the scene as well.
    There's a little bloom/glow and you might want to increase the contrast of your game. To do that import the image filters and look for the contrast or LUT (look up table). The contrast alone might be enough in that case already. If you want to use the LUT you can pretty much create most contrast and color adjustments from photoshop in your game - just follow @Botanika's links to see how to do that. :)
     
    theANMATOR2b likes this.
  8. the_motionblur

    the_motionblur

    Joined:
    Mar 4, 2008
    Posts:
    1,736

    I've put together a small test scene. here's the Package: Link

    Have a look at it and analyze it. A lot of the color "bite" comes from post processing. The general atmosphere is just basic materials and Lighting. :)

    (edit) Also - don't overdo it with the red blocks. Mirror's Edge uses strong red to mark the path for the player. So if you use your "punch-color" too much it drowns in your scene and isn't descriptive any more.
     
    Last edited: Mar 19, 2015
    NomadKing likes this.
  9. HKSpadez

    HKSpadez

    Joined:
    Apr 24, 2013
    Posts:
    87
    thanks! that looks great. i'll be sure to study it. you are so helpful . /eternallygrateful *_*
     
  10. HKSpadez

    HKSpadez

    Joined:
    Apr 24, 2013
    Posts:
    87
    Thanks again for all the help guys. Here's an update. I just needed something simple and remotely close to start prototyping a game idea i have.
     
    Last edited: Mar 20, 2015
    NomadKing likes this.
  11. the_motionblur

    the_motionblur

    Joined:
    Mar 4, 2008
    Posts:
    1,736
    Looking good :)
     
  12. Defero

    Defero

    Joined:
    Jul 9, 2012
    Posts:
    200
    Hi,

    sorry for reviving this post, but i have a question on this. The example scene from the_motionblur is amazing in my opinion and yet so simple.

    I do have a question, is it all possible to achieve such look for mobiles?

    It's my first time playing with unity 5 and it's standard shader. I've read it has a lot of problems on mobile, and after changing just a few things ,removing all the image effects, disable realtime GI, auto baking on.
    Anyway... the performace on my phone is really bad. And i'm rendering just 7 cubes.
     
  13. the_motionblur

    the_motionblur

    Joined:
    Mar 4, 2008
    Posts:
    1,736
    Yes. Should be able for mobile with lightmaps. Just don't use realtime GI and stay clear of normalmaps.
    For the best performance it's best to use plain baked GI without any directional influences from normals etc.
    Mobile materials and no physical shaders are your friend for best performance. From there you can increase details to see how good it performs you your destination platform.

    Have a look at the mobile shader and optimizing section from the Unity documentation and beginner's guides. There are a lot of dos and don'ts in there. :)
     
    theANMATOR2b likes this.
  14. MrSecretMansion

    MrSecretMansion

    Joined:
    Nov 17, 2013
    Posts:
    113
    Just a recommendation for the OP, you should use a separate camera for rendering the skybox and the main parts of the game so the image effects wont affect the skybox.
     
  15. HKSpadez

    HKSpadez

    Joined:
    Apr 24, 2013
    Posts:
    87
    Hey guys. necro'ing the thread to ask a quick question regarding this. any thoughts on how to make a material like the floor in the image below? I feel like this game looks a lot like the ME look and I been kind of revisiting the project so was wondering if theres any tips on how to get that glossy lacquer look

    Thanks!
     
  16. shaggydogstudios

    shaggydogstudios

    Joined:
    Dec 26, 2013
    Posts:
    10
    @HKSpadez There's, ahem, no "image below" in your post.
     
    theANMATOR2b likes this.
  17. HKSpadez

    HKSpadez

    Joined:
    Apr 24, 2013
    Posts:
    87
  18. Stardog

    Stardog

    Joined:
    Jun 28, 2010
    Posts:
    1,341
    You have to use screen space reflections from here - https://github.com/Unity-Technologies/PostProcessing

    Just put that folder in your project, drag the PostProcessingBehaviour script onto a camera, and create a new Post-Processing Profile using Assets > Create menu.
     
    LightingBox2 and theANMATOR2b like this.
  19. HKSpadez

    HKSpadez

    Joined:
    Apr 24, 2013
    Posts:
    87
    Last edited: Jan 14, 2017
  20. LightingBox2

    LightingBox2

    Joined:
    Mar 31, 2015
    Posts:
    2,786
  21. teng_hu

    teng_hu

    Joined:
    Mar 12, 2017
    Posts:
    3
    i also like the visual style of mirror edge. and try to remake it in unity.
    I notice that there is a huge difference between the colors of surface A , B ,C depending on the lighting. how to acheive that. i just you use white directional light and white ambient light. or is it something about shader? i use standard shader just set smoothness to 0.84.

    here is the link
    https://s17.postimg.org/gspnlg5n3/snipaste_20170714_182033.png