ICS 61 Game Systems and Design Introduction to Scratch

Transcription

1 ICS 61, Winter, 2015 Introduction to Scratch p. 1 ICS 61 Game Systems and Design Introduction to Scratch 1. Make sure your computer has a browser open at the address You should see a cheery cat. 2. The Stage is the area in the upper left where you see the cat. It s all white, but you can choose something more interesting. Click on the on the far left. This will show you the Backdrop Library. Choose one you like by double clicking on it. 3. You can add another sprite. Click on and choose any sprite by double-clicking on it. You can drag your new sprite around with the mouse if you like. 4. Let s get rid of the cat, so there s only one sprite. Right-click on the cat sprite and choose delete. 5. You can move your sprite around on the Stage by clicking on it and dragging. Try to drag the sprite off the Stage. What happens? 6. You can make a sprite larger or smaller by clicking on one of the "four arrow" buttons above the Stage,, and then clicking on a sprite a few times. Adjust your sprite so that its size seems right to you. 7. Let s make your sprite move to the right when you press the right arrow key. Make sure the Scripts tab is selected and a small copy of your sprite is displayed in the upper right of the window. Click on Events and drag to the dark gray Scripts pane on the right. Click on Motion and drag so that it snaps in below the first block. Click on the down triangle next to space and choose right arrow. The result should look like this: 8. Does it work? What happens now when you press the right arrow key? Change the 10 to a smaller number. Try that out. Can you use a negative number? 9. Add another when block and another change block, so that you can move the sprite back and forth with the left and right arrow keys. Congratulations, you are making good progress!

2 ICS 61, Winter, 2015 Introduction to Scratch p. 2 The goal in the next part of the assignment is to make a simple version of the classic Pong game, using Scratch. This game will have two sprites, a ball and a paddle. After finishing the previous steps, you can start fresh by clicking on the File menu and then choosing Revert. Click OK when the computer asks, Throw away all changes since opening this project? 1. The first step is to choose a sprite that will be the ball. You can use the cat, or select any other one using. (If you choose another one, delete the cat.) Let s change the sprite s name to Ball, as that will be its function today. Click on the little in the Sprites area in the lower left, which will show you information about the sprite. Change the name to Ball, and leave everything else the same. Click on the backarrow to close the sprite information area. 2. To play Pong you need a second sprite for the paddle. Click on and choose any sprite by double-clicking on it. When you return to the main screen, you'll see it has a name. Rename it to Paddle. 3. You can make a sprite larger or smaller by clicking on one of the "four arrow" buttons above the Stage,, and then clicking on a sprite a few times. Adjust Ball and Paddle so that their sizes seem right to you. 4. The job of Paddle is to move around when you press the arrow keys. The job of Ball is to glide around the Stage and bounce off the edges and the paddle. 5. Let's work on Paddle first. Double-click on the Paddle sprite so that it has a blue box around it in the Sprites area and a faded copy shows up in the upper right part of the Scripts area. In the center pane, click on the blue Motion button. On the left you'll see lots of options that can control the motion of a sprite. Drag "change x by 10" to the Scripts area on the right and double click on it. As in the last lab, try some different numeric values instead of 10 (including negative ones) and observe what happens. Can you use this command to make Paddle go up and down? 6. No. Experiment with another motion block, "change y by 10". That will give you up and down motion. 7. The next step is to put this motion under control of the arrow keys, instead of having to click on the command in the Scripts area. We ll do this a little differently this time.

