Downloaded 163 times
Uploaded byElectronic Arts / DICE
SIGGRAPH 2010 - Style and Gameplay in the Mirror's Edge
The document discusses the visual and gameplay design of the video game 'Mirror's Edge' by Electronic Arts, emphasizing its innovative first-person free running mechanics and stylized graphics. It details artistic concepts, color experimentation, global illumination techniques, and rendering optimization aimed at creating immersive environments. The presentation also highlights the importance of realistic lighting and color correction for achieving a coherent visual experience.
More Related Content
Similar to SIGGRAPH 2010 - Style and Gameplay in the Mirror's Edge
More from Electronic Arts / DICE
SIGGRAPH 2010 - Style and Gameplay in the Mirror's Edge
- 2. SIGGRAPH 2010 Mirror’s Edge HenrikHalen Electronic Arts
- 3.
- 4. Mirror’s Edge • ActionAdventure • A new take on first person movement – First person free running – No more gun-on-a-stick • You play Faith – Free running information courier
- 5. Heightened senses • Strongcolors • A stylized graphical simplicity • Contrast in light and color • Full screen effects and filters
- 6. Mirror’s Edge • Threecities - New York - Rio - Tokyo
- 7.
- 8. Mirror’s Edge • <colorpics from rio>
- 9. Mirror’s Edge • <colorpics from rio>
- 10.
- 11. Tokyo • Reference art •One city instead of three – Rio, New York and Tokyo become one
- 12.
- 13.
- 15.
- 16.
- 17.
- 18. Mirror’s Edge • johannesart test
- 19.
- 20. Faith color vision •Color deficiency • Super power
- 21.
- 22.
- 23.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 38.
- 39. Mirror’s Edge • Newvisual target • Experimentation with color • Fully operational beast
- 40. Mirror’s Edge • oscarwhite, from johannes internal and henrik gamefest
- 41. Mirror’s Edge • oscarwhite, from johannes internal and henrik gamefest
- 42. Mirror’s Edge • oscarwhite, from johannes internal and henrik gamefest
- 43. Mirror’s Edge • oscarwhite, from johannes internal and henrik gamefest
- 44. Mirror’s Edge • GI •Color balance • Roughness, whiteness • Runner vision
- 45. Mirror’s Edge • maybethe gi-nogi slides from gdc
- 46. Mirror’s Edge • maybethe gi-nogi slides from gdc
- 47. Mirror’s Edge • maybethe gi-nogi slides from gdc
- 48. Mirror’s Edge • maybethe gi-nogi slides from gdc
- 49. Mirror’s Edge • maybethe gi-nogi slides from gdc
- 50. Mirror’s Edge • maybethe gi-nogi slides from gdc
- 51. Mirror’s Edge • maybethe gi-nogi slides from gdc
- 52. Mirror’s Edge • maybethe gi-nogi slides from gdc
- 53. Global Illumination • Beastoffline renderer • Distributed • Directional lightmaps
- 54. Mirror’s Edge • Somestats (the Shard): – ~200x3 Lightmaps (1024x1024 DXT1) – ~15000 meshes (12000 RNM + 4000 Vertex) – ~2000 lights
- 55. Mirror’s Edge • Heavilyoptimized for minimum memory footprint • Possible to distribute to workstations • Reduce network bandwidth 500 mb for largest levels
- 56. Mirror’s Edge • Renderingfarm. Mostly on workstations – 50 cores per bake – Efficiency depends on many factors – Usually 15 times faster than local
- 57. Mirror’s Edge • Planfor GI renderer - Use renderer with small footprint - Or make sub levels self contained
- 58. Global Illumination • Spendtime tweaking your renderer • Decide on algorithm • Coherent believable impression • Not a set of techniques or phenomena • Fidelity is important!
- 59. Global Illumination • Spendtime tweaking your renderer • Decide on algorithm • Coherent believable impression • Not a set of techniques or phenomena
- 60. Global Illumination • Spendtime tweaking your renderer • Decide on algorithm • Coherent believable impression • Not a set of techniques or phenomena
- 61. Global Illumination • Spendtime tweaking your renderer • Decide on algorithm • Coherent believable impression • Not a set of techniques or phenomena
- 62. White balance • Realisticlighting • Neutral materials • Brain is a good • Don’t alter the end result
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70. White Balance • Useneutral materials • Decide early • Resist tweaking individual surfaces • Trust your lighting • Trust the human brain!
- 71.
- 72. Roughness and whiteness •We want super white surfaces WITH PRESERVED DETAILS! • Clean white surfaces look artificial • Real life is imperfect
- 75. Mirror’s Edge • oscarwhite, from johannes internal and henrik gamefest
- 76.
- 77. Color correction • Curves –Color correction post process – Very similar to photoshop equivalent – Arbitrary number of segments in editor – Curves for R, G, B and Luminance
- 78. Color correction • Curves –Color correction post process – Very similar to photoshop equivalent – Arbitrary number of segments in editor – Curves for R, G, B and Luminance
- 79. Color correction • Curves –Color correction post process – Very similar to photoshop equivalent – Arbitrary number of segments in editor – Curves for R, G, B and Luminance
- 80. Curves – Converted tothree (RGB) curves with 16 linear segments for runtime – Realtime in-editor preview – Compared to cubes: • More GPU ALU • Less CPU and less data to GPU • Possibly more precision • No transformations across color channels
- 81. Roughness – 16 segmentsgo a long way – Two 16 bit 16x1 RGBA textures sent to GPU – Segment lookup with color as UV – Interpolation between sets of curves on CPU – Result always continuous – Easy and fast to add curves – Allows for smooth transitions and effects
- 82. Heightened senses • Sound •Body • Runner vision • Red guides player
- 83. Embody the Character •Feel like you are part of the body • Breathing • Sound of air with speed • Footsteps, hand impacts etc • Camera movement
- 88. Interiors • Stronger colors •Less white
- 90.
- 91.
- 92.
- 93.
- 94.
Editor's Notes
- #4 Talk about how it’s known for this white stylized look etc
- #5 Project long in development as modern shooter in city environment. Went through several iterations of art direction and several art directors.
- #6 The main idea behind the visuals were that they would be how you see the world through the main character&apos;s eyes. it&apos;s supposed to feel like you&apos;re in this state of mind where your senses get heightened. we intended to portray that through the use of strong colors, graphical simplicity, contrast and some full screen effects. So those were some of the ideas we had early on,
- #8 Getting a final concept of the game itself early 2007 we were also settling for a look. These first pictures are from a visual target level we were creating back then, this was meant to represent the new york area. as you can see this is quite different from what we ended up with. it&apos;s pretty clean but not as stripped as the final product and of course it&apos;s nowhere near as white and there are a lot more details in the textures. But as can see this is very different from what we actually ended up with.
- #9 these specifically were aimed at the rio loction, but shows some of the hightened senses stuff could also be found in the new york scene, with regard to the strong colors
- #10 these specifically were aimed at the rio loction, but shows some of the hightened senses stuff could also be found in the new york scene, with regard to the strong colors
- #11 at the time we thought the new york art area looked pretty good, although it was a little bit to grey or brownish, not clean enough. we wanted something more visceral and unique and something that more clearly portrayed the hightened senses of the main character, faith
- #12 at around this time some of the team members went to tokyo to get reference stuff for the tokyo levels of the game. and these are actually some of the pictures from that trip. and the team was in the process of redesigning the idea of three different settings as well, we would end up with just one city that incorporated elements from different cities around the world, like tokyo here, and also new york and the rio setting &lt;maybe start with at the time we were gathering reference art for tokyo, we decided that the game would only take place in one city, and that it would be a kind of merger of the three cities we were working with before&gt;
- #13 So this is some of the reference we shot on the trip to tokyo
- #18 At that time there was also an idea about using global illumination for generating lightmaps. We had started a partnership with a company called illuminate labs in &lt;better&gt;. And as the art team was creating this area I was in the middle of the process of working with a company called illuminate labs in getting a new global illumination renderer called the beast working for us. I&apos;m sure some of you have heard about the beast. But at this point the beast did not even have a name, we were getting these really experimental builds from the guys at IL, and no one really knew at this point what would actually be required to get all of this running. our internal time table was about 5 weeks, it took about 6 month to get things running in engine, and another year or so before things were smooth. have to remember this yada
- #19 So around the time when the beast started working for us and we started using it with the old art direction, johannes did this mock-up in maya of something that was really his vision distilled to the core, to get a cleaner version of the new york test area. Maybe bring in more of Johannes words here.
- #20 and this is after working with our concept artist. as you can see this had a lot of the elements ME ended up with. the clean whiteness and the coloring, great GI. &lt;less process and history and more just statements of the art&gt; So as this was presented to the the team I think most people thought it looked really cool but I think few thought we would actually go with it. you have to consider this is a high profile shooter and that this was the EA before mass effect, before dead space and before mirror&apos;s edge. there was not a lot of room for experimentation and risky art direction
- #21 So the logic behind the colors and how faith perceives the world was explained to us by our art director starting with this image with this kind of unusual saturation intensity idea. we though of it as if though faith had some kind of color blindness of deficiency. but in a good way, like a superhero kind of way. So this is roughly how that would work.
- #22 You could think of any surface or color in terms of saturation intensity. This ramp represent a transition from no saturation to max saturation.
- #23 Let’s say you could divide any color in the world in either the ”dull” category or ”vivid”.
- #24 Faith’s vision is basically turning anything below a certain level of saturatioon into white and anything with enough intensity of saturation into maximum vivid color.
- #25 so if we apply this concept to some of the previous reference for heightened senses, we get something like this &lt;show both examples&gt; So, going back to the experiment image...
- #26 So, going back to the experiment image...
- #27 So, going back to the experiment image...
- #28 So, going back to the experiment image...
- #29 reference pics, input johannes thoughts, trees with IR etc
- #30 reference pics, input johannes thoughts, trees with IR etc
- #31 reference pics, input johannes thoughts, trees with IR etc
- #32 reference pics, input johannes thoughts, trees with IR etc
- #33 reference pics, input johannes thoughts, trees with IR etc
- #34 reference pics, input johannes thoughts, trees with IR etc
- #35 reference pics, input johannes thoughts, trees with IR etc
- #36 reference pics, input johannes thoughts, trees with IR etc
- #37 reference pics, input johannes thoughts, trees with IR etc
- #38 reference pics, input johannes thoughts, trees with IR etc
- #39 reference pics, input johannes thoughts, trees with IR etc
- #40 so we put one artist on creating an area in-engine with the now operational beast to see where this could go. &lt;maybe not mentio owen, just say we deciced&gt;.
- #41 oscar white, from johannes internal and henrik gamefest
- #42 so we put one artist on creating an area in-engine with the now operational beast to see where this could go. &lt;maybe not mentio owen, just say we deciced&gt;.
- #43 Talk about GI and the detail in GI
- #44 So this started to look really great. &lt;talk about details&gt;, use this as intro to diving into details
- #45 so that&apos;s the basics of how we ended up where we did. There are a few elements that make this work, and I’d like to go into a little bit more detail on some of those. So what really defined the game visually was the decision to use a high quality global illumination renderer.
- #47 and this would not have worked at all without GI. this is a similar scene from one of our dlc time trial levels.
- #49 and this would not have worked at all without GI. this is a similar scene from one of our dlc time trial levels.
- #50 and this would not have worked at all without GI. this is a similar scene from one of our dlc time trial levels.
- #51 and this would not have worked at all without GI. this is a similar scene from one of our dlc time trial levels.
- #52 and this would not have worked at all without GI. this is a similar scene from one of our dlc time trial levels.
- #53 and this would not have worked at all without GI. this is a similar scene from one of our dlc time trial levels.
- #54 and this would not have worked at all without GI. this is a similar scene from one of our dlc time trial levels.
- #55 To help out the process our lighters had access to about 50 machines for every bake, which speeds things up a bit. Usually iterating on their areas would have a rebake time of about 5 minutes. We did have pretty big levels though. Log: Exporter Stats: Triangles 4200563 , Static Meshes: 11982 , LODs: 16410 , BSP Elements 829 , Lights: 1969 Log: Exporter Stats: Lightmapped Static Mesh LODs 12144 , Vertex Baked Static Mesh LODs: 4266 , Atlases: 211 Log: 6974 instances based on 9436 Originals. Log: Zero area BSP triangles 825, Smallest 16.000000
- #59 and this would not have worked at all without GI. this is a similar scene from one of our dlc time trial levels.
- #60 and this would not have worked at all without GI. this is a similar scene from one of our dlc time trial levels.
- #61 and this would not have worked at all without GI. this is a similar scene from one of our dlc time trial levels.
- #62 and this would not have worked at all without GI. this is a similar scene from one of our dlc time trial levels.
- #63 and this would not have worked at all without GI. this is a similar scene from one of our dlc time trial levels.
- #73 and this would not have worked at all without GI. this is a similar scene from one of our dlc time trial levels.
- #74 and this would not have worked at all without GI. this is a similar scene from one of our dlc time trial levels.
- #75 and this would not have worked at all without GI. this is a similar scene from one of our dlc time trial levels.
- #76 So this started to look really great. &lt;talk about details&gt;, use this as intro to diving into details
- #81 and this would not have worked at all without GI. this is a similar scene from one of our dlc time trial levels.
- #82 and this would not have worked at all without GI. this is a similar scene from one of our dlc time trial levels.
- #83 so one of the important points we learned from some of these pictures, and the tokyo stuff from earlier, was the detail in the whiteness, that the surfaces could be clean and white but still have a roughness in the details
- #84 so one of the important points we learned from some of these pictures, and the tokyo stuff from earlier, was the detail in the whiteness, that the surfaces could be clean and white but still have a roughness in the details
- #85 so one of the important points we learned from some of these pictures, and the tokyo stuff from earlier, was the detail in the whiteness, that the surfaces could be clean and white but still have a roughness in the details
- #86 so one of the important points we learned from some of these pictures, and the tokyo stuff from earlier, was the detail in the whiteness, that the surfaces could be clean and white but still have a roughness in the details
- #87 so one of the important points we learned from some of these pictures, and the tokyo stuff from earlier, was the detail in the whiteness, that the surfaces could be clean and white but still have a roughness in the details
- #88 so one of the important points we learned from some of these pictures, and the tokyo stuff from earlier, was the detail in the whiteness, that the surfaces could be clean and white but still have a roughness in the details
- #89 If the exteriors were white and bright I wanted the interiors to be as colorful as possible. The next images are just examples of colorful interiors.
- #91 If the exteriors were white and bright I wanted the interiors to be as colorful as possible. The next images are just examples of colorful interiors.
- #92 so one of the important points we learned from some of these pictures, and the tokyo stuff from earlier, was the detail in the whiteness, that the surfaces could be clean and white but still have a roughness in the details
- #93 so one of the important points we learned from some of these pictures, and the tokyo stuff from earlier, was the detail in the whiteness, that the surfaces could be clean and white but still have a roughness in the details
- #94 Here is that police station where the player would meet Miller. Modern, white with one strong color. For the exterior scenes we tried to stay away from using green, we ended up using it a lot in the interiors. This location was later cut.
- #95 Here is that police station where the player would meet Miller. Modern, white with one strong color. For the exterior scenes we tried to stay away from using green, we ended up using it a lot in the interiors. This location was later cut.