how valve connects art direction to gameplay
TRANSCRIPT
![Page 1: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/1.jpg)
Moby FranckeRandy Lundeen
How Valve Connects Art Direction to Gameplay
![Page 2: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/2.jpg)
Introduction
Team Fortress 2Distinctive SilhouettesStylized shading
Left 4 DeadCreating a Dark, Gritty Horror experienceApplying lessons learned from TF2Utilizing “Filmic” effects
![Page 3: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/3.jpg)
Team Fortress Mod
![Page 4: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/4.jpg)
Initial Team Fortress 2
![Page 5: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/5.jpg)
Initial Team Fortress 2
Medic
!
![Page 6: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/6.jpg)
Team Fortress 2
![Page 7: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/7.jpg)
Why The Unique Visual Style?
GameplayReadabilityBranding
![Page 8: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/8.jpg)
Team – Friend or Foe?Color
Class – Run or Attack?Distinctive silhouettesBody proportionsWeaponsShoes, hats and clothing folds
Selected weapon – What’s he packin’?Highest contrast at chest level, where weapon is heldGradient from dark feet to light chest
Color Swatch
Read Hierarchy
![Page 9: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/9.jpg)
Early 20th Century Commercial Illustration
Dean Cornwell
J. C. Leyendecker
Norman Rockwell
![Page 10: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/10.jpg)
Early 20th Century Commercial Illustration
Chose to adopt specific conventions of the commercial illustrator J. C. Leyendecker:
Shading obeys a warm-to-cool hue shift. Shadows go to cool, not blackSaturation increases at the terminator with respect to a given light source. The terminator is often reddened.On characters, interior details such as clothing folds are chosen to echo silhouette shapesSilhouettes are often emphasized with rim highlights rather than dark outlines
![Page 11: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/11.jpg)
J.C. LeyendeckerThanksgiving 1628-1928
J.C. LeyendeckerTally-Ho, 1930
Clothing Folds
![Page 12: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/12.jpg)
J.C. LeyendeckerArrow collar advertisement,
1929
J.C. LeyendeckerSwimmin’ Hole, 1935
Rim Highlights
Red Terminator
![Page 13: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/13.jpg)
Before Rim HighlightingEarly Production Still from Meet the HeavyEarly Production Still from Meet the Heavy
![Page 14: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/14.jpg)
2D Rim Highlighting Paintover
Early Production Still from Meet the HeavyEarly Production Still from Meet the Heavy
![Page 15: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/15.jpg)
Character Creation1.Character silhouette
2. Interior shapes
3.Model sheet
4.3D Model
5.Character Skin
6.Final Character in game
![Page 16: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/16.jpg)
Character SilhouetteBuilding block of character designIdentifiable at first read
![Page 17: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/17.jpg)
Interior ShapesSolving interior character design with shadow shapesKeep it iconicWork out design in three quarter pose
![Page 18: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/18.jpg)
Model SheetUse concept painting as guideSolve design problems using silhouette onlySolve interior design with shadow shapes
![Page 19: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/19.jpg)
3D ModelMatch silhouette to model sheetSolve 3 quarter design with screenshots / paintoversModel with character in mind
![Page 20: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/20.jpg)
Base Ambient Occlusion map
![Page 21: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/21.jpg)
Character Skin
![Page 22: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/22.jpg)
Final Character3D model with texture and basic shading
![Page 23: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/23.jpg)
Engineer Concept
![Page 24: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/24.jpg)
Engineer model
![Page 25: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/25.jpg)
Pyro Concept
![Page 26: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/26.jpg)
Pyro model
![Page 27: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/27.jpg)
Environment DesignCreating a compelling, immersive worldTeam distinction through material hue/value/saturation.Impressionistic painterly look
![Page 28: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/28.jpg)
Contrasting Team PropertiesRed
Warm colorsNatural materialsAngular geometry
BlueCool colorsIndustrial materialsOrthogonal forms
![Page 29: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/29.jpg)
World texturing
Texture map In-game Screenshot
![Page 30: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/30.jpg)
World texturing
Texture map In-game Screenshot
![Page 31: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/31.jpg)
World texturing
Texture map In-game Screenshot
![Page 32: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/32.jpg)
World texturing
Texture map In-game Screenshot
![Page 33: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/33.jpg)
Model texturing
Texture map In-game Screenshot
![Page 34: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/34.jpg)
![Page 35: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/35.jpg)
IntroductionCo-op, first-person horror gameDynamic shared narrative
Experience a scary action movie with your friends
AI DirectorProcedurally generated character performance, pacing, effects and music
Available this Fall
![Page 36: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/36.jpg)
Art Direction and GameplayCreating a dark, scary cinematic
environmentAppling lessons learned from TF2Utilizing “Filmic” EffectsIncorporating shaders that enhance a dark setting
![Page 37: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/37.jpg)
Filmic effectsColor CorrectionGrainVignetteLocal Contrast EnhancementDynamically communicate game state
![Page 38: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/38.jpg)
No Post-processingNo Post-processing
![Page 39: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/39.jpg)
Color CorrectionColor Correction
![Page 40: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/40.jpg)
GrainGrain
![Page 41: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/41.jpg)
No GrainNo Grain GrainGrain
![Page 42: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/42.jpg)
Before VignetteBefore Vignette
![Page 43: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/43.jpg)
VignetteVignette
![Page 44: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/44.jpg)
Local ContrastLocal Contrast
![Page 45: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/45.jpg)
Filmic Effects OFFFilmic Effects OFF
![Page 46: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/46.jpg)
Filmic Effects ONFilmic Effects ON
![Page 47: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/47.jpg)
Normal StateNormal State
![Page 48: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/48.jpg)
Third StrikeThird Strike
![Page 49: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/49.jpg)
Hunter PounceHunter Pounce
![Page 50: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/50.jpg)
Normal StressNormal Stress
![Page 51: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/51.jpg)
High StressHigh Stress
![Page 52: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/52.jpg)
Lighting for DarknessHorror/suspense themeLighting that supports fiction/navigationImportance of SilhouettePlayer as light source
![Page 53: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/53.jpg)
Too many areas of contrastToo many areas of contrast
![Page 54: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/54.jpg)
Simplified lightingSimplified lighting
![Page 55: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/55.jpg)
In-game headlightsIn-game headlights
![Page 56: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/56.jpg)
In-game headlightsIn-game headlights
![Page 57: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/57.jpg)
Smoking the SetSeparate foreground from background
FogLight colored fog in dark areas to contrast with silhouettes of infected in mid-ground
ParticlesAdds atmosphere and helps accentuate silhouettes of infected against lighter particles
![Page 58: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/58.jpg)
Black FogBlack Fog Light FogLight Fog
![Page 59: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/59.jpg)
Without particlesWithout particles With particlesWith particles
![Page 60: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/60.jpg)
Reload, Shove & Muzzle FlashPlayer is the light source
Increases drama and immersionFlashlight is attached to the weapons
ReloadingShovingMuzzle flash
Encourages players to coordinate actions
![Page 61: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/61.jpg)
Self Shadowed Normal MappingNormal mapping
locally alters surface orientation, causing detailed lighting effects
Narrow dark area from normal facing away from the light
Light Intensity
![Page 62: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/62.jpg)
Self Shadowed Normal MappingNormal mapping
locally alters surface orientation, causing detailed lighting effectsSSNM incorporates local self-shadowing information for greater surface richnessReacts to lighting from radiosity as well as dynamic lights in the scene, such as the player’s flashlightRefactoring our shader code, this turns out to be free
Narrow dark area from normal facing away from the light
Self-Shadowed Region
Light Intensity
![Page 63: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/63.jpg)
Self-Shadowed Normal Mapping in EngineSelf-Shadowed Normal Mapping in Engine
![Page 64: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/64.jpg)
Wetness / PuddlesFilm techniqueAdds details to dark settingsEnhances moodiness
![Page 65: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/65.jpg)
In-game screenshotIn-game screenshot
![Page 66: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/66.jpg)
Summary
Team Fortress 2Distinctive SilhouettesStylized shading
Left 4 DeadCreating a Dark, Gritty Horror experienceApplying lessons learned from TF2Utilizing “Filmic” effects
![Page 67: How Valve Connects Art Direction to Gameplay](https://reader033.vdocuments.site/reader033/viewer/2022061115/546490cab4af9fd1478b4daf/html5/thumbnails/67.jpg)
www.xnagamefest.com
© 2008 Microsoft Corporation. All rights reserved.This presentation is for informational purposes only.
Microsoft makes no warranties, express or implied, in this summary.