3 of 79

Why Character Select Screen matters

Analysis, problems & solutions

Adrià Serrano López

4 of 79

What

who

How

Why

When

WHAT is all of this about? What is/ isn’t a Char Select?

Who is pushing concepts now?

Are we doing a good job at it?

HOW can we make an AMAZING CS screen?

WHY do we care about character select screens?

WHEN did this screens start to appear? Did they evolve?

5 of 79

WHAT

What are we talking about

Character Select Screen = Screen pre-combat in which player/s select their pre-combat parameters

Scope

These screens are present on multitude of genres; however, we will focus in fighting games, since they are always present there (MOBA is another candidate...)

I consider these “Character” Select Screens too!

However, we will focus on Fighting Games for now

Fire Emblem 3 Houses

Hades

Darkest Dungeon

6 of 79

how

The perfect character screen

All the characters are shown at the same time
All chars have characterization

Splash Art, 3D model, quoting in-char...

Critical information about them is displayed
It is aesthetically pleasing in color, composition, music…
Correct usage of universal UI rules (Gestalt principles, etc.)

7 of 79

why

Why do we even care?

It has impact in every play session
Problems found here have ripple effect
Perfect place to use player guidance
Danger of delivering “False Promises”

Opportunity to deliver actual promises!

I wonder why that hole is deliberately left there ;)

Dragon Ball FightrerZ

Notice something else fishy in composition?

8 of 79

when

Born in 1990

With the birth of the first Fighting games (SF2, KoF, FF...) we start to see appear the first character select screens ( as previously defined )

Before that, there is only one playable character in each arcade game ( heck, even fighting games fall into this! Check Street Fighter I )

Beat ‘Em Up type of games sometimes presented multiple characters but they did not present the player with a character select screen!

9 of 79

who

What’s on the market?

These last years we’re seeing a resurgence in the Fighting Game genre! (Probably because of Tekken 7’s success, released in 2015-16).

However, the quality of Char Select ranges from 0 to 10. How can this be? Probably because they are not given the time and love they require (and deserve)

New entries for established franchises: GG, SF, MK…

Revival of old glories: Soul Calibur, MvC, SamShow...

New “Underdogs”: Granblue, DBFZ, Skullgirls…

Much more to come!!!

10 of 79

Let’s put that into practice

After reviewing +/- 500 screens, i’ve made a historical sample: from the 90’s to current games

Let’s discuss the best of the best and the worst of the worst… and take some conclusions

11 of 79

Street fighter 2 - 1992

12 of 79

All chars shown? Y
Characterization Splash art + country
Critical information None
Aesthetically pleasing Considering time, B+ / A-
UI rules Decent job, center problem

13 of 79

Tokidensho Denshou: Angel Eyes - 1992

14 of 79

All chars shown? Doubled!
Characterization None
Critical information None
Aesthetically pleasing D-
UI rules Abomination

15 of 79

Art of fighting - 1993

16 of 79

All chars shown? Y
Characterization Splash art simple
Critical information None
Aesthetically pleasing C- (God that background...)
UI rules Few rules, center problem

17 of 79

X-men children of the atom - 1994

18 of 79

All chars shown? Y
Characterization Splash art + All models!
Critical information None
Aesthetically pleasing B+, A-
UI rules Pretty good (horror vacui?)

19 of 79

X-men vs street fighter - 1996

20 of 79

All chars shown? Y
Characterization Splash art + dynamic model + good portrait!
Critical information None
Aesthetically pleasing Yeah! Nice 2.5D effect + colorful
UI rules Almost no oopsies + good overlap + spacing

21 of 79

Vampire saviour 3 - 1997

22 of 79

All chars shown? Y
Characterization Splash art + dynamic model + good portrait!
Critical information None
Aesthetically pleasing A+
UI rules Solid

23 of 79

Garou mark of the wolves - 1999

24 of 79

All chars shown? Y
Characterization Splash art + model
Critical information None
Aesthetically pleasing D
UI rules Abomination

25 of 79

Street fighter third strike - 1999

26 of 79

All chars shown? Y
Characterization Face splash art
Critical information None
Aesthetically pleasing B-
UI rules Great! (timer tho...)

27 of 79

Marvel vs capcom 2 - 2000

28 of 79

All chars shown? All 56 of them!
Characterization Splash art + dynamic model + great portrait!
Critical information Mode + playing tips + assist!
Aesthetically pleasing S+ ! Nice 2.5D, colors, background, font...
UI rules Amazing!

29 of 79

Konjiki no gash bell yuujou no zakeru dream tag tournament - banpresto - 2003

30 of 79

All chars shown? Y
Characterization Model + Art (Monochrome portrait)
Critical information None
Aesthetically pleasing Blue + Yellow, really?
UI rules Decent job, void space

31 of 79

Akatsuki Blitzkampf - 2003

32 of 79