3 ICS 61, Winter, 2015 Introduction to Scratch p Look in the Events, Control, and Sensing panels to find the commands you need, and assemble this block in the scripts area: when GREENFLAG clicked forever if key right arrow pressed? then change x by 10 To make this block of commands run, click on the green flag (don t double click on the block of commands). Then press the right arrow key a few times and see what happens. 9. We usually use the green flag to start one or more scripts. A script that is running has a yellow glow around it. Press the stop sign to stop the scripts. The stop sign stops all scripts that are running. 10. You ve got a script that makes the right arrow work, now you need three more similar scripts for the other arrows. The easy way to make a copy of a script is to right click on the when GREENFLAG clicked part of the script, and choose duplicate. You ll have to drag the duplicated script so that it isn t on top of the original script. Make three copies of the right arrow handling script, and modify each one to handle a different arrow. For the up and down arrows, you ll have to pull change x by 10 out of the forever block and replace it with change y by 10. Test this out and make sure it s working correctly. What happens if you press two or more arrow keys at the same time? 11. Now let s get the Ball moving. The first plan will be to have it bounce around on the Stage. Double click on Ball so that you can put together its script. To start, the script should look like this: when GREENFLAG clicked point in direction 35 forever move 5 steps Try this (click on the green flag). If Ball moves into a corner, don t worry. Press the red stop sign to stop the script. Then drag Ball back into the middle of the stage. 12. To fix this script, we need to tell Ball to bounce when it collides with a wall, instead of trying to go in the same direction forever. Do this by dragging the if on edge, bounce block after move 5 steps and inside the forever block. Try this and make sure it s working.

4 ICS 61, Winter, 2015 Introduction to Scratch p The 35 in point in direction 35 is the angle of Ball. It might be more interesting to have the angle be unpredictable. Click on Operators at the top of the Scripts panel and drag pick random 1 to 10 over to replace 35. Then change the range to be 1 to 90. Start and stop the script a few times and see if that s an improvement. 14. The big problem now is that Ball and Paddle don t interact. How should they interact? If Ball touches Paddle, then it should reverse its direction. Put this code if touching Paddle? point in direction direction after if on edge, bounce, inside the forever block. The second direction is a variable from the Motion pane (at the bottom), which goes inside a subtract block from the Operators pane. 15. This script may not work perfectly; especially if you have an irregularly shaped Paddle you may see some funny bounces of the Ball. You can try putting move 15 steps at the end of the "if touching Paddle?" block, after point in direction. That should help the Ball bounce away from the Paddle so that the "if touching Paddle?" question is no longer true. 16. Congratulations! You ve made a good start towards a Pong game and now have a chance to exercise a little creativity. But first, take a screen shot of the browser window, showing the Pong game in progress. Paste the screen shot into a Word document. Instructions for taking a screen shot and uploading a Word document are given at the end of this document. 17. The next five steps, A through E, are more open ended and may bring out the artist and game designer in you. Do two or more. A. Draw your own art for the Paddle and Ball sprites. You can click on Costumes and then experiment with drawing using the computer and Scratch. B. Draw your own background. To do this, click on the Stage in the lower left area, and then click on Backdrops towards the top of the middle area.

5 ICS 61, Winter, 2015 Introduction to Scratch p. 5 C. Add a second paddle, perhaps named Paddle2. This paddle should be controlled by the WASD keys. Fine tune the speed of the ball and the paddles so that two-paddle Pong is fun and challenging. Play Pong with a friend. D. Create one or two more costumes for the Ball, so that it appears to be rolling. Use the next costume block, which is in the Looks area. E. Create goals (which are new sprites). No need to keep score, but when the ball hits a goal the goal should say Ouch!. Use the say command from the Looks pane. Take a screen shot of the browser window showing your Pong game being played and the Scripts pane for one (any) sprite. Use Scratch s File Download to your computer to save your project as Pong.sb2. How to take a screenshot of the active window. On Windows: Hold down the Alt key and press the Print-Screen key. This puts the image on the clipboard, and you can paste it into a Word document with Ctrl-V. On Mac: Press Command ( )-Shift-4, press the Space bar, move the camera pointer over the browser window to highlight it, and then click. The image will be stored in a PNG file on your desktop, with the date and time in the name. You can drag this file into an open Word document. What to turn in for this homework. You will have a Word file (with any name) that contains two images. At the end of that file, write a brief description of which of the A, B, C, D, and E options you implemented. You also have a Pong.sb2 file. Upload these two files to the EEE DropBox ICS61-Hw2 before noon on Monday, Jan. 12.