Scratch

Working with Scratch and Pixlr to create an Art History Maze Game

In this tutorial we will be making an art history game using Scratch, which is developed by MIT. Students will develop:
  • Three sprites - These sprites can either be made with the tools in Scratch or use the default ones
    1. Main sprite (moves through the maze)
    2. Art history sprite (triggers the art history regarding a Montana artist)
    3. Challenge sprite (used to trigger a challenge question and potentially win the game)
  • Six backdrops - These will be made using the artists paintings, please cite your work!
    1. Introduction
    2. Directions
    3. Maze
    4. Art History
    5. You Win
    6. Works Cited



Part 1 - Scratch signup
Part 2 - Creating the Backdriops
         A. Scratch GUI (Graphical User Interface)
         B. Pixlr
         C. Finding a Montana Artist & http://goo.gl
         D. Making the backdrops!
         E. Adding a Backdrop to Scratch
Part 3 - Writing Scripts
         A. Scripting the Stage View
Part 4 - Art History
         A. Create an Art History backdrop with Scratch
         B. Add a new sprite to Scratch
         C. Scripting the new sprite
         D. Scripting the cat sprite
Part 5 - The Final Steps
         A. Add the Final Sprite
         B. Adding the "you win" script to the Art History Sprite!
         C. Finish The Scripts on The Stage
         D. The Final Script



Part 1 - Becoming a fellow Scratcher!

  1. Simply navigate to http://scratch.mit.edu
  2. Press the Join Scratch button and then follow the on screen instructions.
  3. For the email address please use your school email account
    1. Emily Smith (first initial of first name dot full last name @cfmtschools.net)
      • e.smith20@cfmtschools.net

Part 2 Creating Backdrops

A. Scratch GUI (Graphical User Interface)
B. Pixlr
C. Find A Montana Artist
  1. Log into Scratch http://scratch.mit.edu
  2. Press on the  button located on the upper left side of the screen.
  3. This will open up the Scratch GUI
  4. There are two different views of which we will call the sprite view and the stage view.
    • You will need to be able to recognize and toggle between the two views.
  5. The screen that opened is the sprite view
    •  Click to enlarge
    • Take a moment to get familiar with with the sprite view
  6. Next click on the stage editing area to navigate to the stage view
    •  Click to enlarge
    • Practice moving between the two views. Also notice the difference between the tabs at the top of the Blocks Palette (top middle of the screen)
    • In the stage view we will be using the middle tab "Backgrounds" click on it and check it out!
B. Pixlr
Now we wish to start creating our Art History Maze backdrops!

  1. Open a new tab and then navigate to http://pixlr.com
  2. Scroll down and locate the Editor and then click on the blue "Launch Web App" button
  3. Select the Create A New Image button from the menu: 
    •  
  4. Next we need to change the default values from 800 x 600 to the dimensions of the stage in Scratch which are 480 x 360. Locate the two input boxes and then change the values:
  5.  Once you have changed the values press OK
  6. This opens the Pixlr GUI
  7.  Click on the image to get familiar with the GUI as we will be working a lot here! 
Montana is rich with native american, modern, and contemporary artists! Students will select a Montana artist, and since there are enough artists to go around, each student should select their very own to learn about!

Warning: We will be working with the acronym: URL (Universal Resource Locator). This is the web address that you find in the address bar of your web browser.

In my example I will be using images of Kevin Red Star.
  1. Open another tab and perform a Google search for a Montana artist
    • Montana Native American Artists
    • Montana watercolor artists
    • Montana fine art artists
  2. Once you find someone write down their name in your notebook or planner
  3. Copy and paste your artists name into another Google Search 
    • Now click on the Images link to view images by your artist
    • Look for art that interests you and then once you find something click on it and then press View:
    • This allows you to view the single image.
  4. Copy the URL of the single image you have just found
