Anatomy of a 2d sidescroller
1 / 83

Anatomy of a 2D Sidescroller - PowerPoint PPT Presentation

  • Updated On :

Anatomy of a 2D Sidescroller Luis Barriga Before we start Please turn off cell-phones and pagers. Save your questions for Q&A after lecture. Turn in feedback forms before you leave. Introduction Purpose of Lecture Establish that 2D is a format and not a technology limitation.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Anatomy of a 2D Sidescroller' - benjamin

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

Before we start l.jpg
Before we start

  • Please turn off cell-phones and pagers.

  • Save your questions for Q&A after lecture.

  • Turn in feedback forms before you leave.

Introduction l.jpg

  • Purpose of Lecture

    • Establish that 2D is a format and not a technology limitation.

    • Propose the analysis of 2D games as a tool for understanding universal gameplay fundamentals.

    • Dissect the common components of 2D games as well as their evolution throughout time.

Lecture at a glance l.jpg
Lecture at a glance

  • On having more D’s

  • Elements of a 2D sidescroller

  • 10 Model games

On having more d s l.jpg
On having more D’s

  • 2D as a technological limitation

  • Immersion vs. abstraction

  • Ambiguity in representing 3D in 2D media

  • 2D and 3D as presentation formats

On having more d s6 l.jpg
On having more D’s

  • 2D as a technological limitation

    • Since the mid-90’s, 3D has been seen as an improvement over 2D. “The next step”

    • 3D capable platforms are more technologically advanced, thus not using 3D is often seen as a “waste.”

    • Even in very 2-d specific platforms, rudimentary 3d engines are often seen as a tool for differentiation.

On having more d s7 l.jpg
On having more D’s

  • Immersion vs. abstraction

Immersion vs abstraction l.jpg
Immersion vs abstraction

  • We experience the real world in 3d

  • We communicate abstractions in 2d

    • Letters

    • Maps

    • Symbols

    • Charts

    • Diagrams

Immersion vs abstraction9 l.jpg
Immersion vs abstraction

  • Spatial perception

    • The ability to mentally model/manipulate 3D images.

    • A skill that human beings develop over time (and are even tested on), it is a factor that must be considered when designing a game

An example of a spatial perception test taken from

Immersion vs abstraction10 l.jpg
Immersion vs abstraction

  • A thought on gender

    • Psychologists have found that males have an advantage at spatial perception and object displacement. Even about finding their way around maps.

    • They’ve also found that females have an advantage at remembering landmarks.

    • I am not a psychologist.

On having more d s11 l.jpg
On having more D’s

  • Ambiguity in representing 3D in 2D media

Ambiguity in representing 3d in 2d l.jpg
Ambiguity in representing 3D in 2D

  • Technology impediment

    • Unless a less ambiguous 3d medium becomes commonplace (VR goggles, Star Wars’ Dejarik chesslike holographic display), the “tightness” of gameplay will not be the same in 3D as 2D.

    • To compensate games must often add a lot more room for error, snapping or automatic guidance.

Ambiguity in representing 3d in 2d13 l.jpg
Ambiguity in representing 3D in 2D

  • Format difficulties

    • Making sure objects are recognizable at any angle

    • Mediation (Camera) issues (3rd person for example)

On having more d s14 l.jpg
On having more D’s

  • 2D and 3D as presentation formats

    • We should start looking at 3D vs 2D as a choice of formats that will enhance different types of gameplay.

    • 3D -> Immersion

    • 2D -> Abstraction + pixel level accuracy

On having more d s15 l.jpg
On having more D’s

  • 2D and 3D as presentation formats

    • Quite a few games have been pursued a 2D presentation on 3D platforms

      • Castlevania: Symphony of the night

      • Viewtiful Joe

      • Contra: Shattered Soldier

      • R-type Final

    • And more are sure to come ;-)

Elements of a 2d sidescroller l.jpg
Elements of a 2D sidescroller

  • The character

  • The environment

  • Game objects

  • Game rules

  • Mediation

Elements of a 2d sidescroller19 l.jpg
Elements of a 2D sidescroller

  • Note

    • Although we can dissect sidescrollers into components, more often than not elements are designed in parallel. For example: designing a grappling hook toss also requires designing environment types that enable this move.

Elements of a 2d sidescroller20 l.jpg
Elements of a 2D sidescroller

  • The character

    • From a gameplay standpoint here’s what interests us about the character:

      • Set of available actions

      • Visual footprint: shape/size, its visibility and its ratio to the screen and other objects

Elements of a 2d sidescroller21 l.jpg
Elements of a 2D sidescroller

  • Action sets

    • Interactivity is the core of what defines games: “what do you do in the game?” vs “what is the movie about?”

    • Game characters are defined as much by their available actions as by the character’s looks.

Elements of a 2d sidescroller22 l.jpg
Elements of a 2D sidescroller

  • Example:

    • I can shoot beams and missiles

    • I roll into a ball

    • I can freeze enemies to use them as platforms

  • Metroid’s Samus Aran

