Alice 3: Making Simple Animations with Actors

Exclusive offer: get 50% off this eBook here
Alice 3 Cookbook

Alice 3 Cookbook — Save 50%

79 recipes to harness the power of Alice 3 for teaching students to build attractive and interactive 3D scenes and videos

$26.99    $13.50
by Vanesa S. Olsen | April 2011 | Open Source

Alice is a free and innovative 3D programming environment that makes it easy to create an animation for telling a story, playing an interactive game, or a video to share on the Web. Alice is a teaching tool designed as a revolutionary approach to teaching and learning introductory programming concepts.

In this article by Vanesa S. Olsen, author of Alice 3 Cookbook, we will cover:

  • Browsing galleries to search for a specific class
  • Creating a new instance from a class in a gallery
  • Setting initial properties for an actor
  • Moving an actor
  • Resizing an actor
  • Working with multiple actors
  • Moving an actor with relative positions
  • Orienting an actor to a target actor

 

Alice 3 Cookbook

Alice 3 Cookbook

79 recipes to harness the power of Alice 3 for teaching students to build attractive and interactive 3D scenes and videos

        Read more about this book      

(For more resources on on this subject, see here.)

Introduction

Alice 3 provides an extensive gallery with hundreds of customizable 3D models that you can easily incorporate as actors. This article provides many tasks that will allow us to start making simple animations with many actors in the 3D environment provided by Alice.

We will search for models of specific animals in the diverse galleries. We will locate and orient the actors in the 3D space. We will give some simple orders to the actors to create simple animations.

Browsing galleries to search for a specific class

In this recipe, we will create a new project and set a simple scene. Then we will browse the different packages included in Alice to search for a specific class. We will visualize the thumbnail icons that represent each package and class.

Getting ready

We have to be working on a project in order to be able to browse the galleries. Therefore, we will create a new project and set a simple scene. Follow these steps:

  1. Select File New...| in the main menu to start a new project. A dialog box will display the six predefined templates with their thumbnail previews in the Templates tab.
  2. Select GrassyProject.a3p as the desired template for the new project and click on OK. Alice will display a grassy ground with a light blue sky.
  3. Click on Edit Scene, at the lower-right corner of the scene preview. Alice will show a bigger preview of the scene and will display the Model Gallery at the bottom.
  4. Go to the Model Gallery and select Generic Alice Models Environments | Skies|. Use the horizontal scroll bar to find the ForestSky class.
  5. Click on the ForestSky thumbnail. Leave the default name, forestSky, for the new instance and click OK to add it to the existing scene. The scene preview will replace the light blue sky with a violet one. Many trees will appear at the horizon, as shown in the next screenshot:

    (Move the mouse over the image to enlarge it.)

How to do it...

Follow these steps to browse the different packages included in Alice to search for a specific class:

  1. Make sure that Alice is displaying the scene editor. If you see the Edit Code label at the lower-right corner of the big preview of the scene, it means that Alice is displaying the scene editor. If you see the Edit Scene label at the lower-right corner of a small scene preview, you should click on this label to switch to the scene editor. You will see the Model Gallery displayed at the bottom of the window. The initial view of the Model Gallery shows the following three packages located in the gallery root folder, as shown in the following screenshot:
    • Looking Glass Characters: This package includes many characters that perform realistic animations for the characters. For example, you can make a person walk with a simple call to a procedure.
    • Looking Glass Scenery: This package includes different kinds of scenery elements.
    • Generic Alice Models: This package includes models that provide the basic and generic procedures. For example, you can move a person with a simple procedure call, but there isn't a procedure to make the person walk.

  2. If you don't see the previously shown screenshot with the three packages, it means that you are browsing a subfolder of gallery and you need to go back to the gallery root folder. Click on the gallery button and Alice will display the thumbnails for the three packages. If you don't see the three packages, you should check your Alice installation.
  3. Click on the search entire gallery textbox, located at the right-hand side of the gallery button.
  4. Enter rab in the search entire gallery textbox. Alice will query for the classes and packages that contain the rab string and will display the thumbnails for the following classes, as shown in the next screenshot:
    • Rabbit
    • Scarab
    • WhiteRabbit
    • Parabola

  5. Now you know that you have two different rabbits, Rabbit and WhiteRabbit. You can select your favorite rabbit and then add it as an actor in the scene.
  6. Select File Save as...| and give a name to the project, for example, MyForest. Then, you can use this new scene as a template for your next Alice project.