D. Making the backdrops!
Now that you have the URL of the image you want we are now going to use Pixlr to create our first backdrop. We will be creating our "intro" backdrop which will introduce our game.
  1. Click on the Pixlr tab you have open (if you accidently closed this tab then you just simply need to follow the steps in section B. Pixlr).
  2. Along the top of the Pixlr tab there are drop down menus. Click on the "Layer" menu and then select "Open Image as URL"
    •   Click on image to enlarg
  3. This will open another window which you will paste the URL of your image into.
    •  Press OK after you have pasted your URL
    • If you get an error try again. If you still get an error then you need to right click on the image and "Save Image as... 
    •  Save to your H: drive or to the "Desktop"
    • You will then have to go back to step 2 and select Open Image as Layer
  4. You should now see the image you wanted and also if you look at the Layers area you will see another layer added. 
    • Layers are kind of like a stack of papers. Each paper in the stack is unique, but we can only see what is at the very top of the stack. Unless we have a stack of transparencies or paper that we can see through, which is kind of like Pixlr's layers. We have the ability to work with transparent, translucent, and non-transparent layers. 
    • Try dragging your white background layer on top of your new image layer. What happens?
    • Note: You can only work with one layer at a time. The blue background on the layer means that the layer is selected. 
    • Drag your background back under your new image.  
  5. Now your new image may be way to big, too small, or just right but not centered. So lets change this.
  6. Your goal is to fit the image on the canvas window, or make an interesting crop that fills the canvas window. 
  7. If your image is too big or too small look along the top menu and select Edit then select Free Transform...
    • You should now have blue square handles surrounding your image.
    • Select one of the corner blue handles of your image and while holding the Shift key (This keeps the aspect ration the same) drag the handle to make the image fit within the canvas window.
    • Then press Enter or Return on your keyboard
  8. To reposition the image, if not centered, simply click on the pointer tool and then move the image to the desired location.
  9. Next lets change the opacity of the image.
  10. Click on the Opacity button  on the Layers window.
    •  Change the Opacity to a value between 20 - 35. You should now see the bottom white layer coming through!
    • While the image is important to our motif, what is most important is the text that we are going to add next! So it is important that we can read the text, the image is secondary.
  11. Now select the type tool   click in the canvas window then type in the name of your game in the window that opens.
    • Notice that you have control over the Font, Size, Style, Color, and Alignment. If your text is not centered just simply click on it to move it around. 
    • Once you have it the way you want press OK. 
  12. I wish to make my font stand out, and not look flat. For this I will add a layer style. 
    • On the Layer window locate the Layer Styles icon 
  13. Click on the Drop Shadow text in the window that opens:
    •  Click to enlarge.
    • There are many values to change here. Experiment and see what looks good for you. 
  14. Now lets save, and import this image into Scratch!
  15. On the top menu select File then Save... 
    •  Change the name to intro
  16. Save the file to one of these locations:
    1. The default is Downloads
    2. Google Drive
    3. Your school H: drive
  17. Make three more backdrops with new images in a similar fashion
    1. Directions
    2. You Win
    3. Works Cited
    4. The Maze! 
  18. Finally let's make the maze! 
  19. Press pause when needed. 

  20. To keep track of your works cited you can open another tab and navigate to http://goo.gl
  21. Login and then copy and paste each image URL you use into the address box.
    • This will create a shortened URL that you will then use in your Works Cited backdrop. 
E. Adding a Backdrop to Scratch
Now that we have made our backdrops lets add them to Scratch!
  1. Click on the Scratch tab. If you have closed this then you need to open a new tab and login click on the "My Stuff" folder icon  in the upper right hand corner. Then click on the see inside button. 
  2. To add your backdrops we must be in Stage View.
  3. Click on the stage icon in the lower left corner
    • You now need to select the Backdrops tab 
    • Select the folder with the arrow icon .
    • Now navigate to your saved images and upload them into Scratch
Part III Writing Scripts
Now that we have some backdrops in and the maze lets start scripting!

