In this exercise, you are going to recreate a screenshot from level 1 of the original Super Mario Bros. game with sprites. Click here to watch this level in action! On the left, you see the scene from the game, and on the right, what you need to create with your sprites:
Notes:
Your canvas size should be 480 x 360 pixels.
You’ll see that the starter code includes the mouse coordinates box to help you set your sprites’ X and Y coordinates.
Use an online HEX color picker (remember, Google search “hex color picker”) to find colors that are similar to what you see in the scene.
You can use the noStroke() command after creating your canvas if you want to remove the stroke (ie the border) around the shapes.
Your scene does not need to be exact. Choose the positions, sizes, and colors so that your scene looks like the Mario scene, even if it is not perfect. Success in this activity is to show that you know how to use the sprite properties to create a similar scene.
By default, sprites CANNOT overlap. Adjust the positions of the sprites so that they are close to each other, but not touching. If they are overlapping, you’ll see them move.
To recreate a screenshot from level 1 of the original Super Mario Bros. with sprites, start by setting up your canvas with a size of 480 x 360 pixels. Here’s a step-by-step guide on how to accomplish this:
1. Set up your canvas: Use the command `createCanvas(480, 360);` to create your drawing area.
2. Specify colors: Utilize an online HEX color picker to select colors that match the background, ground, and sprites in the Super Mario scene.
3. Remove outlines: Implement `noStroke();` after your canvas setup to eliminate any border around your sprites for a cleaner look.
4. Position your sprites: Arrange your sprites using the mouse coordinates tool. Ensure that no sprites overlap; adjust their X and Y positions so they’re close but not touching.
5. Drawing the scene:
– For example, to draw the ground, use a rectangle: `rect(0, 320, 480, 40);` for the ground.
– For platforms or blocks, create additional rectangles or sprites at appropriate coordinates.
6. Customize sprite sizes: Adjust the width and height of your sprites to mirror the proportions of the Mario scene.
An example of simple sprite placement might be:
function setup() {
createCanvas(480, 360);
noStroke();
// Ground
fill('#4E4D39'); //