Kamei - Art Direction Street Fighter

Art Direction of Street Fighter V
- The Role of Art in Fighting Games -
CAPCOM, CO. LTD

TOSHIYUKI KAMEI
1
(C) CAPCOM CO. LTD. ALL RIGHTS RESERVED.
Agenda
1. Easy to Follow & Understand
• Importance of character silhouettes
• Character visibility / foreground and background color setting
• Characters and hitboxes (Collision)
• Applying knowledge from pixel era to 3D models
2. Create Personality with Artistic Accents

• Brushstroke Style
• Indirect Light
• Applying Capcom Illustrative style to 3D models
3. Conclusion
2
Introduction
16 years experience as
Technical Artist
Art Director on Street Fighter IV & V
Has worked at
DIMPS Corporation.
GREE, Inc.
CAPCOM Co., Ltd.
3
考え方
PHILOSOPHY
4
Street Fighter V Concept
e-Sports 5
Sharing Emotion
6
Easy to Follow & Understand 7

1.
Art Direction
Easy to Follow & Understand
88
CONFIDENTIAL (C) CAPCOM
(C) CAPCOM CO.
CO. LTD.
LTD. ALL
ALL RIGHTS
RIGHTS RESERVED.
RESERVED.
Street Fighter Aesthetic
Muscular
9
Street Fighter Aesthetic
Outlandish 10
Character
↓
A symbol (indicator)
which conveys information
11
Information from Game 12
Player Decision 13
Player Action 14
Process happens in a split second
15
ART in fighting games
is the singular element that can
convey information to players in a
fraction of a second.
16
1-1：Character Silhouettes
1
17
7
(C) CAPCOM CO.
CO. LTD.
LTD. ALL
ALL RIGHTS
RIGHTS RESERVED.
RESERVED.
Character Silhouette
Are They Easy to Read During Battle? 18

Pixel Era Character Silhouettes

19
6 pixels
20
4 pixels
6 pixels
21
2 pixels
4 pixels
6 pixels
22
23
Anatomy:
A “Strange”
Guide for Artists
Human anatomy reference material
created by veteran Capcom staff
during the pixel art era.
This guide outlines the most

important anatomical features to
exaggerate when making cool-
looking pixel art.
24
Inherited Knowledge of
Important Anatomy for Pixel Art 25
Ex: Arm Silhouette Exaggeration 26

Wide Narrow
Wide
Narrow
Ex: Exaggeration of Arm Silhouette 27

Comparison 28
Realistic Proportions Proved Hard to

Read During Battle 29
1-2：Character Height
3
30
0
(C) CAPCOM CO.
CO. LTD.
LTD. ALL
ALL RIGHTS
RIGHTS RESERVED.
RESERVED.
Character Height
175 cm 182 cm
31
Character Height
17.5 Grid Units
32
Character Height
Ultimately Decided in Battle Camera 33

Character Height
Practically the Same in DCC Tool 34

Character Height
175 cm 182 cm
35
Character Height
175 cm 182 cm
36
1-3：Character Animation
3
37
7
(C) CAPCOM CO.
CO. LTD.
LTD. ALL
ALL RIGHTS
RIGHTS RESERVED.
RESERVED.
Animation
Motion must include key information 38

Animation
Fighting Style
Attack immediately
identifiable as
“Karate(Ansatsu - Ken)”

Animation
Fighting Style Weight & Rhythm

Attack immediately create right feeling and
identifiable as coolness

Animation
Function
Motion matches specific
function (hitbox) game
designers are looking for.
Fighting Style Weight & Rhythm

Attack immediately create right feeling and
identifiable as coolness

Animation
※Video Reference 42
Animation
CAMERA
Fighting Game Normal

Animation Animation
43
Animation
CAMERA
Fighting Game Normal

Animation Animation
44
The 5° Turn
45
Animation
CAMERA
M.Bison 46
Animation
CAMERA
M.Bison 47
Animation
CAMERA
Zangief 48
Animation
CAMERA
Zangief 49
Animation
CAMERA
Rainbow Mika 50
Animation
CAMERA
Rainbow Mika 51
Animation
Reviewing animation in
Battle Camera
is the most important.
52
1-4：Cinematic Moves
5
53
3
(C) CAPCOM CO.
CO. LTD.
LTD. ALL
ALL RIGHTS
RIGHTS RESERVED.
RESERVED.
Cinematic Moves
※Video Reference 54
Memorable Cinematic Moves
55
56
57
58
Can it be described in a
single phrase?
59
A sumo wrestler says

“Dog Pie”
while doing a head-butt!
60
A man says “Yoga” while

breathing fire from his mouth!
61
Cinematic moments that

can be put into words are important
when sharing emotions
with friends.
62
1-5：Background (Stages)
6
63
3
(C) CAPCOM CO.
CO. LTD.
LTD. ALL
ALL RIGHTS
RIGHTS RESERVED.
RESERVED.
Background (Stages)
64
Background (Stages)
Character Histogram
Stage Histogram
65
Background (Stages)
Character Histogram
Stage Histogram
66
Multi-Color Grading
Multi-Color Grading ON 67
Multi-Color Grading
Multi-Color Grading OFF 68

Multi-Color Grading
Lookup Table (LUT)
69
Multi-Color Grading
LUT Far Left LUT Far Right
LUT Near Left LUT Near Right
CAMERA 70
Multi-Color Grading
71
Background (Stages)
72
1-6：Camera: Field of View (FOV)
7
73
3
(C) CAPCOM CO.
CO. LTD.
LTD. ALL
ALL RIGHTS
RIGHTS RESERVED.
RESERVED.
Camera FOV Correction
With 3D cameras the view becomes more distorted near the edge
of screen. This can make it hard for players to read the action.
74
Edge of Screen Mid Screen 75