All chars shown? Y
Characterization Splash art + Model + Story!
Critical information Style of fighting
Aesthetically pleasing S, great overlapping + chroma scheme
UI rules Creative solution: vertical “eye” portrait

33 of 79

Crimson alive - 2004

34 of 79

All chars shown? Y
Characterization Static model + “diffused” 2D art
Critical information None
Aesthetically pleasing Abomination
UI rules Horrible spacing + disrespecting importance

35 of 79

Arcana heart - 2005

36 of 79

All chars shown? Y
Characterization Static model + 2D art
Critical information None
Aesthetically pleasing C (too crammed and bright)
UI rules Unwanted overlapping

(nice experimentation tho)

37 of 79

Soul calibur 4 - 2008

38 of 79

All chars shown? Y
Characterization Splash art
Critical information None
Aesthetically pleasing C (“meh”)
UI rules Correct. Not bonus, not minus

39 of 79

Blazblue calamity trigger - 2009

40 of 79

All chars shown? Y
Characterization Static 2D model
Critical information None
Aesthetically pleasing B- (a bit too much)
UI rules Decent job

(nice experimentation tho)

41 of 79

King of fighters xiii - 2010

42 of 79

All chars shown? Y
Characterization Full Splash art + Model
Critical information None
Aesthetically pleasing C Bare bones approach
UI rules Decent job, why the groups though

43 of 79

Arcana heart 3 love max stars - 2011

44 of 79

All chars shown? Y
Characterization Splash art + model
Critical information None
Aesthetically pleasing B (confusion between splash art and model)
UI rules Great!

45 of 79

Killer instinct - 2013

46 of 79

All chars shown? Y
Characterization Splash art
Critical information Options + Lvl
Aesthetically pleasing B+, Weird lvl up icons
UI rules A bit all over the place + center void

47 of 79

divekick - 2013

48 of 79

All chars shown? No
Characterization Splash art
Critical information Dive arc + velocity!
Aesthetically pleasing C+
UI rules Decent job, center problem

49 of 79

skullgirls - 2013

50 of 79

All chars shown? Y
Characterization Splash art + model (+ quote)
Critical information Possible assists
Aesthetically pleasing A+
UI rules Brilliant!

51 of 79

Ultra street fighter iv - 2014

52 of 79

All chars shown? Y
Characterization Splash art
Critical information None
Aesthetically pleasing D / C
UI rules Not spacing + center problem

53 of 79

Naruto shippuden ultimate ninja storm 4 - 2016

54 of 79

All chars shown? Not all shown… and they’re doubled!
Characterization Dynamic-ish splash art for one char only!
Critical information Obligatory params and they stay there!
Aesthetically pleasing D / E+ (I just hate it that much)
UI rules Center problem + portraits laughably small

55 of 79

Tekken 7 fated retribution - 2016

56 of 79

All chars shown? Y
Characterization Splash art
Critical information None
Aesthetically pleasing C
UI rules Great big portraits, center problem

57 of 79

Dragon ball fighterz - 2018

58 of 79

All chars shown? Y
Characterization Diffused art + 3D Model + Quote
Critical information None
Aesthetically pleasing C+
UI rules Great details, center problem

59 of 79

Capoeira fighter 3 - 2019

60 of 79

All chars shown? Y
Characterization Splash art
Critical information None
Aesthetically pleasing D-, please those colors
UI rules Decent job

61 of 79

Sfv champion edition - 2020

62 of 79

All chars shown? Y
Characterization Dynamic splash art / model
Critical information None
Aesthetically pleasing A+
UI rules Great! (workaround to center problem)

63 of 79

Under night in-birth: EXE Late[cl-r] - 2020

64 of 79

All chars shown? Y
Characterization Splash art + Model + Lore
Critical information None
Aesthetically pleasing A+ / S
UI rules Decent job, (center problem?)

65 of 79

Conclusions

Vertically structured roster lines work better than horizontal
Most common problem: no critical info
Center of screen is usually blank! Must avoid
Diagonal vertical line is perfect for clearly splitting the screen in 2
Careful with Splash art + Model overlap (it can look confusing)
Non-critical information as aesthetic flare, but not overwhelming
Characters should be all shown, but just once!
Use 2.5D techniques! More space + looks dope

66 of 79

Ideas?

Character theme on hover?
Non static 3d model: signature moves? Controlling them on pick up?
Quote on pick (some games do this already)
Background with character rol (i.e. grappler / rushdown ...)
LoL type of chart? (att / deff / diff)
Personality affinity? Aggressive / setup / etc

Your turn!

67 of 79

Controlling on pick up

Warming Up before the match!
Chance for “trying out” chars organically
Perfect “button check”!
Avoiding feedback void while waiting

Fire Emblem: 3 Houses

Moving /Jumping on loading screen

68 of 79

Character LoL chart

69 of 79