Designing action sets l.jpg
Designing Action Sets

  • Actions types

    • Generic (running, jumping, attacking)

    • Game-specific

  • Conventions

    • With a genre as well explored as side-scrollers, many actions have conventions associated with them

    • Feel free to ignore or work outside conventions but do so consciously (especially with core actions)

Designing action sets24 l.jpg
Designing Action Sets

  • Example: Jumping

    • Pre-scroller fixed jump

    • Variable jump

Jumping conventions26 l.jpg
Jumping Conventions

  • Button Assignment

    • B is action, A is jump

  • Variable jumping, Y

    • 2-tier jump

    • Gravity delay

    • Velocity reset (direct control feel)

  • Variable jumping, X

    • Direct control (character moves when directed)

    • Indirect control (changes acceleration)

Running conventions l.jpg
Running Conventions

  • Mainstream controls don’t always become conventions

    • Example 1: holding action button for running (Mario games)

      • Double tap d-pad became convention

      • In modern games shoulder button became convention

    • Example 2: Up + Action button for secondary action (Ninja Gaiden, Castlevania)

Damage conventions l.jpg
Damage conventions

  • Touch damage model

    • Character takes damage whenever coming in contact with enemy (regardless of whether the enemy is attacking or not)

  • Brawler model

    • Characters only deal damage when attacking

  • Intermediate models

    • Shinobi, Kung Fu, others. Touching an opponent leads to either mutual repulsion with no damage or a “captured” state with slow damage.

Designing action sets31 l.jpg
Designing Action Sets

  • Game-specific actions

    • Refer to the greater vision or theme of the game to come up with suitable actions.

    • Bruce Lee: Formidable fighting and acrobatic prowess -> deep combo tree, wall flip, pole slide, etc.

    • Brother Bear: Animal vs. Nature -> Water sliding, balancing on logs.

Visuals l.jpg

  • Shape

  • Visibility

  • Size ratio

Visuals34 l.jpg

  • Mental models and Game Engines

    • Characters in collision engines are usually represented as a box or collections of boxes

    • The player will develop his/her own mental model for the way the game world works.

    • A good correlation between the two will lead to a feeling of “tightness” in gameplay

    • A disconnection in the two will lead to sloppy gameplay.

Visuals36 l.jpg

  • Visibility

    • Player characters need to be distinguishable not just from the background but also from all other game objects.

    • Player characters actions and reactions need to be distinguishable from each other.

Visuals37 l.jpg

  • Size Ratio

    • The size of a character cannot be judged in an isolated manner.

    • We need to consider the ratio of a character’s size to:

      • The screen

      • The character’s actions’ visual footprints

      • Other objects

Size ratio vs screen l.jpg
Size Ratio – vs Screen

  • A screen must fit:

    • A character centered roughly on the bottom leftmost third of the screen.

    • A character’s full jump arc

    • A complete or near-complete encounter

      • Example: a bare pit must have both of its ledges visible. A pit with an enemy threatening one of the ledges must also account for the enemy’s patrol range.

    • HUD and so on.

Size ratio vs actions l.jpg
Size Ratio – vs Actions

  • Ratio vs Jump

    • Jumps are usually tall enough to clear at least one character unit (so you can jump over equivalent enemies).

    • Jump should be small enough to not exceed the screen size of a centered character as it’s a convention to lock the camera through the natural arc of a jump.

Size ratio vs actions40 l.jpg
Size Ratio – vs Actions

  • Ratio vs. Attacks

    • Aim for your attacks to extend at least around one character unit out.

Environment42 l.jpg

  • The Environment

    • The environment can only be analyzed within the context of handling.

    • A Mario level will play very differently with Spider-man as a player character.

Environment44 l.jpg

  • Building levels

    • There are many approaches to building levels.

    • It’s always good to prototype a level before dedicating art to it.

    • Building metrics. The character’s actions imply metrics, good levels take these into account.

Building levels continued l.jpg
Building levels (continued)

  • Build encounters

    • Encounters are group of environment sections and game objects that need to be considered by the player in conjunction

    • Once an encounter works, use it as a building block.

Building levels continued46 l.jpg
Building levels (continued)

  • Build a narrative

    • Sometimes you just have a strong vision of “moments” of gameplay.

    • In these cases linking these in a narrative form and translating the narrative into a level works well.

Building levels continued47 l.jpg
Building levels (continued)

  • Example:

    • Bears sliding down waterslide.

    • Bears getting shot off the end of the waterslide.

    • Bears landing directly into a balancing act position.

    • This led me to design a level where you slide down a long section, avoiding rocks, collecting berries, get shot off the end of the waterslide and landed on a log.

Building levels continued48 l.jpg




Building levels (continued)

  • Metrics

Building levels continued49 l.jpg
Building levels (continued)

  • Jump Metrics

    • Jump height

    • Jump reach

    • Jump width

  • Other Metrics

    • Landing space

    • Crawl space

Game objects l.jpg
Game Objects

  • What are they?

    • Game objects are everything that the player character (the subject) acts upon.

    • Enemies, breakables, collectibles, doors, etc.

