Introduction to Alice. Computer Science for High School (CS4HS)

Transcription

1 Introduction to Alice Computer Science for High School (CS4HS)

2 Contents 1 Introduction 2 2 Installation Basic Installation Advanced Installation Getting Started Making the alien see the robot Being chased away Adding Props and Camera Markers 9 5 Custom Procedures Creating the step procedure Creating the walk procedure Transitioning to Java Viewing the Code Using NetBeans Additional Activities 23 8 Resources Alice Java

3 1 Introduction Alice is a graphical programming environment that teaches programming and problem solving through the creation of 3D animations. It provides an intuitive interface to create scenes, position camera points of view and then animate the charaters and props. The movement is programmed via a drag and drop interface that teaches the basics of Object Oriented Programming (OOP). The programming done in Alice directly translates into Java code that can, optionally, be seen side-by-side with the Alice programming. This Java code can also be imported into popular programs, such as the NetBeans IDE, allowing for more advanced programs to be written and for a transition to other applications of Java. Alice can easily be scaled from very simple animations to more complex animations and even Game Maker-style computer games. Although not covered in this workbook, the event listeners and user input procedures allow the animation to be controlled by the user and conditional logic can be used to make 3D games. 2

4 2 Installation Depending on your intended usage of Alice, there are two ways you can install it. If you want to use Alice only, the Basic Installation below is sufficient, however if you wish to transition from Alice to Java code, a different installation procedure must be followed. If you start with the basic install and then choose to transition to Java programming, simply follow the second install procedure and the necessary components will be added on top of the existing installation. 2.1 Basic Installation If you intend to use only Alice, the following is all that is necessary: 1. If not already installed, download the Java Development Kit (JDK) from html by clicking on Download Java Platform (JDK) and run the installer. 2. Download Alice 3.1 from download_alice3.1 by clicking on the Download Alice for... relevant to your operating system (Warning: the file is ~1GB) and follow the installer prompts. 2.2 Advanced Installation If you want to transition from Alice to Java programming, the installation below is required. 1. If not already installed, download NetBeans and the Java Development Kit (JDK) from downloads/index.html by clicking on Download NetBeans with JDK 8 and run the installer (Warning: the file is ~300MB). 2. Download Alice 3.1 from download_alice3.1 by clicking on the Download Alice for... relevant to your operating system (Warning: the file is ~1GB) and follow the installer prompts. 3. Download the NetBeans Plugin v3.2 for Java 8 from the Alice download webpage above. 4. Open NetBeans, select Tools > Plugins and navigate to the Downloaded tab. 5. Select Add Plugins and select the Alice3ProjectWizard3.2.nbm file downloaded earlier. 6. Click Install and follow the installer prompts. If the installer warns of an unsigned plugin, click Continue. Close the Plugin window and quit NetBeans. 3

5 3 Getting Started To start, we ll create a basic project that demonstrates the features of Alice and explains the interface. It will show how to create a scene and make characters move. The story is that of an alien (the alien object) on the moon who is startled by the alien-like robot (the alienrobot object) and runs away from it. 1. Open Alice 3 and wait until the Select Project screen appears (on the first run, it may take a few moments). Templates provide a basic scene pre-made. They contain a ground (e.g. the moon surface) and an atmosphere colour (e.g. black). Both of these options can be changed later in the scene designer. 2. Select the MOON template and click OK. A new window will appear, like the one in Figure 1, showing the code view for your animation. Figure 1: The code view of Alice 3 4

6 3. Now, to start laying out your scene, click the view switcher button ( Setup Scene ) to switch to the scene view. Figure 2: The scene view of Alice 3 4. In the library palette, select Biped classes and click on the new Alien() icon, then press OK on the dialog that will open. This will place an alien character at the center of your scene with the name alien. 5. Now click on the arrow next to the all classes button to return to the opening menu. Figure 3: Click to return to the full library palette 6. From the library, choose Quadraped classes and then click on new Alien- Robot(). In the dialog that appears, select OK to use the default name ( alienrobot ) and configuration. 5

7 7. With the alienrobot character selected, change its x-position to 5.0 and then press ENTER (if the text goes gray, the change has not been applied - reselect the field and press ENTER). This will move the character to the left of the camera. Figure 4: The properties of a character; note the change in the positioning Perhaps counterintuitively, the positioning is from the character s perspective, rather than the camera s position. Therefore, a positive shift in the x-axis will move an object left and a negative shift will move it right. This also applies when talking about turning the character - the left and right are relative to the character, not the camera. 8. Switch back to the code view by selecting the view switching button ( Edit Code ). Figure 5: The Object Selector drop down, with this.camera selected 9. From the Object Selector drop down, select this.camera and drag a moveandorienttoagoodvantagepointof procedure to the code area inside the do in this order block. In the menu that appears, select the this.alien object to target the camera on. 6

8 Figure 6: The moveandorienttoagoodvantagepointof procedure 3.1 Making the alien see the robot 10. From the Object Selector drop down, select this.alien and drag a turnto- Face procedure to the code area underneath the moveandorienttoa- GoodVantagePointOf. In the menu that appears, select the this.alienrobot object to turn towards. 11. Add a think procedure for this.alien to the code area and select Custom TextString in the pop-up menu. In the textbox, enter Oh no... and press OK. Click on add detail and set the duration to 0.25 seconds. 12. Add a delay procedure for this.alien to the code area and set the duration to 0.25 seconds. 13. Add a turn procedure for this.alien to the code area and set the direction to LEFT and amount to 0.5 rotations. Figure 7: The code so far At this stage, the code should look like that in Figure 7. Remember to save your work regularly (File > Save). You can also use the Run button to see what the animation is doing already. 3.2 Being chased away 14. From the statement library on the bottom of the screen, drag a do together block into the code area underneath the turn procedure. 7

9 Up to this point, all of the procedures have been inside a do in order block (as the block is there by default in new projects). Inside this block, the procedures run sequentially. The do together block will run each statement in parallel with the next. This means the actions will happen at the same time, however it will wait until the last statement is finished before continuing. If two procedures conflict with each other (e.g. two move procedures on the same object), then unexpected behaviour may occur, including only one procedure running or neither running at all. 15. With the this.alien object selected, drag a move procedure into the do together block. Set the direction to forward and the amount to Custom DecimalNumber. In the pop-up window, enter 7.0 and press OK 16. In the object selector dropdown, change to this.alienrobot and drag a turntoface procedure into the do together and set the target to be this.alien. Set the duration to 0.25 by clicking the add detail button and selecting duration. 17. With the this.alienrobot object selected, drag a movetoward procedure into the do together block and set the target to be this.alien. Set the duration to Custom DecimalNumber and in the pop-up window, enter 11.0 and press OK. Figure 8: The code with the robot chasing the alien 18. Now save the project and press Run to see the animation so far. 8

10 4 Adding Props and Camera Markers To make the scene more realistic, a building will be added as a background prop that the charaters chase around.to make the robot chasing the alien around the right side of the building visible, two different camera angles will be required. 1. Click on the view switcher button ( Setup Scene ). 2. In the library palette, select Prop classes. This category contains a selection of inanimate objects that can be used as scenery. They also have the same standard procedures as the character classes - turn, move, and roll are all available. 3. Select the new MarsOutpostBunker() and drag it into the scene, placing it behind the alien and the alienrobot objects. In the dialog window that pops up, click OK to select the default object name of marsoutpost- Bunker. Figure 9: Controlling the camera - (a) repositions the camera, (b) oreintates (pans) the camera, (c) rotates the camera on the X-axis 4. Use the three sets of buttons to adjust the view of the camera so that the alienrobot and alien objects are centered in the view and the top of the bunker is visible. Figure 10: An example camera position for the front perspective 5. Once all three objects are in the frame, go to the properties panel on the right and expand the Camera Markers section. 9

11 6. Click Add Camera Marker.... In the window that pops up, change the name to bunkerfront and click OK. Acameramarkersavesthecurrentpositionandorientationofthe camera so that it can be accessed programmatically from within the code. They can also be utilised from within the scene editor by selecting the marker in the Camera Markers section of the properties panel and pressing the button below. This will reposition the camera to the saved position. After setting a camera marker, when moving around the scene, a floating camera icon will be visible indicating the saved position of the camera. 7. Use the camera control buttons to reposition the camera and orientate it towards the right side of the bunker, as shown in Figure 11. Dragging the cursor around the scene will also reposition the camera. Figure 11: An example camera position for the right-side perspective 8. When the camera is positioned and oriented, click the Add Camera Marker... button in the properties panel. In the window, change the name to bunkerright and click OK. 10

