Art Direction for Uncharted 2: Among Thieves

12,328 views
12,050 views

Published on

Published in: Technology
0 Comments
25 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
12,328
On SlideShare
0
From Embeds
0
Number of Embeds
111
Actions
Shares
0
Downloads
0
Comments
0
Likes
25
Embeds 0
No embeds

No notes for slide

Art Direction for Uncharted 2: Among Thieves

  1. 1. SHOW  YOU  WHAT  WENT  INTO  CREATING  THE  LOOK  FOR  UNCHARTED  2
  2. 2. ERICK AND  I  SPLIT  OUR  TASKS  BASED  ON  STRENGTHS
  3. 3. ERICK  HANDLING  IMPLEMENTATION  AND  MYSELF  WORKING  ON  THE CONCEPT  AND  MARKETING  SIDE
  4. 4. WITH  A  LITTLE  OVERLAP.
  5. 5. WHY  DO  I  SPELL MY  NAME  LIKE  THAT?
  6. 6. MIES  VAN  DER  ROHE  WAS  A  FAMOUS GERMAN  ARCHITECT  OF  THE  BAUHAUS
  7. 7. MY  BACKGROUND  IS  IN  FILM.  I
  8. 8. I  WAS  ART  DIRECTOR  ON  MTR  AND  BROTHER  BEAR
  9. 9. AN  ART  DIRECTORS  JOB  IS  TO  ORCHESTRATE. Everyone  HERE  plays  their  instrument  PIECE  OF  MUSIC.
  10. 10. STORYOPEN STRUCTURE.
  11. 11. NOT  A  BIG  DIFFERENCE
  12. 12. VISUALS  REINFORE STORY,  MOOD,  EMOTION
  13. 13. TO  DEPICT  THE  HORRORS  OF  WAR.
  14. 14. Everything  here  absolutely inappropriate  to  conveying  that  message.Works  for  ironySurprising  how  many  people  do  no  consider  the  overall  goal  when  coming  up  with  shapes and  colors
  15. 15. MUCH  BETTER
  16. 16. LETS  GO  OVER  BRIEFLY  SOME  OF  THE  HIGH  LEVEL  CONCEPTS  WE  HAVE  TO  WORK  WITH
  17. 17. STYLE GUIDES  ILLUSTRATE  WHAT  WE  ARE  AIMING  FORTINDI  STORY
  18. 18. COULD SPEND  90  MINUTES  ON  THIS  ALONE
  19. 19. SHAPES  AFFECT  HOW  PEOPLE  FEEL
  20. 20. SOFT  ,  ROUND  FRIENDLY
  21. 21. HARSH,  JAGGED,  DANGEROUS
  22. 22. CRITISIM  ON  FIRST  GAME, A  PIRATE  IN  A  TSHIRT  TOOK  TOO  MANY  BULLETS  TO  KILL  WE  NEEDED  A  BETTER  VISUAL  SYSTEM.
  23. 23. VALUES, LINES,  COMPLEXITY
  24. 24. Shambhala needed  to  be  awe  inspiringcome  from  details  alone.MONOLITHICHUGH  FERRIS
  25. 25. AND  NEEDED  SOMETHING  UNIQUE INDIANCOMBINED  SIMPLE  BASE  FORMS  TO  MAKE  UNIQUE  SHAPE  WE  COULD  THEN  ADD  THE  DETAIL  TO.
  26. 26. SIMPLE  GRID  SYSTEM  FOR  DESIGNING  MULTIPLE REPEATING  SHAPES  FOR  REST  OF  CITY.
  27. 27. COLOR  NEEDS  TO  BE  DESIGNED  LIKE  EVERYTHING  ELSE
  28. 28. ALL  BROWN AND  GREYNO  PROGRESSION
  29. 29. DRAKE  NEARLY  DEADCOLOR  APPROPRIATE FOR  SITUATION
  30. 30. COLOR  AND  LIGHTING  VERY  EMOTIONAL  TOOLSIN  THIS  VIEW  WE  HAVE  A  MID  DAY  SUN,  BRIGHT,  CHEERY AND  PEDESTRAIN.
  31. 31. SAME  MODEL  AND  TEXTURES, THE  ONLY  THING  THAT  CHANGED  IS  THE  LIGHTING  BUT  IT  COMPLETELY  ALTERED  THE  MOOD.  MUCH  MORE  SOMBER  NOW.  AGAIN,  NO  MODEL  OR  TEXTURE  CHANGE.
  32. 32. LETS  LOOK  AT  SOME  CONCEPTS
  33. 33. OVERGROWN  SHAMBHALA
  34. 34. Early  SAP  POOL
  35. 35. DRIPPING  SAP  FROM  CENTER  OF  ROOT  CLUSTER
  36. 36. TRY  NOT  TO  DO  TO  MUCH  OF  THIS
  37. 37. TRY TO  LEAD  THIS  WAY
  38. 38. TRAIN  YARD
  39. 39. FOUND  A  GREAT  BOOK  ON CHINESE  STEAM  LOCOMOTIVES  THAT  SHOWED  OLDER  TECHNOLOGY.VERY  USEFUL  IN  COMING  UP  WITH  EVERYTHING  IN  THESE  BUILDINGS
  40. 40. ITERATIONS
  41. 41. WE  GO  THROUGH  MANY  DIFFERENT  DESIGNS  FOR  EACH  LOCATION
  42. 42. TRYING  OUT  DIFFERENT  STYLES
  43. 43. ANOTHER  SHAMBHALA  CONCEPT
  44. 44. INTERIOR  OF  THE  GOMPA
  45. 45. EARLY SAP  POOL,  MORE  CAVE  LIKE  AND  OPEN
  46. 46. EARLY  CHINMANAI  ROOM
  47. 47. AT  ONE  POINT  THE  TREE  OF  LIFE  WAS  GOING  TO  MORE  OF  AN ENTITY,  PULLING  ALL  THE  STRUCTURES  DOWN  INTO  THE  GROUND  WITH  IT
  48. 48. GROUND  LEVEL  VIEW
  49. 49. A  LOCATION
  50. 50. START WITH  SIMPLE  GEOMETERIC  SHAPESFEWEST  VALUESTHAT  WAY  I  CAN  SEE  IF  THE  PAINTING  HAS  POTENTIAL  BEFORE  WORKING  ON  IT  FOR  HOURS
  51. 51. ONCE  THAT  WORKS  I  CAN  ERASE  AND  ADD,  DESIGN  THE  SHAPES  IN  DETAILED  SILHOUTTES
  52. 52. START  LAYERING  IN  THE  ATMOSPHERE
  53. 53. AND  THE  FINAL  MODELING  AND  TEXTURES
  54. 54. THIS  ONE  I  STARTED  WITH  A  SIMPLE MODEL  IN  SKETCHUP
  55. 55. ALWAYS  START  WITH  GOOD  VALUE  PLAN,  EVEN  IF  IT  TAKES  JUST  5  MINUTES
  56. 56. WASH  IN  MY  BASE  COLORS
  57. 57. FLAT  SHAPES  AND  COLORS.  KEEP  IT  POSTERY  IN  THE  BEGINGING.  IF  I  CAN  GET IT  TO  
  58. 58. START  ADDING  TEXTURE  BUT  ONLY  AFTER  MY  COLORS  AND  VALUES  ARE  RIGHT
  59. 59. WALL  FLAT  SO  ADDED ADDITIONAL  PILLARS  AND  CHANGED  COLOR  FOR  SCALE
  60. 60. DETAILS  ON  GROUND
  61. 61. ONE  MORE
  62. 62. DESIGNERS  BLOCK  MESH.  OLD  SCHOOL  .  DRAWN  WITH  LINE  TOOL IN  PHOTOSHOP
  63. 63. FLAT TONES,  GROUND  PLANE  IS  SEVERAL  PHOTOS  OVER  PAINTED  GROUND
  64. 64. WASHING  IN  THE  ATMOSPHERE
  65. 65. HITTING  THE  TOP  PLANES  WITH  LIGHT
  66. 66. 90% HAND  PAINTED.  PERSPECIVE  LINES  TO  HELP  WITH  TRAIN
  67. 67. MORE  PAINTED  DETAILS.  A  FEW  PHOTOS  ON  THE  FENCE  TO  RIGHT  AND  WOOD  CRATES
  68. 68. ADDING  SOME  PHOTOGRAPHIC  DETAIL  LIKE  JUNK  PILES  AND TRAIN  SIGNALS
  69. 69. NOW  LETS  LOOK  AT  THE  DETAIL THAT  GOES  INTO  A  DESIGN
  70. 70. TAKE  THE  GOMPA  LEVEL
  71. 71. ACCURATE  ROOF  CONSTRUCTION  BASED  ON  RESEARCH
  72. 72. DRAWINGS  FOR  BROKEN  WOOD  AREAS
  73. 73. DRAWINGS OVER  BLOCKMESH  FOR  EVERYTHING  DOWN  TO  PLACEMENT  OF  LANTERNS  AND  FLAGS
  74. 74. DRAWING  FOR  MORE  DETAILED  BRIDGE  SUPPORT
  75. 75. NOISY TEXTURES  NEEDED  TO  BE  UNIFIED
  76. 76. MATERIALS
  77. 77. PLUSING  A  FIRST  PASS
  78. 78. MORE  DECAYING  WALKWAYS
  79. 79. AND  PAINT  OVERS  TO  MAKE  SURFACE  MORE  READABLE
  80. 80. LETS  LOOK  AT  THE  SWAMP LEVEL
  81. 81. THE  LOOK  OF  THIS  LEVEL
  82. 82. MOST  LIKELY  THINK  IT  ALAWAYS  LOOKED  LIKE THIS,  RIGHT?
  83. 83. NOPE,  STARTED  ALL  ROOTY  AND  A  LITTLE  ALIEN
  84. 84. EVEN  WENT  AS  FAR  AS  MODELING  AND  TEXTURING  .  BUT  GAME  DESIGNER  SAID  IT  LOOKED  TO  OTHER  WORLDLY
  85. 85. WHICH  WAS  TRUE,    WHILE  CREEPY  WAS  NOT  UNCHARTED.  TOO  ALIEN!
  86. 86. SO  WE  TALKED  AND  CAME  UPON  FRAZETTA AS  NEW  DIRECTION.  THICK  MOSS,  ROPEY  VINES
  87. 87. BLACK  AND  WHITES
  88. 88. MORE,  DRAINING SWAMP  SO  BOARDS  TO  WALK  ON,  WHICH  GAVES  US  PATHS  AND  VISUAL  CONTRAST  TO  JUNGLE
  89. 89. FINAL  SKETCHES
  90. 90. EARLY  COLOR
  91. 91. FINAL  ART.  SET  MOOD  AND  FEEL  WE  AFTER
  92. 92. DRAWN  OVER  DESIGNERS  BLOCKMESH.
  93. 93. SOME  OF  THE  INSPIRATIONFREDRIC  CHURCH
  94. 94. JAPANESE  RAIN  FORREST.  VERY  DIFFERENT  THAN  JUNGLE  UNCHARTED 1
  95. 95. ,    My  name  is  Erick  Pangilinan,  ImIve
  96. 96. And  most  of  those years  were  spent  as  a  enviroment artist  onthe  crash  bandicoot  and  the  jak and  Daxter series.
  97. 97. Since  Robh  already  talked  about  concept  art  section,    Im gonnatranslating  that  into  game  art.
  98. 98. And  im also  gonna cover
  99. 99. gonna
  100. 100. And  everyone  knows  about  reference  
  101. 101. scan  it  and  build  the  blockmesh
  102. 102. speds up  
  103. 103. the  gameplay blockmesh to  the  artists.
  104. 104. Then,  we  walk  through  the  entire  level,    and  brainstorm  ideas  to  on  how  to  make  it  
  105. 105. we  do  a  first  pass  to  check  our  scale  and  composition.    Similar  to  how  Robh draws  his   broadstrokes
  106. 106. for  problems  along  the  way.
  107. 107. When  we  get  a  blockmesh
  108. 108. And  come  up  with  different  ways  to  make  the  layout  more  interesting.
  109. 109. The  concept  art  will  take  us  to gotta play  good  and  be  on  frameratebe  done  in-­‐game.
  110. 110. And  this  is  where  translating  the  blockmesh
  111. 111. First,  we  try  to  understand  the  gameplaybasically  a  wall,  but  it  could  be  anything  that  prevents  the  player  from  crossing  the  
  112. 112. Here,  we  try  to  follow  the  concept  art  by  putting  a  bunch  of  buildings  to  block  the   wanna
  113. 113. Another  idea  is  to  create  a  cliff  as  the  barrier.up  the  environment.
  114. 114. Now  This  gives  us  a  good  silhouette,  and  the  parallax  with  the  mountains  behind  it.
  115. 115. blockmesh
  116. 116. we  try  to  see if  our  shapes  will  work  with  the  design,  and  see  if  we  can  use  the  same  kind  of  trees
  117. 117. So,solution.
  118. 118. help  cut  down  the  draw  distances.  
  119. 119. And  we  just  layer  more  details  on  top  of  the  base  shape.    This  became  the  construction  strategy  for  the  rest  of  the  level.
  120. 120. ide  from  the  tech  and  gameplayof  these  principles  we  considered  in  this  scene.
  121. 121. First,  We  try  to  get  the  proportions  right  by  counterweighing  the  big  shapes  with  the  
  122. 122. then  we  plan  WHERE  to  put  the  details  to  make  the  silhouette  more  interesting.
  123. 123. We  also  played  with  the  angles  to  make  it  more  aggressive,    and  make  the  level  look  more  dynamic.  
  124. 124. So,  using  these  principles  to  compose  the  shot,  really  helped  put  together  this  level.
  125. 125. So,  we  added  a  pool!.....doing  things  like  this  is  important,  especially  in  multiplayer
  126. 126. Aside  from  defining
  127. 127. One  way  to  start,  is  to  separate  the  ground  plane  from  the  wall  plane.    
  128. 128. We  can  also  do  this  by  placing  objects  between  the  ground  plane  from  the  wall  to  separate  them  
  129. 129. Putting  shapes  in  the  middle  of  the  path  will  help  create  a  stepping  stone  effect  to  lead  the  players  eye.
  130. 130. In  this  example,    the  water  acts  as
  131. 131. Arches  are  another  good tool  to  lead  the  player  through  the  space.  They  are  natural  
  132. 132. And  great  to  use  to  frame  a scene.
  133. 133. Again  arches
  134. 134. Also Articulating  the  path  will  make  the  traversal more  interesting
  135. 135. As
  136. 136. Then
  137. 137. Land  marks,
  138. 138. Land
  139. 139. Which
  140. 140. Its  also  cool  to  see  a  landmark  from  different  distances
  141. 141. And  the  closer  you  get,  you  get  to  see  more  details  about  it....And  when  you  get  there, it  gives  you  a  sense  of  accomplishment.
  142. 142. A  lot  of  these  pointers  seem  very  obvious,  but  during  a  busy  schedule,  its  really  easy  
  143. 143. gateway..
  144. 144. Always  remember,  The  art  you  are  creating  needs  to  help  the  purpose  of  the  design.
  145. 145. Here  at  Naughty  dog,  the  job  of  the  modeler,  texture  artist and  lighting  artists  are  3  focus  being  good  at  that  specific  job. Modeller
  146. 146. Basically,  The  modeler  builds  the  geometry  for  the  level  ,      The  modeller is  also  
  147. 147. I  know  a  lot
  148. 148. refnodeswe  can  also  fade  our  instances.
  149. 149. gpu hit.
  150. 150. In  application,
  151. 151. Then  just  continue  fading  other  parts  
  152. 152. Until  just  the  basic  shape  remains.
  153. 153. This  really  helps  out  our  framerate
  154. 154. far  away.
  155. 155. maya file  and  
  156. 156. But  What -­‐arrange  the  parts  of  your  instance?  Like  this?      And  save  the  data  individually,  but  keep  this  file  as  a  
  157. 157. And  the  programmer
  158. 158. it!    We  call  this  modifiers!
  159. 159. and
  160. 160. Books and  rebar
  161. 161. brick  instances  that  we  can  use  to  follow  terrain.
  162. 162. And  they  also  work  on  skinned  prototypes!    Like  tree  roots  or  vines!      
  163. 163. So  you  can  modify  your  roots  to  crawl  on  any  surface  you  want!.....and  all  of  these  variations  came  from  the  original  prototype!
  164. 164. By building  with  refnodes,  and  applying  modifiers  to  them.,  we  can  generate  unlimited  variety  in  our  environments.
  165. 165. So, in  our  environments,  After  the  modeller
  166. 166. The
  167. 167. The  texture artists  Uvs and  textures  the  geometry  from  the  modeller.    They  also  manage  the  texture  memory  and  shader cycles.
  168. 168. When  we  switched  to  the  ps3,  we  realize  how  important  it  was  to  generate  a  good  to  develop  the  best  way  to  make  normal  maps.
  169. 169. And  for  us,  the  best  way  was  using  zBrushare  sculpted  in  zbrush
  170. 170. You  can  extract  the  maps  from  zbrush Xnormal
  171. 171. in  some  cases,  we  like  the  Ambient  Occlusion  and  Normal  maps  generated  by  Xnormal zbrush is  totally  fine.
  172. 172. zbrush and  we  explored  other  ways  to   im going  to  show  you  3  ways  we  tried  to  generate  normals
  173. 173. First  ,  We  tried  Nvidia plugin
  174. 174. Then  Crazy  bump
  175. 175. zbrush
  176. 176. In  this  example,  I  want  to  show  you  the  comparison  of  what  we  got  using  the  3  
  177. 177. For  Crazy  bump  and  the  Nvidiamaps.      
  178. 178. For  Zbrush,  we  will  build  the  wall,  rock  by  rock.
  179. 179. For  Crazy  bump,  its  actually  not that  bad,  it  turned  out  a  little  softer  and  not  really  
  180. 180. The  Nvidia kinda look  noisy  with  a  bunch  of  artifacts.
  181. 181. Now  zbrush a  good  range  of  depth  and  protrusion.    
  182. 182. Now,  combining the  color  map,   NvidiaAnd    zbrush gives  you  a  pixel  perfect  combination  of  the  normal  map  with  the  color  map.
  183. 183. Although,  crazybump might  be  ok,  you  still  need  a  good  color  map  to  get  good  results.    The  advantage  of  the  zbrush method  is,  you  already  have  all  geometry  in  3d  so  its  much  easier  to  do  changes  or  variations.
  184. 184. very  high  pixel  density  and  save  on  shaders
  185. 185. shaders fading  into  eachother
  186. 186. Thethreshold.
  187. 187. the  blend  threshold acts  like  a  mask.  This  determines  how  much  gets  blended  into  each  other.
  188. 188. you  1  shader the threshold  mask  will  determine  how  much  of  the  sand  seeps  between  the  rocks
  189. 189. This  gives  us a  very  natural  way  to  add  transitions  with  each  material  respecting  the  physical  properties  of  the  other.
  190. 190. Wanna see  that  again?
  191. 191. Alright, shaders
  192. 192. Remember  this  modified  instance?  The  ones  you  can  use  them  all  over  the  place?
  193. 193. .
  194. 194. stayed  on  top  all  the  time  ,  huh?
  195. 195. And  the  programmer
  196. 196. So,  they  came  up  with  the  slope  shader can  apply  a  blend  shaderand  orient  it  to  any  angle  based  on  vertex  and  pixel  normal.
  197. 197. So,  the  snow  can  be  blended  to  any  amount  and  any  angle  no  matter  how  you  rotate  each  piece.
  198. 198. And  with  the  modifiers,  This  gives  us  unlimited  variety  using  a  single  prototype.      
  199. 199. sucky
  200. 200. Not  sucky
  201. 201. In  application,  you  can  use  this slope  shader not  only  on  small  rocks,  but  also  on  the  ground,  structures,  and  entire  mountains.      
  202. 202. With  tiling  textures  combined  with  the  blend  shaders and  slope  shaders,  We  have  the  luxury  of  high  resolution  pixel  density,  and  unlimited  variety  on  our  surfaces  and  objects.
  203. 203. So  basically,  We  do  all  our  lighting  set  up  in  maya ligthing calculation  for  our  Global  Illumination  is  done  by  a  software  package  called  NOVA.    
  204. 204. Novacalled  Rainbow.So,  in  this  layer,  we  have  the  Direct  Sunlightbecause  we  replace  this  with  a  run-­‐time  direct  sunlight,  so  we  can  cast  run  time  shadows.
  205. 205. this  saves  a  lot  of  time.
  206. 206. This  is  our  bounce  lighting
  207. 207. we  will  use  in-­‐game.
  208. 208. So,  in-­‐game, We  can  see  the  baked  lighitng -­‐time  lighting  elements  affect  it.      
  209. 209. One  trick  we  do  is  we  try to  limit  the  runtime  shadows  by  dropping  them  when  they   .
  210. 210. shadows  at  all.
  211. 211. We  also  use  light  maps, we  try  to  limit  them  to  interior  spaces  to  get  more  details  on  our  shadows.
  212. 212. this  talk  is  about  art  direction,  the  ND  team  is  a  very  collaborative  and  driven  team  that  needed  very  little  direction.  
  213. 213. To  our  designers,  with  their  awesome  blockmesh
  214. 214. To  the  modelers,  who  detail  the  environments
  215. 215. And  the  texture  artists,  who  develop  shaders.
  216. 216. And  lighting,  to  complete  the  atmosphere  of  the  level.
  217. 217. I  hope  everyone enjoyed  our  presentation  and  take  away  some  useful  ideas  for  their  games.

×