Youth Creating Online Games: What Adults Need to Know

1. Youth Creating Online Games: What Adults Need to Know Trudy Dunham, Jay Staker, Molly Reisman & Vishal Singh May 2010 CYFAR Annual Conference, San Francisco CA

2. Learning the Scratch Language • Scratch (scrăch) n. An interpreted dynamic visual programming language • Teach programming concepts to youth by enabling them to create games, animations, videos, and music • Create and animate characters that dance, sing, and interact with each other

3. Before the Creating Can Begin… There is some research (program outcomes) you need to know, and then… some important sites and buttons on the Scratch Program that you need to know…

4. The Scratch Skill-Building Set • Information & Communications Skills • Information & Media Literacy • Communication • Thinking & Problem Solving Skills • Critical Thinking, Systems Thinking • Problem Identification, formulation, solution • Creativity & Intellectual Curiosity • Interpersonal & Self Directional Skills • Interpersonal & Collaborative Skills • Self-Direction • Accountability & Adaptability • Social Responsibility • Reference: http://llk.media.mit.edu/projects/scratch/papers/Scratch-21stCenturySkills.pdf

5. The Scratch Community • Low floor / High ceiling / Wide Walls • In a world of social media and participatory online learning • Share, mash, learn from others • For youth & educators • New Members, Beginners, Advanced, & more • Talk in the forums • Share yours & check out other’s work

6. What Makes An Educational Game • Animation is good, game is better • Play - how we teach our culture, share tools • “Humanity's most serious activities belong to the realm of make-believe. Culture comes from play.” -- J Huizinga • What is fun for one person can be tedious for another • “A game is a system in which players engage in an artificial conflict, defined by rules, that results in a quantifiable outcome.” – Salen & Zimmerman • Games are a disruptive medium: possibility spaces • Gaming process and sharing knowledge is more important than getting a high score • Game playing alone is often not a learning event, but contributes to learning. Reflection following game play is where the learning takes place: identifying strategies, rules, the system

7. What Makes An Educational Game - 2 • Game making: a learning activity which comprises the solving of an ill-structured problem. Means cognitive benefits are hard to identify, to predict. • Think of games as systems: simple to complex, dynamic • Game elements can subvert the learning: make things happen faster, or more dramatically, or skip over tedious steps. Increases fun but at the expense of accuracy • The more you care about content, the less tolerant you are of game elements. When the house is on fire & you need to learn to put out the fire, you don’t want to play a game • Game elements (score) can focus users on besting that element rather than learning the material • Too little game is boring; too much: silly & distracting • Balancing simulation elements, game elements, and pedagogical elements is an art - unquestionably ! • Understanding the trade-offs is critical

8. Some Scratch Basics • Download at no charge • Guide available in number of languages • Teach in 10 minutes, continue to learn • Hardware: • The Display: 1024 x 768 or larger, 16-bit color or greater • Operating System: Windows 98 or later, Mac OS X 10.3 or later • 120 megabytes of free space to install • CPU & memory requirements are soft. Most computers have enough memory to run Scratch • Speakers & microphone to use audio features • Audience: • Works well with school age, teen and adult audiences • Build complexity of task by adding features for more advanced users

9. The Scratch Control & Design Screen

10. Important Terms & Functions Tabs Palate Green Flag Stage (the white Space – but you can change it!) Blocks New Sprite Buttons Script Area Sprite List

11. The Basics - SPRITE • New Sprite Buttons • The Scratch objects are called Sprites • Think Character in your movie or game • Make as many as you need • Each has its own script • Paint your own Sprite • Choose an image for a new Sprite • Get a surprise Sprite

12. The Basics: Costume • Change Sprite’s Look with a costume change • Click on Costumes tab • Import to add a Costume • To modify using the paint function, click Edit • Make a Copy before Edit • Any image can be used • Create animation via costume

13. The Basics: Script Blocks • Drag blocks from Palate area • Snap blocks together to create a script • When you double click on a script, your program will run • Blocks are color-coded, based on function

14. Activity #1 “Chase the Cat”

15. Doin’ the “Cat Chase” • Keep Cat Sprite Costume 1 & 2 • Make your Cat Sprite: • Change Color • Walk • Undergo a Costume Change • Click on ‘Choose’ or ‘Surprise’ Sprite • Edit or Import to create 2ndcostume for 2nd Sprite (to create motion/animation) • We’ll make it chase the Cat!

