Chapter 2 Alice 3 Programming Environment

Selecting a template

When Alice starts, select a template for a project scene by clicking on one of the template thumbnail images in the Welcome dialog box. In figure 2.1, we have selected the GRASS template by a single-click on the template and then OK. It is also possible to just double-click on the template.

Figure 2.1 Select a template

Upon selection of a template for the scene, Alice will display the scene in the upper left corner of the interface, as shown in Figure 2.2. In Alice, the interface is a programming environment where a virtual world (a scene with actors and props) and a program (a script that gives instructions to the actors) can be created to enable interaction and communication between Alice and a human programmer (user).

Code editor

In addition to displaying a view of the scene, the opening interface displays the Code editor with tabbed panels where different parts of a program are created. The Code editor also has a Methods panel and a Control Tiles panel, as labeled in Figure 2.2. When Alice is first started with a new template, the camera is the selected object (instance), the Scene view displays the template scene, and myFirstMethod (the main method defined for a scene) is the open tab in the Code editor panel.

Figure 2.2 Alice 3 interface: Code editor panels

Methods: Filtered into procedures, functions, properties

In the Methods panel, each tile represents a method. A method is a named block of instructions that tells a character or prop what to do in an animation program. In Figure 2.2 above, the methods panel displays method tiles for actions that can be performed by the camera (the default selected object in a new scene).

In the example shown in Figure 2.3, the Methods panel filters all the methods for an object into three categories: Procedures (perform an action), Functions (ask a question), and Properties (fetch or modify a characteristic trait such as name, opacity, and color). In this example, the camera has procedural methods namedsetVehicle, move, turn, roll, turnToFaceand many others.

.

Figure 2.3 Methods: Procedures, Functions, and Properties

Control tiles panel

In the Control tiles panel, each tile represents a statement that organizes and manages the instructions and information (data) in an animation program. Figure 2.4 highlights the control tiles in the Control tiles panel. Some tiles in the Control panel tell the computer to perform actions in order while other tiles change the order in which actions are performed or manage information (data).

The methods and control tiles are dragged and dropped into the code editor panel to create statements and instructions that compose a program. In Alice, a program defines an animation for characters and props in a 3D scene.More details of a program’s components and the actions performed are described in Chapters 3 – 6 of this User’s Guide.

Figure 2.4 Control tiles in the Controls panel

Scene editor

In addition to the Code editor, Alice also has a Scene editor, where a virtual world is constructed. To view the Scene editor, click the Setup Scene button in the lower right corner of the Scene View panel, as shown in Figure 2.5.

Figure 2.5 Setup Scene button switches to Scene editor

The Scene editor, shown in Figure 2.6, displays a scene similar to a stage where characters and props can be added for telling a story, creating a simulation, or playing a game. The Scene editor has a large view of the scene, a Gallery of 3D models, and a Setup panel. At the top of the Setup panel is an Undo button, a Redo button, and a set of Handle style buttons.

Figure 2.6 Scene Editor

In summary, Alice has two editors. Each of the editors serves a specific purpose. The Code Editor is for the creation of program code. The Scene Editor is for the creation of the scene. The creation of an animation often involves frequent switching back and forth between the Code and Scene editors. To toggle between the two editors, click the Setup Scene button in the Code Editor or click the Edit Code button in the Scene editor, as shown in Figure 2.7.

 

Figure 2.7 Toggle between Code and Scene editors

Gallery

To build an opening scene for an animation, objects (characters and props) are created and arranged in the Scene Editor. The gallery contains dozens of 3D models that can be used to create objects. Figure 2.8 illustrates three models in the MyBipedcollection: MyAlien, MyCheshireCat, andMyHare.

The alien, cat, and hare are classified as bipedsbecause they each have two legs for walking and moving around the scene. Notice, however, that each has its own unique characteristics (properties). For example, the alien has green skin and is wearing clothes and boots, the Cheshire cat has short ears and a long tail, and the hare has long ears that can flop. To define the distinguishing features of each type of object, a written description of the object's properties and the actions it knows how to perform is stored in a file known as a class. As can be seen in Figure 2.8, each type of object is labeled as a class. Each object in a scene is an instanceof its own class.

Figure 2.8 3D Models from the MyBiped collection of classes

Add an object to a scene

A detailed description adding a new object to a scene is provided later, in Chapter 3. For purposes of discussion, a quick example is shown here. To add an object to a scene, click and hold the mouse down on the thumbnail sketch of the class in the gallery. Drag the model-sketch into the scene. The display of the mouse cursor will change to a box-like outline, as shown in Figure 2.9. This is a bounding boxthat shows where the object will be located when you release the mouse button.