Game objects52 l.jpg
Game Objects

  • Here’s something key:

    • If your objects only provide your player with one action the game will “play itself”

    • Having dual or multiple use objects, allows the player to make choices and increases the the depth of your gameplay.

    • Examples: Samus can blast an enemy or she can freeze it and use it as a platform. Mario can hop on a turtle and leave it or he can kick the shell towards other enemies.

Game objects54 l.jpg
Game Objects

  • Use them to magnify player character actions

    • Problem: Bruce Lee – We wanted combat to be engaging, but foot soldiers to not be very threatening (except in numbers).

    • We focused on giving enemies interesting ways to be beat up.

      • Height and direction sensitive hit animations

      • Disarms

      • Using enemies as projectiles

Rules l.jpg

  • Very, very broad topic

  • Victory and defeat conditions

  • Rules governing saving and retries

  • Associated conventions

    • Falling off the bottom of the screen

    • Exiting at the rightmost end of a level

Rules56 l.jpg

  • Come up with rules that engage the player at different levels

    • Damage model -> immediate well being of character

    • Skill tree -> strategic advancement of character

    • Time limit -> urgency for completion of goal

    • X Collectibles to do Y -> medium term objective

    • Points and currency -> long term or lateral goals (secrets unlockables, etc.)

Mediation l.jpg

  • Camera

    • Centering

    • Scaling

  • Views

    • Straight 2D

    • Floor-tilt view

    • Cabinet

Camera l.jpg

  • Camera… what camera?

    • Believe it or not, cameras in 2D games aren’t freebies.

    • You only really notice a camera if it’s bad.

    • A good sidescroller camera focuses on what the next encounter is going to be (above and ahead of the character).

Camera59 l.jpg

  • Centering

    • As mentioned before, focus more on what is to come than what has passed already.

    • This basically means centering the character in the lower third of the screen with the horizontal space divided 1/3 behind it and 2/3 ahead of it.

    • Also as stated before this should give the player a good view of encounters to come.

Camera61 l.jpg

  • Scaling

    • Limited platform support in 2D platforms (SNES, Neo Geo, Game Boy Advance)

    • Sacrifices certain features (less layers, less sprites)

    • Allows you to depict larger encounters (or even multiple encounters) in their entirety by zooming the action out when needed.

Views for non 3d graphic engines l.jpg
Views (for non-3D graphic engines)

  • Straight-on 2D

    • Every orthogonal surface is a line (i.e. you can’t see walls, ceilings or floors)

Views for non 3d graphic engines63 l.jpg
Views (for non-3D graphic engines)

  • Floor-tilt view

    • Same as straight-on view but “fake” the angle so the player can see the floor.

Views l.jpg

  • Cabinet view

    • The cabinet view is probably the hardest to implement.

    • It consists of a view similar to the full-on 2D view but the player can see the wall and the floor.

10 model games l.jpg
10 model games

  • Not the best or most well known

  • Offer a good variety of examples for reference

  • Come up with your own set of model games

10 model games69 l.jpg
10 model games

  • Game: Batman

  • System: NES

  • Why?

    • Tightest wall jump in any game

    • Greatest game over music ever

10 model games71 l.jpg
10 model games

  • Game: Strider

  • System: Arcade/Genesis

  • Why?

    • Sloped terrain with matching leg movement

    • Wall clinging and hand over hand action

    • Gravity reversal

    • Swooshes!!

    • Shinobi or Ninja Gaiden will also work as action game templates

10 model games72 l.jpg
10 model games

  • Game: Metroid

  • System: NES

  • Why?

    • Interconnected levels

    • Linking of skills progression with level progression

10 model games74 l.jpg
10 model games

  • Game: Contra IV, the Alien Wars

  • System: SNES

  • Why?

    • Special FX

    • Bosses

10 model games75 l.jpg
10 model games

  • Game: Ghouls and Ghosts

  • System: Arcade, SNES, Genesis

  • Why?

    • Dynamic terrain

    • Difficulty benchmark (if your game is harder than this, you’re screwed)

10 model games76 l.jpg
10 model games

  • Game: Bionic Commando

  • System: NES

  • Why?

    • Example of a game that does without one of the core sidescroller mechanics (jump) successfully.

10 model games78 l.jpg
10 model games

  • Game: Double Dragon I

  • System: Arcade, NES, Genesis

  • Why?

    • Ok, so it’s not a 2D game (2.5D)

    • Establishes the brawler damage model as well as you need to understand it.

    • The entire series (except 5) can be looked at for progression in variations.

10 model games79 l.jpg
10 model games

  • Game: Mega Man

  • System: NES, SNES

  • Why?

    • Swappable action sets

10 model games80 l.jpg
10 model games

  • Game: Lost Vikings

  • System: SNES

  • Why?

    • Single-player multi-character puzzles

10 model games82 l.jpg
10 model games

  • Game: Super Mario All-Stars

  • System: SNES

  • Why?

    • Because all you need to know is probably here.

Slide83 l.jpg

Questions, comments?

For additional information email me at: