Skater World: Part One

1. Skater World: Part One By Deborah Nelson Duke University Under the direction of Professor Susan Rodger June 2009 1

2. Introduction • In an Alice world, you can: • Add objects,people scenery • Position them • Animate them • Change some of their characteristics • Interact with them during the animation • And much more • In this four-part tutorial, you will learn some of the basics so that you can program your own games and animations 2

3. Overview • Part One • Step 1: Set up a world, Add and Position Objects • Step 2: Animating the characters in world.my first method • Part Two • Step 3: Changing properties of the objects: Vehicle, IsShowing, Color • Step 4: Create a new method and animate the parts of an object • Step 5: Using As Seen By • Part Three • Step 6: Camera control • Step 7: Using events to interact with the objects during animation • Part Four • Step 8: Making and Animating Billlboards • Step 9: Creating and Animating 3D Text • Step 10: Recording and Importing Sound 3

4. The Story to be Animated • In this world, the skaterGirl and SkaterGuy are going to have a conversation. SkaterGirl is going to use the skateboard to go over the jump object. • In Part One of • this tutorial, we • will animate the • conversation 4

5. Open a World • Open the Alice program. • Click on the Templates • Select dirt, click Open • Save Your World • In the Menu, click File • Select Save World As. Save it in a directory you will be able to find again. I named mine “skaterworld.” It is saved as skaterworld.a2w 5

6. Step One: Set Up • First, we will save the camera position • Go into the Layout mode by clicking on the green button named 'Add Objects’ • Click 'more controls.' • Click 'drop a dummy at the camera' • There is now a Dummy Object • folder in the object tree. Expand • the folder 6

7. Save camera position • Right click on dummy and • click rename. • Type in ‘originalPosition’. • Hit Enter on your keyboard • IMPORTANT: Whenever you start a world, save the original camera position. • Do not use the camera buttons. • yet. We’ll change the camera position in Part Two • of this tutorial 7

8. If you accidentally change camera position • If you change the camera position in this tutorial, either click undo or: • right-click on the camera in the object tree. • Select methods, set point of view to, Dummy Objects, originalPosition 8

9. Adding objects • Now let’s add objects. In the • Gallery, in alphabetical order, scroll • over and open the • Skate Park folder. • Click on skaterGirl and drag her • into the world. Do not release the • mouse until the yellow bound • box is positioned on the left side • of the world 9

10. One at a time, drag SkaterGuy, Skateboard, and Jump into your world. • Notice that as you move your mouse forward, the object is moved farther away from the camera. • As you drag each object in, use the yellow bound box to position them before you release the mouse so that your scene looks like this: 10

11. Click on Local gallery • Scroll over and open the Shapes folder, Drag three cones into the scene, to the left of your people 11

12. Click on the local gallery. Click on the Buildings folder. Drag airport into your scene. Push the yellow bound box forward into the scene • If your scene doesn’t look like this, click undo and drag the object in again 12

13. Over the next several slides, we will position the scene to look like this. 13

14. Be Careful • You may have to switch back and forth between the buttons in order to position everything. *Note that objects may be higher off the ground and farther away than they initially look • Especially for a small object, like the skateboard, be careful that you are touching the object and not the ground, which is moveable. • The undo button is your friend! • Immediately after making a mistake with any of the buttons, click undo. You can undo as many times as you need • In this world, you can try out the tumble or forward buttons, if you want to. But undo whatever change you make to your objects with those buttons. 14

15. Positioning your objects • We will use six out of these seven buttons to manually change the object position • The first button is used to move an object toward/away from the camera or to the left and right • TODO: • Click on the move button, then drag your airport toward the camera. (It will cover the skateboard and feet. We’ll fix this with the next button)‏ • Move the jump away from the camera a bit and to the right slightly • If you move any of the other objects, click undo so that those changes are reversed. • See the screenshot on the next slide for how your world should look now. 15

16. 16

17. 2. Move UP/Down • The second button is used to move up or down • TODO: • Click on this button, then move your airport down, so that it is on the ground. You should be able to see the skateboard wheels and the peoples’ feet. 17

18. 3. Turn left/right • The third button is used to turn the object to the left/right. • TODO: • Click on this button, turn skaterGirl and skaterGuy to face the camera. • Turn the skateboard perpendicular to the skaters. • Turn the airport so the buildings are behind the skaters. 18

19. 4. Turn forward/backward • The fourth button is used to turn objects forward/backward • You do not need to use this button in this world. • Play around with your objects, but click undo if you make any changes. 19

20. 5. Tumble in different directions • The fifth button is used to tumble an object in different • directions • You don’t need this button in this world, undo any changes you make • Note that the object tumbles around it’s center. See the next slide for details. 20