Figure 2.9 Click and drag thumbnail sketch into the scene

Release the mouse button. A dialog box pops up where a name for the object can be entered (or accept the default name), as shown in Figure 2.10. The name should be all one word (no spaces) and should begin with a lowercase letter of the alphabet. To use two or more words, use camelCase which starts with a lowercase letter for the first word and then uses a capital letter for each additional word. For example, the alienmight be named greenAlien. Click OK when done.

Figure 2.10 Enter a name for the object and click OK

When a new object is added to the scene, Alice automatically adds the name of the object to the Object tree in the Scene Editor, as shown in Figure 2.11.

Figure 2.11 A new object’s name is automatically added to the Object tree.

For more detailed information regarding classes, objects, and adding a new object (instance) to a scene, please see Chapter 3 in this User’s Guide.

Menu bar

At the top left of the Alice environment is a menu bar, as shown in Figure 2.12. One of the most commonly used menus is the Filemenu that contains typical options for managing and editing files in a project, as shown in Figure 2.13. The items in the File menu are: New, Open, Recent Projects (for rapid reload), Save, Save As, Revert (cancel all edits since the most recent save), Print, and Exit.

Figure 2.12 Menu bar

Figure 2.13 Menu for managing files

Setting preferences: Mode I

Another important menu is the Windowmenu. The Windowmenu contains four items (Perspectives, Project History, Menu Usage, and Preferences). The menu item discussed here is Preferences. Clicking on Preferences opens a cascading menu of preference options. Preference menu options can be selected to change the look and feel of the Alice interface. We recommend that Preference choices be made based on learning objectives and the level of study for which Alice is being used.

An introductory level course where the focus is learning fundamental concepts of programming and animation should use the default preference settings, as shown in Figure 2.14. This default set of preferences is called Mode I. In Mode I, all preference options for the Code Editor are disabled and the first two Gallery preferences (initial field names and type) are enabled.

Figure 2.14 Mode I (Default preferences for novice programmers)

When Alice 3 is started in Mode I, the Code Editor panel will contain only one tab, as shown in Figure 2.15. In Alice 3 projects, myFirstMethodis typically the first procedural method to be executed when the user clicks on the Runbutton and the scene is first displayed in the runtime window.

Figure 2.15myFirstMethodtabbed editor panel in Mode I

Using the Code Editor in Mode I

In Mode I, the scene’s myFirstMethodis always available for editing in the Code editor. To edit methods other than myFirstMethod, select an object (instance of a class) for which the method is (or will be) written, as shown in Figure 2.16. To select the object, click on the object in the scene view window or click on the pull-down menu for “instance” (immediately beneath the scene view window). Select the object’s name in the pull-down menu.

Figure 2.16 Select an object (instance)

In this example, we selected the alien object (an instance of the MyAlienclass). As shown in Figure 2.17, the Scene view window now shows the alien with a ring handle around the feet of the alien. The ring handle circles the pivot point of an object, which is often at the feet (or the base) of the object.

Figure 2.17 Scene view window with a selected object

When an object is selected, the Methods panel will then display a list of method tiles for the actions this object (in this example, the alien)knows how to perform, as shown in Figure 2.18. In this example, the yellow tiles (MyAlien, MyBiped, andBiped on the Procedures tab in the Methods panel) represent the classes that define actions this alien object knows how to perform. This is because an alien is an instance of the MyAlien class, which “is a” MyBiped, which “is a”Biped. In other words, instances of the MyAlien class are automatically categorized as MyBiped and Biped types of objects.

Closely examine the Methods panel for the alien object in Figure 2.18. Notice that, beneath each of the MyAlien and MyBipedclass tiles, an Add Procedure button is displayed but no actual procedural method tiles. Beneath theBiped class tile, however, are about two dozen method tiles. Because an alien “is a” Biped, an alien knows how to do all the actions that are defined in the Bipedclass. The Add Procedure buttons allow the programmer to create new procedural methods for MyAlien and/or MyBiped classes.

Figure 2.18 Methods for this alien object

Creating a new method tab in Mode I

When a project is first opened, only the scene’s myFirstMethodtab is open in the Code editor. The Add Procedure button in the Methods panel can be used to create a new method tab in the Code editor. Clicking on the Add Procedure button for the alien causes a pop-up dialog box to appear where a name for a new procedural method can be entered. We entered “waveHello”, as shown in Figure 2.19.

Figure 2.19 Creating a new procedural method

A name for a new procedural method should follow the same protocols as for naming an object: start with a lowercase alphabetic character and use camelCase to avoid spaces in the name. When the name has been entered, click OK. The dialog box will close, a new tile will be created in the Procedures tab for MyAlien, and a new tab will be created in the Code editor, as shown in Figure 2.20. The new tile and the new tab are each labeled with the name of the new procedural method. Technically, the process of creating a new procedural method is known as declaring a method.

Figure 2.20 New procedural method tile and tab

Figure 2.21is the same screen shot as Figure 2.20but with three red boxes toenclose specific segments of the Alice Code editor that are immediately modified when a new method is declared.

Figure 2.21 Changesin the Code editor when declaring a new method

Working clockwise from the upper left in Figure 2.21, the first box (enclosing the Scene view window) no longer displays a miniature view of the scene. The window now shows that the selected object is an instance of the MyAlienclass, a sketch of an instance of this class, and a button that can be used to return to the scene, and instance of MyScene.

To the right of the Scene view window in Figure 2.21, the myFirstMethodtab in the Code editor is now grayed-out. The grayed-out tab indicates myFirstMethodis no longer open for editing. Instead, the waveHellotab is now the open tab forediting. We say waveHellois the activetab.

The third red box in Figure 2.21encloses the instancemenuat the top the Methods panel. The instance menu selection is now this, which refers to an instance of the class for whichever tab is open in the Code editor. In this example, the open tab in the Code editor is waveHello which is being declared for the MyAlien class. So,thisrefers to an instance of the MyAlienclass (an alien object).

Closing a tab in Mode I

As a project is being written, more and more methods are likely to be declared and more and more tabs are opened in the Code editor. Having many tabs open in the Code editor may crowd the interface, especially on small laptops. A tab may be closed by clicking on the white X to the right of the name of the method on the tab, as shown in Figure 2.22.

Figure 2.22 Click on X to close tab

Reopen a tab in Mode I

At times, a method tab has been closed and needs to be reopened. This is often the situation when a project is saved, Alice is shut down, and (later) Alice is restarted and the saved project is reopened. When Alice is started and a project is reopened, the only method tab on display in the Code editor is myFirstMethod. All other methods tabs have been automatically closed, but are still there in the project.

To reopen a tab in the Code editor, first select an object for which the method was previously declared and then click the Edit button for the desired method. In the example shown in Figure 2.23, we clicked the alien object in the scene and then clicked the Edit button for the waveHelloprocedure. The tab for waveHelloimmediately opens in the Code editor. (In this example, although the waveHelloprocedure was declared, no program code has yet been written in the waveHelloeditor tab. Chapter 4 demonstrates how to write program statements.)

Figure 2.23 Clicking an Edit button in Mode I opens a tabbed panel for that method

Setting Preferences: Mode II

Mode II is a set of recommended preference settings for an intermediate level course, an Advanced Placement Computer Science (Java) course, a college course for majors and/or non-majors, or any other course where the focus is on object-oriented programming concepts. Mode II settings are shown in Figure 2.24. The Mode II settings selected for the Code Editor are: Emphasize Classes, Include Type Decoration, Expose Re-assignability for Fields and Locals, and Include Program Type. The Mode II settings for the Gallery are the same as in Mode I.

Figure 2.24 Mode II (Selected preferences for intermediate and advanced students)

Differences in Alice’s look and feel

Changing the preference settings from Mode I to Mode II causes a significant change in the look and feel of the Alice 3 interface. One difference is the button and tabs displayed in the Code Editor panel. When Alice 3 is started in Mode II, the Code Editor will have a pull-down class menu button and at least two tabs, as illustrated in Figure 2.25. In this example, the two tabbed panels include a Class panel labeled MySceneand a myFirstMethod editing panel. The pull-down class menu button displays a yellow tile and a black “down-arrow” icon indicating that a click on this button will pull down a menu.

Figure 2.25 Mode II: Pull-down class menu button and two tabbed editor panels

Opening a Class panel in Mode II

When the pull-down class menu button is clicked, the menu displays a list of classes that define objects currently existing in this world, as shown in Figure 2.26. In this example, the list of classes includes: MyProgram, MyScene, MyBiped, and MyAlien. Almost all Alice 3 projects will have MyProgram andMyScene classes. However, other classes in the list will vary depending on objects in the scene.

Figure 2.26 The pull-down class menu in Mode II

