gd50 lecture 4: super mario bros. - cdn.cs50.netlecture 4: super mario bros. colton ogden...
TRANSCRIPT
![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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/2.jpg)
![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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/3.jpg)
● 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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/4.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/5.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/6.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/7.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/8.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/9.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/10.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/11.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/12.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/13.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/14.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/15.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/16.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/17.jpg)
![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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/18.jpg)
![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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/19.jpg)
![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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/20.jpg)
![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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/21.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/22.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/23.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/24.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/25.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/26.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/27.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/28.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/29.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/30.jpg)
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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/31.jpg)
● 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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/32.jpg)
● 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](https://reader034.vdocuments.site/reader034/viewer/2022042121/5e9be03aaa14de45af34e8df/html5/thumbnails/33.jpg)
See you next time!