Assignment 3: Mario

• 💯 Worth: 6%
• 📅 Due: See due date on Moodle.
• 🚫 Penalty: Late submissions lose 10% per day to a maximum of 3 days. Nothing is accepted after 3 days and a grade of 0% will be given.

🎯 Objectives

• Read and understand all of the Mario notes and source code from Lecture 3.
• Implement coins, platforms, or death animations.
• Implement either a mushroom or star power-up.

🔨 Setup

1. Fork (do not download as a zip) the starter repository from GitHub. Make sure you use the link from Moodle to fork the proper repository for this assignment.
2. Start Live Server in VSC by right-clicking on index.html and selecting Open with Live Server. This will open a new tab in your browser with the game running.
3. Download the Tiled map editor from here. You’ll need this to edit the map files in the config folder.
4. Open config/tilemap.tmx in Tiled to see the map data. You can edit the map by adding or removing tiles by clicking the tiles in the lower right corner and then clicking on the map to place them.

   Missing Tileset

   1. If you see all red tiles in the main map editor area, there will be an error at the top asking you to locate the tileset. Click “locate” and select config/tiles.tsx.
   2. If you see: The number of tile columns in the tileset ‘mario-0-tiles’ appears to have changed from 5 to 9. Do you want to adjust tile references? click Yes and simply repaint the bottom row of tiles to the correct dirt sprite.
5. Click File -> Export As and save the file as tilemap.json in the config folder.
6. Refresh the Live Server tab to see your changes.

🔍 Context

To complete this assignment, you should read and understand all of the Mario notes and source code and be familiar with the following concepts:

• Sprite Animation: Understanding how to animate sprites.
• Tile Collision: Understanding how to detect and respond to collisions with tiles.
• 2D Physics: Understanding how to move and interact with objects in a 2D space.

Caution

If you’re not comfortable with any of the above, please send me a message on Teams and I can help you! It is your responsibility to ensure you have learned all concepts we’ve seen so far so that you can do the assignment effectively.

Welcome to your fourth assignment! There was a lot to learn with cameras, tilemaps, entities, and game objects, but our game is still lacking in a few areas. By extending its functionality, we’ll have something even closer to famous titles like Super Mario Bros.

🚦 Let’s Go

Note

Make sure you’re logged into Moodle to play the videos below. However, don’t just go off of the video! Make sure you understand the feature and read the descriptions before implementing it. The video is just there to give you a visual representation of what the feature should look like. If the videos are blurry, make sure the quality is set to 1080p.

Implement two of the three following features:

1. 🪙 Coin Collection

   • Add coins to the map that the player can collect.
   • Implement a mechanic to spawn coins from blocks when the player hits them.
   • Play coin.wav when the player collects a coin.
   • Play bump.wav when the player hits a block. Since the coin is coming out of the block, play coin.wav as well.

   Tips

   • Create a Coin.js class to represent a coin.
   • When parsing the map data in Map.js, if you see a coin, instantiate a coin object at that location and keep an array of all coins in the map.
   • Update and render all coins on the map.
   • Inside Player.js, check for collisions with coins and remove them from the map when the player collides with them.

2. ⬆️ Platforms

   • Add platforms that the player can jump through from below/the side and land on from above.
   • Ensure the player can stand on these platforms and move horizontally while on them.
   • Collision with blocks and ground tiles in any direction should be unchanged. Platform tiles are specifically the ones with the sprite indeces 3 and 4 from the spritesheet.

   Tips

   • PlayerState and CollisionDetector are where we check for vertical collisions with the map. You’ll want modify the logic to ignore collisions with platforms when the player is moving upwards.

