Creating a 3D Interactive Story

1. Creating a 3D Interactive Story Prof. Susan Rodger Duke University Feb. 24, 2007

2. Now Create an Alice World • Start Alice • Select “File”, “New World” • Click on Snow picture • Click on “Open”

3. Find SnowPeople objects • Click on “add objects” • Scroll over to “people” folder and click on it • Scroll over to Snowman and snowWoman

4. Add Snowman to World • Click on snowman and you will see: • Click on “Add instance” • Snowman appears in world

5. Add SnowWoman to world and adjust • Click on SnowWoman and add her to the world • Click on arrow key • Click and hold on snowman to move him left and back • Click and hold on snowWoman and move her to the right • Scene should look like

6. Save World • Save world • Type in a name such as: snowPeople and then “save” • Alice will remind you to save your work every 15 minutes

7. Now Ready to program! • Click on done • Should now see myFirstMethod

8. Write code to move the snowman • This is the object tree, a list of all your objects in the world • Now click on the word “snowman” to highlight it • You should see methods below it (things the snowman can do) such as move, turn, roll, … • Scroll down til you see “turn to face”

9. Write code to move the snowman (2) • Click left mouse button on “snowman turn to face” AND HOLD IT DOWN, then Drag it over and release the mouse button • Click on “snowWoman” • “the entire snowWoman”

10. Write code to move the snowman (3) • Code appears • Click on Play

11. Have the snowman talk • Drag over “Snowman Say” • Select “other” and type a greeting such as “Hello there! • Code is now: • Play again

12. Now SnowWoman will act • Click on snowWoman to see her methods • Drag over code and drop below other code • Play!

13. Now write a NEW snowman method • Click on snowman • Should see snowman’s methods • Click on “create new method” and enter name “getAttention” • Empty method is created, ready for you to enter code

14. Write GetAttention Method • Add the following code to this method • Note you now have two methods: • Click on myFirstMethod to get back to it

15. Add getAttention method to program – to myFirstMethod • Click on play

16. Repetition • Sometimes you want to repeat commands • Let’s repeat “getAttention” three times • Click on “loop” and drag and drop at the end of our code, below getAttention • Select “other” and type 3 • Click on left tab of “getAttention and move it inside the loop • Now Play!

17. Create snowman method - popHat • Click on snowman in objectTree • select “create new method” and name it popHat

18. Want the “topHat” part of snowman • Click on + by snowman • Click on + by head • click on tophat to highlight it

19. Now we will move just the tophat • Drag over the “move” command twice to make the tophat move up and then down the same amount

20. Make an Event • We want the hat to move up and down whenever we press the “H” key • Create a new event and select “when a key is typed” • Click on “any key” and select the “letters” then “H” • Click on “nothing” and select “snowman” “popHat”

21. Making an Event happen • Play your world • Whenever you want the hat to pop up and down, just press the key “H”

22. Add more code to myFirstMethod • At the end of your code in myFirstMethod • Add code to have the snowWoman turn toward the snowman, say “I said hello” and turn back • Remember to click on the word snowWoman in the objectTree to get snowWoman methods

23. Here is one possible way

24. Turn SnowWoman’s Head red • In addition to methods, each object also has properties you can drag and change • Select “SnowWoman’s Head in the object tree • Select the Properties tab

25. Turn SnowWoman’s Head Red (2) • Click on color, hold and drag to right before snowWoman says “I said hello” • Select color “red” and release, results in:

26. At end, turn head back to “no color” • Here are the two color statements added to the code (note: “no color shows as white”) • Play your world

27. Write a snowman Flip method • Make sure you select “snowman” in the objectTree • Create the method named “flip” • Have the snowman do the following • Move up 1 meter • Roll left 2 revolutions • Move down 1 meter • Add code at the end of myFirstMethod • Snowman says “Watch what I can do” • SnowWoman turns to look at him • Call the snowman flip method • Play your world

28. Write a snowWoman flip method • Make sure you select “snowWoman” in the objectTree, then create the method “flip” • Have the snowWoman do the following • Move up 1 meter • Drag up a DoTogether from the bottom