A. Scripting the Stage View

  1. Click on the stage in the lower left of the Scratch GUI and select the stage
    • You now need to select the Scripts tab
  2. Now I wish to think about what my program will do so I will use pseudo code to figure out what blocks I will need to create my scripts:
    1. When I press the Green Flag I want the intro to show
    2. Then I want the program to wait then show the directions
    3. When I press the b button I want the maze backdrop to show
  3. Now I have my pseudo code I will drag out the appropriate blocks:
    • Now I will press the Green Flag to see if it works
    • Are there any bugs? 
    • What did you notice?
  4. I noticed that the cat sprite was visible! We want it to hide the sprite and then have it show up when the maze appears.
  5. To do this I need a special block and its called a broadcast 
    1. The broadcast block allows us to communicate instructions across the program
    2. With this way the stage can communicate with the sprites and vice versa.
    3. On the broadcast block you can create a custom message by clicking on the drop down arrow and then selecting "New Message". 
    4. This allows you to create a more descriptive message.
  6. Before we test lets do some scripting with the Cat sprite. To do this I click on the cat sprite in the lower left.
    •  
  7. Now some pseudo code: What do I wish for the cat to do?
    1. Hide when the green flag is clicked 
    2. Show when I receive the level one message
    3. Now lets test! Any bugs?
  8. Now that we have that working lets get our cat sprite some more things to do! Time for some more pseudo code:
    1. I want my cat to live in a specific place every time the game starts
    2. I want my cat to move by using the arrow keys
    3. When the sprite touches a wall I want it to go back to the start. 
  9. First things first though my cat is way to big to fit in the maze! 
  10. I need to use the shrink tool  located at the top of the page
    1. Once you press the shrink tool notice that your cursor has changed
    2. Now just simply click on your sprite and shrink it down
    3. After you shrink your sprite, drag it around the stage to ensure that it can fit through all of the passages. 
  11. Next I drag my sprite to where I wish for it to be when the game starts.
    • I then make note of its location on the stage.
      • The stage uses the cartesian coordinate system using an x and y axis. We can use the ordered pair (x, y) to place sprites. 
      • The very middle of the stage is (0, 0)
      • To locate the coordinates of my sprite I simply look in the upper right of the GUI
      • These coordinates are x: -217 and y: 148 or (-217, 148)
  12. Now back to scripting! I have now modified my, When Green Flag clicked block for my sprite to reflect the location
  13. Now I want my cat sprite to move, which means more pseudo code
    1. When the right or left arrow key is pressed I want my cat to change its x-value 5 steps to the right or left
    2. When I press the up or down key I want the cat to change its y-value up or down
  14. I also wish for my cat to look left or right so I need to change the sprites rotation and force it face only left and right.
    • By clicking on the "i" (information) I am taken to a new window.
    • In the new window I need to select the arrow button and then to return back to the original view you simply click on the blue circle with the white arrow .
    • Now you are ready for the scripts:
    • Now let's test! 
    • How do I make it go left or down?
    • How can I make the cat look like its running?
  15. Now that we have some movement lets look at some pseudo code on what happens when the cat touches the wall!
    1. When the program starts we want to check if the cat touches the color of the wall.
    2. If it does then it should go back to the start.
    3. Would the cat say anything?
    4. Would the cat get electrocuted if it touched the wall?
  16. Here is what the script might look like:
    • To change the color in the "touching color" block simply click the color in the block and then click your mouse on your maze wall. The color should change to the color of the wall. If it did not try again.
    • Press the Green Flag and test!
Now we need to add the Art History!

A. Create an Art History backdrop using Pixlr
  1. If you need to remember how to create and add a backdrop then please visit the sections D. Making the backdrops! or E. Adding a Backdrop to Scratch
  2. Next we need to press on the Scripts tab and drag out the when I receive block and create a new message called art history
    • And then I type art history into the window that opens
  3. Next we wish for the backdrop to change so now we just simply need:
B. Add a new sprite
  • To add a new sprite click on the new sprite button 
  • Look for a new sprite and then use your mouse to drag it into position within your maze.
  • Use the shrink tool  located at the top of the page to resize the sprite if necessary
C. Scripting the new sprite
Now that we have a new sprite we need to make it work!
  • Since I want the sprite Giga to live in a specific location and initially hide when the Green flag is clicked I need to use the same script we used for the cat sprite:
  •  Notice my x and y values correspond to the location of Giga
  • Next I need for Giga to show up when I receive the broadcast message level one.
  • Finally I need to hide this sprite when I receive the art history broadcast. If you missed this step when you uploaded your art history backdrop to the stage then please see step A in this section!
D. Scripting art history on the Cat sprite
Finally to close out this section we need to create the script for the cat sprite. In pseudo code we wish to:
  • When we touch Giga we want to broadcast "art history" and then hide. We also want to move the cat sprite a short distance from Giga when we come back from art history. I wonder why?
We have come a long way!!! Now we want to add our final sprite, and complete the scripting.

A. Add the Final Sprite!
  • We have already done this in Part 4. If you need a refresher please go to B. Add a new sprite to Scratch. Please remember to create all of the scripts in step B. Add a new sprite to Scratch to this final sprite.
  • Now that you have your final sprite in position and have added all of the scripts from step B. Add a new sprite to Scratch  we need to add one more script:
  • Pull out the "when I receive" block and then click on the arrow.
  • Create a new message that states "you win"
B. Adding the "you win" script to the Art History Sprite!
  • You now need to add the "when I receive you win" block to the art history sprite.
  • Click on your art history sprite in the Sprites area and then drag out these blocks.
C. Finishing The Scripts on The Stage
  • First you need to upload your Works Cited backdrop and then you can create the You Win backdrop using the Scratch Painting tools if you wish.
  • After you create those two backdrops your read to add this script:

This is it! This is the final thing we need to script.

First you need to click on your sprite that moves through the maze.

Next we need to use a special set of blocks called data blocks. We need to make something called a variable. You should have a sense of what a variable is as you have used these in Algebra.
  1. Click on Data and then click on the New Variable button
  2. Next type in "Answer" in the box that opens
  3. Now you should see a set of new blocks
  4. Now we need to take the "set Answer to 0" block and put this in the When Green flag is clicked script.
  5. Now we need to create the final script! Hang on it's a big one!
    • >
    • Your challenge question should be about a fact that was in your art history. 
    • You may also want to keep this to a single answer as it is difficult to predict every possible answer someone may try.
Have fun and happy Scratching!!!!