33
GD50 Lecture 4: Super Mario Bros. Colton Ogden [email protected] David J. Malan [email protected]

GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden [email protected] David J. Malan [email protected] Tile Maps 2D Animation Procedural

  • Upload
    others

  • View
    7

  • Download
    0

Embed Size (px)

Citation preview

Page 1: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

GD50Lecture 4: Super Mario Bros.

Colton [email protected]

David J. [email protected]

Page 2: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural
Page 3: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

● Tile Maps● 2D Animation● Procedural Level Generation● Platformer Physics● Basic AI● Powerups

Topics

Page 4: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

But first, a demo!

Page 5: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

Our Goal

Page 6: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

Tilemaps

● Level is comprised of many small tiles that give the

appearance of some larger whole.

● Tiles often have an ID of some kind to differentiate their

appearance or behavior.

Page 7: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

tiles0 “Static Tiles”

Page 8: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

tiles1 “Scrolling Tiles”

Page 9: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

tiles1, Important Functions

● love.graphics.translate(x, y)○ Shifts the coordinate system by x, y; useful for simulating

camera behavior.

Page 10: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

character0 “The Stationary Hero”

Page 11: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

character1 “The Moving Hero”

Page 12: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

character2 “The Tracked Hero”

Page 13: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

character3 “The Animated Hero”

Page 14: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

Animations

● Animations can be achieved by simply displaying a series of

frames from a sprite sheet one after the other, akin to a flip

book.

Page 15: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

character4 “The Jumping Hero”

Page 16: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

Procedural Level Generation

● Platformer levels can be procedurally generated like anything

else

● These levels can be easily generated per column rather than

per row, given things like gaps, though there are multiple

ways to do it

● Most easily, tiles can foundationally be generated and act as

the condition upon which GameObjects and Entities are

generated

Page 17: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural
Page 18: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural
Page 19: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural
Page 20: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural
Page 21: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

level0 “Flat Levels”

Page 22: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

level1 “Pillared Levels”

Page 23: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

level2 “Chasmed Levels”

Page 24: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

Tile Collision

● AABB can be useful for detecting entities, but we can take

advantage of our static coordinate system and 2D tile array

and just calculate whether the pixels in the direction we’re

traveling are solid, saving us computing time.

● See `TileMap:pointToTile(x, y)`!

● Can just directly check tiles on the map once coordinates are

converted by dividing them by TILE_SIZE

● Notably better than having to iterate over all tiles to check

AABB in terms of performance, with some inflexibilities (tiles

can’t move around, for example)

Page 25: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

Tile Collision (up)

Tested only when in the `PlayerJumpingState`!

Page 26: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

Tile Collision (down)

Tested only when in the `PlayerFallingState`!

Page 27: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

Tile Collision (left/right)

Tested in `PlayerJumpingState`, `PlayerFallingState`, and `PlayerMovingState`!

Page 28: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

Entities

● Can contain states just like the game, with their own

StateMachine; states can affect input handling (for the

player) or decision-making (like the Snail)

● Some engines may adopt an Entity-Component System (or ECS),

where everything is an Entity and Entities are simply

containers of Components, and Components ultimately drive

behavior (Unity revolves around an ECS)

● Collision can just be done entity-to-entity using AABB

collision detection

● Represent the living things in our distro (Snail and Player),

but could represent most anything; arbitrary

Page 29: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

Game Objects

● Separate from the tiles in our map, for things that maybe

don’t align perfectly with it (maybe they have different

widths/heights or their positions are offset by a different

amount than TILE_SIZE)

● Can be tested for collision by AABB

● Often just containers of traits and functions

● Could be represented via Entities, but aren’t in this distro

Page 30: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

Powerups

● Effectively a GameObject that changes some “status” or trait

of the player

● An invincible star may flip an “invincible” flag on the player

and begin an “invincibleDuration” timer

● A mushroom to grow the player may trigger a “huge” flag on the

player that alters their x, y, width, and height and then

scales their sprite

Page 31: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

● Ensure the player always starts above solid land.● Create random keys and locks (same color) that spawn in

each level; when the player gets the key, they can unlock the lock, which should spawn the goal flag.

● When the player touches the goal flag (which should be placed in the level toward the right end), they should proceed to the next level, which should get longer than the one before it horizontally.

Assignment 4

Page 32: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

● Top-Down Perspective● Triggers● Events● Hurtboxes● Inventory● GUI● World State

Next Time...

https://opengameart.org/content/a-cute-dungeon

Page 33: GD50 Lecture 4: Super Mario Bros. - cdn.cs50.netLecture 4: Super Mario Bros. Colton Ogden cogden@cs50.harvard.edu David J. Malan malan@harvard.edu Tile Maps 2D Animation Procedural

See you next time!