29. Write a snowWoman flip method (2) • Inside the DoTogether you can put commands that will happen at the same time • Inside this DoTogether have the snowWoman do the following: • Turn forward 1 revolution • Resize by half • Below drop in another DoTogether with: • Turn forward 1 revolution • Resize by 2 (back to the right size) • Add one more command to move snowWoman down 1 meter

30. Now let’s call the SnowWoman flip method • Add code at the bottom of myFirstWorld • SnowWoman should say “Watch what I can do” • Call the snowWoman flip method • Play your world

31. Here is what flip should look like

32. Add two new events • Add an event so the snowman flips when M is pressed • Add an event so the snowWoman flips when W is pressed • Play the world, press M and W anytime

33. Add more objects to the world • First let’s add two more objects • Click on “Add objects”, find the “nature folder” and add any tree to the world • Click on it and push it far back • Find the “vehicles” folder and find the scooter, add it to the world (you may have to look in the Web gallery to find the scooter)

34. Adjust the scooter • Click on the third control and try turning the scooter around to face this direction • Then click on the first control (the arrow) and push the scooter back between the tree and the snowWoman

35. Write the SnowWoman method driveAway • First select the snowWoman in the objectTree and create a new method named “driveAway” • Now let’s add code to this method • First have the snowWoman turn to face the backRightFloor (or may be called RightFloor) part of the scooter

36. Move SnowWoman to the scooter • It will be handy to test this method as we build it, look at the event “When the world starts” • Click on the white arrow and select “snowWoman.driveAway” • Now when the world starts, only this method will play – Click Play and see

37. Write snowWoman driveAway (2) • We want the snowWoman to move to the scooter.backRightFloor, but we don’t know how far it is • Have the snowWoman move forward 1 meter and Play it • It’s not quite far enough

38. Write snowWoman driveAway (3) • We can use a snowWoman function to drop in the distance to the scooter.backRightFloor • Click on SnowWoman functions • Drag “distance to” and drop on “1 meter” when it turns green, then select “scooter.backRightFloor”

39. Write snowWoman driveAway (4) • Play the world • It is hard to tell, but she goes right into the scooter. • We’d like her to stop in front of the scooter. • Click on the last arrow and select “math”, then “minus” then “0.5” • Now she stops 0.5 meters in front of it

40. Write snowWoman driveAway (5) • Next, have the snowWoman doTogether • move up 0.2 meters • Move forward 0.5 meters • We’d like the scooter to move and have the snowWoman move with it • We can set the vehicle property of the snowWoman to be the scooter

41. Write snowWoman driveAway (6) • Click on snowWoman’s properties • Drag over “vehicle” and select “scooter”

42. Write snowWoman driveAway (7) • Almost done, add a few more commands • In a DoTogether • The snowWoman says “Bye” • The scooter moves forward 10 meters • The snowman’s head turns ¼ turn to the left (make sure you select snowman in the objectTree) • One more command after the DoTogether • Snowman’s head turns back ¼ turn to the right

43. snowWoman driveAway – final code

44. Call snowWoman driveAway • Back in myFirstMethod, add a call at the end of your code to call the method snowWoman.driveAway • Fix the first event so that when the world starts, world.myFirstMethod is called • Play

45. Write a snowman melt method • Add a snowman method named “melt” • The code should repeat 12 times • Move the snowman down a little (0.1 meters) • Wait 0.5 seconds (drag the “wait” tile up from the bottom) • At the end of myFirstMethod, call melt • Play the world

46. Almost Done – add title • Click on “add objects” and go to the right end of the local gallery and find 3D text • Click on it and add a short title such as “Life as SnowPeople” • You’ll have to use the control keys to move it up, back, and turn it to face the right way (use first three controls)

47. Title only in the beginning • Notice the title is an object in the objectTree - Click on it • We would like it to disappear after the snowman says “hello there” • Drag over the “isShowing” property and set it to false

48. Add “The End” • Add another 3D text that says “The End” and position it over the title • Click on THE END in the objectTree • In properties, click on “true” of “isShowing” and select “false” – The End will disappear

49. Make “The End” Reappear • Make “The End” visible before the snowman melts

50. You are now done! • Play your world! • You can download Alice for free at www.alice.org • My web page www.cs.duke.edu/~rodger