Skater World: Part One

By Deborah NelsonDuke University

Under the direction of

Professor Susan Rodger

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

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

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 Two

of this tutorial 7

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

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 again12

• 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:• 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.

Positioning your objects

15

16

2. Move UP/DownThe 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

3. Turn left/rightThe 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

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

6. ResizeThe 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

7. Copy

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

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:

• 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 move button to make sure the ‘jump’ object

is positioned well.

27

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

28

•Also, the up/downbutton 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 gallery29

Quad view of world positioning

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

world31

• 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

32

• The Method Editor

– This is where you will drag and drop all of your

instructions for your animations.

33

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

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

• In the drop down menu, select right, ¼

revolution.

First instruction continued

36

Changing duration of an action

• The default duration of an instruction is 1.0

second. Click more, select 0.5 seconds

37

• 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

38

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

39

• Change the duration to 0.5 seconds

• Drag in skaterGuy say. Type in “Just chillin’,

You?” Resulting code:

40

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

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

42

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

• 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

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