Fix Projection = 0.0 76

Fix Projection = 1.0 77

Fix Projection = 0.5 (Shipped Version) 78

Goal of Fix Projection
Stages = strong FOV for Impact

Characters = weak FOV for Battle
79
2.
Art Direction
Create Personality with Artistic Accents
8
80
0
(C) CAPCOM CO.
CO. LTD.
LTD. ALL
ALL RIGHTS
RIGHTS RESERVED.
RESERVED.
Target Visual
NPR (Non-Photorealistic Rendering) 81

Why NPR?
Franchise History
Street Fighter always had
beautiful illustrations.
Push Deformation
Tool to push character silhouettes,
details, and coloring.
82
Final Result
Rich Lighting + Painterly Accent 83

NPR
i) Brushstroke (Painterly Accent)
ii) Push Edges & Color Range
iii) Color & Saturation Control
84
2-i：Brushstroke (Painterly) Style
8
85
5
(C) CAPCOM CO.
CO. LTD.
LTD. ALL
ALL RIGHTS
RIGHTS RESERVED.
RESERVED.
Painterly Accent
86
Adding Accent to Normal Map
Painterly Style
Add 2D Filtering to Normal Maps 87
NPR: Brushstroke Accent
Texture Filter OFF 88

NPR: Brushstroke Accent
Texture Filter ON 89
As texture
resolution increases,
space between
bumps is larger
470 pixel
160 pixel
90
Tangent Space Object Space

91
Process to Add Accent
2.Converted 3.Add Accent to 4. Reconvert

1.Original Normal Normal Map Normal Map 5. UE4 Check
Map （Tangent Space →
Normal Map （Object Space → (Unreal Engine 4)
（Snap Art Filter）
Object Space） Tangent Space）
92
Object Space Touch Added

93
Why we utilized it:
Various painterly filters,
lots of parameters to tweak
94
Sharp Rough
95
Information Density
96
Information Density
97
Painterly Accent OFF 98
Painterly Accent ON 99
Painterly Accent ON 100
2-ii：Edge Filter
1
1010
1
CONFIDENTIAL (C) CAPCOM CO. LTD. ALL RIGHTS RESERVED.
Recommend
brightness
0.6 or more.
Adjust the
degree of
sharpness
Recommend
1.5 range
Apply arbitrary color if

there is a large range in RGB.
102
Edge Filter
Edge Filter OFF 103

Edge Filter
Edge Filter ON 104

Edge Filter
Creates strong
Character Outline
Adds blurring to
Painterly Accent
Edge Filter ON 105

2-iii：Indirect Light
1
1060
6
Enhance Indirect Light
Add Color to Reflected Light

107
Enhance Indirect Light
Add Color to Reflected Light

108
Lighting Process
Pre-Lighting Basic Light Indirect Light

(Stationary) 109
Lighting Process
Pre-Lighting Basic Light Indirect Light

(Stationary) 110
2 Kinds of Indirect Lighting
Indirect Light Indirect Lighting Cache Enlighten

OFF (Bake) (Realtime) 111
3.
In Conclusion
1
1121
2
Art in Fighting Games
Is singular element that can convey
information to players in a fraction
of a second.
113
Art in Fighting Games
Is singular element that can convey
information to players in a fraction
of a second.
After this critical goal is achieved, we can
create a unique visual style with personality.
114
What role does art
play in games?
115
Thank You!!
116
Questions？
Facebook
Toshiyuki Kamei
117

Kamei - Art Direction Street Fighter

Uploaded by

Copyright:

Available Formats

You might also like

Kamei - Art Direction Street Fighter

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Kamei - Art Direction Street Fighter

Uploaded by

Copyright:

Available Formats

Art Direction of Street Fighter V

- The Role of Art in Fighting Games -

CAPCOM, CO. LTD

2. Create Personality with Artistic Accents

Easy to Follow & Understand 7

Are They Easy to Read During Battle? 18

Pixel Era Character Silhouettes

This guide outlines the most

Ex: Arm Silhouette Exaggeration 26

Ex: Exaggeration of Arm Silhouette 27

Realistic Proportions Proved Hard to

17.5 Grid Units

Ultimately Decided in Battle Camera 33

Practically the Same in DCC Tool 34

Motion must include key information 38

Motion must include key information 39

Fighting Style Weight & Rhythm

Motion must include key information 40

Fighting Style Weight & Rhythm

Motion must include key information 41

Fighting Game Normal

Fighting Game Normal

A sumo wrestler says

A man says “Yoga” while

Cinematic moments that

Multi-Color Grading OFF 68

Lookup Table (LUT)

LUT Far Left LUT Far Right

LUT Near Left LUT Near Right

Edge of Screen Mid Screen 75

Fix Projection = 0.0 76

Fix Projection = 1.0 77

Fix Projection = 0.5 (Shipped Version) 78

Stages = strong FOV for Impact

NPR (Non-Photorealistic Rendering) 81

Rich Lighting + Painterly Accent 83

Texture Filter OFF 88

Tangent Space Object Space

2.Converted 3.Add Accent to 4. Reconvert

Object Space Touch Added

Apply arbitrary color if

Edge Filter OFF 103

Edge Filter ON 104

Edge Filter ON 105

Add Color to Reflected Light

Add Color to Reflected Light

Pre-Lighting Basic Light Indirect Light

Pre-Lighting Basic Light Indirect Light

Indirect Light Indirect Lighting Cache Enlighten

You might also like