16. Setting the Stage • Before you can begin to move blocks onto the Script Area • Click on the “Scripts” tab • The tab should be pale blue

17. Color Change • Click on “Control” from the Palate. • 2. Click and pull the block onto the Script Area. • Click on “Looks” from the Palate. 4. Click and pull the block onto the Script Area. • Snap the two blocks together.

18. Color Change - Your Design & Control Center Screen should look like this. - Hit the space bar and watch your Sprite change colors.

19. Cat Sprite Starting Position These are your (x:) and (y:)coordinates for your stage. • Click on “Motion” from the Palate. 2. Click on and pull the block onto the Script Area. Click on the white holes and type in 0 for (x:) and 0 for (y:). This will be your starting point.

20. Cat Sprite Starting Position 3. Click on “Control” from the Palate. 4. Click and pull the block onto the Script Area. • Snap the two blocks together. 6. Click on the green flag and watch your sprite change locations. Experiment with position by changing your (x:) and (y:) values.

21. 2nd Sprite Starting Position These are your (x:) and (y:)coordinates for your stage. Remember each Sprite has its own script!!! • Click on “Motion” from the Palate. 2. Click on and pull the block onto the Script Area. Click on the white holes and type in -139 for (x:) and 80 for (y:). (or anywhere you want) This will be your 2ndstarting point.

22. Sprite Starting Position - Your Design and Control Center Screen should look like this. - You can now position your Sprite and change colors.

23. Moving • Click on “Control” from the Palate. 2. Click and pull the blocks , , and onto the Script Area. 3. Click on “Looks” from the Palate. 4. Click and pull 2 blocks onto the Script Area. Click on the arrow in the costume1 box and select costume2.

24. Moving • You should have 2 separate blocks for , that say “Costume1” and “Costume2”. 6. Click on “Motion” from the Palate. 7. Click and pull 2 blocks onto the Script Area. 8. Snap the blocks and together as shown.

25. Moving • Stack the remaining blocks in this pattern. • Click on the and drag your new stack of blocks into the space in the block. IMPORTANT  If you do NOT click on the block then your complete stack of blocks will NOT stay together when moved. The blocks will come apart instead of moving together.

26. Moving • - Press the green flag and watch! • Experiment with different # of steps, wait, sounds & backgrounds • Press the space bar to see the new changes.

27. Make Project Notes • Use the Project Notes option to track your steps & leave instructions for others who look at your Scratch programs • Think of as your Project Science / Engineering Journal • Click on File, and select Project Notes

28. From one Project to Another • Click Save to save your work • The file could be named “Cat Chase” • Click New to begin a new program

29. Activity #2 Your Time to Be Creative!!

30. Sounds • Click on “Control” from the color palate. 2. Click and pull the blocks and onto the scripts area. 3. Click on “Sound” from the color palate. 4. Click and pull the block 4 times into the script area. For two of the blocks, click on the arrow in the 48 box and change the value to 40. The other two stay the same.

31. Animation • Click on “Motion” from the color palate. 2. Click and pull the blocks , , , and onto the scripts area. Note: You need 2 of each for these blocks… Turn Left Turn Right Glide Ignore the numbers at this point.

32. Animation 3. Enter your values and variables: • In the block type in 3 for the seconds area and (x:) 140 with(y:) as 50 • In another block type in 3 for the seconds and (x:) -135 with (y:) -157 • For the 2 blocks and the 2 blocks have 1 Left and 1 Right stay at 15 degrees • Type in 30 degrees for the other 2 blocks • The should say x: (0), y: (0)

33. More Resources • Sensor Board: make your Scratch project respond to (sense) things going on in your world outside your computer • Additional Lesson / Activities: http://learninggameslab.org/scratch.html • Translations and Supplemental Materials for special populations: http://scratch.wik.is/Support/Translation • Understanding Games: http://boingboing.net/2007/03/21/understanding_games.html

34. Getting Ready to Take the Knowledge Home • Like it? • If you want your animation or game: email to yourself or download to flash drive • For Questions or Comments Contact: • cyf@umn.edu http://scratch.mit.edu Now that you have the Scratch basics it is time for you to create scripts of your own!