How it works...

Alice organizes its gallery in packages with hierarchical folders. The previously mentioned three packages are located in the gallery root folder. We can browse each package by clicking on its thumbnail. Each time we click on a thumbnail, the related sub-folder will open and Alice will display the thumbnails for the new sub-folders and the classes.

The thumbnail that represents a folder, known as a package, displays a folder icon at the upper-left corner and includes the preview of some of the classes that it includes. The next screenshot shows the thumbnails for three packages, amusementpark, animals, and beach. These packages are sub-folders of the Generic Alice Models package:

The thumbnails for classes don't include the previously mentioned folder icon and they show a different background color. The next screenshot shows the thumbnails for three classes, Bird1, BirdBaby, and BlueBird:

The names for packages included within one of the three main packages use lowercase names, such as, aquarium, bedroom, and circus. The names for classes always start with an uppercase letter, such as, Monitor and Room. When a class name needs more than one word, it doesn't use spaces to separate them but it mixes lowercase with uppercase to mark the difference between words, such as, CatClock and OldBed.

The main packages contain hundreds of classes organized in dozens of folders. Therefore, we might spend hours browsing the galleries to find an appropriate rabbit for our scene. We took advantage of Alice query features to search the entire gallery for all the classes that contain a string. This way, we could find a simple rabbit, Rabbit, and a dressed rabbit, WhiteRabbit.

There's more...

While you type characters in the search entire gallery textbox, Alice will query all the packages and will display the results in real-time. You will notice that Alice changes the results displayed as you are editing the textbox. The results for your search will include both packages and classes that contain the entered string. For example, follow these steps:

  1. Click on the search entire gallery textbox, located at the right-hand side of the gallery button.
  2. Enter bug in the search entire gallery text box. Alice will query for the classes and packages that contain the bug string and will display two thumbnails. One thumbnail is the bugs package and the other thumbnail is the Ladybug class, as shown in the following screenshot:

If you think that Ladybug isn't the appropriate bug you want as an actor, you can click on the thumbnail for the bugs package and you will find many other bugs. When you click on the thumbnail, the text you entered in the search entire gallery textbox will disappear because there is no filter being applied to the gallery and you are browsing the contents of the gallery Generic Alice Models | animals | bugs| package.

You can add a Beetle or a Catepillar, as shown in the following screenshot:

Creating a new instance from a class in a gallery

In this task, we will add a new actor to an existing scene. We will drag and drop a thumbnail of a class from the gallery and then we will learn how Alice adds a new instance to the scene.

Getting ready

We want to add a new actor to an existing scene. Therefore, we will use an existing project that has a simple scene.

  1. Open an existing project based on one of the six predefined Alice templates. You can open the MyForest project saved in the Browsing galleries to search for a specific class recipe in this article.
  2. Select Starting Camera View in the drop-down list located at the top of the big scene preview.

How to do it...

Follow these steps to add a new instance of the WhiteRabbit class:

  1. Search for the WhiteRabbit class in the gallery. You can browse gallery Generic Alice Models | animals| or enter rab in the search entire gallery textbox to visualize the WhiteRabbit thumbnail.
  2. Drag the WhiteRabbit thumbnail from the gallery to the big scene preview. A bounding box that represents the 3D model in the 3D space will appear, as shown in the next screenshot:

  3. Keep the mouse button down and move the mouse to locate the bounding box in the desired initial position for the new element.
  4. Once you have located the element in the desired position, release the mouse button and the Declare Property dialog box will appear.<!-- li-->
  5. Leave the default name, whiteRabbit, for the new instance and click on OK to add it to the existing scene. The scene preview will perform an animation when Alice adds the new instance and then it will go back to the starting camera view to show how the new element appears on the scene. The next screenshot shows the new dressed white rabbit added to the scene, as seen by the starting camera:

  6. Select File Save as...| from Alice's main menu and give a new name to the project. Then, you can make changes to the project according to your needs.

How it works...

When we dropped the thumbnail for the WhiteRabbit class, the Declare Property dialog box provided information about what Alice was going to do, as shown in the following screenshot:

Alice defines a new class, MyWhiteRabbit, that extends WhiteRabbit. MyWhiteRabbit is a new value type for the project, a subclass of WhiteRabbit. The name for the new property that represents the new instance of MyWhiteRabbit is whiteRabbit. This means that you can access this new actor with the whiteRabbit name and that this property is available for scene. Because the starting camera view is looking at the horizon, we see the rabbit looking at the camera in the scene preview.

If you select TOP in the in the drop-down list located at the top of the big scene preview, you will see the rabbit on the grassy ground and how the camera is looking at the rabbit. The next screenshot shows the scene seen from the top and you can see the camera with a circle around it:

There's more...

When you run the project, Alice shows a new window with the rendered scene, as seen by the previously shown camera, the starting camera. The default window size is very small. You can resize the Run window and Alice will use the new size to render the scene with a higher resolution. The next time you run the project, Alice will use the new size, as shown in the next screenshot that displays the dressed white rabbit with a forest in the background:

Alice 3 Cookbook 79 recipes to harness the power of Alice 3 for teaching students to build attractive and interactive 3D scenes and videos
Published: April 2011
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on on this subject, see here.)

Setting initial properties for an actor

In this recipe, we will move, rotate and resize an actor that has already been added to the scene. We will learn some of the features provided by the Alice scene editor to change the location, rotation, and size of a 3D model in the 3D world.

Getting ready

We have to be working on a project with at least one actor. Therefore, we will use an existing project that has a rabbit.

  1. Open the project saved in the Creating a new instance from a class in a gallery recipe in this article.
  2. Click on Edit Scene, at the lower-right corner of the scene preview. Alice will show a bigger preview of the scene and will display the Model Gallery at the bottom.

How to do it...

Follow these steps to move, rotate, and resize an actor:

  1. Click on the desired actor on the scene. If you have difficulties clicking on the actor, click on its instance name at the upper-left corner. Once the actor is selected, a circle will appear below it and the radio button with its instance name will be activated, as shown in the next screenshot:

  2. Activate the Rotation radio button on the panel located at the right-hand side of the window, under Handle Styles.
  3. Activate the Use Snap checkbox, located in the same panel. Make sure that the Snap Rotation checkbox is also activated and that the value for the Angle Snap textbox is 45, as in the next screenshot:

  4. Now, hover the mouse pointer over the yellow circle located around the bottom of the actor and on top of the ground. The yellow circle will increase its brightness level when the mouse pointer is over it.
  5. Press the mouse button and drag the mouse slowly towards the right-hand side until the actor rotates around itself 90 degrees, as shown in the next screenshot:

  6. Activate the Move radio button on the panel located at the right-hand side of the window, under Handle Styles.
  7. Hover the mouse pointer over the red arrow located at the left-hand side of the actor and on top of the ground. The red arrow will reduce its brightness level when the mouse pointer is over it.
  8. Press the mouse button and drag the mouse slowly towards the left-hand side until the actor is located at the left-hand side of the scene, as shown in the following screenshot:

  9. Activate the Resize radio button on the panel located at the right-hand side of the window, under Handle Styles.
  10. Hover the mouse pointer over the gray arrow located at the top of the actor. Don't confuse the gray arrow with the yellow arrow that appears at the left-hand side of the gray arrow. The gray arrow will reduce its brightness level when the mouse pointer is over it.
  11. Press the mouse button and drag the mouse slowly towards the top of the scene. The actor will increase its size while keeping its aspect ratio, as shown in the next screenshot:

  12. Select File | Save as... from Alice's main menu and give a new name to the project. Then, you can make changes to the project according to your needs.

How it works...

By default, when you select an instance, Alice displays a circle that allows us to rotate the model around itself. We used the radio buttons on the panel located at the right-hand side of the window, under Handle Styles, and we were able to perform the following three actions for an actor:

  • Rotation
  • Move
  • Resize

We activated the different snap options because they allow us to be more accurate when performing the aforementioned actions. For example, when we rotated the model around itself, each time we reached 45 degrees, the snap forced us to accelerate the mouse movement to leave the angle. In addition, a green arrow indicated to us that we reached an angle that was multiple of 45. This way, when we see a green arrow for the second time, it means we have rotated the model around itself 90 degrees to the right.

When we moved the actor horizontally, the Show grid option displayed a grid on top of the grassy ground. This grid is useful when you want to set the initial position for many elements on a scene. The cells that compose the grid allow us to align many models on the same row or column. In addition, the 3D perspective applied to the grid is also useful to understand how the models are going to change their size when you move them through the visible part of the scene.

We resized the actor while keeping the model's aspect ratio. The gray arrow allowed us to increase the model's width, height, and depth at the same time while we moved the mouse.

There's more...

When we activate each radio button to perform one of the three actions for an actor, Rotation, Move, or Resize, we can apply the action to the three axes (X, Y, and Z). For example, we can rotate three angles for a 3D model:

  • X (horizontal)
  • Y (vertical)
  • Z (depth)

When we activate the Rotation radio button, three circles appear around the model. We can drag each circle to rotate each angle for the model. Alice does the rotation among the middle point of the 3D model. The next screenshot shows the dressed white rabbit being rotated horizontally:

When we activate the Move radio button, three arrows appear around the model. We can drag each arrow to move the model in the following directions:

  • Red arrow: horizontal
  • Green arrow: vertical
  • Blue arrow: depth

When we activate the Resize radio button, four arrows appear around the model. We can drag each arrow to resize the following parts of the model:

  • Gray arrow: X, Y, and Z at the same time. It keeps the original model's aspect ratio values.
  • Cyan arrow: horizontal
  • Yellow arrow: vertical
  • Magenta arrow: depth

The next screenshot shows the dressed white rabbit with its aspect ratio being modified because it is increasing only its horizontal size:

Moving an actor

In this task, we will learn to add code to animate the movement of an actor through a scene. We will call a procedure and we will pass parameters to this procedure to specify the desired movement, the duration, and the animation's style.

Getting ready

We have to be working on a project with at least one actor. Therefore, we will use an existing project that has a rabbit.

  1. Open the project saved in the Setting initial properties for an actor recipe in this article.
  2. Click on Edit Code, at the lower-right corner of the big scene preview. Alice will show a smaller preview of the scene and will display the Code Editor on a panel located at the right-hand side of the main window.
  3. Click on the class: MyScene drop-down list and the list of classes that are part of the scene will appear.
  4. Select MyScene | Edit run.

How to do it...

Follow these steps to make Alice move an actor:

  1. Select the desired actor in the instance drop-down list located at the left-hand side of the main window, behind the small scene preview. For example, you can select whiteRabbit. Make sure that part: none is selected in the drop-down list located at the right-hand side of the chosen instance, as shown in the next screenshot. Otherwise, you would be adding code for one of the parts of this model.

  2. Activate the Procedures tab. Alice will display the procedures for the previously selected actor.
  3. Drag the move procedure and drop it in the drop statement here area located behind the do in order label, inside the run tab. If your instance name is whiteRabbit, the move assignment statement contains the this.whiteRabbit and move labels followed by the direction and amount parameters and their question marks ???. A list with all the predefined direction values to pass to the first parameter will appear.
  4. Click on FORWARD and then on 2.0 in the cascade menu that appears, as shown in the following screenshot:

  5. Click on the more... drop-down menu button that appears at the right-hand side of the recently dropped statement. Click on duration and then on 2.0 in the cascade menu that appears. If the instance name is whiteRabbit, the following code will be displayed, as shown in the following screenshot:

    this.whiteRabbit.move(FORWARD, 2.0, duration: 2.0)

How it works...

When we run a project, Alice creates the scene instance, creates and initializes all the instances that compose the scene, and finally executes the run method defined in the MyScene class. The statements included in the run method will run once the scene and all its visible elements are rendered, including the actor with its initial properties.

When we run the project, the statement that we added in the run method calls the move procedure for the actor instance. This procedure requires at least two parameters:

  1. direction: Specifies the desired direction in which the Actor has to be moved. There are six possible values for this parameter:
    • LEFT
    • RIGHT
    • UP
    • DOWN
    • FORWARD
    • BACKWARD
  2. amount: This real number indicates the amount that the instance has to be moved in the specified direction.

When we added the call to the move procedure, we passed FORWARD to direction and 2.0 to amount.

When you drop a statement in Alice code editor, Alice displays menus to allow you to specify the values for the required parameters. The required parameters cannot be left without values. If you don't specify the values for these parameters, Alice removes the statement.

After we specified the values for the required parameters, the more... drop-down menu button that appeared at the right-hand side of the statement allowed us to specify values for one of the optional parameters. The optional parameters can be left without values because they aren't required. However, they provide additional options for the procedure or function that we are calling. In this case, we passed 2.0 to duration and the procedure will animate the movement of the actor for 2.0 seconds, as shown in the next screenshot with three screenshots of the rendered frames:

There's more...

We can specify two additional optional parameters for the move procedure. By default, the optional asSeenBy parameter uses the instance that calls the move procedure as its value. For example, if this.whiteRabbit calls the move procedure, the default value for asSeenBy is this.whiteRabbit. The direction value has diverse effects on the movement of the actor in the scene according to the asSeenBy value. A FORWARD movement performed as seen by the actor is different than the same movement performed as seen by the camera (this.camera).

We can click on the more... drop-down menu button again and specify a different value for the asSeenBy parameter and test the effect on the movement. When we want to write code that moves the actors according to a specific baseline, the asSeenBy is really useful. For example, we can set the same value for the asSeenBy parameter to many actors, to the ground instance (this.grassyGround) and program many movements as seen by the ground.

We can click on the more... drop-down menu button again and specify a different value for the style parameter. This optional parameter defines the style of the movement animation and has four possible values:

  • BEGIN_AND_END_ABRUPTLY: This value is useful when the user controls the movement of an actor by pressing certain keys
  • BEGIN_GENTLY_AND_END_ABRUPTLY: The movement starts gently and increases the speed to end abruptly
  • BEGIN_ABRUPTLY_AND_END_GENTLY: The movement starts immediately with a maximum speed but reduces the speed and ends gently
  • BEGIN_AND_END_GENTLY: This is the default value and sometimes it won't look so good in the animation

The names for the aforementioned possible values are very easy to understand and define the way the animation begins and ends. We can change the value and check the effects on the rendered animation by running the project with each possible value.

Resizing an actor

In this recipe, we will learn to add code to animate the resize of an actor through a scene. A rabbit will increase its size during a specific period of time.

Getting ready

We have to be working on a project with at least one actor. Therefore, we will use an existing project that has a rabbit.

  1. Open the project saved in the Setting initial properties for an actor recipe in this article.
  2. Click on Edit Code, at the lower-right corner of the big scene preview. Alice will show a smaller preview of the scene and will display the Code Editor on a panel located at the right-hand side of the main window.
  3. Click on the class: MyScene drop-down list and the list of classes that are part of the scene will appear.
  4. Select MyScene | Edit run.

How to do it...

Follow these steps to make Alice resize an actor:

  1. Select the desired actor in the instance drop-down list located at the left-hand side of the main window, behind the small scene preview. For example, you can select whiteRabbit.
  2. Make sure that part: none is selected in the drop-down list located at the right-hand side of the chosen instance.
  3. Activate the Procedures tab. Alice will display the procedures for the previously selected actor.
  4. Drag the resize procedure and drop it in the drop statement here area located behind the do in order label, inside the run tab. If your instance name is whiteRabbit, the resize assignment statement contains the this.whiteRabbit and resize labels followed by the amount parameter and its question marks ???. A list with predefined real numbers to pass to the first parameter will appear.
  5. Select Other Real Number... and the Enter custom real number dialog box will appear. Enter 5 and click on OK, as shown in the next screenshot:

  6. Click on the more... drop-down menu button that appears at the right-hand side of the recently dropped statement. Click on duration and then on Other Real Number.... The Enter custom real number dialog box will appear. Enter 3.5 and click on OK. If the instance name is whiteRabbit, the following code will be displayed, as shown in the following screenshot:

    this.whiteRabbit.resize(5.0, duration: 3.5)

How it works...

When we run the project, the statement that we added in the run method calls the resize procedure for the actor instance. This procedure requires at least one parameter, amount. This real number indicates the number of times that the instance has to be resized while keeping its original aspect ratio. A positive number increases the size and a negative number reduces the size. We used the Enter custom real number dialog box to specify 5 as the value for this parameter. This means that the actor is going to increase its size five times. You can specify a negative value when you want to decrease the size.

The more... drop-down menu button that appeared at the right-hand side of the statement allowed us to specify the value for one of the optional parameters, duration. In this case, we used the Enter custom real number dialog box again to specify 3.5 to duration and the procedure will animate the resizing of the actor for 3.5 seconds, as shown in the next screenshot with three screenshots of the rendered frames:

There's more...

We can also perform the resize action to only one of the three axes for an actor by using one of the following procedures:

  • resizeWidth
  • resizeHeight
  • resizeDepth

We need to specify the value for the amount parameter when we call one of the aforementioned procedures. In addition, we can specify a value for the duration parameter. These procedures have the following three additional optional parameters:

  1. resizePolicy: It has two possible values:
    • PRESERVE_NOTHING: It resizes the width, height, or depth according to the procedure that has been called.
    • PRESERVE_VOLUME: It resizes the width, height, or depth according to the procedure that has been called, but the resize operation always preserves the volume of the 3D model. In order to preserve the volume, the resize operation might resize the other two axes that the method isn't supposed to alter.
  2. howMuch: It has three possible values:
    • DESCENDANT_PARTS_ONLY: It resizes only the parts that descend from the instance (this).
    • THIS_AND_DESCENDANT_PARTS: This is the default value for this optional parameter. This value indicates that all the parts that compose the model must be resized at the same time.
    • THIS_ONLY: It resizes only the main instance (this) but it doesn't change the size of its parts.
  3. style: It defines the style of the movement animation and has four possible values. These values were explained in the Moving an actor recipe in this article.
Alice 3 Cookbook 79 recipes to harness the power of Alice 3 for teaching students to build attractive and interactive 3D scenes and videos
Published: April 2011
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on on this subject, see here.)

Working with multiple actors

In this task, we will learn to add a second actor to a scene with an existing actor, and to use the snap features to define the new actor's initial location. This way, we will have a scene with multiple actors.

Getting ready

We have to be working on a project with at least one actor. Therefore, we will use an existing project that has a rabbit.

  1. Open the project saved in the Setting initial properties for an actor recipe in this article.
  2. Activate the scene editor.
  3. Activate the Use Snap checkbox, located in the panel at the right-hand side of the window. Make sure that the Show grid checkbox is activated.
  4. Select Starting Camera View in the drop-down list located at the top of the big scene preview.

How to do it...

Follow these steps to add a new actor to the scene and set the actor's initial location:

  1. Search for the Hare class in the gallery. You can browse gallery | Generic Alice Models | animals or enter har in the search entire gallery textbox to visualize the Hare thumbnail. You can follow the steps explained in the Browsing galleries to search for a specific class recipe in this article.
  2. Drag the Hare thumbnail from the gallery to the big scene preview. A bounding box that represents the 3D model in the 3D space will appear.
  3. Keep the mouse button down and move the mouse to locate the bounding box in the desired initial position for the new element. When the center of the model is located on one of the lines defined by the grid, the line will appear with a light green color.
  4. Keep the mouse button down and move the mouse to locate the bounding box in the same horizontal grid line than the existing actor. Make sure that the two lines of the grid appear highlighted with a light green color, as shown in the next screenshot:

  5. Once you have located the element in the desired position, snap to the lines of the grid, release the mouse button and the Declare Property dialog box will appear.
  6. Leave the default name, hare, for the new instance and click on OK to add it to the existing scene. The scene preview will perform an animation when Alice adds the new instance and then it will go back to the starting camera view to show how the new element appears on the scene. The following screenshot shows the new hare added to the scene and the other actor on its left-hand side, as seen by the starting camera:

  7. Select File | Save as... and give a name to the project, for example, MyForest. Then, you can use this new scene as a template for your next Alice project.

How it works...

When we dropped the thumbnail for the Hare class, the Declare Property dialog box provided information about the new instance that represents a new actor for our scene.

Alice defines a new class, MyHare, which extends Hare. MyHare is a new value type for the project, a subclass of Hare. The name for the new property that represents the new instance of MyHare is hare. This means that you can access this new actor with the hare name and that this property is available for scene. The hare is looking at the camera in the scene preview because the new actor uses its default orientation.

If you select Layout Scene View in the in the drop-down list located at the top of the big scene preview, you will see the two actors on the grassy ground and how the camera is looking at them. The next screenshot shows the aforementioned view and you can see the hare with a circle around it because it is selected:

When we use the grid to locate the actors in their initial position, it is easy to organize the initial layout with great accuracy. In the previous screenshot, whiteRabbit identifies the first actor and hare the second one. We can call procedures and functions for each of these actors.

Moving an actor with relative positions

In this recipe, we will learn to move an actor towards another actor. We will add code to make the hare make two movements with different directions.

Getting ready

We have to be working on a project with at least two actors. Therefore, we will use an existing project that has a rabbit and a hare.

  1. Open the project saved in the Working with multiple actors recipe in this article.
  2. Click on Edit Code, at the lower-right corner of the big scene preview. Alice will show a smaller preview of the scene and will display the Code Editor on a panel located at the right-hand side of the main window.
  3. Click on the class: MyScene drop-down list and the list of classes that are part of the scene will appear.
  4. Select MyScene | Edit run

How to do it...

Follow these steps:

  • Select one of the actors in the instance drop-down list located at the left-hand side of the main window, behind the small scene preview. For example, you can select hare. Make sure that part: none is selected in the drop-down list located at the right-hand side of the chosen instance.
  • Activate the Procedures tab. Alice will display the procedures for the previously selected actor.
  • Drag the move procedure and drop it in the drop statement here area located behind the do in order label, inside the run tab. If your instance name is hare, the move assignment statement contains the this.hare and move labels followed by the direction and amount parameters and their question marks ???. A list with all the predefined direction values to pass to the first parameter will appear.
  • Click on LEFT and then on 2.0 in the cascade menu that appears.
  • Click on the more... drop-down menu button that appears at the right-hand side of the recently dropped statement. Click on duration and then on 1.0 in the cascade menu that appears.
  • Click on the new more... drop-down menu that appears. Click on asSeenBy and then on this. followed by the other actor's name. For example, if the other actor's name is whiteRabbit, you must select this.whiteRabbit, as shown in the following screenshot:

  • Click on the new more... drop-down menu that appears. Click on style and then on BEGIN_AND_END_GENTLY. For example, if the instance that calls the move procedure is hare and the value specified for the asSeenBy parameter is whiteRabbit, the following code will be displayed:

    this.hare.move(LEFT, 2.0, duration: 2.0, asSeenBy: this.
    whiteRabbit, style: BEGIN_AND_END_GENTLY)

  • Drag the move procedure again and drop it behind the previously dropped procedure call. A list with all the predefined direction values to pass to the first parameter will appear.
  • Click on BACKWARD and then on 1.0 in the cascade menu that appears.
  • Click on the more... drop-down menu button that appears at the right-hand side of the recently dropped statement. Click on duration and then on 1.0 in the cascade menu that appears.
  • Click on the new more... drop-down menu that appears. Click on asSeenBy and then on this. followed by the other actor's name. For example, if the other actor's name is whiteRabbit, you must select this.whiteRabbit.
  • Click on the new more... drop-down menu that appears. Click on style and then on BEGIN_AND_END_GENTLY. For example, if the instance that calls the move procedure is hare and the value specified for the asSeenBy parameter is whiteRabbit.
    The following code will be displayed as the second statement, as shown in the following screenshot:

    this.hare.move(BACKWARD, 1.0, duration: 1.0, asSeenBy: this.
    whiteRabbit, style: BEGIN_AND_END_GENTLY)

How it works...

When we run the project, Alice executes the two statements that we added in the run method one after the other. First, it calls the move procedure for the actor instance to move it left as seen by the other actor. The value for the asSeenBy parameter is the instance of the other actor. We want one of the actors to move 2 units to the left-hand side of the other actor.

Then, Alice calls another move procedure for the actor instance to move it backward as seen by the other actor. The two movements are relative to how the actor is seen by the other one. Imagine that the dressed white rabbit is watching the hare, as shown in the first frame in the following screenshot. The hare is the actor being moved and the white rabbit determines the relative position for the movements. First, the hare moves to the rabbit's left-hand side and then it goes towards the rabbit's location. The last movement is backward, as seen by the rabbit; and therefore, the hare moves away from the rabbit.

Facing an actor to a target actor

In this task, we will learn to turn an actor to the face of another actor. We will make the hare turn to look at the rabbit's face. Thus, we will be able to leave the hare and the rabbit face to face.

Getting ready