3. 😵 Death Animation

   • Implement a death animation for the player character when they get hit by a Goomba and when they fall off the bottom edge of the map.
   • Implement a death animation for the Goomba when they get jumped on by the player.
   • Make the player jump a small amount when falling on a Goomba.
   • Play player-down.mp3 when the player dies.
   • Play stomp.wav when the player jumps on a Goomba.

   Tips

   • Create a PlayerDyingState that switches to the dying sprite and then resets the player’s position.
   • Sprite locations can be found in SpriteConfig.js.
   • The animation itself can be as simple as tweening the player/Goomba off the screen, or increasing their Y position until they’re off the screen. I encourage you to get creative with this!

Implement one of the two following features:

1. 🍄 Mushroom Power-up:

   • Create a mushroom entity with its own movement physics, see video for details.
   • The mushroom should appear when the player hits a block, fall off the block, hit the ground, and move in a straight line until it hits a wall.
   • Play sprout-item.wav when the mushroom appears.
   • Play powerup.wav when the player collects a mushroom.
   • Play a grow animation for the player when collecting a mushroom and increase their height appropriately.
   • Play a shrinking animation when the player gets hit by an enemy and decrease their height appropriately.
   • Play pipe.wave when the player shrinks.
   • Add a lifetime and flicker-out effect for mushrooms by using the Timer class.

   Tips

   • Create a new Mushroom.js class.
   • When parsing the map data in Map.js, if you see a mushroom, instantiate a block object which contains a mushroom at that location and keep an array of all mushrooms in the map.
   • Create PlayerGrowingState and PlayerShrinkingState. When the player collides with a mushroom, switch to the growing state. When the player collides with an enemy when big, switch to the shrinking state.
   • Update and render all mushrooms on the map.
   • Inside Player.js, check for collisions with mushrooms and remove them from the map when the player collides with them.
   • The animation sprites can be found in SpriteConfig.js.
   • Set the context.globalAlpha to flicker out the mushroom after a certain period of time. Make sure to reset it back to 1 after you’re done flickering or else it will affect other sprites.

2. ⭐ Star Power-up:

   • Create a star entity with its own bouncing physics, see video for details.
   • The star should bounce out of the block, and continue to bounce off the walls and ground until it hits the player or despawns.
   • Implement sparkle animations that trail the player when they collect a star. The sparkles should appear randomly around the player’s location and leave a trail behind them.
   • Start an invincibility timer for the player. If the player hits an enemy from any direction, the enemy should die. After the timer expires, regular collision rules are back in play.
   • Add a lifetime and flicker-out effect for stars.
   • Play sprout-item.wav when the star appears, invincible.mp3 when the player collects a star, and starman-low.wav when the player loses invincibility.
   • Play stomp.wav when the player collides with an enemy while invincible.

   Tips

   • Create a new Star.js class.
   • When parsing the map data in Map.js, if you see a star, instantiate a block object which contains a star at that location and keep an array of all stars in the map.
   • When the player collides with a star, start a timer. When the player collides with an enemy during this timer, always kill the enemy.
   • Update and render all stars on the map.
   • Inside Player.js, check for collisions with stars and remove them from the map when the player collides with them.
   • The sparkle animation sprites can be found in SpriteConfig.js.
   • Set the context.globalAlpha to flicker out the star after a certain period of time. Make sure to reset it back to 1 after you’re done flickering or else it will affect other sprites.

🌿 Git

We will be using GitHub and Gradescope to submit in this course. You can use either the Git CLI or you can also use VSC’s built-in Git GUI client.

🖱️ GUI

1. In VSC, click on the third icon down in the left navigation bar to see a list of files that have changed and are ready to be staged.
2. Hover over where it says Changes (right below the commit textbox) and click + to stage all the modified files to be committed. Alternatively, you can add specific files by clicking the + next to the individual file.
3. Type a commit message into the textbox and click the checkmark above it to commit all the files that were just staged.
4. Click ... and then push to push the commit(s) up to GitHub.

⌨️ CLI

1. Run git status to see a list of files that have changed and are ready to be staged.
2. Run git add . to stage all the modified files to be committed. Alternatively, you can add specific files like this: git add src/Mushroom.js.
3. Run git commit -m "A descriptive message here." (including the quotes) to commit all the files that were just staged.
4. Run git push to push the commit(s) up to GitHub.