21. Understanding the Characteristics of your objects I. Center Every object has a center, which is the point around which the object is rotated. SkaterGirl's center is at her middle. But every object's center is different. II. Orientation As 3D objects, they also have several possible directions of motion: forward, backward, right, left, up and down. 21

22. 6. Resize • The sixth button is used to resize your object • TODO: • Click on the button. Click on the skateboard and drag your mouse. Make skateboard big enough for skaterGirl to stand on it. • After you resize, use the up/down button to make sure the skateboard is still on the ground and you can see all the wheels 22

23. 7. Copy • This seventh button does not work. Don’t use it. • If you want to have more copies of an object: • Go to the gallery and drag the object into your world again. • That object will appear in the object tree with a number after it’s name. 23

24. More practice • For more practice with the • buttons, stack the cones one • on top of the other, like this: 24

25. Use Quad view to check position • Now, select quad view to see from multiple views • These views help you to find objects, make sure they are touching, or positioned correctly • Note that there are two new buttons now. They only work in the three new views: From the top, from the right and from the front. • These two buttons change • your view, but not the position • of the objects. 25

26. The Hand • Click on the hand. • In “from the top” view, drag • your mouse over until you can see the white cones. • Use the move button to make sure that the cones are on top of each other 26

27. “From the top” • Still in this view: • Use the turn left/right button to turn your skateboard perpendicular to the skaters • Click on the magnifying glass. Drag your mouse forward to zoom in (or away from your keyboard to zoom out)‏ • Use the movebutton to make sure the ‘jump’ object is positioned well. 27

28. “from the right” • In “from the right” view • Use the hand to drag your scene over so that you can see the cones. Use the move arrow button to check that the cones are stacked one on top of the other. • IMPORTANT: in “from the right” and “from the front” you can’t see the ground, but it is still there. • Also, the up/down button may not work in quad view. Click on the move arrow button. • Hold down shift on your keyboard while you drag to move an object up or down 28

29. TODO: Now, use your position buttons and multiple views to move the cones so that they are all on the ground, in a row like this: • Click Done to exit the gallery 29

30. Quad view of world positioning

31. Step Two: Animating Objects: The Tools • Now that the objects have been positioned, let’s start animating. • Some of the tools that Alice • provides for animation are • the object tree, the details • area and the method editor. • The Object Tree shows all of • the objects that are in the • world 31

32. The Details Area • When you click on an object in the object tree, certain details about the object are shown in the Details Area. It is made up of the: • Properties tab • Methods tab • Functions tab 32

33. The Method Editor • This is where you will drag and drop all of your instructions for your animations. 33

34. Definition: Method • A method is a sequence of instructions that will be carried out when requested. • Built-in methods are basic behaviours every character knows how to perform (such as move, turn, say). • We will use these built in instructions to animate a conversation 34

35. The first instruction • Click on the skaterGirl in the object tree. In the details area, click on methods tab. Drag skaterGirl turn on top of the Do Nothing. 35

36. First instruction continued • In the drop down menu, select right, ¼ revolution. 36

37. Changing duration of an action • The default duration of an instruction is 1.0 second. Click more, select 0.5 seconds 37

38. skaterGirl say instruction • From the methods tab, drag skaterGirlsay into the method, under the first instruction. In the drop down menu, select other. Type in “What’s up Dude?” 38

39. skaterGuy instruction • Click on skaterGuy in the object Tree. • Drag skaterGuy turn to face method, underneath the second instruction. • In the drop down menu, selectskaterGirl, the entire skaterGirl. • see screenshot on next slide 39

40. Change the duration to 0.5 seconds • Drag in skaterGuysay. Type in “Just chillin’, You?” Resulting code: 40

41. Play your World • Play your world to see the conversation thus far. After it plays, x out of the window that popped up or press the stop button on that window. 41

42. How to change an instruction • Drag skaterguy say into my first method. Type in “I want to try to make that jump today” • Oops, I meant to have skaterGirl say this. Instead of deleting this instruction: • click on the arrow beside skaterGuy. • Select skaterGirl, entire skaterGirl 42

43. How to copy an instruction • Next, right click on the last instruction. Select make copy • In the copied instruction, change skaterGirl to skaterGuy, the entire skaterGuy • Click on the text and type “I’d like to see that.” • Resulting instructions: 43

44. Finish the conversation. End with the skaterGirl asking to get on the skateboard. • Be careful to select the correct object in the object tree before you drag the method. But you know how to change an instruction if you make a mistake • Here is the rest of my conversation 44

45. The End of Part One • Play your world again. If it’s too fast, change the duration of all the say instructions to 2.0 seconds • Congratulations, you’ve reached the end of part one. • In part two, we will continue animating the story so that skaterGirl gets on the skateboard and makes the jump 45