We have to be working on a project with at least two actors. Therefore, we will use an existing project that has a rabbit and a hare.

  1. Open the project saved in the Working with multiple actors recipe in this article.
  2. Click on Edit Code, at the lower-right corner of the big scene preview. Alice will show a smaller preview of the scene and will display the Code Editor on a panel located at the right-hand side of the main window.
  3. Click on the class: MyScene drop-down list and the list of classes that are part of the scene will appear.
  4. Select MyScene | Edit run.

How to do it...

Follow these steps:

  1. Select one of the actors in the instance drop-down list located at the left-hand side of the main window, behind the small scene preview. For example, you can select hare. Make sure that part: none is selected in the drop-down list located at the right-hand side of the chosen instance.
  2. Activate the Procedures tab. Alice will display the procedures for the previously selected actor.
  3. Drag the turnToFace procedure and drop it in the drop statement here area located behind the do in order label, inside the run tab. If your instance name is hare, the turnToFace assignment statement contains the this.hare and move labels followed by the target parameter and its question marks ???. A list with all the possible instances to pass to the first parameter will appear.
  4. Click on this. followed by the other actor's name. For example, if the other actor's name is whiteRabbit, you must select this.whiteRabbit.
  5. Click on the more... drop-down menu that appears. Click on duration and then on 2.0.
  6. Click on the new more... drop-down menu that appears. Click on style and then on BEGIN_AND_END_GENTLY. For example, if the instance that calls the move procedure is hare and the value specified for the target parameter is whiteRabbit, the following code will be displayed, as shown in the following screenshot:

    this.hare.turnToFace(this.WhiteRabbit, duration: 2.0,
    style: BEGIN_AND_END_GENTLY)

How it works...

When we run the project, Alice calls the turnToFace procedure for the specified actor instance. This procedure rotates the 3D model that represents the actor among its middle point until the actor looks at the face of the other actor. This way, the two actors will appear face to face. The value for the target parameter is the instance of the other actor. We want one of the actors to perform an animation of two seconds to turn to face the other actor.

Imagine that the dressed white rabbit is watching the camera and is looking at the hare, as shown in the first frame in the following screenshot. The hare is the actor that turns to face the white rabbit:

Summary

This article provided many tasks that allowed us to start making simple animations with many actors in the 3D environment provided by Alice. We searched for models of specific animals in the diverse galleries. We located and oriented the actors in the 3D space. We gave some simple orders to the actors to create simple animations. We learnt to work with procedures with many required and optional parameters. We moved, rotated, resized, and oriented actors. In addition, we put a rabbit face to face with a dressed white rabbit.


Further resources on this subject:


About the Author :


Vanesa S. Olsen

Vanesa Olsen is a Speech Therapist. She has been working for more than five years in therapeutic centers, schools, and hospitals. She has been applying modern technologies in language disorders and learning disability treatments, and in helping schools to keep the students in the least restrictive environment. Specifically, she has been working with Moodle as an e-Learning platform, Alice and other tools, combined with the usage of Web 2.0 and general purpose modern hardware as gamepads, pen sketches, touch screens, netbooks and joysticks. She enjoys helping children and teenagers to improve their skills.

She has written another book for Packt Publishing, Moodle 1.9 for Teaching Special Education Children (5-10): Beginner's Guide.

She lives with her husband, Gaston, and her little son, Kevin. When she is not working she devotes her spare time to her family and hobbies. She enjoys modeling in cold porcelain, swimming, and researching about new technologies and techniques to apply in her treatments.
You can contact her at vanesaolsen@gmail.com and at olsenvanesa@live.com

Books From Packt


Scratch 1.4: Beginner’s Guide
Scratch 1.4: Beginner’s Guide

Away3D 3.6 Essentials
Away3D 3.6 Essentials

OpenSceneGraph 3.0: Beginner's Guide
OpenSceneGraph 3.0: Beginner's Guide

Panda3D 1.7 Game Developer's Cookbook
Panda3D 1.7 Game Developer's Cookbook

ZBrush 4 Sculpting for Games: Beginner's Guide
ZBrush 4 Sculpting for Games: Beginner's Guide

Blender 2.5 Materials and Textures Cookbook
Blender 2.5 Materials and Textures Cookbook

SketchUp 7.1 for Architectural Visualization: Beginner's Guide
SketchUp 7.1 for Architectural Visualization: Beginner's Guide

OGRE 3D 1.7 Beginner's Guide
OGRE 3D 1.7 Beginner's Guide


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software