Skater World: Part One

By Deborah NelsonDuke University

Under the direction ofProfessor Susan Rodger

May 29, 20091

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

Overview Part One• Step 1: Set up a world, Add and Position Objects• Step 2: Animating the characters in world.my first methodPart 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• Step 6: Camera controlPart Three• Step 7: Animating objects using a loop• Step 8: Using events to interact with the objects during animationPart Four• Step 9: Billboards . Making decisions using if/else statements• Step 10: Creating and Animating 3D Text

3

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

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

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

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 Twoof this tutorial

7

If you accidentally change camera position

• If you change the camera position in this tutorial, either click undo or:

1.right-click on the camera in the object tree.2. Select methods, set point of view to, Dummy

Objects, originalPosition

8

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

• 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

• Click on Local gallery• Scroll over and open the Shapes folder, Drag

three cones into the scene, to the left of your people

11

• 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

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

13

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

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:1. 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)2. 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.

Positioning your objects

15

16

2. Move UP/DownThe second button is used to move up or down TODO:

1. 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

3. Turn left/rightThe third button is used to turn the object to the left/right.TODO:

1. Click on this button, turn skaterGirl and skaterGuy to face the camera.

2. Turn the skateboard perpendicular to the skaters.

3. Turn the airport so the buildings are behind the skaters.

18

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.

4. Turn forward/backward

19

5. Tumble in different directionsThe 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

Understanding the Characteristics of your objects

I. Center Every object has a center, which is the point around which the object isrotated. 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

6. ResizeThe sixth button is used to resize your objectTODO:

1. Click on the button. Click on the skateboard and drag your mouse. Make skateboard big enough for skaterGirl to stand on it.

2. 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

7. CopyThis seventh button does not work. Don’t use it.

If you want to have more copies of an object:1.Go to the gallery and drag the object into your

world again. 2.That object will appear in the object tree with a

number after it’s name.

23

More practice

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

24

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 correctlyNote 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

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

“From the top”Still in this view:

1. Use the turn left/right button to turn your skateboard perpendicular to the skaters

2. Click on the magnifying glass. Drag your mouse forward to zoom in (or away from your keyboard to zoom out)

3. Use the move button to make sure the ‘jump’ object is positioned well.

27

“from the right”In “from the right” view

1. 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.

28

•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

• 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

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

30

• 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

The Details Area

31

• The Method Editor– This is where you will drag and drop all of your

instructions for your animations.

32

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

33

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.

34

• In the drop down menu, select right, ¼ revolution.

First instruction continued

35

Changing duration of an action

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

36

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

skaterGirl say instruction

37

skaterGuy instruction• Click on skaterGuy in the

object Tree.• Drag skaterGuy turn to face

method, underneath the second instruction.

• In the drop down menu, select skaterGirl, the entire skaterGirl. see screenshot on next slide

38

• Change the duration to 0.5 seconds• Drag in skaterGuy say. Type in “Just chillin’,

You?” Resulting code:

39

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.

40

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: 1.click on the arrow beside skaterGuy.2.Select skaterGirl, entire SkaterGirl

41

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:

42

• 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

• For the final instruction, drag in skaterGirl turn, select left, ¼ revolution. Duration 0.5.

• Here is the rest of my conversation:

43

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

44