Selecting one of the classes in the menu causes a Class panel to be displayed in the Code editor. A Class panel provides a convenient outline of the methods defined in that class. For example, Figure 2.27 illustrates a Class panel for the MyAlienclass.

Figure 2.27 A Class panel in Mode II

Shown in Figure 2.28, a Class panel displays the same three categories of methods (procedures, functions, and properties) that are usually displayed on a Methods panel. A Class panel also displays a fourth category of methods, known as constructors. A constructor is a special kind of method that contains instructions for creating a new instance of a class.

Figure 2.28 Method categories on a class panel

A Methods panel is normally displayed in the lower left corner of the Code editor window but, when a Class panel is the active Code Editor tab, the Methods panel is replaced with a Type Hierarchy panel, as illustrated in Figure 2.29. A Type Hierarchy panel displays a list of classes for which objects exist in the Alice world in the current Alice project.

Figure 2.29 Type Hierarchy panel

Notice, in the Type Hierarchy panel displayed in Figure 2.29 above, that the MyAlien class icon is indented beneath the MyBiped class icon. In a Type Hierarchy, indentation is used to give a visual cue that the MyAlien class extends the MyBiped class. One way to think about a type hierarchy is to use an analogy of a person’s family tree. In a human family, a person is a child of their parent and a grandchild of their parent’s parent. Similarly, an alien object is a child of the MyAlien class and is a grandchild of the MyBiped class. As such, an alien object has characteristic properties and behaviors that are defined in both the MyAlien and MyBiped classes.

Creating a new method tab in Mode II

To create a new method tab for a class in Mode II, click on an Add button in one of the method categories on the Class panel. For example, in Figure 2.30, we clicked on the Add procedure button in the procedures category. Clicking on the Add Procedure button for the alien causes a pop-up dialog box to appear where a name for a new procedural method can be entered. We entered “waveHello”, as shown in Figure 2.30.

Figure 2.30 Creating a new procedural method in Mode II

A name for a new procedural method should follow the same protocols as for naming an object: start with a lowercase alphabetic character and use camelCase to avoid spaces in the name. When the name has been entered, click OK. The dialog box will close, a new tile will be created in the procedures category on the Class panel, and a new tab will be created in the Code editor, as shown in Figure 2.31. The new tab is labeled with the name of the new procedural method.

Figure 2.31 New procedure tab for MyAlien class

Closing a tab in Mode II

Closing a tab in the code editor is the same as in Mode I. Click on the white X to the right of the name of the method on the tab, as shown previously in Figure 2.22.

Reopening a tab in Mode II

To reopen a tab in the Code editor, first activate the Class panel tab and select the class for which the method was previously declared. Click the expansion arrow for the category desired. For example, in Figure 2.32, we expanded the procedurescategory. Then click the Edit button for the desired method. In Figure 2.32, we clicked the Edit button for the waveHelloprocedure.

Figure 2.32 Re-opening a tab in the Code editor, Mode II

The tab for waveHelloimmediately opens in the Code editor and is the active tab available for creating new program code, as shown in Figure 2.33.

Figure 2.33 Tabs in Code editor, Mode II

Method versus Class-and-Method emphasis

Now that Modes I and II have each been demonstrated, we want to draw attention to a significant distinction in emphasis. To best understand this distinction, compare the Mode I Code editor tabs (see Figure 2.34 below) with the Mode II Code editor tabs (see Figure 2.33 above).

Figure 2.34 Open tabs in Code editor, Mode I

In Mode I (Figure 2.34), the tabs include myFirstMethod belonging to the MyScene classand waveHellobelonging to the MyAlienclass. In Mode I the tabs in the Code editor are used for defining methods. The Class to which a method belongs is identified but not emphasized. In other words, Mode I emphasizes creating methods for objects of Classes.

In Mode II, Code editor tabs are displayed onlyfor the class currently selected in the pull-down Class menu. In the example shown in Figure 2.33 above, the selected class is MyAlienand the tabs displayed are the MyAlien Class panel and the waveHelloprocedural method. In Mode II the tabs in the Code editor are not only used for defining methods but also used to obtain an overview of the selected class to which the methods belong. In other words, Mode II emphasizes both creating methods and the class to which the methods belong.

The impact of having two Modes is necessary to support students who are at different levels of learning: Mode I for novice programmers who are learning fundamental concepts of sequence, expressions, conditionals, repetition, and methods; and, Mode II for intermediate and advanced programmers who are learning more in-depth concepts of classes, objects, methods, and inheritance.