12 9. Switch back to the code editor. 10. Right-click the moveandorienttoagoodvantagepointof block in the code area and select Delete. 11. In the object selector dropdown, select this.camera. 12. Drag a moveandorientto procedure to the top of the code area above the turntoface proecdure and select this.bunkerfront as the target. This will make the scene start with the camera focussing on the front of the bunker, where the characters are initially. 13. From the statements palette on the bottom of the screen, drag a do together block to the end of the code (below the previous do together block). 14. Drag a moveandorientto procedure inside the new do together block and select this.bunkerright as the target. Figure 12: The code with two different camera angles utilised 15. Press Run to preview the scene and see the camera transitions. 16. In the object selector dropdown, change to this.alien. 17. Add a turn block to the do together block at the bottom of the code area and set the direction to LEFT and amount to Click on add detail and set the duration to 0.25 seconds. 18. From the statements palette on the bottom of the screen, drag another do together block to the end of the code (below the previous do together block). 11

13 19. With this.alien selected, add a move block to the new do together block at the bottom of the code area and set the direction to FORWARD and amount to 1.0. Click on add detail and set the duration to 0.5 seconds. 20. In the object selector dropdown, select this.alienrobot and drag a turn block into the do together block. Set the direction to LEFT and amount to 0.25 rotations. Click add detail and set the duration to 0.5 seconds. 21. With this.alienrobot selected, drag a move block into the do together block. Set the direction to RIGHT and amount to 1. Click add detail and set the duration to 0.5 seconds. This block, combined with the turn block above, will make the robot arc towards the alien as it turns the corner. 22. From the statements palette on the bottom of the screen, drag another do together block to the end of the code (below the three previous do together blocks). 23. With this.alien selected, add a move block to the new do together block at the bottom of the code area and set the direction to FORWARD and amount to Custom DecimalNumber. In the popup input, enter Click on add detail and set the duration to 2 seconds. 24. In the object selector dropdown, select this.alienrobot and drag a move block into the do together block. Set the direction to FORWARD and amount to Custom DecimalNumber. In the popup input, enter Click on add detail and set the duration to 2 seconds. 25. Now press Run to preview the scene and see the alien and robot chase along the right side of the building. 12

14 Figure 13: The code to animate the chase around two sides of the building 13

15 5 Custom Procedures To make the scene look more realistic, the movement of the alien needs to be refined to make it look like it is walking, not gliding, along the surface. To do this, two new procedures are needed: one to animate the character stepping, and one to repeat this procedure for as many steps as are needed. 5.1 Creating the step procedure 1. In the code editor, click the hexagonal class selector button in the top left. In the drop down that appears, select Biped > Add Biped Procedure and enter the name as step. Figure 14: This button opens a menu of all classes, procedures and functions 2. Click the Add Parameter... at the top and in the pop-up window, set the value type to DecimalNumber and the name to quarterduration, then press OK. This will be the duration for each statement and will eventually be equal to one quarter of the total duration of the procedure. 3. From the statements library, drag a do together block to the code area. Figure 15: Click the left-side button on the block to change the calling object 4. From the procedures palette, add a turn block into the do together block. Set the direction to RIGHT and the amount to Custom Decimal- Number. In the pop-up, enter Click on the this button on the left side of the block and select this > this.getrightshoulder from the dropdown menu that appears. This will change which object calls the turn method. Click add detail and set the duration to the quarterduration parameter (the bottom option in the dropdown). Each of the characters is made of a number of a joints that are actually separate objects that form a larger object (the character itself). 14

16 These objects can be accessed and controlled through a number of functions such as this.gethead. Although these methods are visible from the functions tab of the methods palette, the easiest way to utilise them in Alice is to change the object that a method (such as turn ) is to be called on (the calling object ) after the block has been placed in the code area. 5. Add another turn block to the do together block and set the direction to RIGHT and the amount to Change the object calling the method to this.getleftshoulder. Click add detail and set the duration to the quarterduration parameter. 6. Add another turn block to the do together block and set the direction to BACKWARD and the amount to Custom DecimalNumber. In the pop-up window, set the value to 0.08 and then change the object calling the method to this.getrighthip. Click add detail and set the duration to the quarterduration parameter. 7. Add another turn block to the do together block and set the direction to FORWARD and the amount to Custom DecimalNumber. In the pop-up window, set the value to 0.08 and then change the object calling the method to this.getlefthip. Click add detail and set the duration to the quarterduration parameter. 8. Add another turn block to the do together block and set the direction to FORWARD and the amount to Custom DecimalNumber. In the pop-up window, set the value to 0.08 and then change the object calling the method to this.getrightknee. Click add detail and set the duration to the quarterduration parameter. 9. Add a move block to the do together block and set the direction to FORWARD and the amount to 0.5 (keep the calling object as this ). Click add detail and set the duration to the quarterduration parameter. 10. From the statements library, add another do together block after the existing one in the code area. 11. Inside the new do together block, add a move block with the direction set to FORWARD and the amount to 0.5. Click add detail and set the duration to the quarterduration paramter. 12. From the procedures palette, add a straightenoutjoints block to the second do together block. Click add detail and set the duration to quarterduration. 13. From the statements library, add another do together block after the existing ones in the code area. 15

17 Figure 16: The code to animate the right leg when taking a step 14. Add a turn block to the bottom do together block and set the direction to LEFT and the amount to Change the object calling the method to this.getleftshoulder. Click add detail and set the duration to the quarterduration parameter. 15. Add another turn block to the bottom do together block and set the direction to LEFT and the amount to Change the object calling the method to this.getleftshoulder. Click add detail and set the duration to the quarterduration parameter. 16. Add another turn block to the bottom do together block and set the direction to FORWARD and the amount to Custom DecimalNumber. In the pop-up window, set the value to 0.08 and then change the object calling the method to this.getrighthip. Click add detail and set the duration to the quarterduration parameter. 17. Add another turn block to the bottom do together block and set the direction to BACKWARD and the amount to Custom DecimalNumber. In the pop-up window, set the value to 0.08 and then change the object calling the method to this.getlefthip. Click add detail and set the duration to the quarterduration parameter. 18. Add another turn block to the bottom do together block and set the direction to FORWARD and the amount to Custom DecimalNumber. In the pop-up window, set the value to 0.08 and then change the object calling the method to this.getleftknee. Click add detail and set the duration to the quarterduration parameter. 16

18 19. Add a move block to the bottom do together block and set the direction to FORWARD and the amount to 0.5 (keep the calling object as this ). Click add detail and set the duration to the quarterduration parameter. 20. Right-click on the second do together block (containing only 2 blocks) and select Copy to Clipboard. (Note: The normal keyboard commands for copying and pasting are not available.) 21. Click and drag from the clipboard in the top right corner to paste the block at the bottom of the existing code. The final code for the step procedure should look like Figure 17. Figure 17: The complete code for the step procedure 17

19 5.2 Creating the walk procedure 1. Click the hexagonal class selector button and select Biped > Add Biped Procedure... and name the procedure walk. 2. With the walk tab selected, click Add Parameter... and in the pop-up window, set the value type to WholeNumber and the name to steps, then press OK. This will be the number of steps to take. 3. Click Add Parameter... again and in the pop-up window, set the value type to DecimalNumber and the name to stepduration, then press OK. This will be the duration per step. 4. From the statements library, drag a count block into the code area and set the number to count up to steps. 5. From the procedures palette, place a step statement inside the count block. Set the duration to the stepduration parameter (the bottom element of the dropdown menu). Figure 18: Divide the duration by four to get the stepduration 6. Click on the duration parameter of the step statement and select Math > stepduration /??? > Custom DecimalNumber. In the pop-up window, enter 4.0. This is required because the duration used in the step block is one-fourth of the total actual duration of the step block due to the four do together blocks in the step procedure. Figure 19: The complete code for the walk procedure 7. In the procedure tabs, select myfirstmethod. 8. Right-click on the this.alien move block inside the first do together block and delete it. 18

20 9. With this.alien selected in the object selector dropdown, drag a walk block from the procedure palette into the first do together block where the move block was. Set the number of steps to 3 and the duration to Custom DecimalNumber. In the pop-up window, enter Right-click on the this.alien move block inside the last do together block and delete it. 11. With this.alien selected in the object selector dropdown, drag a walk block from the procedure palette into the last do together block where the move block was. Set the number of steps to 11 and the duration to Custom DecimalNumber. In the pop-up window, enter 0.1. Figure 20: The final code for the myfirstmethod procedure 12. Run the scene and the alien should now be running away from the robot around the building. 19

21 6 Transitioning to Java Alice is deeply integrated with the Java ecosystem - not only is Alice written in Java, it also utilises it to generate the animations. When the animation is run or exported, the Alice code is translated directly into Java code and then compiled. As a result, it is easy to view the generated code and then import it into a conventional Java Integrated Development Environment (IDE), such as the NetBeans IDE. Note: the following instructions require NetBeans and the full JDK to be installed, as per the Advanced Installation instructions. 6.1 Viewing the Code Figure 21: The side-by-side view of the Alice and Java code With the code editing view open, go to Window > Preferences in the top menu bar and enable Java Code on the Side. This will provide a side-by-side view of the Alice code and Java code. A good example is the myfirstmethod procedure which demonstrates the similarities between the two languages. For amorecomprehensiveexampleoftheoutputtedjavacode,clickonthe Scene tab at the top of the window. This will open the complete class, including the auto-generated code, and shows how the entire scene is setup. Unfortunately it is not possible to edit the Java code from within Alice, however changes in the Alice code are reflected in the Java code in real time. Although the Alice code is very similar to the Java code, there are a few syntactic differences. By default, the Alice environment hides the brackets, 20