Regardless of the method you choose, it is very important that you commit frequently because:

• If you end up breaking your code, it is easy to revert back to a previous commit and start over.
• It provides a useful log of your work so that you (and your teammates if/when you’re on a team) can keep track of the work that was done.

📥 Submission

Before submitting your assignment, ensure that your map includes all the necessary elements for your peers to properly evaluate your submission. Below are the specific instructions for each feature you may have implemented. Ensure all relevant features are included and testable in your map, and describe them clearly when you submit.

🪙 Coin Collection

• Coins in the map: Include both free-floating coins and coins that spawn from blocks.
• Animations: Ensure free-floating coins loop through the coin spinning animation, and spawned coins should travel up then down quickly before disappearing.
• Sound Effects: Verify that the correct sounds (coin.wav, bump.wav) are played when coins are collected or blocks are hit.
• Description: Mention in your submission how peers can find and interact with the coins in your map.

⬆️ Platforms

• Platforms in the map: Ensure platforms are clearly present and placed in areas where they can be tested.
• Collision Logic: Test jumping through platforms from below/side and landing on them only from above. All other block/ground collisions should behave normally.
• Description: Point out where the platforms are in your map so peers can easily evaluate their functionality.

😵 Death Animation

• Player death: Include situations where the player dies by falling or by enemy collision.
• Goomba death: Include Goombas that can be stomped on to test the death animation.
• Sound Effects: Ensure the correct sounds (player-down.mp3, stomp.wav) are played for player death and Goomba death.
• Description: Describe how peers can encounter both player death and Goomba death in your map.

🍄 Mushroom Power-up

• Mushroom in the map: Place mushrooms that can be spawned from blocks and mushrooms that move along the ground.
• Animations: Ensure the grow/shrink animations are working when the player interacts with mushrooms.
• Movement: Ensure mushrooms spawn, move correctly, and interact with walls and the player.
• Flickering/Despawning: Test that mushrooms flicker out after a set time and despawn. Make sure that after despawning, they no longer interact with the player.
• Sound Effects: Verify the correct sounds (sprout-item.wav, powerup.wav, pipe.wav) are played for mushroom actions.
• Description: Mention in your submission where mushrooms can be found, how they spawn, move, and interact with the player.

⭐ Star Power-up

• Star in the map: Place stars that spawn from blocks and bounce around the map.
• Animations: Ensure the sparkle trail animation plays when the player is invincible.
• Invincibility: Ensure the player becomes invincible and kills enemies upon collision during the star’s active time.
• Flickering/Despawning: Test that stars flicker out and despawn after a set time. After despawning, the player should not be able to become invincible by passing through the star’s previous position.
• Sound Effects: Verify the correct sounds (sprout-item.wav, invincible.mp3, stomp.wav, starman-low.wav) are played during the star’s spawn, collection, and invincibility phases.
• Description: Mention where stars are located, how they interact with the player, and how the invincibility works.

Note

Note that the grading criteria can be found on Gradescope, but only after you’ve submitted. You’re able to submit infinitely, so it’s be a good idea to submit a blank repo first in order to reference the grading criteria while working on this assignment.

Once you’ve made your final git push to GitHub, here’s what you have to do to submit:

1. Go to Gradescope, click the link for this assignment, select the correct repository and branch from the dropdown menus, and click Upload.
2. Click the blue Add Submission button at the top of this page.
   1. Title: A3 Mario Submission. Don’t include your name if you want to remain anonymous during peer review.
   2. Submission content: Describe which features you implemented in the description of the workshop submission along with anything your reviewers should know about your game/code.
   3. Zip your assignment folder and attach it as a file. If you want to remain anonymous, ensure the zip file doesn’t contain your name, and also make sure to not include the .git folder before zipping.
3. Click the Save changes button at the bottom.
4. You’ll be able to start assessing your peers the day after the assignment’s late cutoff date.