Skater World: Part One
By Deborah Nelson
Duke University
Under the direction of
Professor Susan Rodger
June 2009
1
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.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 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,
undo and drag the object in again
click
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
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
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
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
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
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
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
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
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
• Click on the hand.
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.
•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
• 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
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
world
31
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
• 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
First instruction continued
• In the drop down menu, select right, ¼
revolution.
36
Changing duration of an action
• The default duration of an instruction is 1.0
second. Click more, select 0.5 seconds
37
skaterGirl say instruction
• 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?”
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