22 semicolons and commas to make the code easier to read. There is a preference under Window > Preferences > Programming Language which re-enables these characters by switching to Java. This makes the Alice code look nearly identical to the Java code, while still providing a drag-and-drop interface to program in. 6.2 Using NetBeans A project is imported from Alice into NetBeans by copying it. Changes to the Java code are not reflected in Alice and any changes in Alice are not reflected in the Java code either. There is no way to import a Java program back into Alice either. As such, it is recommended that the scene is designed completely and any basic movements are animated in Alice before importing it into NetBeans. 1. Save the project and exit Alice. 2. Open the NetBeans IDE (it may take a few moments) and select File > New Project from the main menu bar. Figure 22: Project Create a new project - select Java Project from Existing Alice 3. Select Java as the category and Java Project from Existing Alice Project as the project type, then click Next >. 4. Next to Alice Project Location, click Browse and find the Alice Project file (e.g. Example1.a3p). The Java Project Name and other fields should automatically complete, then press Finish. 5. The NetBeans code editor should appear, with a list of the files on the left-hand side. 6. From the main menu bar, go to Window > IDE Tools > Palette. This will open the Alice palette on the right side of the window. This palette contains the control statements, and event listeners, that were available in Alice. These act as templates and can be dragged into the code and modified. 21

23 Figure 23: The NetBeans IDE with the run button circled 7. Press the Run button at the top of the window and after a few moments, a new window should appear showing the animation. The animation should be identical to the earlier animation in Alice. 8. Open the Scene.java file by double-clicking on it and scroll to the my- FIrstMethod procedure. Listing 1: The beginning of the myfirstmethod() procedure in Scene.java public void myfirstmethod () { this.camera.moveandorientto(this.bunkerfront); this.alien.turntoface(this.alienrobot); Change the this.camera.moveandorientto(this.bunkerfront); to this.camera.moveandorientto(this.bunkerfront, MoveAndOrientTo.duration(0.0)); This will make the scene start immediately at bunkerfront, instead of having the camera swivel around slightly. 10. Save the file (File > Save) ress the Run button to see the change. Try changing other paramters and adding or changing the procedures called, or completing some of the activities below. A quick way to see the correct syntax and method parameters is to make a change in Alice with the Java Code on the Side preference enabled, then copy the change to NetBeans. 22

24 7 Additional Activities All of the following can be done either in Alice or in NetBeans. Change the scene to occur on Mars, instead of the moon. Make the alien and robot run towards the bunkerright camera instead of around the right-side of the building. If they run past the camera, it will provide a cleaner ending to animation. Alternatively, make the characters run around the whole building continuously (hint: use a while block). At the start of the scene, make the alien slowly back away when it sees the robot and then make it run away when the robot starts moving. Research the event listeners provided in Alice and make the scene only start when the user presses a key (hint: see the Resources page). Using the event listeners, make the speed of the alien increase depending on how many times the f key is pressed. Create a new scene set in a coffee shop that animates a typical day. Using the event listeners and user input commands, it is possible to use Alice to create small programs and simple games, as well as animations. By designing it in Alice and then moving to Java, the scene design, animation and rendering are handled while making it easier to implement maths, variables and more advanced logic via the Java code. 23

25 8 Resources 8.1 Alice A comprehensive how-to guide by the creaters of Alice (includes an Alice to Java guide and a guide on event listeners) Lectures, notes and resources from Carnegie Mellon for using Alice Video tutorials and resources from Duke University that explain each part of Alice very well 8.2 Java A very comprehensive set of tutorials from IBM on Java AStanfordcourse(availableoniTunes)thatisthebasisformostJavacourses html The official Oracle introduction to Java (and official documentation) Apopularplatformforprogramming LEGOMindstorms robotsinjava Acknowledgements The University of Queensland would like to thank Tristan Roberts for preparing this workbook, and Margot Phillips in New Zeeland who introduced us to Programming Challenge for Girls (PC4G) which the tutorial content is based on. 24