Upload
longzheng
View
113
Download
0
Tags:
Embed Size (px)
Citation preview
Moby FranckeRandy Lundeen
How Valve Connects Art Direction to Gameplay
Introduction
Team Fortress 2Distinctive SilhouettesStylized shading
Left 4 DeadCreating a Dark, Gritty Horror experienceApplying lessons learned from TF2Utilizing “Filmic” effects
Team Fortress Mod
Initial Team Fortress 2
Initial Team Fortress 2
Medic
!
Team Fortress 2
Why The Unique Visual Style?
GameplayReadabilityBranding
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
Early 20th Century Commercial Illustration
Dean Cornwell
J. C. Leyendecker
Norman Rockwell
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
J.C. LeyendeckerThanksgiving 1628-1928
J.C. LeyendeckerTally-Ho, 1930
Clothing Folds
J.C. LeyendeckerArrow collar advertisement,
1929
J.C. LeyendeckerSwimmin’ Hole, 1935
Rim Highlights
Red Terminator
Before Rim HighlightingEarly Production Still from Meet the HeavyEarly Production Still from Meet the Heavy
2D Rim Highlighting Paintover
Early Production Still from Meet the HeavyEarly Production Still from Meet the Heavy
Character Creation1.Character silhouette
2. Interior shapes
3.Model sheet
4.3D Model
5.Character Skin
6.Final Character in game
Character SilhouetteBuilding block of character designIdentifiable at first read
Interior ShapesSolving interior character design with shadow shapesKeep it iconicWork out design in three quarter pose
Model SheetUse concept painting as guideSolve design problems using silhouette onlySolve interior design with shadow shapes
3D ModelMatch silhouette to model sheetSolve 3 quarter design with screenshots / paintoversModel with character in mind
Base Ambient Occlusion map
Character Skin
Final Character3D model with texture and basic shading
Engineer Concept
Engineer model
Pyro Concept
Pyro model
Environment DesignCreating a compelling, immersive worldTeam distinction through material hue/value/saturation.Impressionistic painterly look
Contrasting Team PropertiesRed
Warm colorsNatural materialsAngular geometry
BlueCool colorsIndustrial materialsOrthogonal forms
World texturing
Texture map In-game Screenshot
World texturing
Texture map In-game Screenshot
World texturing
Texture map In-game Screenshot
World texturing
Texture map In-game Screenshot
Model texturing
Texture map In-game Screenshot
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
Art Direction and GameplayCreating a dark, scary cinematic
environmentAppling lessons learned from TF2Utilizing “Filmic” EffectsIncorporating shaders that enhance a dark setting
Filmic effectsColor CorrectionGrainVignetteLocal Contrast EnhancementDynamically communicate game state
No Post-processingNo Post-processing
Color CorrectionColor Correction
GrainGrain
No GrainNo Grain GrainGrain
Before VignetteBefore Vignette
VignetteVignette
Local ContrastLocal Contrast
Filmic Effects OFFFilmic Effects OFF
Filmic Effects ONFilmic Effects ON
Normal StateNormal State
Third StrikeThird Strike
Hunter PounceHunter Pounce
Normal StressNormal Stress
High StressHigh Stress
Lighting for DarknessHorror/suspense themeLighting that supports fiction/navigationImportance of SilhouettePlayer as light source
Too many areas of contrastToo many areas of contrast
Simplified lightingSimplified lighting
In-game headlightsIn-game headlights
In-game headlightsIn-game headlights
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
Black FogBlack Fog Light FogLight Fog
Without particlesWithout particles With particlesWith particles
Reload, Shove & Muzzle FlashPlayer is the light source
Increases drama and immersionFlashlight is attached to the weapons
ReloadingShovingMuzzle flash
Encourages players to coordinate actions
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
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
Self-Shadowed Normal Mapping in EngineSelf-Shadowed Normal Mapping in Engine
Wetness / PuddlesFilm techniqueAdds details to dark settingsEnhances moodiness
In-game screenshotIn-game screenshot
Summary
Team Fortress 2Distinctive SilhouettesStylized shading
Left 4 DeadCreating a Dark, Gritty Horror experienceApplying lessons learned from TF2Utilizing “Filmic” effects
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.